From 52ea263b05046abda390c5101a72e9fea534f32d Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Thu, 8 Jan 2026 21:39:06 -0500
Subject: [PATCH] Misc. fix: Affiliated Groups instead of 'Clubs'

---
 .../homepage/AffiliatedClubs.svelte           | 133 ----------------
 .../homepage/AffiliatedGroups.svelte          | 150 ++++++++++++++++++
 src/routes/+page.svelte                       |   4 +-
 3 files changed, 152 insertions(+), 135 deletions(-)
 delete mode 100644 src/components/homepage/AffiliatedClubs.svelte
 create mode 100644 src/components/homepage/AffiliatedGroups.svelte

diff --git a/src/components/homepage/AffiliatedClubs.svelte b/src/components/homepage/AffiliatedClubs.svelte
deleted file mode 100644
index 9cbe7c8..0000000
--- a/src/components/homepage/AffiliatedClubs.svelte
+++ /dev/null
@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { ExternalLink, Wrench, Zap, CodeXml } from '@lucide/svelte';
-
-	// All icons from @lucide/svelte share the same component type; reuse one for typing
-	type IconComponent = typeof Wrench;
-
-	type Club = {
-		name: string;
-		description: string;
-		website: string;
-		icon: IconComponent;
-		features: string[];
-	};
-
-	const clubs: Club[] = [
-		{
-			name: 'The Factory',
-			description:
-				'A hardware design lab run by students, for students. A dedicated space for developing personal projects, gaining experience with cutting-edge hardware, and fostering innovation.',
-			website: 'https://factory.mcgilleus.ca/',
-			icon: Wrench,
-			features: ['Hardware Lab Space', '3D Printing', 'Equipment Rental', 'Hardware Workshops']
-		},
-		{
-			name: 'IEEE McGill',
-			description:
-				'One of the largest IEEE student branches in Eastern Canada. Dedicated to professional development through networking, workshops, competitions, and industry connections.',
-			website: 'https://ieee.mcgilleus.ca/',
-			icon: Zap,
-			features: [
-				'Technical Talks',
-				'Arduino Workshops',
-				'IEEEXtreme Competition',
-				'Networking Events'
-			]
-		},
-		{
-			name: 'CodeJam',
-			description:
-				"McGill Engineering's largest and longest-running hackathon. A 36-hour programming competition where students create innovative solutions to real-world problems.",
-			website: 'https://codejam.mcgilleus.ca/',
-			icon: CodeXml,
-			features: [
-				'Annual Hackathon',
-				'Industry Mentors',
-				'Networking Opportunities',
-				'Big Prize Pool'
-			]
-		}
-	];
-</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">
-			Affiliated Clubs & Labs
-		</h2>
-		<p class="text-ecsess-200 mx-auto max-w-2xl text-lg">
-			Explore opportunities to enhance your skills, build innovative projects, and connect with the
-			engineering community through our affiliated organizations.
-		</p>
-	</div>
-
-	<!-- Clubs Grid -->
-	<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-		{#each clubs as club, i (club.name)}
-			{@const Icon = club.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"
-				aria-labelledby={`club-${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-6">
-					<!-- Icon and Name -->
-					<div class="mb-4 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"
-						>
-							<Icon
-								class="text-ecsess-300 h-7 w-7 transition-colors group-hover:text-white"
-								strokeWidth={2.5}
-								aria-hidden="true"
-								focusable="false"
-							/>
-						</div>
-						<h3 id={`club-${i}-title`} class="text-ecsess-50 text-2xl font-bold">
-							{club.name}
-						</h3>
-					</div>
-
-					<!-- Description -->
-					<p class="text-ecsess-200 mb-6 flex-1 text-base leading-relaxed">
-						{club.description}
-					</p>
-
-					<!-- Features -->
-					<ul class="mb-6 space-y-2" role="list">
-						{#each club.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-300 text-base font-semibold">
-									{feature}
-								</span>
-							</li>
-						{/each}
-					</ul>
-
-					<!-- Visit Button -->
-					<a
-						href={club.website}
-						target="_blank"
-						rel="noopener noreferrer external"
-						aria-label={`Visit ${club.name} website`}
-						class="bg-ecsess-400 hover:bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
-					>
-						Visit Website
-						<ExternalLink class="h-4 w-4" strokeWidth={2.5} aria-hidden="true" focusable="false" />
-					</a>
-				</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 to learn about upcoming events and how to join!
-		</p>
-	</div>
-</div>
diff --git a/src/components/homepage/AffiliatedGroups.svelte b/src/components/homepage/AffiliatedGroups.svelte
new file mode 100644
index 0000000..c2d546e
--- /dev/null
+++ b/src/components/homepage/AffiliatedGroups.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { Globe, Instagram, Wrench, Zap, CodeXml, Podcast } from '@lucide/svelte';
+
+	// All icons from @lucide/svelte share the same component type; reuse one for typing
+	type IconComponent = typeof Wrench;
+
+	type Group = {
+		name: string;
+		description: string;
+		website: string;
+		instagram?: string;
+		icon: IconComponent;
+		features: string[];
+	};
+
+	const groups: Group[] = [
+		{
+			name: 'Code.Jam()',
+			description:
+				"McGill Engineering's largest annual hackathon. A 48-hour programming competition where students create innovative solutions to real-world problems.",
+			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'
+			]
+		},
+		{
+			name: 'The Factory',
+			description:
+				'A student-run lab space for developing personal projects, gaining experience with cutting-edge hardware, and fostering innovation.',
+			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']
+		},
+		{
+			name: 'IEEE McGill',
+			description:
+				'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'
+			]
+		},
+	];
+</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">
+			Subcommittees & Affiliated Groups
+		</h2>
+		<p class="text-ecsess-200 mx-auto max-w-2xl text-lg">
+			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">
+		{#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"
+				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-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"
+							>
+								<Icon
+									class="text-ecsess-300 h-7 w-7 transition-colors group-hover:text-white"
+									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">
+							<a
+								href={group.website}
+								target="_blank"
+								rel="noopener noreferrer external"
+								aria-label={`Visit ${group.name} website`}
+								class="bg-ecsess-800 hover:bg-ecsess-500 flex h-10 w-10 items-center justify-center rounded-lg text-ecsess-100 hover:text-ecsess-50 shadow-md transition-all hover:shadow-lg active:scale-95"
+							>
+								<Globe class="h-5 w-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
+							</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 flex h-10 w-10 items-center justify-center rounded-lg text-ecsess-100 hover:text-ecsess-50 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>
+					</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 acf39df..2a7e261 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,7 +5,7 @@
 	import OhSchedule from 'components/officehour/OHSchedule.svelte';
 	import Link from 'components/Link.svelte';
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
-	import AffiliatedClubs from 'components/homepage/AffiliatedClubs.svelte';
+	import AffiliatedGroups from 'components/homepage/AffiliatedGroups.svelte';
 	import { fade } from 'svelte/transition';
 
 	/** loading things from the server side */
@@ -52,7 +52,7 @@
 
 <!-- Affiliated Clubs -->
 <Section from="from-ecsess-800" to="to-ecsess-950">
-	<AffiliatedClubs />
+	<AffiliatedGroups />
 </Section>
 <!-- FAQs and Sponsors -->
 <Section from="from-ecsess-950" to="to-ecsess-black">