Merge pull request #4 from Polyfrost/website/icon-fix

15 files changed, 1114 insertions, 180 deletions

diff --git a/apps/website/src/pages/about.astro b/apps/website/src/pages/about.astro
new file mode 100644
index 0000000..035d3ae
--- /dev/null
+++ b/apps/website/src/pages/about.astro
@@ -0,0 +1,98 @@
+---
+import Button from '@components/base/Button.astro';
+import Header from '@components/base/Header.astro';
+import Paragraph from '@components/base/Paragraph.astro';
+import Section from '@components/base/Section.astro';
+import Layout from '@layouts/Layout.astro';
+
+---
+
+<Layout>
+	<Section class="flex-col justify-center items-center h-screen max-h-4/5-screen md:max-h-[600px] md:min-h-[400px]">
+		<div class="max-w-[600px] flex flex-col text-center justify-center items-center gap-y-2">
+			<Header align="center" size="xxl" class="text-navy-peony">Our journey</Header>
+			<Paragraph size="lg" class="text-blue-gray">From an aspiring team just trying to make a cool thing, to what we now call Polyfrost, we've made a lot of progress.</Paragraph>
+		</div>
+	</Section>
+
+	<div class="flex flex-col gap-y-40">
+		<Section tabindex="0" colReverse={false}>
+			<div slot="left" class="w-1/2 md:w-auto">
+				<img src="/media/about/page_media_1.svg" alt="image of a calendar">
+			</div>
+			<div slot="right">
+				<Header size="lg" class="text-navy-peony">
+					October, 2021
+				</Header>
+				<Paragraph size="sm" class="text-blue-gray max-w-[500px]">
+					We began as a small development team trying to build ambitious projects beyond us. Joining forces with W-OVERFLOW (a modding organization formerly owned by one of the current owners), Polyfrost finally had the resources to achieve our dream of a unified config for all mods.
+				</Paragraph>
+			</div>
+		</Section>
+
+		<Section tabindex="0">
+			<div slot="left">
+				<Header size="lg" class="text-navy-peony">
+					A year of development
+				</Header>
+				<Paragraph size="sm" class="text-gray-400 max-w-[500px]">
+					Our first alpha build of OneConfig released in June to a limited audience. By October of 2022, nearly a year after our first announcement, OneConfig finally became available to the whole world in open beta.
+				</Paragraph>
+			</div>
+
+			<div slot="right" class="w-1/2 md:w-auto">
+				<img src="/media/about/page_media_2.svg" alt="image of a code block" />
+			</div>
+		</Section>
+
+		<Section tabindex="0" colReverse={false}>
+			<div slot="left" class="w-1/2 md:w-auto">
+				<img src="/media/about/page_media_3.svg" alt="image indicating a celebration">
+			</div>
+			<div slot="right" class="flex flex-col gap-y-2">
+				<Header size="lg" class="text-navy-peony">
+					Hey look, OneConfig's a hit!
+				</Header>
+				<Paragraph size="sm" class="text-gray-400 max-w-[500px]">
+					In the coming months, our little baby would independently surpass 200,000 views on YouTube and our community grew by around 300%. Shortly after, our first major update releases, bringing substantial customization, new animations, design overhauls, and many bug fixes.
+				</Paragraph>
+				<div class="flex">
+					<Button style="secondary" iconLeft="oneconfig" href="/projects/oneconfig">OneConfig</Button>
+				</div>
+			</div>
+		</Section>
+
+		<Section tabindex="0">
+			<div slot="left" class="flex flex-col gap-y-2">
+				<Header size="lg" class="text-navy-peony">
+					Finally, it's ready for release
+				</Header>
+				<Paragraph size="sm" class="text-gray-400 max-w-[500px]">
+					It's been a long journey, with many bugs, hotfixes, mod incompatibilities, support tickets, list goes on. However, after two years of development, we finally announced the complete release of OneConfig. In November 2023, we released all our OneConfig mods out of beta and into the world.
+				</Paragraph>
+				<div class="flex">
+					<Button iconLeft="link-external" style="secondary" href="/mods">Discover Mods</Button>
+				</div>
+			</div>
+
+			<div slot="right" class="w-1/2 md:w-auto">
+				<img src="/media/about/page_media_4.svg" alt="oneconfig logo" />
+			</div>
+		</Section>
+
+		<Section class="mb-40 flex-col items-center justify-center text-center text-navy-peony">
+			<div class="flex flex-col gap-y-10 max-w-xl text-lg">
+				<Paragraph>
+					Since the inception of OneConfig and since the people that became Polyfrost first met, we have always been known for our attention and swift feedback to users and their suggestions. No matter what we do in the future, you will always be our top priority. And we mean it.
+				</Paragraph>
+				<Paragraph>
+					We've grown a lot from our early days back in 2021. What used to be a small team of four has become a professional team of 12 aspiring developers and designers maintaining two libraries and 10+ mods.
+				</Paragraph>
+				<Paragraph>
+					We thank everyone; from the people who are just finding us, to the people who were there in the very early days, for sticking around with us.
+				</Paragraph>
+			</div>
+		</Section>
+	</div>
+
+</Layout>
diff --git a/apps/website/src/pages/blog/[...slug].astro b/apps/website/src/pages/blog/[...slug].astro
new file mode 100644
index 0000000..abdde0a
--- /dev/null
+++ b/apps/website/src/pages/blog/[...slug].astro
@@ -0,0 +1,23 @@
+---
+// i hate u astro vscode extensi on/j
+/// <reference types="../../env.d.ts" />
+import { type CollectionEntry, getCollection } from 'astro:content';
+import BlogPost from '../../layouts/BlogPost.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('blog');
+	return posts.map(post => ({
+		params: { slug: post.slug },
+		props: post,
+	}));
+}
+
+type Props = CollectionEntry<'blog'>;
+
+const post = Astro.props;
+const { Content } = await post.render();
+---
+
+<BlogPost {...post.data}>
+	<Content/>
+</BlogPost>
diff --git a/apps/website/src/pages/blog/index.astro b/apps/website/src/pages/blog/index.astro
new file mode 100644
index 0000000..4bccad4
--- /dev/null
+++ b/apps/website/src/pages/blog/index.astro
@@ -0,0 +1,30 @@
+---
+/// <reference types="../../env.d.ts" />
+import { getCollection } from 'astro:content';
+import FormattedDate from '../../components/base/FormattedDate.astro';
+import Layout from '../../layouts/Layout.astro';
+
+const posts = (await getCollection('blog')).sort(
+	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
+);
+---
+
+<Layout title="Polyfrost Blog" description="Recieve Polyfrost updates here">
+	<section>
+		<ul>
+			{
+				posts.map(post => (
+					<li>
+						<a href={`blog/${post.slug}/`}>
+							<img width={720} height={360} src={post.data.heroImage} alt=""/>
+							<h4 class="title">{post.data.title}</h4>
+							<p class="date">
+								<FormattedDate date={post.data.pubDate}/>
+							</p>
+						</a>
+					</li>
+				))
+			}
+		</ul>
+	</section>
+</Layout>
diff --git a/apps/website/src/pages/branding.astro b/apps/website/src/pages/branding.astro
new file mode 100644
index 0000000..e367f3b
--- /dev/null
+++ b/apps/website/src/pages/branding.astro
@@ -0,0 +1,117 @@
+---
+import Header from '@components/base/Header.astro';
+import Paragraph from '@components/base/Paragraph.astro';
+import Section from '@components/base/Section.astro';
+import BrandingImage from '@components/page/branding/BrandingImage.astro';
+import Layout from '@layouts/Layout.astro';
+
+const mods = ['behind_you', 'chatting', 'crash_patch', 'damage_tint', 'evergreen_h_u_d', 'glint_colorizer', 'keystrokes', 'overflow_animations', 'poly_blur', 'poly_nametag', 'poly_sprint', 'poly_time', 'poly_weather', 'vanilla_h_u_d'];
+
+function formatModName(name: string): string {
+	return name.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+}
+---
+
+<Layout>
+	<Section class="justify-center items-start pt-32">
+		<div class="flex flex-col justify-start items-start w-full text-navy-peony">
+			<Header>
+				Polyfrost Branding
+			</Header>
+			<Paragraph>
+				We usually don't mind people mentioning our name or using our logos - in fact, we really appreciate the free promo. All we ask is to use our provided work responsibly, and contact us first.
+			</Paragraph>
+		</div>
+	</Section>
+
+	<Section wrapperClass="bg-blue-75" class="py-12 flex-col">
+		<div class="w-full text-navy-peony text-center flex flex-col justify-center items-center">
+			<Header>
+				Our Brand
+			</Header>
+			<Paragraph class="max-w-[500px]">
+				Introducing... our brand logos in all of their glory. We just ask to not edit, distort, recolor, or reconfigure any assets below.
+			</Paragraph>
+		</div>
+
+		<div class="flex flex-col gap-y-12 mt-8">
+			<div class="flex flex-col">
+				<Header size="sm" class="text-navy-peony">
+					Our Logo, with text
+				</Header>
+				<Paragraph class="max-w-[500px] text-gray-400" size="xs">
+					Super cool.
+				</Paragraph>
+				<div class="flex flex-row justify-evenly items-center flex-wrap my-8 gap-2">
+					<BrandingImage name="logo_1" type="logos" />
+					<BrandingImage name="logo_2" type="logos" />
+				</div>
+			</div>
+			<div class="flex flex-col">
+				<Header size="sm" class="text-navy-peony">
+					Our Logo, when you don't wanna read
+				</Header>
+				<Paragraph class="max-w-[500px] text-gray-400" size="xs">
+					Even cooler.
+				</Paragraph>
+				<div class="flex flex-row justify-evenly items-center flex-wrap my-8 gap-2">
+					<BrandingImage name="logo_3" type="logos" />
+					<BrandingImage name="logo_4" type="logos" />
+				</div>
+			</div>
+			<div class="flex flex-col">
+				<Header size="sm" class="text-navy-peony">
+					OneConfig logo, with text
+				</Header>
+				<Paragraph class="max-w-[500px] text-gray-400" size="xs">
+					The one and only.
+				</Paragraph>
+				<div class="flex flex-row justify-evenly items-center flex-wrap my-8 gap-2">
+					<BrandingImage name="logo_5" type="logos" />
+					<BrandingImage name="logo_6" type="logos" />
+				</div>
+			</div>
+			<div class="flex flex-col">
+				<Header size="sm" class="text-navy-peony">
+					OneConfig logo, when you don't wanna read
+				</Header>
+				<Paragraph class="max-w-[500px] text-gray-400" size="xs">
+					The one and only.
+				</Paragraph>
+				<div class="flex flex-row justify-evenly items-center flex-wrap my-8 gap-2">
+					<BrandingImage name="logo_7" type="logos" />
+					<BrandingImage name="logo_8" type="logos" />
+				</div>
+			</div>
+		</div>
+	</Section>
+
+	<Section wrapperClass="bg-[#11171C]" class="py-12 flex-col text-blue-100 gap-y-8">
+		<div class="flex flex-col items-start justify-start">
+			<Header size="md">
+				OneConfig badges
+			</Header>
+			<Paragraph size="sm" class="text-[#78818D]">
+				When you want to show off OneConfig in your mods. Credits to Devin's Badges for the design.
+			</Paragraph>
+			<div class="my-4 flex flex-row flex-wrap gap-2 text-white">
+				{Array.from({ length: 4 }, (_, i) => (
+					<BrandingImage background="transparent" name={`badge_${i + 1}`} type="badges" />
+				))}
+			</div>
+		</div>
+		<div class="flex flex-col items-start justify-start">
+			<Header size="md">
+				All of our mod icons
+			</Header>
+			<Paragraph size="sm" class="text-[#78818D]">
+				We have... a lot of those... (original EvergreenHUD logo by isXander)
+			</Paragraph>
+			<div class="my-4 flex flex-row flex-wrap gap-2 text-white">
+				{mods.map(mod => (
+					<BrandingImage nameFormatted={formatModName(mod)} background="transparent" name={mod} type="mods" />
+				))}
+			</div>
+		</div>
+	</Section>
+</Layout>
diff --git a/apps/website/src/pages/contact.astro b/apps/website/src/pages/contact.astro
new file mode 100644
index 0000000..aac214d
--- /dev/null
+++ b/apps/website/src/pages/contact.astro
@@ -0,0 +1,53 @@
+---
+import Button from '@components/base/Button.astro';
+import Header from '@components/base/Header.astro';
+import Paragraph from '@components/base/Paragraph.astro';
+import Section from '@components/base/Section.astro';
+import Icon from '@components/icons/Icon.astro';
+import Layout from '@layouts/Layout.astro';
+
+---
+
+<Layout>
+
+	<Section wrapperClass="min-h-screen" class="my-40 md:my-40 xl:my-20 2xl:my-20 justify-center items-center flex-col">
+		<Header size="xl" class="text-navy-peony text-center">Feeling social? Come chat with us</Header>
+		<Paragraph class="text-blue-gray max-w-2xl text-center">
+			We primarily connect with our community with Discord, however we regularly check Github as well.
+		</Paragraph>
+		<div class="flex flex-row flex-wrap p-5 w-full justify-center items-center gap-8">
+			{/* GitHub */}
+			<div class="bg-blue-75 flex flex-col justify-start items-center p-5 gap-y-0.5 rounded-2xl">
+				<Icon icon="github" size={48} class="text-blue-gray" />
+				<Header size="md" class="text-navy-peony mt-2">GitHub</Header>
+				<!-- <div class="flex flex-row items-center justify-center gap-x-1">
+					<span class="w-1.5 h-1.5 bg-green-300 rounded-full"></span>
+					<Paragraph size="sm" class="text-blue-gray">69 commits a week</Paragraph>
+				</div> -->
+
+				<Paragraph size="sm" class="text-blue-gray max-w-48 text-center my-4">
+					We love open source, so all of our projects are OSS. Anyone is welcome to contribute new features (and bugs) to our mods.
+				</Paragraph>
+
+				<Button style="secondary" href="http://github.com/Polyfrost/" iconLeft="code" size="sm" class="w-full">Contribute today</Button>
+			</div>
+
+			{/* Discord */}
+			<div class="bg-blue-75 flex flex-col justify-start items-center p-5 gap-y-0.5 rounded-2xl">
+				<Icon icon="discord" size={48} class="text-blue-gray" />
+				<Header size="md" class="text-navy-peony mt-2">Discord</Header>
+				<!-- <div class="flex flex-row items-center justify-center gap-x-1">
+					<span class="w-1.5 h-1.5 bg-green-300 rounded-full"></span>
+					<Paragraph size="sm" class="text-blue-gray">69 commits a week</Paragraph>
+				</div> -->
+
+				<Paragraph size="sm" class="text-blue-gray max-w-48 text-center my-4">
+					Join us today! It's the easiest way to chat with other members, suggest new features, and get support with your mods.
+				</Paragraph>
+
+				<Button style="secondary" href="/discord" iconLeft="chat" size="sm" class="w-full">Chat with us</Button>
+			</div>
+		</div>
+	</Section>
+
+</Layout>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 87ee0eb..c078345 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,195 +1,156 @@
 ---
