diff options
Diffstat (limited to 'apps/website/src/pages/projects/oneconfig.astro')
| -rw-r--r-- | apps/website/src/pages/projects/oneconfig.astro | 48 |
1 files changed, 26 insertions, 22 deletions
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro index 11708be..47d415c 100644 --- a/apps/website/src/pages/projects/oneconfig.astro +++ b/apps/website/src/pages/projects/oneconfig.astro @@ -15,13 +15,15 @@ import { Code } from 'astro:components'; <Layout> <Section class="flex-col justify-center items-center h-screen 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 href="/projects/oneconfig/download" iconLeft="download" text="Download"/> - <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/> + <div class="flex flex-col justify-center items-center gap-y-4"> + <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 href="/projects/oneconfig/download" iconLeft="download" text="Download"/> + <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/> + </div> </div> </Section> @@ -30,13 +32,13 @@ import { Code } from 'astro:components'; <Header size="xl" class="text-navy-peony">Forge is complicated</Header> <Paragraph size="md" 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 max-w-80 md:max-w-none md:w-auto"> + <div data-scroll data-scroll-speed="10" slot="right" class="w-3/4 max-w-80 md:max-w-none md:w-auto"> <img class="w-full md:w-[20rem]" src="/media/oneconfig/page_media_1.svg" alt="stuff"/> </div> </Section> <Section tabindex="0" colReverse={false} hFull> - <div slot="left" class="w-1/2 max-w-80 md:max-w-none md:w-auto flex justify-center"> + <div data-scroll data-scroll-speed="10" slot="left" class="w-1/2 max-w-80 md:max-w-none md:w-auto flex justify-center"> <img class="w-full md:w-[20rem]" src="/media/oneconfig/page_media_2.svg" alt="stuff"/> </div> @@ -47,19 +49,19 @@ import { Code } from 'astro:components'; </Section> <Section tabindex="0" hFull> - <div slot="left"> + <div data-scroll data-scroll-sticky slot="left"> <Header size="xl" class="text-navy-peony">Best of both worlds</Header> <Paragraph size="md" 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 max-w-80 md:max-w-none md:w-auto flex justify-center"> + <div data-scroll data-scroll-speed="10" slot="right" class="w-3/4 max-w-80 md:max-w-none md:w-auto flex justify-center"> <img class="w-full md:w-[20rem] lg:w-[30rem]" src="/media/oneconfig/page_media_3.svg" alt="stuff"/> </div> </Section> - <div class="section bg-blue-75 flex flex-col justify-center items-center min-h-screen"> - <Section colReverse={false} maxWidth="1120px" wFull={false} class="pt-10 md:py-20 max-sm:h-screen"> - <div slot="left"> + <div data-scroll-section class="section bg-blue-75 flex flex-col justify-center items-center min-h-screen"> + <Section scrollSection={false} colReverse={false} maxWidth="1120px" wFull={false} class="pt-10 md:py-20 max-sm:h-screen"> + <div data-scroll data-scroll-speed="2" slot="left"> <!-- TODO: FIX Codeblock overflowing on mobile --> <div class="max-sm:hidden"> <Code @@ -94,7 +96,7 @@ import { Code } from 'astro:components'; </div> </Section> - <Section maxWidth="1120px" wFull={false} class="py-10 md:py-20 gap-4 max-sm:h-screen"> + <Section scrollSection={false} maxWidth="1120px" wFull={false} class="py-10 md:py-20 gap-4 max-sm:h-screen"> <div slot="left" class="flex flex-col gap-2 text-left items-start"> <Header size="xl" class="text-blue-500">Designed for users</Header> <Paragraph class="text-blue-400 max-w-[500px]"> @@ -104,18 +106,20 @@ import { Code } from 'astro:components'; <Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/> </div> </div> - <div slot="right"> + <div data-scroll data-scroll-speed="3" slot="right"> <img src="/media/oneconfig/page_media_4.png" class="max-h-[285px] rounded-2xl"/> </div> </Section> </div> - <Section class="flex-col justify-center items-center h-screen md:min-h-[600px]" hFull> - <img src="/media/oneconfig/page_media_5.png" class="max-h-[285px] md:max-h-96 lg:max-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"> - Thanks to OneConfig's HUD API, you can customize any OneConfig-powered HUD to your liking, without having to worry about the hassle of finding the right command or keybind. - </Paragraph> + <Section id="unified_hud_editor" class="flex-col justify-center items-center h-screen md:min-h-[600px]" hFull> + <img data-scroll data-scroll-sticky data-scroll-target="#unified_hud_editor" data-scroll-direction="horizontal" src="/media/oneconfig/page_media_5.png" class="max-h-[285px] md:max-h-96 lg:max-h-[581px] rounded-2xl"/> + <div data-scroll data-scroll-speed="2" class="flex flex-col justify-center items-center gap-y-4"> + <Header size="xl" align="center" class="w-96">A unified HUD editor</Header> + <Paragraph class="w-96 text-center text-gray-400"> + Thanks to OneConfig's HUD API, you can customize any OneConfig-powered HUD to your liking, without having to worry about the hassle of finding the right command or keybind. + </Paragraph> + </div> </Section> <Section wrapperClass="bg-blue-100 -mb-40" wFull maxWidth="none" class="py-10 md:py-20 gap-4 !px-0 flex flex-col items-center justify-center" hFull> |