Slight changes to mods page

5 files changed, 56 insertions, 12 deletions

diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index 1ab879e..5292380 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -25,16 +25,24 @@ const {
 } = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
 
-const className = (align === 'inherit' ? '' : `text-${align} `)
-	+ (size === 'xxl' ? ' page-header' : '')
-	+ (attr.class ? ` ${attr.class}` : '');
+let className: string | string[] = [];
+if (align !== 'inherit')
+	className.push(`text-${align}`);
+
+if (size === 'xxl')
+	className.push('page-header');
+
+if (attr.class)
+	className.push(attr.class);
+
+className = className.join(' ');
 ---
 
-	<Element {...attr} class={className}>
-		<slot/>
-	</Element>
+<Element {...attr} class={className}>
+	<slot/>
+</Element>
 
-		<style>
+<style>
     h1 {
 		font-size: theme("fontSize.header-lg");
 		&.page-header {
@@ -74,4 +82,4 @@ const className = (align === 'inherit' ? '' : `text-${align} `)
 			font-weight: inherit;
 		}
 	}
-		</style>
+</style>
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro
index 139a250..1afd680 100644
--- a/apps/website/src/components/base/Slider.astro
+++ b/apps/website/src/components/base/Slider.astro
@@ -20,7 +20,7 @@ const {
 ---
 
 <div class={
-	`w-full bg-blue-100 slider
+	`w-full slider
 	${dir === 'right' ? 'reverse' : ''}
 	${wrapperClass}`
 }>
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index 2a1cd51..65b7473 100644
--- a/apps/website/src/components/base/navbar/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -4,7 +4,7 @@ import config from 'config';
 import NavbarElement from '../navbar/NavbarElement.astro';
 
 ---
-<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
+<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar">
 	<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-sm:mt-4">
 			{(config as Config).navbar.left.map((element, index) => (
diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro
index 8553c7a..4409583 100644
--- a/apps/website/src/pages/mods.astro
+++ b/apps/website/src/pages/mods.astro
@@ -1,8 +1,44 @@
 ---
+import Card from '@components/base/Card.astro';
+import Header from '@components/base/Header.astro';
+import Section from '@components/base/Section.astro';
+import Slider from '@components/base/Slider.astro';
 import Layout from '@layouts/Layout.astro';
 
 ---
 
 <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 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">
+			<Header align="center" size="xxl" class="text-navy-peony max-w-xl">Redefining modding, one mod at a time</Header>
+		</div>
+	</Section>
+
 </Layout>
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index dc3367a..6ad725b 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -135,7 +135,7 @@ import { Code } from 'astro:components';
 		<!-- TODO: add more 3rd party mods, like DSM PSS and Neu maybe -->
 		<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" childrenNum={8}>
+				<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"/>
@@ -145,7 +145,7 @@ import { Code } from 'astro:components';
 					<Card text="PolyWeather" icon="polyweather"/>
 					<Card text="Keystrokes" icon="keystrokes"/>
 				</Slider>
-				<Slider dir="right" childrenNum={8}>
+				<Slider dir="right" wrapperClass="bg-blue-100" childrenNum={8}>
 					<Card text="Chatting" icon="chatting"/>
 					<Card text="PolySprint" icon="polysprint"/>
 					<Card text="VanillaHUD" icon="vanillahud"/>