-import Header from "@components/base/Header.astro";
-import Layout from "../layouts/Layout.astro";
-import Logo from "@components/logos/Logo.astro";
-import Section from "@components/base/Section.astro";
-import Button from "@components/base/Button.astro";
-
-import Paragraph from "@components/base/Paragraph.astro";
-import CodeBlock from "@components/base/CodeBlock.astro";
-
+import Button from '@components/base/Button.astro';
+import Header from '@components/base/Header.astro';
+import Link from '@components/base/Link.astro';
+import Paragraph from '@components/base/Paragraph.astro';
+import Section from '@components/base/Section.astro';
+import Icon from '@components/icons/Icon.astro';
+import configConst from '@config';
+import Layout from '@layouts/Layout.astro';
 ---
-
 <Layout>
-	<Section class="flex-col justify-center items-center h-screen md:h-4/5 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 iconLeft="download" text="Download" />
-			<Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" />
+	<Section wrapperClass="min-h-screen" class="relative isolate px-6 lg:px-8">
+		<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80 opacity-50">
+			<svg
+				class="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
+				viewBox="0 0 1155 678">
+				<path
+					fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
+					fill-opacity="0.3"
+					d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
+				/>
+				<defs>
+					<linearGradient id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
+						<stop stop-color="#2463EB" />
+						<stop offset={1} stop-color="#0080B5" />
+					</linearGradient>
+				</defs>
+			</svg>
 		</div>
