From c5c841ec304d1bca0bd2cebcd2a327f92764bc33 Mon Sep 17 00:00:00 2001
From: Karen Chen <145727980+Karencheenn@users.noreply.github.com>
Date: Sun, 4 Jan 2026 13:53:43 -0500
Subject: [PATCH] [style] Enhance quick links design & Reorder items order on
 small screen

---
 src/routes/+page.svelte | 154 +++++++++++++++++++++++++++++++---------
 1 file changed, 122 insertions(+), 32 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b180508..094951e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,7 +7,6 @@
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import AffiliatedClubs from 'components/homepage/AffiliatedClubs.svelte';
 	import { fade } from 'svelte/transition';
-	import Button from 'components/Button.svelte';
 
 	/** loading things from the server side */
 	let { data } = $props();
@@ -18,8 +17,9 @@
 
 <!-- ECSESS Introduction -->
 <Section from="from-ecsess-black" to="to-ecsess-900">
-	<div class="place-self-center md:grid md:grid-cols-1 md:gap-6 lg:grid-cols-3">
-		<div class="place-self-center md:place-content-around lg:col-span-1 lg:m-8">
+	<div class="place-self-center grid min-h-screen grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-8 lg:items-stretch">
+		<!-- Description + Title -->
+		<div class="order-1 place-self-center lg:order-1 lg:col-span-1 lg:m-8 lg:self-stretch">
 			<div class="flex flex-col text-center lg:pt-2">
 				<p>
 					{#each 'We are ECSESS!' as char, i}
@@ -28,39 +28,128 @@
 						>
 					{/each}
 				</p>
-<div class="p-4">
-  <RichText value={data.description} />
 
-	<div class="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
-		<a href="/events"
-			class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-				text-center text-sm font-semibold text-ecsess-50 transition-colors
-				hover:bg-ecsess-600/50 hover:border-ecsess-300"
-		> Events
-		</a>
-		<a href="/r/trot5th" target="_blank" rel="noopener noreferrer"
-			class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-				text-center text-sm font-semibold text-ecsess-50 transition-colors
-				hover:bg-ecsess-600/50 hover:border-ecsess-300"
-		>Trottier Booking
-		</a>
-		<a href="/r/ctrlz" target="_blank" rel="noopener noreferrer"
-			class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-				text-center text-sm font-semibold text-ecsess-50 transition-colors
-				hover:bg-ecsess-600/50 hover:border-ecsess-300"
-		>Ctrl + Z
-		</a>
-	</div>
-</div>
+				<div class="p-4">
+					<RichText value={data.description} />
+				</div>
 
+				<!-- Quick Links (Desktop only) -->
+				<div class="hidden lg:block p-4">
+					<!-- Quick Links -->
+					<div class="mt-6">
+						<p
+							class="mt-8 mb-4 text-center text-base font-bold tracking-wide
+								text-ecsess-50
+								underline decoration-ecsess-200 decoration-2 underline-offset-8
+								drop-shadow-[0_6px_24px_rgba(0,0,0,0.75)]"
+						>Commonly searched for
+						</p>
+
+						<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+							<a
+								href="/events"
+								class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
+									text-center text-sm font-semibold text-ecsess-50 transition-colors
+									hover:bg-ecsess-600/50 hover:border-ecsess-300"
+							>ECSESS Events
+							</a>
+
+							<a
+								href="/r/trot5th"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
+									text-center text-sm font-semibold text-ecsess-50 transition-colors
+									hover:bg-ecsess-600/50 hover:border-ecsess-300"
+							>Trottier 5th booking
+							</a>
+
+							<a
+								href="/r/ctrlz"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="rounded-md border border-ecsess-200 bg-ecsess-500 px-2 py-2
+									text-center text-sm font-semibold text-ecsess-50 transition-colors
+									hover:bg-ecsess-600/50 hover:border-ecsess-300"
+							>Ctrl+Z (feedback) form
+							</a>
+
+							<a
+								aria-disabled="true"
+								tabindex="-1"
+								class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
+									text-center text-sm font-semibold text-ecsess-50 transition-colors
+									hover:bg-ecsess-600/50 hover:border-ecsess-300"
+							>Sponsorship
+							</a>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
-		<div class="m-2 place-content-around lg:col-span-2 lg:mx-12 lg:my-0">
-			<img
-				src={data.councilPhoto}
-				alt="ECSESS Council"
-				class="ring-ecsess-500 shadow-ecsess-400 hover:ring-ecsess-400 rounded-md shadow-md ring-4 transition-all"
-			/>
+
+		<!-- Image -->
+		<div class="order-2 m-2 lg:order-2 lg:col-span-2 lg:mx-12 lg:my-0">
+			<div class="lg:sticky lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
+				<img
+					src={data.councilPhoto}
+					alt="ECSESS Council"
+					class="ring-ecsess-500 shadow-ecsess-400 hover:ring-ecsess-400 rounded-md shadow-md ring-4 transition-all"
+				/>
+			</div>
+		</div>
+
+		<!-- Quick Links -->
+		<div class="order-3 p-4 lg:hidden">
+			<!-- Quick Links -->
+			<div class="mt-6">
+				<p
+					class="mt-8 mb-4 text-center text-base font-bold tracking-wide
+						text-ecsess-50
+						underline decoration-ecsess-200 decoration-2 underline-offset-8
+						drop-shadow-[0_6px_24px_rgba(0,0,0,0.75)]"
+				>Commonly searched for
+				</p>
+
+				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+					<a
+						href="/events"
+						class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
+							text-center text-sm font-semibold text-ecsess-50 transition-colors
+							hover:bg-ecsess-600/50 hover:border-ecsess-300"
+					>ECSESS Events
+					</a>
+
+					<a
+						href="/r/trot5th"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
+							text-center text-sm font-semibold text-ecsess-50 transition-colors
+							hover:bg-ecsess-600/50 hover:border-ecsess-300"
+					>Trottier 5th booking
+					</a>
+
+					<a
+						href="/r/ctrlz"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="rounded-md border border-ecsess-200 bg-ecsess-500 px-2 py-2
+							text-center text-sm font-semibold text-ecsess-50 transition-colors
+							hover:bg-ecsess-600/50 hover:border-ecsess-300"
+					>Ctrl+Z (feedback) form
+					</a>
+
+					<a
+						aria-disabled="true"
+						tabindex="-1"
+						class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
+							text-center text-sm font-semibold text-ecsess-50 transition-colors
+							hover:bg-ecsess-600/50 hover:border-ecsess-300"
+					>Sponsorship
+					</a>
+				</div>
+			</div>
 		</div>
 	</div>
 </Section>
@@ -77,6 +166,7 @@
 <Section from="from-ecsess-800" to="to-ecsess-950">
 	<AffiliatedClubs />
 </Section>
+
 <!-- FAQs and Sponsors -->
 <Section from="from-ecsess-950" to="to-ecsess-black">
 	<div class="grid w-full max-w-[80vw] grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">