Add locomotive

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>