-	</Section>
-
-	<div class="flex flex-col gap-40">
-		<Section tabindex="0">
-			<div slot="left">
-				<Header size="lg" class="text-navy-peony">Forge is complicated</Header>
-				<Paragraph size="sm" 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 class="mx-auto max-w-3xl py-36 lg:py-48">
+			<div class="mt-4 mb-8 flex md:justify-center">
+				<div class="flex flex-row justify-center items-center font-medium relative rounded-full py-1 px-3 text-sm text-blue-450 hover:text-blue-600 border border-1 border-gray-800/20 hover:border-blue-600">
+					Introducing OneConfig
+					<Link href="/projects/oneconfig" class="transition-none">
+						<span class="absolute inset-0" aria-hidden="true"></span>
+						<Icon icon="link-external" size={18} class="ml-1"></Icon>
+					</Link>
+				</div>
 			</div>
-			<div slot="right" class="w-3/4 md:w-auto">
-				<svg class="w-full h-full" width="270" height="195" viewBox="0 0 270 195" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<rect x="42" width="208" height="48" rx="3" fill="black" fill-opacity="0.55"/>
-					<path d="M62.4492 31V29H64.4492V31H62.4492ZM64.4492 29V27V25H66.4492V27V29H64.4492ZM66.4492 25V23H68.4492V25H66.4492ZM68.4492 23V21V19H70.4492V21V23H68.4492ZM70.4492 19V17H72.4492V19H70.4492ZM83.457 29H85.457V31H83.457H81.457H79.457H77.457V29H79.457H81.457H83.457ZM77.457 29H75.457V27V25V23H77.457V25H79.457H81.457H83.457V23H85.457V25V27H83.457H81.457H79.457H77.457V29ZM83.457 23H81.457H79.457H77.457V21H79.457H81.457H83.457V23ZM92.4648 31V29H94.4648V31H92.4648ZM94.4648 29V27H96.4648V29H94.4648ZM92.4648 29H90.4648V27H92.4648V29ZM96.4648 27V25V23V21H98.4648V23V25V27H96.4648ZM90.4648 27H88.4648V25V23V21H90.4648V23V25V27ZM109.473 29H111.473V31H109.473H107.473H105.473H103.473V29H105.473H107.473H109.473ZM103.473 29H101.473V27V25V23H103.473V25H105.473H107.473H109.473V23H111.473V25V27H109.473H107.473H105.473H103.473V29ZM109.473 23H107.473H105.473H103.473V21H105.473H107.473H109.473V23ZM114.48 31V29V27V25V23V21H116.48V23H118.48V25H116.48V27V29V31H114.48ZM122.48 25V23H124.48V25H122.48ZM122.48 23H120.48H118.48V21H120.48H122.48V23ZM133.488 31H135.488V33H133.488H131.488H129.488H127.488V31H129.488H131.488H133.488ZM135.488 31V29H133.488H131.488H129.488V27H127.488V25V23H129.488V21H131.488H133.488H135.488H137.488V23V25V27V29V31H135.488ZM133.488 27H135.488V25V23H133.488H131.488H129.488V25V27H131.488H133.488ZM140.496 31V29V27V25V23V21H142.496V23H144.496V25H142.496V27V29V31H140.496ZM148.496 25V23H150.496V25H148.496ZM148.496 23H146.496H144.496V21H146.496H148.496V23ZM161.504 29H163.504V31H161.504H159.504H157.504H155.504V29H157.504H159.504H161.504ZM155.504 29H153.504V27V25V23H155.504V25H157.504H159.504H161.504V23H163.504V25V27H161.504H159.504H157.504H155.504V29ZM161.504 23H159.504H157.504H155.504V21H157.504H159.504H161.504V23ZM174.512 29H176.512V31H174.512H172.512H170.512H168.512V29H170.512H172.512H174.512ZM168.512 29H166.512V27V25V23H168.512V25H170.512H172.512H174.512V23H176.512V25V27H174.512H172.512H170.512H168.512V29ZM174.512 23H172.512H170.512H168.512V21H170.512H172.512H174.512V23ZM187.52 31V29V27V25V23H189.52V25V27V29V31H187.52ZM179.52 31V29V27V25V23V21H181.52H183.52H185.52H187.52V23H185.52H183.52H181.52V25V27V29V31H179.52ZM200.527 31V29V27V25V23H202.527V25V27V29V31H200.527ZM192.527 31V29V27V25V23V21V19V17H194.527V19V21V23H196.527V25H194.527V27V29V31H192.527ZM200.527 23H198.527H196.527V21H198.527H200.527V23ZM213.535 31H211.535H209.535H207.535V29H209.535H211.535H213.535V27V25V23V21H215.535V23V25V27V29V31H213.535ZM207.535 29H205.535V27V25V23V21H207.535V23V25V27V29ZM226.543 31H224.543H222.543H220.543V29H222.543H224.543H226.543V27V25H224.543V23H226.543V21V19V17H228.543V19V21V23V25V27V29V31H226.543ZM220.543 29H218.543V27V25V23H220.543V25V27V29ZM224.543 23H222.543H220.543V21H222.543H224.543V23Z" fill="white"/>
-					<rect x="217" y="74" width="53" height="48" rx="3" fill="black" fill-opacity="0.55"/>
-					<path d="M232.996 103H234.996V105H232.996H230.996H228.996V103V101V99V97V95V93V91H230.996H232.996H234.996V93H232.996H230.996V95V97V99V101V103H232.996ZM245.996 105V103V101V99H247.996V101V103V105H245.996ZM237.996 105V103V101V99V97V95V93V91H239.996V93V95H241.996H243.996V97H245.996V99H243.996V97H241.996H239.996V99V101V103V105H237.996ZM243.996 95V93H245.996V95H243.996ZM245.996 93V91H247.996V93H245.996ZM255.004 105H253.004H251.004V103H253.004H255.004V101V99V97V95V93H253.004H251.004V91H253.004H255.004H257.004V93V95V97V99V101V103V105H255.004Z" fill="white"/>
-					<rect x="145" y="148" width="73" height="47" rx="3" fill="black" fill-opacity="0.55"/>
-					<path d="M164.484 179V177V175V173V171V169H162.484V171H160.484V169H162.484V167H164.484V165H166.484V167V169V171V173V175V177V179H164.484ZM156.484 179V177V175V173V171V169V167V165H158.484V167H160.484V169H158.484V171V173V175V177V179H156.484ZM175.492 177H177.492V179H175.492H173.492H171.492V177H173.492H175.492ZM177.492 177V175V173V171H179.492V173V175V177H177.492ZM171.492 177H169.492V175V173V171H171.492V173V175V177ZM177.492 171H175.492H173.492H171.492V169H173.492H175.492H177.492V171ZM190.5 179H188.5H186.5H184.5V177H186.5H188.5H190.5V175V173H188.5V171H190.5V169V167V165H192.5V167V169V171V173V175V177V179H190.5ZM184.5 177H182.5V175V173V171H184.5V173V175V177ZM188.5 171H186.5H184.5V169H186.5H188.5V171ZM201.508 177H203.508V179H201.508H199.508H197.508H195.508V177H197.508H199.508H201.508ZM203.508 177V175H205.508V177H203.508ZM203.508 175H201.508H199.508H197.508V173H199.508H201.508H203.508V175ZM197.508 173H195.508V171H197.508V173ZM203.508 169H205.508V171H203.508H201.508H199.508H197.508V169H199.508H201.508H203.508Z" fill="white"/>
-					<rect y="81" width="141" height="48" rx="3" fill="black" fill-opacity="0.55"/>
-					<path d="M20.9805 112V110H22.9805V112H20.9805ZM22.9805 110V108V106H24.9805V108V110H22.9805ZM24.9805 106V104H26.9805V106H24.9805ZM26.9805 104V102V100H28.9805V102V104H26.9805ZM28.9805 100V98H30.9805V100H28.9805ZM41.9883 106V104H43.9883V106H41.9883ZM39.9883 110H41.9883V112H39.9883H37.9883H35.9883V110H37.9883H39.9883ZM41.9883 110V108H43.9883V110H41.9883ZM35.9883 110H33.9883V108V106V104H35.9883V106V108V110ZM41.9883 104H39.9883H37.9883H35.9883V102H37.9883H39.9883H41.9883V104ZM54.9961 112V110V108V106V104H56.9961V106V108V110V112H54.9961ZM46.9961 112V110V108V106V104V102V100V98H48.9961V100V102V104H50.9961V106H48.9961V108V110V112H46.9961ZM54.9961 104H52.9961H50.9961V102H52.9961H54.9961V104ZM68.0039 112H66.0039H64.0039H62.0039V110H60.0039V108H62.0039V106H64.0039H66.0039H68.0039V104H70.0039V106V108V110V112H68.0039ZM66.0039 110H68.0039V108H66.0039H64.0039H62.0039V110H64.0039H66.0039ZM68.0039 104H66.0039H64.0039H62.0039V102H64.0039H66.0039H68.0039V104ZM77.0117 112V110H79.0117V112H77.0117ZM77.0117 110H75.0117V108V106V104H73.0117V102H75.0117V100V98H77.0117V100V102H79.0117V104H77.0117V106V108V110ZM86.0117 112V110H88.0117V112H86.0117ZM86.0117 110H84.0117V108V106V104H82.0117V102H84.0117V100V98H86.0117V100V102H88.0117V104H86.0117V106V108V110ZM91.0117 112V110V108V106V104V102H93.0117V104V106V108V110V112H91.0117ZM91.0117 100V98H93.0117V100H91.0117ZM104.004 112V110V108V106V104H106.004V106V108V110V112H104.004ZM96.0039 112V110V108V106V104V102H98.0039H100.004H102.004H104.004V104H102.004H100.004H98.0039V106V108V110V112H96.0039ZM115.012 112H117.012V114H115.012H113.012H111.012H109.012V112H111.012H113.012H115.012ZM117.012 112V110H115.012H113.012H111.012V108H109.012V106V104H111.012V102H113.012H115.012H117.012H119.012V104V106V108V110V112H117.012ZM115.012 108H117.012V106V104H115.012H113.012H111.012V106V108H113.012H115.012Z" fill="white"/>
-				</svg>
+			<div class="text-left md:text-center">
+				<Header size="xxl" class="tracking-tight text-navy-peony max-sm:!text-header">
+					Passionate creators redefining the modding community
+				</Header>
+				<Paragraph class="mt-6 text-lg leading-8 text-navy-peony">
+					With a dedicated team of developers and a passionate community of players, Polyfrost continues to push the boundaries of what's possible in Minecraft modding.
+				</Paragraph>
+				<div class="mt-7 flex items-center justify-start md:justify-center gap-x-6">
+					<Button style="secondary" href="/about" iconLeft="book-open">About us</Button>
+					<Button style="secondary" href="/contact" iconLeft="chat">Socials</Button>
+				</div>
 			</div>
