diff options
Diffstat (limited to 'apps/website/src/pages/projects/oneconfig/index.astro')
| -rw-r--r-- | apps/website/src/pages/projects/oneconfig/index.astro | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/apps/website/src/pages/projects/oneconfig/index.astro b/apps/website/src/pages/projects/oneconfig/index.astro new file mode 100644 index 0000000..fcb1c7b --- /dev/null +++ b/apps/website/src/pages/projects/oneconfig/index.astro @@ -0,0 +1,171 @@ +--- +import Button from '@components/base/Button.astro'; +import Card from '@components/base/Card.astro'; +import Header from '@components/base/Header.astro'; +import Paragraph from '@components/base/Paragraph.astro'; +import Section from '@components/base/Section.astro'; +import Slider from '@components/base/Slider.astro'; +import Logo from '@components/logos/Logo.astro'; + +import Layout from '@layouts/Layout.astro'; + +import { Code } from 'astro:components'; + +--- + +<Layout> + <Section class="flex-col justify-center items-center h-screen md:min-h-[600px]"> + <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> + + <Section tabindex="0"> + <div slot="left"> + <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"> + <img class="w-full md:w-[20rem]" src="/media/oneconfig/page_media_1.svg" alt="stuff"/> + </div> + </Section> + + <Section tabindex="0" colReverse={false}> + <div slot="left" class="flex justify-center"> + <img class="max-sm:w-full w-64" src="/media/oneconfig/page_media_2.svg" alt="stuff"/> + </div> + + <div slot="right"> + <Header size="xl" class="text-navy-peony">Clients are locked-down</Header> + <Paragraph size="md" 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="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"> + <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"> + <!-- TODO: FIX Codeblock overflowing on mobile --> + <div class="max-sm:hidden"> + <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 + }); + } +}` +} + lang="java"/> + </div> + </div> + + <div slot="right" class="flex flex-col gap-2 text-left items-start"> + <Header size="xl" class="text-blue-500">Written for developers</Header> + <Paragraph class="text-blue-400 max-w-[500px]"> + With our simple APIs and documentation, it's easier than ever to integrate your mods with OneConfig. + </Paragraph> + <div class="flex"> + <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/> + </div> + </div> + </Section> + + <Section 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]"> + We take pride in having the cleanest and most intuitive UI of any mod, config library, or client out there. + </Paragraph> + <div class="flex"> + <Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/> + </div> + </div> + <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 id="unified_hud_editor" class="flex-col justify-center items-center h-screen md:min-h-[600px]"> + <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"> + <div class="max-w-[1024px] w-full flex flex-col gap-2 text-left items-start px-5"> + <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 items-start flex-col md:flex-row max-sm:gap-y-1 gap-x-1"> + <!-- TODO: HREF --> + <Button iconLeft="link-external" href="/mods" style="secondary" text="Discover mods"/> + </div> + </div> + <div class="flex flex-col justify-center items-center bg-blue-100 pb-10 max-w-full overflow-x-hidden"> + <div class="flex flex-col justify-between items-center overflow-x-hidden h-[290px] max-w-[1920px]"> + <Slider wrapperClass="-mb-40 mb-2 bg-blue-100" childrenNum={8}> + <Card text="Chatting" icon="chatting"/> + <Card text="PolySprint" icon="polysprint"/> + <Card text="VanillaHUD" icon="vanillahud"/> + <Card text="OverflowAnimations" icon="overflowanimations"/> + <Card text="CrashPatch" icon="crashpatch"/> + <Card text="PolyTime" icon="polytime"/> + <Card text="PolyWeather" icon="polyweather"/> + <Card text="Keystrokes" icon="keystrokes"/> + </Slider> + <Slider dir="right" wrapperClass="bg-blue-100" childrenNum={8}> + <Card text="Chatting" icon="chatting"/> + <Card text="PolySprint" icon="polysprint"/> + <Card text="VanillaHUD" icon="vanillahud"/> + <Card text="OverflowAnimations" icon="overflowanimations"/> + <Card text="CrashPatch" icon="crashpatch"/> + <Card text="PolyTime" icon="polytime"/> + <Card text="PolyWeather" icon="polyweather"/> + <Card text="Keystrokes" icon="keystrokes"/> + </Slider> + </div> + </div> + </Section> + + <Section class="flex-col justify-center items-center mb-20" hFull> + <div class="flex relative md:-left-12"> + <img src="/media/oneconfig/page_media_4.png" class="rounded-2xl"/> + <div class="border border-gray-200 rounded-3xl md:rounded-4xl shadow-sm bg-gray-50 flex flex-col justify-center items-center md:items-start p-4 md:p-8 absolute -bottom-12 translate-x-1/2 right-1/2 md:translate-x-0 md:-right-12 gap-y-2 md:gap-y-8"> + <Logo logo="oneconfig.logo_text" class="w-48 h-12 md:min-w-72 md:h-auto"></Logo> + <Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit"/> + </div> + </div> + </Section> +</Layout> |