more index work

7 files changed, 142 insertions, 64 deletions

diff --git a/apps/website/public/media/index/index4.png b/apps/website/public/media/index/index4.png
new file mode 100644
index 0000000..4d6fa9f
--- /dev/null
+++ b/apps/website/public/media/index/index4.png
diff --git a/apps/website/public/media/index/index5.png b/apps/website/public/media/index/index5.png
new file mode 100644
index 0000000..5c60392
--- /dev/null
+++ b/apps/website/public/media/index/index5.png
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index 51d9fa1..4edf1ba 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -18,7 +18,7 @@ const {
 
 const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');
 
-const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : ''} px-5 md:p-0 flex gap-4${
+const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 md:p-0 flex gap-4${
 	 twoColumn ? ` ${maxWidth == 'none' ? 'justify-center' : 'justify-between md:justify-evenly lg:justify-between'} ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row md:items-center md:flex-row` : ''
 	 }${props.class ? ` ${props.class}` : ''}`;
 ---
diff --git a/apps/website/src/components/icons/impl/link-external.svg b/apps/website/src/components/icons/impl/link-external.svg
new file mode 100644
index 0000000..b431e85
--- /dev/null
+++ b/apps/website/src/components/icons/impl/link-external.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M17.5 7.5L17.5 2.5M17.5 2.5H12.5M17.5 2.5L10.8333 9.16667M8.33333 4.16667H6.5C5.09987 4.16667 4.3998 4.16667 3.86502 4.43915C3.39462 4.67883 3.01217 5.06129 2.77248 5.53169C2.5 6.06647 2.5 6.76654 2.5 8.16667V13.5C2.5 14.9001 2.5 15.6002 2.77248 16.135C3.01217 16.6054 3.39462 16.9878 3.86502 17.2275C4.3998 17.5 5.09987 17.5 6.5 17.5H11.8333C13.2335 17.5 13.9335 17.5 14.4683 17.2275C14.9387 16.9878 15.3212 16.6054 15.5608 16.135C15.8333 15.6002 15.8333 14.9001 15.8333 13.5V11.6667" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 6466d03..4df1c22 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -11,78 +11,112 @@ import { Code } from 'astro:components';
 
 ---
 
-	<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" />
+<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" />
+		</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>
+			<div slot="right" class="w-3/4 md:w-auto">
+			<!-- TODO: make proper file names and alt text -->
+				<img src="/media/index/index1.svg" alt="stuff" />
 			</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>
-				<div slot="right" class="w-3/4 md:w-auto">
-				<!-- TODO: make proper file names and alt text -->
-					<img src="/media/index/index1.svg" alt="stuff" />
-				</div>
-			</Section>
-
-			<Section tabindex="0" colReverse={false}>
-				<div slot="left" class="w-1/2 md:w-auto">
-					<img src="/media/index/index2.svg" alt="stuff" />
-				</div>
+		<Section tabindex="0" colReverse={false}>
+			<div slot="left" class="w-1/2 md:w-auto">
+				<img src="/media/index/index2.svg" alt="stuff" />
+			</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>
-				</div>
-			</Section>
+			<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>
+			</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>
-				</div>
+		<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>
+			</div>
 
-				<div slot="right" class="w-3/4 md:w-auto">
-					<img src="/media/index/index3.svg" alt="stuff" />
-				</div>
-			</Section>
+			<div slot="right" class="w-3/4 md:w-auto">
+				<img src="/media/index/index3.svg" alt="stuff" />
+			</div>
+		</Section>
 
-			<Section maxWidth="1000px" wrapperClass="bg-blue-100" wFull={false} class="md:py-20 gap-4 pr-2">
-				<div slot="left" class='pr-2'>
-					<Code code={`
-	public class MyConfig {
-    	@Switch(name = "Sub Switch", type = OptionType.SWITCH)
-    	public static boolean subSwitch = false;
+		<Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="md:py-20 gap-4 pr-2">
+			<div slot="left" class='pr-2'>
+				<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
-        	});
-    	}
+	public MyConfig() {
+		super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
+		addDependency("subSwitch", () -> {
+			// Do stuff here
+		});
 	}
