fullpage.js

2 files changed, 226 insertions, 233 deletions

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>