-		</Section>
-
-		<Section tabindex="0" colReverse={false}>
-			<div slot="left" class="w-1/2 md:w-auto">
-				<svg class="w-full h-full" width="157" height="140" viewBox="0 0 257 240" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<path d="M158.702 238.846H97.5448C91.7442 238.846 85.9689 238.08 80.3793 236.568C74.8802 235.081 69.5885 232.881 64.6511 230.029C59.7136 227.178 55.1637 223.693 51.1276 219.673C47.025 215.587 43.4751 210.968 40.5764 205.943L9.95514 152.866C7.05923 147.847 4.83842 142.466 3.35447 136.875C1.89454 131.374 1.1543 125.696 1.1543 120C1.1543 114.303 1.89454 108.626 3.35447 103.125C4.83842 97.5334 7.05923 92.1532 9.95514 87.1336L40.5765 34.0567C43.4751 29.0323 47.0251 24.4128 51.1276 20.3265C55.1637 16.3064 59.7137 12.8221 64.6511 9.97049C69.5885 7.11881 74.8802 4.91888 80.3793 3.43182C85.9689 1.92024 91.7443 1.15381 97.5448 1.15381H158.702C164.502 1.15381 170.277 1.92024 175.867 3.43182C181.366 4.91888 186.658 7.11881 191.595 9.97049C196.533 12.8222 201.083 16.3064 205.119 20.3265C209.221 24.4128 212.771 29.0323 215.67 34.0567L246.291 87.1336C249.187 92.1532 251.408 97.5334 252.892 103.125C254.352 108.626 255.092 114.303 255.092 120C255.092 125.696 254.352 131.374 252.892 136.875C251.408 142.466 249.187 147.847 246.291 152.866L215.67 205.943C212.771 210.968 209.221 215.587 205.119 219.673C201.083 223.693 196.533 227.178 191.595 230.029C186.658 232.881 181.366 235.081 175.867 236.568C170.278 238.08 164.502 238.846 158.702 238.846Z" fill="#F3F8FF"/>
-					<path d="M97.5444 2.30769C91.8455 2.30769 86.1716 3.06065 80.6801 4.54566C75.2775 6.00668 70.0786 8.16801 65.2277 10.9697C60.3769 13.7714 55.9068 17.1945 51.9415 21.1441C47.9109 25.1586 44.4234 29.697 41.5755 34.6333L10.9542 87.7102C8.10903 92.6419 5.92719 97.9277 4.46932 103.421C3.03497 108.825 2.30771 114.403 2.30771 120C2.30771 125.597 3.03497 131.175 4.46932 136.579C5.92719 142.072 8.10903 147.358 10.9542 152.29L41.5755 205.367C44.4233 210.303 47.9109 214.841 51.9414 218.856C55.9067 222.805 60.3769 226.229 65.2277 229.03C70.0786 231.832 75.2775 233.993 80.6801 235.454C86.1715 236.939 91.8455 237.692 97.5444 237.692H158.701C164.4 237.692 170.074 236.939 175.566 235.454C180.968 233.993 186.167 231.832 191.018 229.03C195.869 226.229 200.339 222.805 204.304 218.856C208.335 214.841 211.822 210.303 214.67 205.367L245.291 152.29C248.137 147.358 250.318 142.072 251.776 136.579C253.211 131.175 253.938 125.597 253.938 120C253.938 114.403 253.211 108.825 251.776 103.421C250.318 97.9277 248.137 92.6419 245.291 87.7102L214.67 34.6333C211.822 29.697 208.335 25.1586 204.304 21.1441C200.339 17.1945 195.869 13.7714 191.018 10.9697C186.167 8.16801 180.968 6.00668 175.566 4.54566C170.074 3.06065 164.4 2.30769 158.701 2.30769H97.5444ZM97.5444 0H158.701C182.618 0 204.717 12.7636 216.669 33.4801L247.29 86.557C259.231 107.254 259.231 132.746 247.29 153.443L216.669 206.52C204.717 227.236 182.618 240 158.701 240H97.5444C73.6274 240 51.5284 227.236 39.5766 206.52L8.95528 153.443C-2.98509 132.746 -2.98509 107.254 8.95528 86.557L39.5766 33.4801C51.5284 12.7636 73.6274 0 97.5444 0Z" fill="white"/>
-					<path d="M164.75 101.226V93.7499C164.75 73.4536 148.297 57 128 57C107.703 57 91.25 73.4536 91.25 93.7499V101.226C81.6952 105.396 75.5138 114.825 75.5 125.25V156.75C75.5172 171.24 87.2596 182.983 101.75 183H154.25C168.74 182.983 180.482 171.24 180.5 156.75V125.25C180.486 114.825 174.305 105.396 164.75 101.226ZM133.25 146.25C133.25 149.15 130.899 151.5 128 151.5C125.1 151.5 122.75 149.15 122.75 146.25V135.75C122.75 132.851 125.1 130.5 128 130.5C130.899 130.5 133.25 132.851 133.25 135.75V146.25ZM154.25 99.0001H101.75V93.7502C101.75 79.2528 113.502 67.5001 128 67.5001C142.498 67.5001 154.25 79.2525 154.25 93.7502V99.0001Z" fill="url(#paint0_linear_14_112)"/>
-					<defs>
-					<linearGradient id="paint0_linear_14_112" x1="78.829" y1="105.018" x2="172.945" y2="184.537" gradientUnits="userSpaceOnUse">
-					<stop stop-color="#1F6AED"/>
-					<stop offset="1" stop-color="#1051C2"/>
+		</div>
+		<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-35rem)] opacity-50">
+			<svg
+				class="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
+				viewBox="0 0 1155 678">
+				<path
+					fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
+					fill-opacity=".3"
+					d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
+				/>
+				<defs>
+					<linearGradient id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
+						<stop stop-color="#2463EB" />
+						<stop offset={1} stop-color="#0080B5" />
 					</linearGradient>
