diff options
Diffstat (limited to 'apps/website/src/pages/mods.astro')
| -rw-r--r-- | apps/website/src/pages/mods.astro | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro new file mode 100644 index 0000000..ae1002c --- /dev/null +++ b/apps/website/src/pages/mods.astro @@ -0,0 +1,169 @@ +--- +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 configConst from '@config'; +import Layout from '@layouts/Layout.astro'; +import { Code } from 'astro:components'; + +const modrinthId = configConst.socials.modrinth.id; +const modrinthType = configConst.socials.modrinth.type; +const modrinthUrl = `https://modrinth.com/${modrinthType}/${modrinthId}`; +--- + +<Layout> + <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-xl: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 lg:h-[290px] max-w-[1920px] relative"> + <div class="absolute -bottom-[1px] w-full h-full lg:h-1/2 z-10" style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(240, 242, 244));"/> + <Slider wrapperClass="-mb-40 mb-2 hidden lg:block" 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-[500px]">Redefining modding, one mod at a time</Header> + <div class="flex flex-row justify-center items-center gap-x-2"> + <Button style="primary" iconLeft="download" href={modrinthUrl}>Download</Button> + <Button style="secondary" iconLeft="github" href={configConst.socials.github}>Source</Button> + </div> + + <Paragraph class="text-navy-peony text-lg font-semibold max-w-screen-sm text-center mt-20"> + <span id="mod_count">16</span>+ 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="left"> + <Header size="lg" class="text-navy-peony"><b id="mod_count_maintained_mods">16</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"> + <div class="absolute ml-[21rem] w-1/4 h-full z-10" style="background: linear-gradient(90deg, rgba(246, 246, 246, 0.00) 0%, #F0F2F4 49.21%);"/> + <img src="/media/mods/page_media_1.svg" class="w-[120%] overflow-x-clip" alt="stuff"/> + </div> + </Section> + + <Section tabindex="0"> + <div slot="left"> + <img src="/media/mods/page_media_2.svg" class="max-sm:w-full" alt="stuff"/> + </div> + <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={ + `public class MyConfig { + @Switch( + name = "Sub Switch", + category = "General" + ) + 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="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> + </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" 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"/> + </div> + </Section> + + <Section wrapperClass="flex justify-center items-center min-h-screen -mt-40" class="flex-col justify-center items-center"> + <div class="flex flex-col gap-y-1 relative 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" href={modrinthUrl}>Modrinth</Button> + <Button style="primary" iconLeft="github" href={configConst.socials.github}>GitHub</Button> + </div> + </div> + </Section> + +</Layout> + +<script define:vars={{ modrinthType: modrinthType, modrinthId: modrinthId }}> + +async function getModCount() { + const res = await fetch(`https://api.modrinth.com/v2/${modrinthType}/${modrinthId}/projects`); + const data = await res.json(); + const mods = data.filter((mod) => { + return mod.slug !== 'oneconfig' && mod.slug !== 'easeify'; + }); + + return mods.length; +} + +getModCount().then((size) => { + const modCount = document.getElementById('mod_count'); + const modCountMaintainedMods = document.getElementById('mod_count_maintained_mods'); + + if (modCount) + modCount.textContent = size; + + if (modCountMaintainedMods) + modCountMaintainedMods.textContent = size; +}); +</script> |