Conditionally render QR Code and update sponsors (#25)

* added method to call api to access user's email

* Add navbar links with mobile support

* finished footer component

* updated email address contact in footer

* finished up styling for footer

* finish up hero section

* finish logo section

* add footer to home page

* Fetch user via SSR and show name in navbar

* add qr code to home page

* finish hero section

* decrease sponsors size

* Update landing page layout according to figma

* Add stars to the background

* Add shooting stars & handle fetch errors

* use store to pass user around, conditionally render qr code

* update sponsors

* add building svgs

* add image alts

* Make navbar mobile friendly

* Update footer icons & fix text size

---------

Co-authored-by: Shreya Deshpande <[email protected]>
Co-authored-by: Soham Kulkarni <[email protected]>

src/app.css

@@ -3,17 +3,28 @@
 @tailwind utilities;
 
 .fluid-gradient {
-	background: linear-gradient(#1d2e5b, #c61e5d 60%, #df5178 80%, #1d2e5b);
-	background-size: 200% 200%;
+	background: url(stars-bg.png) repeat, linear-gradient(#1d2e5b, #c61e5d 60%, #df5178 80%, #1d2e5b);
+	background-size: 1090px, 200% 200%;
 	animation: gradient 16s ease infinite alternate;
 }
 
+.text-rp-gradient {
+	color: #c61e5d;
+	background-image: linear-gradient(270deg, #c61e5d, #1d2e5b);
+	background-clip: text;
+	text-fill-color: transparent;
+	-webkit-background-clip: text;
+	-moz-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	-moz-text-fill-color: transparent;
+}
+
 @keyframes gradient {
 	0% {
-		background-position: 200% 30%;
+		background-position: 50%, 200% 30%;
 	}
 	100% {
-		background-position: 50% 0%;
+		background-position: 50%, 50% 0%;
 	}
 }
 

src/app.html

@@ -7,7 +7,7 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
-			href="https://fonts.googleapis.com/css2?family=Cabin&family=Nunito+Sans&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Cabin&family=Nunito+Sans&family=Nunito:wght@400;500;600;700&display=swap"
 			rel="stylesheet"
 		/>
 		<link

src/components/footer.svelte

@@ -0,0 +1,48 @@
+<script>
+	import Icon from '@iconify/svelte';
+</script>
+
+<span class="bg-white bg-opacity-10 px-5 pt-16 h-20 relative block bottom-0 w-full">
+	<div class="absolute right-10 top-8 flex flex-row">
+		<a href="https://www.instagram.com/uiuc_rp/?hl=en">
+			<Icon
+				icon="ri:instagram-fill"
+				class="text-3xl text-gray-200 hover:text-gray-400 duration-200 inline mx-2"
+				title="Instagram"
+			/>
+		</a>
+
+		<a href="https://www.linkedin.com/company/reflections-projections-uiuc/">
+			<Icon
+				icon="ri:linkedin-fill"
+				class="text-3xl text-gray-200 hover:text-gray-400 duration-200 inline mx-2"
+				title="LinkedIn"
+			/>
+		</a>
+
+		<a href="https://twitter.com/uiuc_rp?lang=en">
+			<Icon
+				icon="ri:twitter-fill"
+				class="text-3xl text-gray-200 hover:text-gray-400 duration-200 inline mx-2"
+				title="Twitter"
+			/>
+		</a>
+
+		<a href="https://www.facebook.com/acmrp/">
+			<Icon
+				icon="ri:facebook-fill"
+				class="text-3xl text-gray-200 hover:text-gray-400 duration-200 inline mx-2"
+				title="Facebook"
+			/>
+		</a>
+
+		<a href="mailto:[email protected]">
+			<Icon
+				icon="ri:mail-line"
+				class="text-3xl text-gray-200 hover:text-gray-400 duration-200 inline mx-2"
+				title="Email"
+			/>
+		</a>
+	</div>
+	<div class="absolute top-8 text-white text-base">Organized by ACM@UIUC</div>
+</span>

src/components/home/info.svelte

@@ -0,0 +1 @@
+<div />

src/components/home/sponsors.svelte

@@ -0,0 +1,21 @@
+<script>
+	const sponsors = [['state-farm'], ['forcepoint']];
+</script>
+
+<div class="w-full py-28 px-10 lg:py-40">
+	<h2 class="text-white text-xl md:text-2xl lg:text-4xl text-center mb-10 sm:mb-20">
+		Our Sponsors
+	</h2>
+	<div
+		class="w-full sm:w-3/4 xl:w-5/8 max-w-4xl mx-auto flex justify-center items-center mb-10 sm:mb-20"
+	>
+		{#each sponsors[0] as sponsor}
+			<img class="w-6/12" src="logos/{sponsor}.png" alt="{sponsor} logo" />
+		{/each}
+	</div>
+	<div class="w-3/4 sm:w-1/2 xl:w-3/8 max-w-2xl mx-auto flex justify-around items-center">
+		{#each sponsors[1] as sponsor}
+			<img class="w-4/12" src="logos/{sponsor}.png" alt="{sponsor} logo" />
+		{/each}
+	</div>
+</div>

src/components/navbar.svelte

@@ -1,16 +1,87 @@
 <script lang="ts">
+	import Icon from '@iconify/svelte';
+	import type { User } from '../lib/types';
+	import { userStore } from '../stores/user-store';
+	import { slide } from 'svelte/transition';
+
+	let user: User | null;
+
+	userStore.subscribe((data) => (user = data));
+
+	let openDropDown = false;
 </script>
 
 <span class="sticky top-0">
-	<div class="flex px-5 py-5 flex-row justify-between h-24">
-		<a href="/">
+	<div
+		class="flex flex-row justify-between p-5 text-gray-200 text-sm md:text-md lg:text-lg font-sans items-center"
+	>
+		<a href="/" class="flex flex-row items-center gap-3">
 			<img
 				src="/favicon.png"
 				alt="Reflections Projections Home Page"
-				height={50}
-				width={50}
-				class="hover:rotate-180 duration-500 hover:scale-125"
+				class="hover:rotate-180 duration-500 hover:scale-125 h-[40px] w-[40px] md:h-[50px] md:w-[50px]"
 			/>
 		</a>
+		<div class="flex flex-row justify-evenly w-full md:w-2/3 lg:w-1/2">
+			<a
+				href="/speakers"
+				class="hover:underline underline-offset-8 hover:underline-offset-4 decoration-pink-500 decoration-2 duration-150"
+				>Speakers</a
+			>
+			<a
+				href="/puzzlebang"
+				class="hidden md:block hover:underline underline-offset-8 hover:underline-offset-4 decoration-pink-500 decoration-2 duration-150"
+				>Puzzlebang</a
+			>
+			<a
+				href="/mechmania"
+				class="hidden md:block hover:underline underline-offset-8 hover:underline-offset-4 decoration-pink-500 decoration-2 duration-150"
+				>MechMania</a
+			>
+			<div
+				class="relative inline-block md:hidden"
+				on:mouseenter={() => {
+					openDropDown = true;
+				}}
+				on:mouseleave={() => {
+					openDropDown = false;
+				}}
+			>
+				<button
+					class="relative md:hidden hover:underline underline-offset-8 hover:underline-offset-4 decoration-pink-500 decoration-2 duration-150"
+					on:click={() => {
+						openDropDown = !openDropDown;
+					}}>Special Events</button
+				>
+				{#if openDropDown}
+					<div class="block absolute z-10 pt-1" in:slide out:slide>
+						<div
+							class="flex flex-col divide-y-2 bg-rp-cream rounded-lg text-rp-blue p-1 border-rp-pink"
+						>
+							<a class="p-1.5 hover:text-rp-dull-pink duration-200" href="/mechmania">MechMania</a>
+							<a class="p-1.5 hover:text-rp-dull-pink duration-200" href="/puzzlebang">Puzzlebang</a
+							>
+						</div>
+					</div>
+				{/if}
+			</div>
+			{#if user}
+				<div class="flex flex-row gap-3 items-center">
+					<div class="hidden md:flex">{user?.fullName ? `Welcome, ${user.fullName}` : ''}</div>
+					<a href="/preferences">
+						<Icon
+							icon="fluent:person-28-filled"
+							class="text-xl md:text-3xl hover:text-pink-500 duration-200"
+						/>
+					</a>
+				</div>
+			{:else}
+				<a
+					href="/login"
+					class="hover:underline underline-offset-8 hover:underline-offset-4 decoration-pink-500 decoration-2 duration-150"
+					>Log In</a
+				>
+			{/if}
+		</div>
 	</div>
 </span>

src/components/shooting-star.svelte

@@ -4,6 +4,12 @@
 </div>
 
 <style>
+	@media (prefers-reduced-motion) {
+		span {
+			display: hidden;
+		}
+	}
+
 	* {
 		margin: 0;
 		padding: 0;
@@ -68,7 +74,7 @@
 		top: -30px;
 		right: 50%;
 		left: initial;
-		animation-delay: 13s;
+		animation-delay: 0s;
 		animation-duration: 2.3s;
 	}
 	span:nth-child(2) {

src/lib/types.ts

@@ -10,6 +10,11 @@ interface Event {
 	visible: boolean;
 }
 
+interface User {
+	email: string;
+	fullName?: string;
+}
+
 type Status = 'waiting' | 'in_progress' | 'failed' | 'success';
 
-export type { Event, Status };
+export type { Event, User, Status };

src/lib/util/dropdown.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+	let open = false;
+</script>

src/routes/+layout.server.ts

@@ -0,0 +1,27 @@
+import { API_URL } from '../constants';
+import type { User } from '$lib/types';
+import { get } from 'svelte/store';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export const load = async ({ fetch }): Promise<{ user: User | null }> => {
+	const url = get(API_URL);
+
+	try {
+		const check = await fetch(`${url}/auth/me`, {
+			credentials: 'include',
+			cache: 'no-cache'
+		});
+
+		if (check.status != 200) {
+			return { user: null };
+		}
+		const user: User = await check.json();
+		return {
+			user
+		};
+	} catch (e) {
+		return {
+			user: null
+		};
+	}
+};

src/routes/+layout.svelte

@@ -1,9 +1,16 @@
 <script>
+	import { userStore } from '../stores/user-store';
 	import '../app.css';
 	import Navbar from '../components/navbar.svelte';
+	import Footer from '../components/footer.svelte';
+	/** @type {import('./$types').LayoutData} */
+	export let data;
+
+	userStore.set(data.user);
 </script>
 
 <div class="min-h-screen">
 	<Navbar />
 	<slot />
 </div>
+<Footer />

src/routes/+page.svelte

@@ -1,44 +1,70 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import ShootingStar from '../components/shooting-star.svelte';
 	import { API_URL } from '../constants';
+	import { get } from 'svelte/store';
+	import Footer from '../components/footer.svelte';
+	import Sponsors from '../components/home/sponsors.svelte';
+	import GlassContainer from '../components/glass-container.svelte';
+	import ShootingStar from '../components/shooting-star.svelte';
+	import { onMount } from 'svelte';
+	import { userStore } from '../stores/user-store';
+	import type { User } from '../lib/types';
+	import { slide } from 'svelte/transition';
+
+	let qrImg: string | null = null;
 
-	const getUser = async () => {
-		const response = await fetch(`${$API_URL}/auth/me`, {
-			credentials: 'include'
-		}).catch((err) => console.log(err));
+	let user: User | null = null;
+	userStore.subscribe((data) => (user = data));
 
-		const user = await response?.json();
-		console.log('user', user);
-	};
+	console.log(user);
 
-	getUser();
+	onMount(() => {
+		try {
+			if (user) {
+				fetch(`${$API_URL}/attendee/qr`, {
+					credentials: 'include'
+				})
+					.then((response) => response.text())
+					.then((text) => {
+						qrImg = text;
+					});
+			}
+		} catch (e) {
+			console.error(e);
+		}
+	});
 </script>
 
-<div class="h-full text-white flex items-center">
-	<ShootingStar />
-	<span
-		class="flex flex-col md:flex-row mx-auto p-2 md:p-5 md:bg-white rounded-xl md:bg-opacity-10"
-	>
-		<div class="flex flex-col text-2xl mx-5 my-2 md:my-5 font-serif">
-			<div class="whitespace-nowrap flex flex-row">
-				<div>Reflections | Projections</div>
-			</div>
-			<div class="text-gray-300">2023</div>
-			<div class="text-xl my-3">Coming Soon</div>
+<ShootingStar />
+<div class="text-white flex items-center mx-10 xl:mx-2 my-5 xl:my-9">
+	<span class="w-full flex-col flex items-center">
+		<img class="w-[80%] sm:w-3/5 lg:w-2/5 mb-10" src="/rp-text-logo-white.svg" alt="rp logo" />
+		<div class="text-center xl:text-center text-md sm:text-2xl lg:text-xl uppercase xl:mb-5 mb-10">
+			September 18 - 22, 2023
 		</div>
-		<div class="flex flex-col mx-5 my-2 md:my-5 md:w-96 font-sans">
-			<div class="text-md">
-				The largest student run technology conference in the midwest, held annually at the
-				University of Illinois at Urbana-Champaign.
+		{#if user}
+			<div class="block w-full md:max-w-sm md:w-8/12 mx-auto" in:slide>
+				<GlassContainer>
+					<img class="w-full aspect-square" src={qrImg} alt="QR Pass" />
+				</GlassContainer>
 			</div>
+		{:else}
+			<p
+				class="w-full md:w-2/3 lg:w-1/2 text-center text-base md:text-lg font-medium text-gray-200"
+			>
+				Expand your horizons at the <b class="text-pink-200"
+					>Midwest’s largest student run tech conference</b
+				> this September. Join us for a week full of insightful talks from industry & academia leaders,
+				hands-on workshops, and networking events.
+			</p>
 			<a
-				href="https://2022.reflectionsprojections.org/"
-				class="flex flex-row gap-2 w-fit items-center bg-white opacity-80 rounded-md py-2 px-4 my-5 hover:opacity-90 duration-200 text-rp-blue"
+				href="/reister"
+				class="bg-rp-cream text-center p-4 lg:p-6 my-6 rounded-full hover:bg-opacity-70 duration-300"
 			>
-				<div>Visit 2022 Site</div>
-				<Icon icon="mdi:arrow-top-right-thin" />
+				<span class="uppercase text-black text-base md:text-xl font-semibold text-rp-gradient"
+					>Register Now</span
+				>
 			</a>
-		</div>
+		{/if}
 	</span>
 </div>
+<Sponsors />