front page & contact fixes + route escape

src/lib/HoverableExternalLink.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <a href={url} class="font-normal text-lg flex flex-row group">
-	<div class="text-white group-hover:text-gray-300">
+	<div class="group-hover:text-gray-300">
 		<slot></slot>
 	</div>
 	<svg class="w-8 h-8 stroke-white stroke-1 block group-hover:hidden ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" >

src/lib/ProjectCard.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <a href="{ base }/{ link? `projects/${link}` : '/' }" class="flex flex-col group relative space">
-    <div class="aspect-h-8 aspect-w-16 relative">
+    <div class="aspect-h-8 aspect-w-16 lg:aspect-h-7 relative">
         <img src="{ base }{ img? img : '/' }" alt="" class="w-full object-cover rounded-3xl group-hover:scale-[0.99] duration-500">
 		<!--height is in the arrow direction-->
         <div class="transition rounded-full w-10 h-5 md:w-16 md:h-6 absolute left-4 bottom-6 md:left-8 md:bottom-10 top-auto bg-gray-300 justify-center items-center flex p-3 md:p-5 -rotate-45 group-hover:rotate-0 group-hover:h-10 md:group-hover:h-16 group-hover:-translate-y-3 duration-500">

src/routes/(contact)/+layout.svelte

@@ -0,0 +1,21 @@
+<style global lang="postcss">
+
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+
+</style>
+
+<script lang="ts">
+    import NavBar from "$lib/NavBar.svelte";
+	import { DarkMode } from "$lib/States";
+
+</script>
+
+
+<div class:dark={$DarkMode}>
+    <NavBar></NavBar>
+	<div>
+		<slot></slot>
+	</div>
+</div>

src/routes/(contact)/contact/+page.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+
+	import LightButton from '$lib/LightButton.svelte';
+	import HoverableExternalLink from '$lib/HoverableExternalLink.svelte';
+	import { base } from '$app/paths';
+</script>
+
+
+<div class="text-black p-8">
+
+	<div class="flex flex-col space-y-10 lg:space-y-0 lg:flex-row ">
+
+
+		<div class="flex flex-col mx-5 basis-1/2">
+			<div class="pb-8 font-light">
+				Contact
+			</div>
+			<div class="text-black text-6xl lg:text-7xl pb-8">
+				Let's build the future, one reality at a time.
+			</div>
+			<div class="flex flex-row">
+				<LightButton url="/contact">
+					JOIN US
+				</LightButton>
+			</div>
+		</div>
+
+
+		<div class="flex flex-row basis-1/2 text-black">
+
+			<div class="flex flex-col mx-10 space-y-5 min-w-50 basis-1/2">
+				<HoverableExternalLink url="https://discord.com/invite/kwU8yMYDqJ">
+					Discord
+				</HoverableExternalLink>
+				<HoverableExternalLink url="https://github.com/kennynahh/uw-reality-labs">
+					Github
+				</HoverableExternalLink>
+				<HoverableExternalLink url="https://www.linkedin.com/company/uw-reality-labs">
+					Linkedin
+				</HoverableExternalLink>
+				<HoverableExternalLink url="https://www.instagram.com/uwrealitylabs/">
+					Instagram
+				</HoverableExternalLink>
+			</div>
+		</div>
+	</div>
+
+
+	<div class="text-gray-400 pt-20">
+		© 2024 UW Reality Labs
+	</div>
+</div>

src/routes/(main)/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte → src/routes/(main)/+page.svelte

@@ -34,7 +34,7 @@
 		<ProjectCard img="/RealityFromScratchHeadset.jpg" title="Reality From Scratch" link="reality-from-scratch">
 			The modular, open-source VR headset for research and experimentation.
 		</ProjectCard>
-		<div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 h-[200]">
+		<div class="flex flex-col lg:flex-none lg:grid lg:grid-cols-2 space-y-2 lg:space-y-0 lg:space-x-2 h-[200]">
 			<ProjectCard img="/NorthStarHeadset.jpg" title="Project Northstar-DIY" link="project-north-star">
 				A fully self-contained AR device based on Ultraleap's Project North Star.
 			</ProjectCard>