Add locomotive

7 files changed, 69 insertions, 32 deletions

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 {