fix companies and improve landing page

src/routes/+layout.svelte

@@ -55,7 +55,11 @@
 	<nav class="bottom-border nav-bg sticky top-0 z-50 align-middle">
 		<div class="flex h-14 justify-between p-3">
 			<div class="pt-1">
-				<a class="hover-bg-color mr-1 rounded-md px-2 pb-2 pt-1.5" href="/">
+				<a
+					class="hover-bg-color mr-1 rounded-md px-2 pb-2 pt-1.5"
+					href="/"
+					onclick={(document.getElementById('mobile-menu').style.display = 'none')}
+				>
 					<img
 						alt="MarinoDev Logo"
 						class="inline-block"

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-
 	import { updateUserState } from '$lib/shared.svelte';
 
 	onMount(() => {
@@ -8,26 +7,36 @@
 	});
 </script>
 
-<div class="base-container">
-	<div class="content pt-16">
-		<img alt="MarinoDev Logo" class="mx-auto" height="256" src="/mdevtriangle.svg" width="256" />
-		<h1 class="text-center text-8xl font-semibold">CareerConnect</h1>
-		<h2 class="text-center text-3xl italic">Connecting Students with Opportunities</h2>
-		<h2 class="pt-8 text-center">We are a platform that connects students with employers.</h2>
-		<h2 class="text-center">
-			We provide an accessible way for students to find internships and co-op opportunities, and for
-			employers to find students to fill their positions.
-		</h2>
-		<p class="mt-16">
-			Create an account or sign in <a class="hyperlink-color hyperlink-underline" href="/signin"
-				>here</a
-			>.
+<div class="base-container flex flex-col items-center justify-center px-4 py-16">
+	<img alt="MarinoDev Logo" src="/mdevtriangle.svg" class="mb-8 h-32 w-32" />
+
+	<h1 class="mb-4 text-center text-5xl font-bold md:text-7xl">CareerConnect</h1>
+	<p class="low-emphasis-text mb-2 text-center text-xl italic md:text-2xl">
+		Connecting Students with Opportunities
 	</p>
-		<p>
-			Or head over to our postings page <a
-				class="hyperlink-color hyperlink-underline"
-				href="/postings">here</a
-			> to view all job opportunities.
+
+	<p class="low-emphasis-text mt-6 max-w-2xl text-center text-lg md:text-xl">
+		CareerConnect bridges the gap between students and employers by providing an accessible,
+		intuitive platform for internship and co-op discovery.
 	</p>
+
+	<div class="mt-10 flex flex-col gap-4 md:flex-row">
+		<a
+			href="/postings"
+			class="dull-primary-bg-color rounded-xl px-6 py-3 text-lg font-medium shadow transition"
+		>
+			Browse Job Postings
+		</a>
+
+		<a
+			href="/register"
+			class="dull-primary-border-color rounded-xl border px-6 py-3 text-lg font-medium shadow transition"
+		>
+			Create an Account
+		</a>
 	</div>
+
+	<p class="mt-12 text-sm text-gray-500">
+		Already have an account? <a href="/signin" class="text-blue-600 underline">Sign in here</a>.
+	</p>
 </div>

src/routes/companies/[company]/+page.svelte

@@ -3,6 +3,7 @@
 	import { userState } from '$lib/shared.svelte';
 	import { PERMISSIONS } from '$lib/consts';
 	import type { User } from '$lib/types';
+	import { MediaQuery } from 'svelte/reactivity';
 
 	function avatarFallback(e: Event, user: User): null {
 		(e.target as HTMLImageElement).src =
@@ -15,11 +16,13 @@
 			`https://ui-avatars.com/api/?background=random&format=svg&name=${encodeURIComponent(data.company.name!)}`;
 	}
 
+	const largeScreen = new MediaQuery('min-width: 768px');
+
 	let { data, form }: PageProps = $props();
 </script>
 
 <div class="base-container">
-	<div class="content py-4">
+	<div class="content my-2">
 		<div class="bottom-border mb-4 flex justify-between">
 			<div class="flex">
 				<img
@@ -44,8 +47,12 @@
 				</div>
 			{/if}
 		</div>
-		<div class="flex">
-			<div class="elevated separator-borders mr-4 inline-block h-min w-3/4 rounded">
+		<div class={largeScreen.current ? 'flex' : 'block'}>
+			<div
+				class="elevated separator-borders mr-2 h-min {largeScreen.current
+					? 'inline-block w-3/4'
+					: 'block w-full'} rounded"
+			>
 				<div class="p-3 font-semibold">
 					{data.postings
 						? data.company.name + "'s Postings"
@@ -68,7 +75,11 @@
 					</a>
 				{/each}
 			</div>
-			<div class="elevated separator-borders inline-block h-min w-1/4 rounded">
+			<div
+				class="elevated separator-borders h-min rounded {largeScreen.current
+					? 'inline-block w-1/4'
+					: 'mt-2 block w-full'}"
+			>
 				<div class="flex place-content-between">
 					<div class="p-3 font-semibold">Employers</div>
 				</div>