-					`} lang={'java'}/>
+}`} lang={'java'}/>
+			</div>
+
+			<div slot="right" class="flex flex-col gap-2">
+				<Header size="xl" class="text-blue-500">Written for developers</Header>
+				<Paragraph class="text-blue-400 max-w-[500px]">
+					With Polyfrost's simple APIs, it's easy to integrate your mods into Polyfrost something
+				</Paragraph>
+				<div class="flex">
+					<Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" />
 				</div>
+			</div>
+		</Section>
 
-				<div slot="right" class="flex flex-col gap-2">
-					<Header size="xl" class="text-blue-500">Written for developers</Header>
-					<Paragraph class="text-blue-400 max-w-[500px]">
-						With Polyfrost's simple APIs, it's easy to integrate your mods into Polyfrost something
-					</Paragraph>
-					<div class="flex">
-						<Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" />
-					</div>
+		<Section maxWidth="1120px" wrapperClass="bg-blue-100" wFull={false} class="md:py-20 gap-4 pr-2">
+			<div slot="left" class="flex flex-col gap-2">
+				<Header size="xl" class="text-blue-500">Designed for users</Header>
+				<Paragraph class="text-blue-400 max-w-[500px]">
+					Lorem ipsum dolor sit amet consectetur. Viverra a pulvinar eu pharetra. Porta feugiat purus blandit mauris ipsum eu.
+				</Paragraph>
+				<div class="flex">
+					<Button iconLeft="download" style="secondary" text="Download" />
 				</div>
-			</Section>
-		</div>
-	</Layout>
+			</div>
+			<div slot="right">
+				<!-- TODO: figure out non-arbitrary values -->
+				<img src="/media/index/index4.png" class="h-[285px] rounded-2xl" />
+			</div>
+		</Section>
+
+		<Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]">
+			<img src="/media/index/index5.png" class="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">
+				Lorem ipsum dolor sit amet consectetur. Viverra a pulvinar eu pharetra. Porta feugiat purus blandit mauris ipsum eu.
+			</Paragraph>
+		</Section>
+
+		<Section tabindex="0" wrapperClass="bg-blue-100" class="md:py-20 gap-4 pr-2">
+			<div slot="left" class="flex flex-col gap-2">
+				<Header size="xl" class="text-blue-500">With many fabulous mods</Header>
+				<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>
+			</div>
+		</Section>
+	</div>
+</Layout>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 0bbfc2e..e21cf89 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -23,3 +23,41 @@
 		@apply text-[14px] md:text-[16px];
 	}
 }
+
+/* Codeblocks */
+.astro-code {
+	padding: 10px;
+	border-radius: 16px;
+	border: 1px solid rgba(65, 74, 88, 1);
+}
+.astro-code code {
+	white-space: pre-wrap;
+	padding: 10px;
+	padding-bottom: 0;
+	color: #546E7A;
+}
+.astro-code code::before {
+	counter-reset: listing;
+}
+.astro-code code span {
+	font-family: 'Roboto Mono', monospace !important;
+}
+.astro-code code span.line {
+	counter-increment: listing;
+	text-align: left;
+	float: left;
+	clear: left;
+	font-size: 12px;
+}
+.astro-code code span.line::before {
+	content: counter(listing) " ";
+	display: inline-block;
+	float: left;
+	width: 2em;
+	padding: 0;
+	margin-left: auto;
+	/* margin-right: 10px; */
+	text-align: right;
+	font-family: 'Roboto Mono', monospace !important;
+	font-size: 12px;
+}
diff --git a/apps/website/tailwind.config.cjs b/apps/website/tailwind.config.cjs
index 41cd35d..1cfea3a 100644
--- a/apps/website/tailwind.config.cjs
+++ b/apps/website/tailwind.config.cjs
@@ -64,6 +64,9 @@ module.exports = {
 			'body': '1rem', // 16px
 			'body-lg': '1.063rem', // 17px
 		},
+		fontFamily: {
+			'mono': ['"Roboto Mono"', 'monospace'],
+		},
 		extend: {},
 	},
 	plugins: [],