diff options
Diffstat (limited to 'apps/website/src')
| -rw-r--r-- | apps/website/src/components/base/Footer.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/components/base/Section.astro | 4 | ||||
| -rw-r--r-- | apps/website/src/env.d.ts | 1 | ||||
| -rw-r--r-- | apps/website/src/layouts/Layout.astro | 52 | ||||
| -rw-r--r-- | apps/website/src/pages/mods.astro | 213 | ||||
| -rw-r--r-- | apps/website/src/pages/projects/oneconfig.astro | 246 | ||||
| -rw-r--r-- | apps/website/src/styles/global.css | 10 |
7 files changed, 267 insertions, 261 deletions
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro index d41ef29..88e6d7b 100644 --- a/apps/website/src/components/base/Footer.astro +++ b/apps/website/src/components/base/Footer.astro @@ -5,7 +5,7 @@ import configConst from '@config'; import Link from './Link.astro'; --- -<footer class="flex justify-center items-center bg-blue-100 mt-4 pt-20 pb-8 px-20"> +<footer class="section flex justify-center items-center bg-blue-100 mt-4 pt-20 pb-8 px-20"> <div class="max-w-[1024px] w-full flex flex-col gap-y-24"> <div class="flex flex-col gap-y-20 justify-center items-start md:flex-row md:items-start md:justify-between"> <div class="flex-1 flex flex-col gap-y-3 text-blue-gray"> diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro index d3edfcf..45750f6 100644 --- a/apps/website/src/components/base/Section.astro +++ b/apps/website/src/components/base/Section.astro @@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<'section'> { wrapperClass?: string wFull?: boolean hFull?: boolean + sectionClass?: boolean } const { @@ -15,6 +16,7 @@ const { wrapperClass = '', wFull = true, hFull = false, + sectionClass = true, ...props } = Astro.props; @@ -26,7 +28,7 @@ const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-c const className = `max-w-[${maxWidth}] ${hFull ? 'min-h-screen' : 'h-auto'} ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 md:p-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`; --- -<section class={`w-full flex justify-center ${wrapperClass ?? ''}`}> +<section class={`${sectionClass ? 'section ' : ''}w-full outline-none flex justify-center ${wrapperClass ?? ''}`}> <div class={className} {...props}> {twoColumn ? ( diff --git a/apps/website/src/env.d.ts b/apps/website/src/env.d.ts index acef35f..026fcd0 100644 --- a/apps/website/src/env.d.ts +++ b/apps/website/src/env.d.ts @@ -1,2 +1,3 @@ /// <reference path="../.astro/types.d.ts" /> /// <reference types="astro/client" /> +/// <reference types="./types/global.d.ts" /> diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro index f5d4df9..8653d90 100644 --- a/apps/website/src/layouts/Layout.astro +++ b/apps/website/src/layouts/Layout.astro @@ -18,29 +18,31 @@ const { --- <!doctype html> - <html lang="en"> - <head> - <meta charset="UTF-8"/> - <meta name="description" content={description}/> - <meta name="viewport" content="width=device-width"/> - <link rel="icon" type="image/svg+xml" href={favicon}/> - <meta name="generator" content={Astro.generator}/> - - <link rel="preconnect" href="https://fonts.googleapis.com"/> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> - <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> - <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/> - - <title>{title}</title> - </head> - - <body class="bg-gray-50 overflow-x-hidden"> - <Navbar /> - - <main class="min-h-screen h-auto"> - <slot/> - </main> - +<html lang="en"> + <head> + <meta charset="UTF-8"/> + <meta name="description" content={description}/> + <meta name="viewport" content="width=device-width"/> + <link rel="icon" type="image/svg+xml" href={favicon}/> + <meta name="generator" content={Astro.generator}/> + + <link rel="preconnect" href="https://fonts.googleapis.com"/> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> + <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> + <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/> + + <title>{title}</title> + <script src="/libs/fullpage.min.js" defer></script> + <script src="/scripts/scroll.js" defer></script> + </head> + + <body class="bg-gray-50 overflow-x-hidden"> + <Navbar /> + + <main class="min-h-screen h-auto flex flex-col gap-40" id="fullpage"> + <slot/> <Footer/> - </body> - </html> + </main> + + </body> +</html> diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro index 5d53a5d..af18358 100644 --- a/apps/website/src/pages/mods.astro +++ b/apps/website/src/pages/mods.astro @@ -11,131 +11,126 @@ import { Code } from 'astro:components'; --- <Layout> - - <div class="min-h-screen"> - <Section maxWidth="1920px" wFull={true} wrapperClass="h-3/5" class="h-full mt-32 md:mt-28 flex flex-col justify-center items-center max-sm:px-0"> - <div class="flex flex-col justify-center items-center max-w-full overflow-hidden"> - <div class="flex flex-col justify-between items-center overflow-hidden h-auto md:h-[280px] max-w-[1920px] relative"> - <div class="absolute bottom-0 w-full h-full md:h-1/2 z-10" style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(240, 242, 244));" /> - <Slider wrapperClass="-mb-40 pb-4 max-sm:hidden" 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" 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> + <Section maxWidth="1920px" wFull={true} wrapperClass="h-3/5" class="h-full mt-32 md:mt-28 flex flex-col justify-center items-center max-sm:px-0"> + <div class="flex flex-col justify-center items-center max-w-full overflow-hidden"> + <div class="flex flex-col justify-between items-center overflow-hidden h-auto md:h-[280px] max-w-[1920px] relative"> + <div class="absolute bottom-0 w-full h-full md:h-1/2 z-10" style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(240, 242, 244));" /> + <Slider wrapperClass="-mb-40 pb-4 max-sm:hidden" 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" 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> - <div class="flex flex-col justify-start items-center max-w-full mt-6 md:mt-10 gap-6 px-4"> - <Header align="center" size="xxl" class="text-navy-peony max-w-xl">Redefining modding, one mod at a time</Header> - <div class="flex flex-row justify-center items-center gap-x-2"> - <Button style="primary" iconLeft="link-external">Modrinth</Button> - <Button style="primary" iconLeft="link-external">GitHub</Button> - </div> - - <Paragraph class="text-navy-peony text-lg font-semibold max-w-screen-sm text-center mt-20"> - 10+ mods. Unparalleled new features. OneConfig. We combine our groundbreaking library with mods with no equivalent anywhere else. - </Paragraph> + <div class="flex flex-col justify-start items-center max-w-full mt-6 md:mt-10 gap-6 px-4"> + <Header align="center" size="xxl" class="text-navy-peony max-w-xl">Redefining modding, one mod at a time</Header> + <div class="flex flex-row justify-center items-center gap-x-2"> + <Button style="primary" iconLeft="link-external">Modrinth</Button> + <Button style="primary" iconLeft="link-external">GitHub</Button> </div> - </Section> - </div> - <div class="flex flex-col gap-40"> - <Section tabindex="0"> - <div slot="left"> - <Header size="lg" class="text-navy-peony"><b>13</b> maintained mods</Header> - <Paragraph size="sm" class="text-gray-400 max-w-[500px]"> - OneConfig is a revolutionary new way to configure mods. It allows you to configure all of your mods in one place, with a beautiful UI. - </Paragraph> - </div> - <div slot="right"> - <!-- TODO --> - </div> - </Section> + <Paragraph class="text-navy-peony text-lg font-semibold max-w-screen-sm text-center mt-20"> + 10+ mods. Unparalleled new features. OneConfig. We combine our groundbreaking library with mods with no equivalent anywhere else. + </Paragraph> + </div> + </Section> - <Section tabindex="0"> - <div slot="right"> - <Header size="lg" class="text-navy-peony">We <b>listen</b> to community feedback</Header> - <Paragraph size="sm" class="text-gray-400 max-w-[500px]"> - No more are the days where developers ignore your great new idea. Some of our best mods and ideas are user-suggested, such as BehindYouV3, various Chatting features, and more. - </Paragraph> - </div> - </Section> + <Section tabindex="0"> + <div slot="left"> + <Header size="lg" class="text-navy-peony"><b>13</b> maintained mods</Header> + <Paragraph size="sm" class="text-gray-400 max-w-[500px]"> + OneConfig is a revolutionary new way to configure mods. It allows you to configure all of your mods in one place, with a beautiful UI. + </Paragraph> + </div> + <div slot="right"> + <!-- TODO --> + </div> + </Section> + + <Section tabindex="0"> + <div slot="right"> + <Header size="lg" class="text-navy-peony">We <b>listen</b> to community feedback</Header> + <Paragraph size="sm" class="text-gray-400 max-w-[500px]"> + No more are the days where developers ignore your great new idea. Some of our best mods and ideas are user-suggested, such as BehindYouV3, various Chatting features, and more. + </Paragraph> + </div> + </Section> - <Section maxWidth="1120px" wrapperClass="bg-blue-75 -mb-40" wFull={false} class="pt-10 md:py-20"> - <div slot="left"> - <!-- TODO: FIX Codeblock overflowing on mobile --> - <div class="max-sm:hidden"> - <Code - code={ + <Section maxWidth="1120px" wrapperClass="bg-blue-75 -mb-40" wFull={false} class="pt-10 md:py-20"> + <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; +@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"/> - </div> + lang="java"/> </div> + </div> - <div slot="right" class="flex flex-col gap-2 text-left items-start"> - <Header size="lg" class="text-blue-500">Open source</Header> - <Paragraph class="text-blue-400 max-w-[500px]"> - All of our mods are open source, and will continue to be open source. Anyone can learn, contribute, or take from our code (as long as it follows our license). - </Paragraph> - <div class="flex"> - <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/> - </div> + <div slot="right" class="flex flex-col gap-2 text-left items-start"> + <Header size="lg" class="text-blue-500">Open source</Header> + <Paragraph class="text-blue-400 max-w-[500px]"> + All of our mods are open source, and will continue to be open source. Anyone can learn, contribute, or take from our code (as long as it follows our license). + </Paragraph> + <div class="flex"> + <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/> </div> - </Section> + </div> + </Section> - <Section maxWidth="1120px" wrapperClass="bg-blue-75" wFull={false} class="py-10 md:py-20 gap-4"> - <div slot="left" class="flex flex-col gap-2 text-left items-start"> - <Header size="lg" class="text-blue-500">Powered by OneConfig</Header> - <Paragraph class="text-blue-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 class="flex"> - <Button href="/projects/oneconfig/download" style="secondary" iconLeft="oneconfig" text="See OneConfig"/> - </div> - </div> - <div slot="right"> - <img src="/media/oneconfig/page_media_3.svg" class="max-sm:w-full" alt="stuff"/> + <Section maxWidth="1120px" wrapperClass="bg-blue-75" wFull={false} class="py-10 md:py-20 gap-4"> + <div slot="left" class="flex flex-col gap-2 text-left items-start"> + <Header size="lg" class="text-blue-500">Powered by OneConfig</Header> + <Paragraph class="text-blue-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 class="flex"> + <Button href="/projects/oneconfig/download" style="secondary" iconLeft="oneconfig" text="See OneConfig"/> </div> - </Section> + </div> + <div slot="right"> + <img src="/media/oneconfig/page_media_3.svg" class="max-sm:w-full" alt="stuff"/> + </div> + </Section> - <Section class="flex-col justify-center items-center mb-40"> - <div class="flex flex-col gap-y-1 relative md:-left-12 justify-center items-center"> - <Header size="xl" class="text-navy-peony text-header-page w-11/12 md:max-w-lg text-center">Get our mods, available on Modrinth and GitHub.</Header> - <div class="flex flex-row justify-center items-center gap-x-2"> - <Button style="primary" iconLeft="link-external">Modrinth</Button> - <Button style="primary" iconLeft="link-external">GitHub</Button> - </div> + <Section class="flex-col justify-center items-center mb-40"> + <div class="flex flex-col gap-y-1 relative md:-left-12 justify-center items-center"> + <Header size="xl" class="text-navy-peony text-header-page w-11/12 md:max-w-lg text-center">Get our mods, available on Modrinth and GitHub.</Header> + <div class="flex flex-row justify-center items-center gap-x-2"> + <Button style="primary" iconLeft="link-external">Modrinth</Button> + <Button style="primary" iconLeft="link-external">GitHub</Button> </div> - </Section> - </div> + </div> + </Section> </Layout> diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro index 70a9e49..1489bb1 100644 --- a/apps/website/src/pages/projects/oneconfig.astro +++ b/apps/website/src/pages/projects/oneconfig.astro @@ -25,147 +25,145 @@ import { Code } from 'astro:components'; </div> </Section> - <div class="flex flex-col gap-40"> - <Section tabindex="0" hFull> - <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/oneconfig/page_media_1.svg" alt="stuff"/> - </div> - </Section> + <Section tabindex="0" hFull> + <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/oneconfig/page_media_1.svg" alt="stuff"/> + </div> + </Section> - <Section tabindex="0" colReverse={false} hFull> - <div slot="left" class="w-1/2 md:w-auto flex justify-center"> - <img src="/media/oneconfig/page_media_2.svg" alt="stuff"/> - </div> + <Section tabindex="0" colReverse={false} hFull> + <div slot="left" class="w-1/2 md:w-auto flex justify-center"> + <img src="/media/oneconfig/page_media_2.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" hFull> - <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" hFull> + <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 flex justify-center"> - <img src="/media/oneconfig/page_media_3.svg" alt="stuff"/> - </div> - </Section> + <div slot="right" class="w-3/4 md:w-auto flex justify-center"> + <img src="/media/oneconfig/page_media_3.svg" alt="stuff"/> + </div> + </Section> - <div class="bg-blue-75 flex flex-col justify-center items-center min-h-screen"> - <Section 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 - }); - } - }` + <div class="section bg-blue-75 flex flex-col justify-center items-center min-h-screen"> + <Section sectionClass={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> +}` +} + 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 slot="right"> - <img src="/media/oneconfig/page_media_4.png" class="max-h-[285px] rounded-2xl"/> + <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> - </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> + </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> - <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> + <Section sectionClass={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]"> - Discover a wide range of mods integrated with OneConfig to enhance your experience. + We take pride in having the cleanest and most intuitive UI of any mod, config library, or client out there. </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" style="secondary" text="Discover mods"/> - <Button iconLeft="link-external" style="ghost" text="Download a modpack"/> + <div class="flex"> + <Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/> </div> </div> - <div class="flex flex-col justify-center items-center bg-blue-100 pb-10 max-w-full overflow-hidden"> - <div class="flex flex-col justify-between items-center overflow-hidden h-[280px] max-w-[1920px]"> - <Slider wrapperClass="-mb-40 pb-4 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 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 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> + <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> + + <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> + <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" style="secondary" text="Discover mods"/> + <Button iconLeft="link-external" style="ghost" text="Download a modpack"/> </div> - </Section> - </div> + </div> + <div class="flex flex-col justify-center items-center bg-blue-100 pb-10 max-w-full overflow-hidden"> + <div class="flex flex-col justify-between items-center overflow-hidden h-[280px] max-w-[1920px]"> + <Slider wrapperClass="-mb-40 pb-4 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> diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css index 59f7633..003b4c7 100644 --- a/apps/website/src/styles/global.css +++ b/apps/website/src/styles/global.css @@ -24,7 +24,7 @@ html, body { - @apply text-[15px] md:text-[19px]; + @apply text-[15px] md:text-[19px] overflow-x-hidden; } a { @@ -32,6 +32,14 @@ } } +.fp-overflow:focus-visible { + @apply outline-none ring-0 ; +} + +main { + @apply overflow-x-hidden; +} + /* Codeblocks */ .astro-code { padding: 10px; |