notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalize homepage with Affiliated Clubs + add gradient to homepage

Browse Source
This commit is contained in:
Antoine Phan
2025-10-18 14:26:52 -04:00
parent a43c529ef4 64450a0b2d
commit 517967825c
4 changed files with 152 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/components/homepage/AffiliatedClubs.svelte
View File

@@ -1,123 +1,129 @@
<script lang="ts">
import { ExternalLink, Wrench, Zap, Code2 } from '@lucide/svelte';
import { ExternalLink, Wrench, Zap, CodeXml } from '@lucide/svelte';
const clubs = [
// 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: ['PCB Printer', '3D Printing', 'Arduino & Raspberry Pi', 'Hardware Workshops']
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://ieeemcgill.com/',
website: 'https://ieee.mcgilleus.ca/',
icon: Zap,
features: ['Technical Talks', 'Company Tours', 'IEEEXtreme Competition', 'Networking Events']
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: Code2,
features: ['Annual Hackathon', 'Industry Mentors', 'Prize Pool', 'Networking with Sponsors']
icon: CodeXml,
features: ['Annual Hackathon', 'Industry Mentors', 'Networking Opportunities', "Big Prize Pool"]
}
];
</script>
<section
class="to-ecsess-50 dark:from-ecsess-950 dark:to-ecsess-900 w-full bg-gradient-to-b from-white py-16"
>
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="mb-12 text-center">
<h2 class="text-ecsess-800 dark:text-ecsess-100 mb-4 text-4xl font-bold md:text-5xl">
Affiliated Clubs & Labs
</h2>
<p class="text-ecsess-700 dark: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}
<div
class="group dark:bg-ecsess-950 relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
>
<!-- 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="bg-ecsess-100 group-hover:bg-ecsess-500 dark:bg-ecsess-800 flex h-14 w-14 items-center justify-center rounded-xl shadow-md transition-all duration-300 group-hover:scale-110"
>
{#if club.icon === Wrench}
<Wrench
class="text-ecsess-600 dark:text-ecsess-300 h-7 w-7 transition-colors group-hover:text-white"
strokeWidth={2.5}
/>
{:else if club.icon === Zap}
<Zap
class="text-ecsess-600 dark:text-ecsess-300 h-7 w-7 transition-colors group-hover:text-white"
strokeWidth={2.5}
/>
{:else if club.icon === Code2}
<Code2
class="text-ecsess-600 dark:text-ecsess-300 h-7 w-7 transition-colors group-hover:text-white"
strokeWidth={2.5}
/>
{/if}
</div>
<h3 class="text-ecsess-800 dark:text-ecsess-50 text-2xl font-bold">
{club.name}
</h3>
</div>
<!-- Description -->
<p class="text-ecsess-700 dark:text-ecsess-200 mb-6 flex-1 text-sm leading-relaxed">
{club.description}
</p>
<!-- Features -->
<div class="mb-6 space-y-2">
{#each club.features as feature}
<div class="flex items-center gap-2">
<div class="bg-ecsess-500 h-1.5 w-1.5 rounded-full"></div>
<span class="text-ecsess-600 dark:text-ecsess-300 text-xs font-semibold">
{feature}
</span>
</div>
{/each}
</div>
<!-- Visit Button -->
<a
href={club.website}
target="_blank"
rel="noopener noreferrer"
class="bg-ecsess-500 hover:bg-ecsess-600 dark:bg-ecsess-400 dark: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} />
</a>
</div>
</div>
{/each}
</div>
<!-- Bottom CTA -->
<div class="mt-12 text-center">
<p class="text-ecsess-600 dark:text-ecsess-300 text-sm">
Want to get involved? Visit their websites to learn about upcoming events and how to join!
</p>
</div>
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="mb-12 text-center">
<h2
id="affiliated-clubs-title"
class="text-ecsess-800 dark:text-ecsess-100 mb-4 text-4xl font-bold md:text-5xl"
>
Affiliated Clubs & Labs
</h2>
<p class="text-ecsess-700 dark: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>
</section>
<!-- 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 relative flex flex-col overflow-hidden rounded-2xl shadow-ecsess-800 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-600 dark: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-800 dark:text-ecsess-50 text-2xl font-bold"
>
{club.name}
</h3>
</div>
<!-- Description -->
<p class="text-ecsess-700 dark: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-600 dark: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-500 hover:bg-ecsess-600 dark:bg-ecsess-400 dark: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-600 dark:text-ecsess-300 text-sm">
Want to get involved? Visit their websites to learn about upcoming events and how to join!
</p>
</div>
</div>

42
src/components/layout/Footer.svelte
View File

@@ -32,12 +32,6 @@
url: 'mailto:ecsess.president@mcgilleus.ca',
icon: 'email',
ariaLabel: 'Send us an email'
},
{
name: 'Lounge Location',
url: 'https://maps.app.goo.gl/4RHKGJEE8FfcDs1H8',
icon: 'location',
ariaLabel: 'View lounge location on map'
}
];
</script>
@@ -45,19 +39,17 @@
<footer class="bg-ecsess-black text-ecsess-100 mx-auto min-w-fit px-4 py-8">
<div class="mx-auto max-w-7xl">
<!-- Business Card Layout -->
<div class="mb-6 grid grid-cols-1 gap-8 md:grid-cols-3">
<!-- Left: ECSESS Info & Location -->
<div class="text-center md:text-left">
<h3 class="text-ecsess-150 mb-2 text-xl font-bold">ECSESS</h3>
<p class="text-ecsess-200 mb-3 text-sm">
Electrical, Computer & Software<br />
Engineering Students' Society
<div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-3">
<!-- Left: ECSESS Lounge -->
<div class="border-ecsess-800 border-b-1 pb-4 text-center md:border-0 md:text-left">
<p class="text-ecsess-300 mb-3 text-lg">
Visit the ECSESS lounge!
</p>
<a
href="https://maps.app.goo.gl/4RHKGJEE8FfcDs1H8"
href="https://maps.app.goo.gl/m9ZqjTrPM7pcBzhbA"
target="_blank"
rel="noopener noreferrer"
class="text-ecsess-200 hover:text-ecsess-100 inline-flex items-center gap-2 transition-colors"
class="text-ecsess-300 hover:text-ecsess-100 border-b-1 border-b-transparent hover:border-b-ecsess-100 inline-flex items-center gap-2 justify-baseline transition-all pb-0.5"
>
<svg
class="h-4 w-4 flex-shrink-0"
@@ -79,15 +71,15 @@
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<span class="text-sm">ENGTR 1060</span>
<span class="text-base">ENGTR 1060</span>
</a>
</div>
<!-- Center: Connect With Us -->
<div class="text-center">
<div class="border-ecsess-800 border-b-1 pb-8 text-center md:border-0">
<h3 class="text-ecsess-150 mb-3 text-lg font-semibold">Connect With Us</h3>
<div class="flex flex-wrap items-center justify-center gap-3">
{#each socialLinks.filter((link) => link.icon !== 'location') as link}
{#each socialLinks as link}
<a
href={link.url}
target={link.icon === 'email' ? '_self' : '_blank'}
@@ -166,12 +158,12 @@
<!-- Right: Contribute -->
<div class="text-center md:text-right">
<p class="text-ecsess-200 mb-3 text-sm">
Want to report an issue or <br />
contribute to the website?
<p class="text-ecsess-200 mb-3 text-base">
Catch a bug or have an idea? <br />
Let us know!
</p>
<a
href="https://github.com/mcgill-ecsess/ecsess-site"
href="https://github.com/mcgill-ecsess/ECSESS"
target="_blank"
rel="noopener noreferrer"
class="bg-ecsess-800 hover:bg-ecsess-600 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold text-white transition-colors"
@@ -183,7 +175,7 @@
clip-rule="evenodd"
/>
</svg>
<span>GitHub Repo</span>
<span>ECSESS on GitHub</span>
</a>
</div>
</div>
@@ -194,8 +186,8 @@
<!-- Copyright -->
<div>
<p class="text-ecsess-150 text-center text-sm">
Created by ECSESS with love {'<3'}. <br />
&copy; ECSESS {year}, under GNU General Public License v3.0.
🄯 ECSESS {year} under GNU General Public License v3.0. <br />
Designed with love {'<3'}.
</p>
</div>
</div>

35
src/components/layout/Section.svelte
View File

@@ -1,16 +1,31 @@
<script>
let { children = () => 'Section placeholder', black = false } = $props();
/**
* Props:
* - from/to: pass full Tailwind gradient color classes (e.g., 'from-ecsess-950', 'to-ecsess-800')
* - direction: Tailwind gradient direction suffix (e.g., 'to-b', 'to-r'), defaults to vertical
* - black: legacy toggle for solid background (kept for backward compatibility)
*/
let {
children = () => 'Section placeholder',
from = '',
to = '',
direction = 'to-b', // to bottom
black = false
} = $props();
let tailwindClasses = $state(
'mx-auto flex min-h-[90vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-100'
);
const base =
'mx-auto flex min-h-[90vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-100';
if (black) {
tailwindClasses += ' bg-ecsess-black';
} else {
// green background
tailwindClasses += ' bg-ecsess-800';
}
// Compute classes: prefer gradient when from/to provided; otherwise fallback to previous behavior
let tailwindClasses = $state(base);
$effect(() => {
if (from && to) {
tailwindClasses = `${base} bg-gradient-${direction} ${from} ${to}`;
} else {
tailwindClasses = base + (black ? ' bg-ecsess-black' : ' bg-ecsess-800');
}
});
</script>
<div class={tailwindClasses}>