Add locomotive

9 files changed, 110 insertions, 32 deletions

diff --git a/apps/website/package.json b/apps/website/package.json
index 553b23c..a6e73a0 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -17,6 +17,7 @@
 		"@astrojs/tailwind": "^5.0.4",
 		"astro": "^4.0.7",
 		"fullpage.js": "^4.0.20",
+		"locomotive-scroll": "^4.1.4",
 		"sass": "^1.69.5",
 		"tailwindcss": "^3.4.0",
 		"vitest": "^1.1.0"
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
index 88e6d7b..9463edc 100644
--- a/apps/website/src/components/base/Footer.astro
+++ b/apps/website/src/components/base/Footer.astro
@@ -2,10 +2,15 @@
 import Icon from '@components/icons/Icon.astro';
 import Logo from '@components/logos/Logo.astro';
 import configConst from '@config';
+import type { HTMLAttributes } from 'astro/types';
 import Link from './Link.astro';
+
+interface Props extends HTMLAttributes<'footer'> {}
+
+const props = Astro.props;
 ---
 
-<footer class="section flex justify-center items-center bg-blue-100 mt-4 pt-20 pb-8 px-20">
+<footer {...props} class="section flex justify-center items-center bg-blue-100 -mt-40 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 c463a16..5f3cc1d 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
+	scrollSection?: boolean
 }
 
 const {
@@ -15,6 +16,7 @@ const {
 	wrapperClass = '',
 	wFull = true,
 	hFull = false,
+	scrollSection = true,
 	...props
 } = Astro.props;
 
@@ -24,9 +26,13 @@ const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-c
 	${colReverse ? 'flex-col-reverse' : 'flex-col'} lg:flex-row items-center`;
 
 const className = `max-w-[${maxWidth}] ${hFull ? 'min-h-screen' : 'h-auto'} ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 xl:px-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`;
+
+const sectionAttr = {
+	...(scrollSection ? { 'data-scroll-section': '' } : {}),
+};
 ---
 
-<section class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
+<section {...sectionAttr} class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
 	<div class={className} {...props}>
 		{twoColumn
 			? (
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index 944d88d..bd2c2b5 100644
--- a/apps/website/src/components/base/navbar/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -1,10 +1,13 @@
 ---
 import type { Config } from '@webtypes/Config';
+import type { HTMLAttributes } from 'astro/types';
 import config from 'config';
 import NavbarElement from '../navbar/NavbarElement.astro';
 
+interface Props extends HTMLAttributes<'div'> {}
+const props = Astro.props;
 ---
-<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
+<div {...props} class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
 	<nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center">
 		<ul class="flex flex-row justify-start gap-4 max-md:mt-4">
 			{(config as Config).navbar.left.map((element, index) => (
diff --git a/apps/website/src/env.d.ts b/apps/website/src/env.d.ts
index 026fcd0..01db714 100644
--- a/apps/website/src/env.d.ts
+++ b/apps/website/src/env.d.ts
@@ -1,3 +1,4 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
-/// <reference types="./types/global.d.ts" />
+
+declare module 'locomotive-scroll';
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
index a06cdd2..660083a 100644
--- a/apps/website/src/layouts/Layout.astro
+++ b/apps/website/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import Footer from '@components/base/Footer.astro';
 import Favicon from '/media/polyfrost/minimal_bg.svg?url';
+import 'locomotive-scroll/dist/locomotive-scroll.min.css';
 import Navbar from '../components/base/navbar/Navbar.astro';
 import '../styles/global.css';
 
@@ -35,12 +36,27 @@ const {
 	</head>
 
 	<body class="bg-gray-50 overflow-x-hidden">
-		<Navbar />
 
-		<main class="min-h-screen h-auto flex flex-col gap-40" id="fullpage">
+		<main class="min-h-screen h-auto flex flex-col gap-40" data-scroll-container>
+			<Navbar data-scroll-section />
+
 			<slot/>
+
+			<Footer data-scroll-section />
 		</main>
-		<Footer/>
 
 	</body>
 </html>
+
+<script>
+import LocomotiveScroll from 'locomotive-scroll';
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+const scroll = new LocomotiveScroll({
+	el: document.querySelector('[data-scroll-container]'),
+	smooth: true,
+	lerp: 0.05,
+	touchMultiplier: 0,
+	resetNativeScroll: false,
+});
+</script>
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>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 807e345..f29f0f0 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-[16px] lg:text-[19px] overflow-x-hidden;
+		@apply text-[15px] md:text-[16px] lg:text-[19px] overflow-hidden;
 	}
 
 	a {
@@ -32,8 +32,10 @@
 	}
 }
 
-.fp-overflow:focus-visible {
-	@apply outline-none ring-0 ;
+[data-scroll-container], [data-scroll-section] {
+	transform-style: preserve-3d;
+	will-change: transform;
+	perspective: 1px;
 }
 
 main {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6753293..b15153c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -157,6 +157,9 @@ importers:
       fullpage.js:
         specifier: ^4.0.20
         version: 4.0.20
+      locomotive-scroll:
+        specifier: ^4.1.4
+        version: 4.1.4
       sass:
         specifier: ^1.69.5
         version: 1.69.5
@@ -6240,6 +6243,10 @@ packages:
       open: 8.4.2
     dev: true
 
+  /bezier-easing@2.1.0:
+    resolution: {integrity: sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==}
+    dev: false
+
   /big-integer@1.6.52:
     resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
     engines: {node: '>=0.6'}
@@ -6260,6 +6267,10 @@ packages:
       chainsaw: 0.1.0
     dev: false
 
+  /bindall-standalone@1.0.5:
+    resolution: {integrity: sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==}
+    dev: false
+
   /bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
     requiresBuild: true
@@ -9883,6 +9894,10 @@ packages:
       needle: 3.3.1
       source-map: 0.6.1
 
+  /lethargy@1.0.9:
+    resolution: {integrity: sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==}
+    dev: false
+
   /leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -9958,6 +9973,14 @@ packages:
     dependencies:
       p-locate: 5.0.0
 
+  /locomotive-scroll@4.1.4:
+    resolution: {integrity: sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==}
+    dependencies:
+      bezier-easing: 2.1.0
+      smoothscroll-polyfill: 0.4.4
+      virtual-scroll: 1.5.2
+    dev: false
+
   /lodash.castarray@4.4.0:
     resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
     dev: true
@@ -12749,6 +12772,10 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  /smoothscroll-polyfill@0.4.4:
+    resolution: {integrity: sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==}
+    dev: false
+
   /snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
     dependencies:
@@ -13329,6 +13356,10 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
+  /tiny-emitter@1.2.0:
+    resolution: {integrity: sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==}
+    dev: false
+
   /tiny-invariant@1.3.1:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
 
@@ -14042,6 +14073,15 @@ packages:
       vfile-message: 4.0.2
     dev: false
 
+  /virtual-scroll@1.5.2:
+    resolution: {integrity: sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==}
+    dependencies:
+      bindall-standalone: 1.0.5
+      lethargy: 1.0.9
+      object-assign: 4.1.1
+      tiny-emitter: 1.2.0
+    dev: false
+
   /vite-node@1.1.0:
     resolution: {integrity: sha512-jV48DDUxGLEBdHCQvxL1mEh7+naVy+nhUUUaPAZLd3FJgXuxQiewHcfeZebbJ6onDqNGkP4r3MhQ342PRlG81Q==}
     engines: {node: ^18.0.0 || >=20.0.0}