From 2d79110182ef7b9a6d26ca0eac9f2cec83c35f38 Mon Sep 17 00:00:00 2001
From: Antoine Phan <antoine.phan@mail.mcgill.ca>
Date: Sat, 19 Jul 2025 18:41:46 -0400
Subject: [PATCH] New homepage look

---
 src/routes/+page.svelte | 69 ++++++++++++++++++++++++-----------------
 1 file changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3550d05..e1c21e2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,46 +9,59 @@
 
 	// Temporary progress bar. Update the value below!
 	import { Progress } from '@skeletonlabs/skeleton-svelte';
-	let progress = 60;
+	let progress = 63.33;
 </script>
 
 <title> McGill ECSESS </title>
 
 <!-- ECSESS Introduction -->
 <Section>
-	<div class="flex h-1/2 flex-col items-center justify-center text-center">
-		<p class="page-title">What is ECSESS?</p>
-		<div id="test">
-			<PortableText value={data.description} />
-		</div>
+	<div class="place-self-center-safe md:grid md:gap-6 lg:grid-cols-3">
+		<div class="m-8 w-full place-self-center md:place-content-around lg:col-span-1">
+			<div class="flex h-1/2 flex-col items-center justify-center text-center">
+				<div class="animate-pulse">
+					<p class="italic">
+						Development progress: {progress}%
+					</p>
+					<div id="progress" class="my-2 w-[80vw] border-2 lg:w-1/2">
+						<Progress value={progress} max={100} meterBg="bg-ecsess-200" height="h-4"></Progress>
+					</div>
+				</div>
 
-		<br />
-		<p class="italic">
-			Current development progress: {progress}%
-		</p>
-		<div id="progress" class="w-[80vw] lg:w-1/2 border-2">
-			<Progress value={progress} max={100} meterBg="bg-ecsess-200" height="h-4"></Progress>
+				<p class="page-title">What is ECSESS?</p>
+				<div class="p-4">
+					<PortableText value={data.description} />
+				</div>
+			</div>
+		</div>
+		<div class="m-4 place-content-around lg:col-span-2 lg:mx-12 lg:my-0">
+			<img
+				src={data.councilPhoto}
+				alt="ECSESS Council"
+				class="ring-ecsess-600 shadow-ecsess-400 rounded-2xl shadow-md ring-4"
+			/>
 		</div>
 	</div>
 </Section>
 
 <!-- Picture, FAQ -->
-<Section black>
-	<div class="md:grid md:grid-cols-3 md:gap-6">
-		<div class="col-span-2">
-			<h1>Our Student Council</h1>
-			<img src={data.councilPhoto} alt="ECSESS Council" />
-		</div>
-		<div class="col-span-1 place-self-center md:place-content-around m-6 w-full">
-			<h1>FAQ</h1>
-			<FaqAccordion entries={data.faqs} />
-		</div>
-	</div>
-</Section>
 <!-- Office Hours Calendar -->
-<Section>
-	<div>
-		<h1 class="text-2xl">Office Hours</h1>
-		<OhSchedule allOhs={data.allOHs}/>
+<Section black>
+	<div class="w-full">
+		<div class="">
+			<h1 id="office-hours">Office Hours</h1>
+			<OhSchedule allOhs={data.allOHs} />
+		</div>
+	</div>
+</Section>
+
+<Section>
+	<div class="col-span-1">
+		<h1>FAQ</h1>
+		<FaqAccordion entries={data.faqs} />
+	</div>
+	<div id="sponsors">
+		<h1>Sponsors</h1>
+		{'<Insert companies & brands/>'}
 	</div>
 </Section>