From f9fbca9531b9bad4848fafe0efa49ff9459c871e Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Sun, 25 Jan 2026 01:25:16 -0500
Subject: [PATCH] Styling updates, overhaul main landing page

---
 src/app.css                                   |   6 +-
 src/components/RichText.svelte                |   2 +-
 .../homepage/AffiliatedGroups.svelte          | 155 ++++++++----------
 src/routes/+page.svelte                       |  79 ++++-----
 4 files changed, 118 insertions(+), 124 deletions(-)

diff --git a/src/app.css b/src/app.css
index 7cd4c18..ef0b389 100644
--- a/src/app.css
+++ b/src/app.css
@@ -28,14 +28,14 @@
 	--color-ecsess-black: #1f1f1f;
 	--color-ecsess-black-hover: #161917;
 
-	--animate-wiggle: wiggle 0.3s ease-in-out infinite;
+	--animate-wiggle: wiggle 0.5s ease-in-out 1;
 	@keyframes wiggle {
 		0%,
 		100% {
-			transform: rotateY(-3deg);
+			transform: rotateY(-2.4deg);
 		}
 		50% {
-			transform: rotateY(3deg);
+			transform: rotateY(2.4deg);
 		}
 	}
 }
diff --git a/src/components/RichText.svelte b/src/components/RichText.svelte
index b6662c9..c5a8bd0 100644
--- a/src/components/RichText.svelte
+++ b/src/components/RichText.svelte
@@ -4,6 +4,6 @@
 	let { value } = $props();
 </script>
 
-<div class="flex flex-col justify-center-safe">
+<div class="flex flex-col justify-center-safe typography">
 	<PortableText {value} />
 </div>
diff --git a/src/components/homepage/AffiliatedGroups.svelte b/src/components/homepage/AffiliatedGroups.svelte
index ad8e1f9..4db6785 100644
--- a/src/components/homepage/AffiliatedGroups.svelte
+++ b/src/components/homepage/AffiliatedGroups.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Globe, Instagram, Wrench, Zap, CodeXml, Podcast } from '@lucide/svelte';
+	import { Globe, Instagram, Wrench, Users, CodeXml, Cpu } from '@lucide/svelte';
 
 	// All icons from @lucide/svelte share the same component type; reuse one for typing
 	type IconComponent = typeof Wrench;
@@ -17,16 +17,11 @@
 		{
 			name: 'Code.Jam()',
 			description:
-				"McGill Engineering's largest annual hackathon. A 48-hour programming competition where students create innovative solutions to real-world problems.",
+				"McGill Engineering's largest annual hackathon, a 36-hour programming competition where students create innovative projects!",
 			website: 'https://codejam.mcgilleus.ca/',
 			instagram: 'https://www.instagram.com/mcgillcodejam/',
 			icon: CodeXml,
-			features: [
-				'Biggest Hackathon in Engineering',
-				'Great prizes',
-				'Cool swags and merch',
-				'Networking opportunities'
-			]
+			features: ['Biggest Hackathon in Engineering', 'Great prizes', 'Networking opportunities']
 		},
 		{
 			name: 'The Factory',
@@ -35,7 +30,16 @@
 			website: 'https://factory.mcgilleus.ca/',
 			instagram: 'https://www.instagram.com/thefactory_mcgill/',
 			icon: Wrench,
-			features: ['Student-run Lab Space', '3D Printing', 'Equipment Rental', 'Hardware Workshops']
+			features: ['Student-run Lab Space', '3D Printing', 'Hardware Workshops']
+		},
+		{
+			name: 'ECSESSBits',
+			description:
+				'First Year Council of the McGill Electrical, Computer, Software Engineering Student Society.',
+			website: '',
+			instagram: 'https://www.instagram.com/ecsessbits/',
+			icon: Users,
+			features: ['First Year Council', 'Fun Events', 'Study Sessions']
 		},
 		{
 			name: 'IEEE McGill',
@@ -43,114 +47,99 @@
 				'One of the largest IEEE student branches in Eastern Canada, offering professional development, networking, and industry connections.',
 			website: 'https://ieee.mcgilleus.ca/',
 			instagram: 'https://www.instagram.com/ieeemcgill/',
-			icon: Zap,
-			features: [
-				'Technical Talks',
-				'Arduino Workshops',
-				'IEEEXtreme Competition',
-				'Networking Events'
-			]
+			icon: Cpu,
+			features: ['Technical Talks', 'Arduino Workshops', 'Networking Events']
 		}
 	];
 </script>
 
 <div class="container mx-auto px-4">
 	<!-- Section Header -->
