Slider tweaks

4 files changed, 37 insertions, 28 deletions

diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
index 285052a..fef01f6 100644
--- a/apps/website/src/components/base/Button.astro
+++ b/apps/website/src/components/base/Button.astro
@@ -7,6 +7,7 @@ const styles = {
 	// TODO: adjust active / disabled colors
 	primary: 'bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4',
 	secondary: 'bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200',
+	ghost: 'bg-transparent text-blue-500 hover:bg-blue-20 active:bg-blue-30 disabled:bg-transparent disabled:text-blue-200',
 };
 
 const sizes = {
diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro
index 7cc51b2..9b75f16 100644
--- a/apps/website/src/components/base/Card.astro
+++ b/apps/website/src/components/base/Card.astro
@@ -16,7 +16,7 @@ const {
 ---
 
 <!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. -->
-	<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0">
-		<Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon>
-		<p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl pl-[12px] pr-[32px]">{text}</p>
-	</div>
+<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0">
+	<Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon>
+	<p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl py-[5px] pl-[12px] pr-[32px]">{text}</p>
+</div>
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro
index ae4bbae..3fbca91 100644
--- a/apps/website/src/components/base/Slider.astro
+++ b/apps/website/src/components/base/Slider.astro
@@ -14,7 +14,7 @@ const {
 	wrapperClass = '',
 	childrenNum,
 	childrenSize = '256px',
-	speed = '15s',
+	speed = '20s',
 } = Astro.props;
 
 ---
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index faa8a98..d5fc98b 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -97,7 +97,7 @@ import { Code } from 'astro:components';
 					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" iconLeft="download" style="secondary" text="Download"/>
+					<Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/>
 				</div>
 			</div>
 			<div slot="right">
@@ -120,32 +120,40 @@ import { Code } from 'astro:components';
 				<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">
-					<Button iconLeft="link-external" text="Discover mods"/>
+				<div class="flex row gap-x-1">
+					<!-- TODO: HREF -->
+					<Button iconLeft="link-external" style="secondary" text="Discover mods"/>
+					<Button iconLeft="link-external" style="ghost" text="Download modpacks"/>
 				</div>
 			</div>
 		</Section>
+
 		<!-- TODO: add more 3rd party mods, like DSM PSS and Neu maybe -->
-		<Slider wrapperClass="-mb-40 pb-4" 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="pb-10" 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 class="flex flex-col justify-center items-center bg-blue-100 pb-10">
+			<div class="flex flex-col justify-between items-center overflow-hidden h-[280px] max-w-[1920px]">
+				<Slider wrapperClass="-mb-40 pb-4" 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>
+
 		<Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px] mb-[10rem]">
 			<div class="grid grid-rows-[repeat(8,_minmax(0,_1fr))] grid-cols-[repeat(7,_minmax(0,_1fr))]">
 				<!-- TODO: Change placeholder image -->