diff options
Diffstat (limited to 'apps/website/src/pages/index.astro')
| -rw-r--r-- | apps/website/src/pages/index.astro | 160 |
1 files changed, 97 insertions, 63 deletions
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro index 6466d03..4df1c22 100644 --- a/apps/website/src/pages/index.astro +++ b/apps/website/src/pages/index.astro @@ -11,78 +11,112 @@ import { Code } from 'astro:components'; --- - <Layout> - <Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]"> - <Logo size={56} logo="oneconfig.minimal" /> - <Header align="center" size="xxl" class="max-w-[600px]"> - Meet <b>OneConfig</b>, the library designed for <b>everyone</b>. - </Header> - <div class="flex flex-row justify-center items-center gap-2"> - <Button iconLeft="download" text="Download" /> - <Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" /> +<Layout> + <Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]"> + <Logo size={56} logo="oneconfig.minimal" /> + <Header align="center" size="xxl" class="max-w-[600px]"> + Meet <b>OneConfig</b>, the library designed for <b>everyone</b>. + </Header> + <div class="flex flex-row justify-center items-center gap-2"> + <Button iconLeft="download" text="Download" /> + <Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" /> + </div> + </Section> + + <div class="flex flex-col gap-40"> + <Section tabindex="0"> + <div slot="left"> + <Header size="lg" class="text-navy-peony">Forge is complicated</Header> + <Paragraph size="sm" class="text-gray-400 max-w-[500px]">Modding Minecraft has always been difficult, particularly with their configuration. Remembering all of the keybinds, commands; it just isn't intuitive.</Paragraph> + </div> + <div slot="right" class="w-3/4 md:w-auto"> + <!-- TODO: make proper file names and alt text --> + <img src="/media/index/index1.svg" alt="stuff" /> </div> </Section> - <div class="flex flex-col gap-40"> - <Section tabindex="0"> - <div slot="left"> - <Header size="lg" class="text-navy-peony">Forge is complicated</Header> - <Paragraph size="sm" class="text-gray-400 max-w-[500px]">Modding Minecraft has always been difficult, particularly with their configuration. Remembering all of the keybinds, commands; it just isn't intuitive.</Paragraph> - </div> - <div slot="right" class="w-3/4 md:w-auto"> - <!-- TODO: make proper file names and alt text --> - <img src="/media/index/index1.svg" alt="stuff" /> - </div> - </Section> - - <Section tabindex="0" colReverse={false}> - <div slot="left" class="w-1/2 md:w-auto"> - <img src="/media/index/index2.svg" alt="stuff" /> - </div> + <Section tabindex="0" colReverse={false}> + <div slot="left" class="w-1/2 md:w-auto"> + <img src="/media/index/index2.svg" alt="stuff" /> + </div> - <div slot="right"> - <Header size="lg" class="text-navy-peony">Clients are locked-down</Header> - <Paragraph size="sm" class="text-gray-400 max-w-[500px]">While they improve usability, they're slow to adopt new mods absent from the community and force unwanted features onto users to profit off of them.</Paragraph> - </div> - </Section> + <div slot="right"> + <Header size="lg" class="text-navy-peony">Clients are locked-down</Header> + <Paragraph size="sm" class="text-gray-400 max-w-[500px]">While they improve usability, they're slow to adopt new mods absent from the community and force unwanted features onto users to profit off of them.</Paragraph> + </div> + </Section> - <Section tabindex="0"> - <div slot="left"> - <Header size="lg" class="text-navy-peony">Best of both worlds</Header> - <Paragraph size="sm" class="text-gray-400 max-w-[500px]">OneConfig brings the simplicity of a client to the everyday user, gives advanced users and developers complete control over everything, while remaining free and open-source.</Paragraph> - </div> + <Section tabindex="0"> + <div slot="left"> + <Header size="lg" class="text-navy-peony">Best of both worlds</Header> + <Paragraph size="sm" class="text-gray-400 max-w-[500px]">OneConfig brings the simplicity of a client to the everyday user, gives advanced users and developers complete control over everything, while remaining free and open-source.</Paragraph> + </div> - <div slot="right" class="w-3/4 md:w-auto"> - <img src="/media/index/index3.svg" alt="stuff" /> - </div> - </Section> + <div slot="right" class="w-3/4 md:w-auto"> + <img src="/media/index/index3.svg" alt="stuff" /> + </div> + </Section> - <Section maxWidth="1000px" wrapperClass="bg-blue-100" wFull={false} class="md:py-20 gap-4 pr-2"> - <div slot="left" class='pr-2'> - <Code code={` - public class MyConfig { - @Switch(name = "Sub Switch", type = OptionType.SWITCH) - public static boolean subSwitch = false; + <Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="md:py-20 gap-4 pr-2"> + <div slot="left" class='pr-2'> + <Code code={`public class MyConfig { + @Switch(name = "Sub Switch", type = OptionType.SWITCH) + public static boolean subSwitch = false; - public MyConfig() { - super(new Mod("My Mod", ModType.UTIL_QOL), "config.json"); - addDependency("subSwitch", () -> { - // Do stuff here - }); - } + public MyConfig() { + super(new Mod("My Mod", ModType.UTIL_QOL), "config.json"); + addDependency("subSwitch", () -> { + // Do stuff here + }); } - `} lang={'java'}/> +}`} lang={'java'}/> + </div> + + <div slot="right" class="flex flex-col gap-2"> + <Header size="xl" class="text-blue-500">Written for developers</Header> + <Paragraph class="text-blue-400 max-w-[500px]"> + With Polyfrost's simple APIs, it's easy to integrate your mods into Polyfrost something + </Paragraph> + <div class="flex"> + <Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" /> </div> + </div> + </Section> - <div slot="right" class="flex flex-col gap-2"> - <Header size="xl" class="text-blue-500">Written for developers</Header> - <Paragraph class="text-blue-400 max-w-[500px]"> - With Polyfrost's simple APIs, it's easy to integrate your mods into Polyfrost something - </Paragraph> - <div class="flex"> - <Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" /> - </div> + <Section maxWidth="1120px" wrapperClass="bg-blue-100" wFull={false} class="md:py-20 gap-4 pr-2"> + <div slot="left" class="flex flex-col gap-2"> + <Header size="xl" class="text-blue-500">Designed for users</Header> + <Paragraph class="text-blue-400 max-w-[500px]"> + Lorem ipsum dolor sit amet consectetur. Viverra a pulvinar eu pharetra. Porta feugiat purus blandit mauris ipsum eu. + </Paragraph> + <div class="flex"> + <Button iconLeft="download" style="secondary" text="Download" /> </div> - </Section> - </div> - </Layout> + </div> + <div slot="right"> + <!-- TODO: figure out non-arbitrary values --> + <img src="/media/index/index4.png" class="h-[285px] rounded-2xl" /> + </div> + </Section> + + <Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]"> + <img src="/media/index/index5.png" class="h-[581px] rounded-2xl" /> + <Header size="xl" align="center" class="w-96">A unified HUD editor</Header> + <Paragraph class="w-96 text-center text-gray-400"> + Lorem ipsum dolor sit amet consectetur. Viverra a pulvinar eu pharetra. Porta feugiat purus blandit mauris ipsum eu. + </Paragraph> + </Section> + + <Section tabindex="0" wrapperClass="bg-blue-100" class="md:py-20 gap-4 pr-2"> + <div slot="left" class="flex flex-col gap-2"> + <Header size="xl" class="text-blue-500">With many fabulous mods</Header> + <Paragraph class="text-blue-400 max-w-[500px]"> + Discover a wide range of mods integrated with OneConfig to enhance your experience. + </Paragraph> + <div class="flex"> + <Button iconLeft="link-external" text="Discover mods" /> + </div> + </div> + </Section> + </div> +</Layout> |