-	<div class="mb-12 text-center">
-		<h2 id="affiliated-clubs-title" class="text-ecsess-100 mb-4 text-4xl font-bold md:text-5xl">
+	<div class="my-12 text-center">
+		<h2 id="affiliated-clubs-title" class="text-ecsess-100 mb-2 text-4xl font-bold md:text-5xl">
 			Subcommittees & Affiliated Groups
 		</h2>
-		<p class="text-ecsess-200 mx-auto max-w-2xl text-lg">
+		<p class="text-ecsess-200 mx-auto max-w-2xl text-base">
 			Explore opportunities to enhance your skills, build innovative projects, and connect with the
 			engineering community through our subcommittees and affiliated groups.
 		</p>
 	</div>
 
-	<!-- Clubs Grid -->
-	<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+	<!-- Clubs Grid: 2x2 on large screens -->
+	<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
 		{#each groups as group, i (group.name)}
 			{@const Icon = group.icon}
 			<article
-				class="group bg-ecsess-950 shadow-ecsess-800 relative flex flex-col overflow-hidden rounded-2xl shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
+				class="bg-ecsess-950 border border-ecsess-800 flex flex-col overflow-hidden rounded-lg text-left"
 				aria-labelledby={`group-${i}-title`}
 			>
-				<!-- Decorative gradient bar -->
-				<div class="from-ecsess-400 via-ecsess-500 to-ecsess-600 h-2 bg-gradient-to-r"></div>
+				<div class="flex flex-1 flex-col p-7 md:p-8">
+					<!-- Header: icon + name -->
+					<header class="mb-5 flex items-center justify-start gap-4">
+						<div
+							class="bg-ecsess-800 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl"
+						>
+							<Icon
+								class="text-ecsess-300 size-7"
+								strokeWidth={2.5}
+								aria-hidden="true"
+								focusable="false"
+							/>
+						</div>
+						<h3 id={`group-${i}-title`} class="text-ecsess-50 text-2xl font-bold">
+							{group.name}
+						</h3>
+					</header>
 
-				<div class="flex flex-1 flex-col p-6">
-					<!-- Icon and Name -->
-					<div class="mb-4 flex items-center justify-between gap-4">
-						<div class="flex items-center gap-4">
-							<div
-								class="group-hover:bg-ecsess-500 bg-ecsess-800 flex h-14 w-14 items-center justify-center rounded-xl shadow-md transition-all duration-300 group-hover:scale-110"
+					<!-- Description -->
+					<p class="text-ecsess-200 mb-5 text-base leading-relaxed md:text-lg">
+						{group.description}
+					</p>
+
+					<!-- Features -->
+					<ul class="mb-5 list-none space-y-2 ps-0 text-base md:text-lg" role="list">
+						{#each group.features as feature (feature)}
+							<li class="flex items-center gap-2">
+								<span class="bg-ecsess-500 h-1.5 w-1.5 shrink-0 rounded-full" aria-hidden="true"></span>
+								<span class="text-ecsess-100 font-medium">{feature}</span>
+							</li>
+						{/each}
+					</ul>
+
+					<!-- Links -->
+					<div class="mt-auto flex flex-wrap items-center gap-3 border-t border-ecsess-800 pt-5">
+						{#if group.instagram}
+							<a
+								href={group.instagram}
+								target="_blank"
+								rel="noopener noreferrer external"
+								aria-label={`Follow ${group.name} on Instagram`}
+								class="text-ecsess-300 hover:text-ecsess-100 inline-flex items-center gap-2 rounded-md border border-ecsess-700 bg-ecsess-900/50 px-4 py-2 text-base hover:bg-ecsess-800/80"
 							>
-								<Icon
-									class="text-ecsess-300 h-7 w-7 transition-colors group-hover:text-white"
+								<Instagram
+									class="size-5"
 									strokeWidth={2.5}
 									aria-hidden="true"
 									focusable="false"
 								/>
-							</div>
-							<h3 id={`group-${i}-title`} class="text-ecsess-50 text-2xl font-bold">
-								{group.name}
-							</h3>
-						</div>
-						<!-- Action Buttons -->
-						<div class="flex gap-2">
+								<span>Instagram</span>
+							</a>
+						{/if}
+						{#if group.website}
 							<a
 								href={group.website}
 								target="_blank"
 								rel="noopener noreferrer external"
 								aria-label={`Visit ${group.name} website`}
-								class="bg-ecsess-800 hover:bg-ecsess-500 text-ecsess-100 hover:text-ecsess-50 flex h-10 w-10 items-center justify-center rounded-lg shadow-md transition-all hover:shadow-lg active:scale-95"
+								class="text-ecsess-300 hover:text-ecsess-100 inline-flex items-center gap-2 rounded-md border border-ecsess-700 bg-ecsess-900/50 px-4 py-2 text-base hover:bg-ecsess-800/80"
 							>
-								<Globe class="h-5 w-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
+								<Globe class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
+								<span>Website</span>
 							</a>
-							{#if group.instagram}
-								<a
-									href={group.instagram}
-									target="_blank"
-									rel="noopener noreferrer external"
-									aria-label={`Follow ${group.name} on Instagram`}
-									class="bg-ecsess-800 hover:bg-ecsess-500 text-ecsess-100 hover:text-ecsess-50 flex h-10 w-10 items-center justify-center rounded-lg shadow-md transition-all hover:shadow-lg active:scale-95"
-								>
-									<Instagram
-										class="h-5 w-5"
-										strokeWidth={2.5}
-										aria-hidden="true"
-										focusable="false"
-									/>
-								</a>
-							{/if}
-						</div>
+						{/if}
 					</div>
-
-					<!-- Description -->
-					<p class="text-ecsess-100 mb-6 flex-1 text-base leading-relaxed">
-						{group.description}
-					</p>
-
-					<!-- Features -->
-					<ul class="mb-6 space-y-2" role="list">
-						{#each group.features as feature (feature)}
-							<li class="flex items-center gap-2 pl-3">
-								<div class="bg-ecsess-500 h-1.5 w-1.5 rounded-full" aria-hidden="true"></div>
-								<span class="text-ecsess-100 text-base font-semibold">
-									{feature}
-								</span>
-							</li>
-						{/each}
-					</ul>
 				</div>
 			</article>
 		{/each}
 	</div>
-
-	<!-- Bottom CTA -->
-	<div class="mt-12 text-center">
-		<p class="text-ecsess-300 text-sm">
-			Want to get involved? Visit their websites and social media pages to learn about upcoming
-			events and how to join!
-		</p>
-	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f51e796..5258338 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,67 +17,72 @@
 <SeoMetaTags canonical={data.canonical} />
 
 <!-- ECSESS Introduction -->
-<Section from="from-ecsess-black" to="to-ecsess-900">
+<Section from="from-ecsess-black" to="to-ecsess-800">
 	<div
-		class="grid grid-cols-1 gap-2 place-self-center sm:gap-4 md:gap-6 lg:h-[70vh] lg:grid-cols-3 lg:grid-rows-3 lg:items-center lg:gap-6"
+		class="mx-auto grid w-full max-w-[84dvw] grid-cols-1 place-items-center gap-16 py-6 lg:min-h-[75vh] lg:grid-cols-[1fr_2fr]"
 	>
-		<!-- Title -->
-		<div
-			class="order-1 mb-2 flex items-center justify-center lg:col-start-1 lg:row-start-1 lg:mb-6 lg:place-self-center"
-		>
-			<div class="flex flex-col text-center">
-				<p>
-					{#each 'We are ECSESS!' as char, i}
-						<span class="page-title" in:fade|global={{ delay: 200 + i * 100, duration: 800 }}
-							>{char}</span
-						>
-					{/each}
-				</p>
+		<!-- Left: Description and Quick Links -->
+		<div class="flex flex-col items-center text-center lg:items-start lg:text-left gap-2 ml-4">
+			<h1 class="mb-2">
+				{#each 'We are ECSESS!'.split('') as char, i}
+					<span
+						class="page-title"
+						in:fade|global={{ delay: 150 + i * 60, duration: 800 }}
+					>
+						{char}
+					</span>
+				{/each}
+				</h1>
+			<p
+				class="max-w-xl text-base leading-relaxed text-ecsess-200/90 md:text-lg lg:max-w-lg lg:leading-8"
+			>
+			<span class="font-bold text-ecsess-50">Electrical, Computer & Software Engineering Students' Society at McGill (ECSESS)</span> is the student council which helps McGill ECSE students in their
+				<span class="font-bold text-ecsess-50">academic</span>,
+				<span class="font-bold text-ecsess-50">technical</span>,
+				<span class="font-bold text-ecsess-50">social</span> and
+				<span class="font-bold text-ecsess-50">professional</span> progression.
+			</p>
+
+			<div class="mt-8 w-full max-w-xl lg:max-w-none">
+				<QuickLinks />
 			</div>
 		</div>
 
-		<!-- Description -->
-		<div
-			class="order-2 mb-2 flex items-center justify-center p-4 lg:col-start-1 lg:row-start-2 lg:mb-6 lg:place-self-center"
-		>
-			<div class="max-w-xl text-center lg:text-center">
-				<RichText value={data.description} />
-			</div>
-		</div>
-
-		<!-- Image -->
-		<div class="order-3 m-0 sm:m-2 lg:col-span-2 lg:col-start-2 lg:row-span-3 lg:row-start-1">
-			<div class="flex h-auto w-full items-center justify-center sm:h-full">
+		<!-- Right: Council Photo -->
+		<div class="relative w-full lg:max-w-none flex justify-center items-center">
+			<div
+				class="relative overflow-hidden rounded-2xl shadow-2xl ring-1 ring-ecsess-400/20 ring-offset-2 ring-offset-ecsess-900/50 flex justify-center items-center"
+			>
+				<div
+					class="absolute inset-0 rounded-2xl bg-linear-to-br from-ecsess-500/10 to-transparent"
+					aria-hidden="true"
+				></div>
 				<img
 					src={data.councilPhoto}
 					alt="ECSESS Council"
-					class="ring-ecsess-500 max-h-[35vh] max-w-full rounded-md object-contain shadow-md ring-4 transition-all sm:max-h-[45vh] md:max-h-[60vh] lg:max-h-full"
+					class="relative w-full h-full object-contain object-center"
 				/>
 			</div>
 		</div>
-
-		<!-- Quick Links -->
-		<div class="order-4 p-3 lg:col-start-1 lg:row-start-3 lg:flex lg:place-self-center lg:p-4">
-			<QuickLinks />
-		</div>
 	</div>
 </Section>
 
 <!-- Office Hours Calendar -->
-<Section from="from-ecsess-900" to="to-ecsess-800">
+<Section from="from-ecsess-800" to="to-ecsess-900">
 	<div class="w-full">
-		<h1 id="office-hours">Office Hours</h1>
+		<h2 class="text-2xl font-bold" id="office-hours">Lounge Office Hours</h2>
+		<p class="text-ecsess-200 mb-8">Come visit us in our student lounge at ENGTR 1060 to grab a coffee (free), play Mario Kart, or just chat about anything!</p>
 		<OhSchedule allOhs={data.allOHs} />
 	</div>
 </Section>
 
 <!-- Affiliated Clubs -->
-<Section from="from-ecsess-800" to="to-ecsess-950">
+<Section from="from-ecsess-900" to="to-ecsess-black">
 	<AffiliatedGroups />
 </Section>
 
 <!-- FAQs and Sponsors -->
-<Section from="from-ecsess-950" to="to-ecsess-black">
+<!-- <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">
 		<div>
 			<h1>FAQs</h1>
@@ -99,4 +104,4 @@
 			</div>
 		</div>
 	</div>
-</Section>
+</Section> -->