-					</defs>
-				</svg>
-			</div>
-
-			<div slot="right">
-				<Header size="lg" class="text-navy-peony">Clients are locked-down</Header>
-				<Paragraph size="sm" class="text-gray-400 max-w-[500px]">While they improve usability, they're slow to adopt new mods absent from the community and force unwanted features onto users to profit off of them.</Paragraph>
+				</defs>
+			</svg>
+		</div>
+	</Section>
+	<Section wFull maxWidth="1024px" class="mt-0 sm:-mt-52 max-sm:!px-0 !px-5 items-center justify-center">
+		<div class="flex flex-col justify-center items-center py-12 px-0 sm:py-12">
+			<div class="flex flex-wrap flex-col-reverse md:flex-row justify-center lg:justify-normal lg:flex-nowrap relative isolate overflow-hidden bg-blue-75 py-6 md:shadow sm:rounded-3xl px-6 gap-6 lg:gap-20 lg:px-8 lg:py-0 z-50 md:ring-gray-400/50 md:ring-1">
+				<div class="flex flex-col justify-center items-center lg:justify-start lg:items-start max-w-screen-md text-center lg:py-8 lg:text-left">
+					<div class="flex flex-col justify-center items-start">
+						<Icon icon="oneconfig" size={38} class="hidden md:block text-blue-500 mb-4"></Icon>
+						<Header size="lg" class="text-3xl font-semibold tracking-tight text-navy-peony">
+							OneConfig has <br>finally arrived.
+						</Header>
+					</div>
+					<Paragraph class="mt-6 text-lg leading-8 text-gray-700">
+						Learn more about what OneConfig is, and how it's revolutionized modding and user experience.
+					</Paragraph>
+					<div class="mt-10 flex items-center justify-center gap-x-4 lg:justify-start">
+						<Button href="/projects/oneconfig" size="sm" iconLeft="oneconfig" style="secondary">Learn more</Button>
+						<Button href="/mods" size="sm" iconLeft="link-external" style="secondary">Discover mods</Button>
+					</div>
+				</div>
+				<div class="flex flex-col justify-center items-center">
+					<img
+						class="max-w-80 rounded-md bg-white/5 ring-1 ring-white/10 pointer-events-none"
+						src="/media/oneconfig/page_media_3.svg"
+						alt="OneConfig Screenshot"
+						width={912}
+						height={540}
+					/>
+				</div>
 			</div>
