Pretty much finished the mods page except for images / svgs

6 files changed, 142 insertions, 37 deletions

diff --git a/apps/website/config.ts b/apps/website/config.ts
index f53cff0..f55f380 100644
--- a/apps/website/config.ts
+++ b/apps/website/config.ts
@@ -35,10 +35,6 @@ export const configConst = {
 				text: 'About Us',
 				path: '/about',
 			},
-			{
-				text: 'Contact Us',
-				path: '/contact',
-			},
 		],
 	},
 	footer: [
diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro
index a1c27b9..0fe544b 100644
--- a/apps/website/src/components/base/navbar/NavbarElement.astro
+++ b/apps/website/src/components/base/navbar/NavbarElement.astro
@@ -28,7 +28,7 @@ function isCurrentPage(url: string): boolean {
 ? (
 			<a href={element.path} class={`p-2 flex flex-row justify-center items-center hover:text-blue-500 ${isCurrentPage(element.path) ? 'text-blue-400' : 'text-gray-700'}`}>
 				{element.text && element.text}
-				{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
+				{element.logo && <Logo class="active:scale-95 transition-transform" size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
 				{element.dropdown && <Icon icon="chevron-down"/>}
 			</a>
 		)
@@ -74,7 +74,7 @@ function isCurrentPage(url: string): boolean {
 								{element.dropdown.map(item => (
 									<li>
 										<a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]">
-											<div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50">
+											<div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50 active:bg-blue-100">
 												<div class="w-[36px]">
 													{item.logo && <Logo size={40} logo={item.logo}/>}
 												</div>
diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro
index b186a76..fc4fc21 100644
--- a/apps/website/src/components/icons/Icon.astro
+++ b/apps/website/src/components/icons/Icon.astro
@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 import { parse } from 'node-html-parser';
 
 type _ModIcons =
+	| 'oneconfig'
 	| 'chatting'
 	| 'polysprint'
 	| 'vanillahud'
diff --git a/apps/website/src/components/icons/impl/oneconfig.svg b/apps/website/src/components/icons/impl/oneconfig.svg
new file mode 100644
index 0000000..cba37ab
--- /dev/null
+++ b/apps/website/src/components/icons/impl/oneconfig.svg
@@ -0,0 +1,5 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70.3573 29.2713C70.4668 29.4694 70.5816 29.6767 70.6705 29.8925C72.5332 33.8023 72.4576 39.4449 70.3235 43.2681L62.5582 56.7093C60.2619 53.2001 57.0453 50.1892 53.179 47.9147C53.2764 47.7633 53.3629 47.6115 53.4386 47.4597C60.2945 33.5858 53.179 15.2605 36.0014 15.531C18.521 15.2387 11.6106 33.8998 18.7699 47.9581C14.9248 50.2327 11.7301 53.2323 9.44449 56.7311C9.39106 56.6172 8.6306 55.3104 7.58772 53.5173C5.05245 49.1586 0.846575 41.9292 1.06183 41.9903C-0.378748 38.5028 -0.357048 33.7371 1.14855 30.2931C1.23897 30.0503 1.35108 29.816 1.46904 29.5906C1.53458 29.4646 1.60229 29.3414 1.6684 29.221L12.737 10.029C12.7534 10.0072 12.7672 9.98229 12.7809 9.95773C12.7947 9.93358 12.8079 9.90983 12.8238 9.88849C15.1089 6.08684 20.5135 3 24.9217 3H47.0594C52.0848 3 56.7313 5.68599 59.2333 10.029C59.2587 10.0612 63.1081 16.7246 66.2643 22.1876C68.4515 25.9738 70.3054 29.1836 70.3235 29.2101L70.3573 29.2713Z" fill="#0048C5"/>
+<path d="M25.8187 55.0747C31.6347 58.367 40.4507 58.3561 46.1367 55.053C50.989 57.4572 54.52 61.5514 55.6138 66.3601C53.2201 68.1254 50.274 69.3275 47.6098 69.4576C47.4367 69.4793 47.2418 69.4793 47.0683 69.4793C46.9169 69.4753 43.9049 69.4773 40.1347 69.4797H39.9375C33.4769 69.4837 24.9266 69.489 24.6492 69.4684C21.9197 69.4036 18.8545 68.1903 16.396 66.3601C17.4685 61.5622 20.9886 57.4789 25.8187 55.0747Z" fill="#0A5BE8"/>
+<path d="M46.9384 36.2502C47.3172 51.3589 24.6811 51.348 25.0604 36.2502C24.8547 21.0549 47.1333 21.0549 46.9384 36.2502Z" fill="#0A5BE8"/>
+</svg>
diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro
index 4409583..27ef018 100644
--- a/apps/website/src/pages/mods.astro
+++ b/apps/website/src/pages/mods.astro
@@ -1,44 +1,141 @@
 ---
+import Button from '@components/base/Button.astro';
 import Card from '@components/base/Card.astro';
 import Header from '@components/base/Header.astro';
+import Paragraph from '@components/base/Paragraph.astro';
 import Section from '@components/base/Section.astro';
 import Slider from '@components/base/Slider.astro';
 import Layout from '@layouts/Layout.astro';
+import { Code } from 'astro:components';
 
 ---
 
 <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>
+	<div class="min-h-screen">
+		<Section maxWidth="1920px" wFull={true} wrapperClass="h-3/5" class="h-full mt-32 md:mt-28 flex flex-col justify-center items-center max-sm: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 gap-6 px-4">
+				<Header align="center" size="xxl" class="text-navy-peony max-w-xl">Redefining modding, one mod at a time</Header>
+				<div class="flex flex-row justify-center items-center gap-x-2">
+					<Button style="primary" iconLeft="link-external">Modrinth</Button>
+					<Button style="primary" iconLeft="link-external">GitHub</Button>
+				</div>
+
+				<Paragraph class="text-navy-peony text-xl font-semibold max-w-screen-sm text-center mt-20">
+					10+ mods. Unparalleled new features. OneConfig. We combine our groundbreaking library with mods with no equivalent anywhere else.
+				</Paragraph>
+			</div>
+		</Section>
+	</div>
+
+	<div class="flex flex-col gap-40 my-48">
+		<Section tabindex="0">
+			<div slot="left">
+				<Header size="xl" class="text-navy-peony"><b>13</b> maintained mods</Header>
+				<Paragraph class="text-navy-peony text-xl max-w-screen-sm mt-6">
+					OneConfig is a revolutionary new way to configure mods. It allows you to configure all of your mods in one place, with a beautiful UI.
+				</Paragraph>
+			</div>
+			<div slot="right">
+				<!-- TODO -->
+			</div>
+		</Section>
+
+		<Section tabindex="0">
+			<div slot="right">
+				<Header size="xl" class="text-navy-peony">We <b>listen</b> to community feedback</Header>
+				<Paragraph class="text-navy-peony text-xl max-w-screen-sm mt-6">
+					No more are the days where developers ignore your great new idea. Some of our best mods and ideas are user-suggested, such as BehindYouV3, various Chatting features, and more.
+				</Paragraph>
+			</div>
+		</Section>
+
+		<Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="pt-10 md:py-20">
+			<div slot="left">
+				<!-- TODO: FIX Codeblock overflowing on mobile -->
+				<div class="max-sm:hidden">
+					<Code
+						code={
+`public class MyConfig {
+	@Switch(
+		name = "Sub Switch",
+		type = OptionType.SWITCH
+	)
+	public static boolean subSwitch = false;
+
+	public MyConfig() {
+		super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
+		addDependency("subSwitch", () -> {
+			// Do stuff here
+		});
+	}
+}`
+}
+						lang="java"/>
+				</div>
+			</div>
+
+			<div slot="right" class="flex flex-col gap-2">
+				<Header size="xl" class="text-blue-500">Open source</Header>
+				<Paragraph class="text-blue-400 max-w-[500px]">
+					All of our mods are open source, and will continue to be open source. Anyone can learn, contribute, or take from our code (as long as it follows our license).
+				</Paragraph>
+				<div class="flex">
+					<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
+				</div>
+			</div>
+		</Section>
+
+		<Section maxWidth="1120px" wrapperClass="bg-blue-100" wFull={false} class="py-10 md:py-20 gap-4">
+			<div slot="left" class="flex flex-col gap-2">
+				<Header size="xl" class="text-blue-500">Powered by OneConfig</Header>
+				<Paragraph class="text-blue-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 class="flex">
+					<Button href="/projects/oneconfig/download" style="secondary" iconLeft="oneconfig" text="See OneConfig"/>
+				</div>
+			</div>
+			<div slot="right">
+				<img src="/media/oneconfig/page_media_3.svg" alt="stuff"/>
+			</div>
+		</Section>
+
+		<Section class="flex-col justify-center items-center">
+			<div class="flex flex-col gap-y-1 relative md:-left-12">
+				<Header size="xl" class="text-navy-peony text-header-page max-w-lg text-center">Get our mods, available on Modrinth and GitHub.</Header>
+				<div class="flex flex-row justify-center items-center gap-x-2">
+					<Button style="primary" iconLeft="link-external">Modrinth</Button>
+					<Button style="primary" iconLeft="link-external">GitHub</Button>
+				</div>
+			</div>
+		</Section>
+	</div>
 
 </Layout>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 340c9e0..1a9f19b 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -5,6 +5,7 @@
 
 * {
 	font-family: 'Poppins', sans-serif;
+	-webkit-tap-highlight-color: transparent;
 }
 
 @layer base {
@@ -25,6 +26,10 @@
 	body {
 		@apply text-[14px] md:text-[16px];
 	}
+
+	a {
+		-webkit-user-drag: none;
+	}
 }
 
 /* Codeblocks */
@@ -33,6 +38,7 @@
 	border-radius: 16px;
 	border: 1px solid rgba(65, 74, 88, 1);
 	width: 100%;
+	line-height: 18px;
 }
 
 .astro-code code {