Merge pull request #80 from mcgill-ecsess/quick-links-home-page

[feat] Added quick links on Homepage

src/components/Button.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	let { children, onclick = null } = $props();
+	let { children, onclick = null, disabled = false, class: className = '' } = $props();
 </script>
 
 <button
-	class="bg-ecsess-600 hover:bg-ecsess-500 active:bg-ecsess-700
-            inline-block rounded-md border-none px-4
-            py-2 text-white transition-all
-            duration-200 ease-out
-            hover:scale-105 hover:shadow-xl"
+	{disabled}
 	{onclick}
+	class="bg-ecsess-600 text-ecsess-50
+		hover:bg-ecsess-700 w-fit rounded-md
+		px-6 py-3 text-sm font-semibold transition-colors hover:cursor-pointer {className}"
 >
 	{@render children()}
 </button>

src/components/Link.svelte

@@ -1,7 +1,11 @@
-<script>
-	let { href = 'https://www.example.com', children } = $props();
+<script lang="ts">
+	let { href, external = false, children } = $props();
 </script>
 
-<a {href} target="_blank" rel="noopener noreferrer" class="underline">
+<a
+	{href}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
+>
 	{@render children()}
 </a>

src/components/QuickLinks.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import Link from 'components/Link.svelte';
+	import Button from 'components/Button.svelte';
+</script>
+
+<div>
+	<p
+		class="text-ecsess-50 decoration-ecsess-200 mt-2 mb-6 text-base font-bold tracking-wide underline decoration-2 underline-offset-8"
+	>
+		Popular resources
+	</p>
+
+	<div class="mt-3 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:mt-0">
+		<Link href="/events">
+			<Button class="flex h-full w-full items-center justify-center">ECSESS Events</Button>
+		</Link>
+
+		<Link href="/r/trot5th" external>
+			<Button class="flex h-full w-full items-center justify-center">
+				Trottier 5th Room Booking
+			</Button>
+		</Link>
+
+		<Link href="/r/ctrlz" external>
+			<Button class="flex h-full w-full items-center justify-center">Ctrl+Z feedback form</Button>
+		</Link>
+
+		<!-- Sponsorship disabled -->
+		<Link href="/sponsorship">
+			<Button disabled class="flex h-full w-full items-center justify-center">
+				Sponsor ECSESS
+			</Button>
+		</Link>
+	</div>
+</div>

src/routes/+page.svelte

@@ -7,6 +7,7 @@
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import AffiliatedGroups from 'components/homepage/AffiliatedGroups.svelte';
 	import { fade } from 'svelte/transition';
+	import QuickLinks from 'components/QuickLinks.svelte';
 
 	/** loading things from the server side */
 	let { data } = $props();
@@ -17,9 +18,14 @@
 
 <!-- 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="flex h-1/2 flex-col place-content-center text-center">
+	<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"
+	>
+		<!-- 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 }}
@@ -27,19 +33,34 @@
 						>
 					{/each}
 				</p>
-				<div class="p-4">
+			</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>
-		</div>
-		<div class="m-2 place-content-around lg:col-span-2 lg:mx-12 lg:my-0">
+
+		<!-- 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">
 				<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"
+					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"
 				/>
 			</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 -->
@@ -54,6 +75,7 @@
 <Section from="from-ecsess-800" to="to-ecsess-950">
 	<AffiliatedGroups />
 </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">