-		</Section>
+		</div>
+	</Section>
 
-		<Section tabindex="0">
-			<div slot="left">
-				<Header size="lg" class="text-navy-peony">Best of both worlds</Header>
-				<Paragraph size="sm" 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>
+	<Section wFull maxWidth="1024px" wrapperClass="bg-blue-100 mb-40" class="-mt-20 flex flex-col">
+		<div class="relative isolate overflow-hidden pt-24 mt-10 lg:-ml-10">
+			<div class="mx-auto max-w-7xl">
+				<Header class="text-5xl font-bold tracking-tight text-navy-peony mt-8">Who we are</Header>
+				<Paragraph class="mt-3 text-md leading-8 text-navy-peony">
+					We're a group of passionate, self-driven designers, developers, and modders creating mods and libraries for the Minecraft community.
+				</Paragraph>
+				<div class="mt-3 flex flex-row gap-y-6 gap-x-8 text-base font-semibold leading-7 text-gray-600 lg:gap-x-10">
+					<Button style="secondary" size="sm" iconLeft="user">Meet the team</Button>
+				</div>
 			</div>
-
-			<div slot="right" class="w-3/4 md:w-auto">
-				<svg class="w-full h-full" width="615" height="225" viewBox="0 0 615 225" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<g filter="url(#filter0_d_14_1169)">
-					<path d="M328.885 14H240.347C232.588 14 226.299 20.2895 226.299 28.0479V39.6989C226.299 47.4573 232.588 53.7468 240.347 53.7468H328.885C336.644 53.7468 342.933 47.4573 342.933 39.6989V28.0479C342.933 20.2895 336.644 14 328.885 14Z" fill="#2A2C30"/>
-					<path d="M328.885 14.8781H240.347C233.073 14.8781 227.177 20.7744 227.177 28.048V39.6989C227.177 46.9725 233.073 52.8688 240.347 52.8688H328.885C336.159 52.8688 342.055 46.9725 342.055 39.6989V28.048C342.055 20.7744 336.159 14.8781 328.885 14.8781Z" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
-					</g>
-					<path opacity="0.84" d="M267.154 31.8743H266.072C266.015 31.5814 265.902 31.3025 265.738 31.0534C265.583 30.8216 265.388 30.6196 265.162 30.4572C264.933 30.2947 264.679 30.1719 264.409 30.0937C264.132 30.0118 263.844 29.9707 263.554 29.9717C263.037 29.966 262.528 30.1082 262.089 30.3817C261.632 30.6763 261.27 31.0959 261.045 31.5907C260.77 32.2065 260.638 32.8764 260.659 33.5504C260.638 34.2243 260.77 34.8942 261.045 35.51C261.27 36.0048 261.632 36.4245 262.089 36.719C262.529 36.9932 263.039 37.1355 263.558 37.1291C263.846 37.13 264.133 37.0892 264.409 37.0079C264.678 36.9291 264.931 36.806 265.158 36.6435C265.385 36.4808 265.58 36.2782 265.734 36.0456C265.898 35.797 266.011 35.5191 266.068 35.2273H267.154C267.082 35.6608 266.931 36.0773 266.709 36.4565C266.499 36.809 266.225 37.1195 265.902 37.3723C265.58 37.6252 265.216 37.8195 264.827 37.9465C264.417 38.079 263.988 38.1451 263.558 38.1423C262.84 38.154 262.134 37.9593 261.524 37.5812C260.915 37.1942 260.428 36.6434 260.119 35.9921C259.763 35.2284 259.589 34.3926 259.611 33.5504C259.59 32.707 259.765 31.8702 260.122 31.106C260.432 30.4547 260.919 29.9039 261.527 29.5169C262.138 29.1397 262.844 28.9459 263.561 28.9585C263.993 28.9556 264.423 29.022 264.834 29.1551C265.22 29.2826 265.582 29.4766 265.902 29.7285C266.225 29.9818 266.499 30.2925 266.709 30.6451C266.931 31.0241 267.082 31.4407 267.154 31.8743ZM271.484 38.1598C270.924 38.1721 270.371 38.0221 269.893 37.7279C269.432 37.4329 269.063 37.0139 268.828 36.5189C268.564 35.951 268.434 35.3296 268.448 34.7032C268.434 34.0723 268.564 33.4466 268.83 32.8743C269.064 32.3775 269.433 31.9568 269.895 31.6609C270.373 31.3667 270.925 31.2167 271.486 31.229C272.047 31.2167 272.599 31.3667 273.077 31.6609C273.539 31.9568 273.909 32.3775 274.142 32.8743C274.408 33.4466 274.538 34.0723 274.524 34.7032C274.538 35.3297 274.407 35.9511 274.142 36.5189C273.907 37.0141 273.537 37.4331 273.075 37.7279C272.598 38.0221 272.045 38.1721 271.484 38.1598ZM271.484 37.2344C271.892 37.2518 272.293 37.1277 272.62 36.8832C272.921 36.6396 273.149 36.3167 273.277 35.9508C273.423 35.5508 273.495 35.1279 273.491 34.7023C273.495 34.2756 273.422 33.8516 273.277 33.4503C273.148 33.0825 272.92 32.7576 272.618 32.5117C272.293 32.2638 271.891 32.1371 271.483 32.1535C271.074 32.1371 270.673 32.2638 270.347 32.5117C270.045 32.7576 269.817 33.0825 269.688 33.4503C269.543 33.8519 269.47 34.2761 269.474 34.7032C269.47 35.1288 269.542 35.5517 269.688 35.9517C269.818 36.3161 270.047 36.6371 270.349 36.8788C270.675 37.1249 271.076 37.2506 271.484 37.2344ZM276.094 38.0202V31.3159H277.089V32.3633H277.177C277.306 32.0186 277.544 31.7253 277.854 31.5275C278.191 31.3209 278.581 31.2169 278.976 31.2281C279.367 31.2137 279.753 31.3181 280.083 31.5275C280.386 31.7366 280.626 32.026 280.774 32.3633H280.845C281.016 32.0179 281.284 31.7303 281.617 31.5362C281.993 31.3229 282.42 31.2166 282.853 31.229C283.123 31.2188 283.392 31.2633 283.645 31.3597C283.898 31.4561 284.128 31.6025 284.323 31.79C284.531 32.0274 284.688 32.3042 284.786 32.6037C284.884 32.9033 284.921 33.2196 284.895 33.5337V38.0202H283.863V33.5328C283.883 33.337 283.857 33.1393 283.788 32.9552C283.718 32.7711 283.606 32.6057 283.462 32.4722C283.189 32.259 282.852 3