Merge pull request #11 from KreativeThinker/main

UI fixes, navbar and assets

src/app.css

@@ -3,30 +3,30 @@
 @tailwind utilities;
 
 h1 {
-	@apply text-7xl font-bold translate-y-4;
+	@apply translate-y-4 text-6xl font-bold md:text-8xl;
 }
 
 h2 {
-	@apply text-4xl font-bold;
+	@apply text-4xl font-bold md:text-5xl;
 }
 
 h3 {
-	@apply text-2xl mb-6;
+	@apply mb-6 text-2xl md:text-3xl;
 }
 
 h4,
 .h4 {
-	@apply text-xl leading-[2.5rem];
+	@apply text-xl leading-[2.5rem] md:text-2xl;
 }
 
 p {
-	@apply text-lg text-zinc-400;
+	@apply text-lg text-zinc-400 md:text-xl;
 }
 
 .gradient {
-	@apply max-w-[unset] blur-sm xl:blur-0 brightness-[0.7] xl:brightness-100;
+	@apply max-w-[unset] blur-sm brightness-[0.7] xl:blur-0 xl:brightness-100;
 }
 
 * {
-	@apply text-lg;
+	@apply md:text-lg;
 }

src/lib/components/Button.svelte

@@ -5,14 +5,14 @@
 
 {#if primary}
 	<a
-		class="rounded-2xl border-[1px] border-foreground bg-foreground px-12 py-2 text-center text-background"
+		class="rounded-2xl border-[1px] border-foreground bg-foreground px-12 py-3 text-center text-background"
 		{href}
 	>
 		<slot />
 	</a>
 {:else}
 	<a
-		class="rounded-2xl border-[1px] border-foreground px-12 py-2 text-center text-foreground"
+		class="rounded-2xl border-[1px] border-foreground px-12 py-3 text-center text-foreground"
 		{href}
 	>
 		<slot />

src/lib/components/Navbar.svelte

@@ -5,12 +5,14 @@
 	import Button from './Button.svelte';
 	import { base } from '$app/paths';
 
+	let isOpen = false;
+
 	async function logout() {
 		// logout function
 	}
 
 	async function signup() {
-		// sign up function
+		// sign up function collapse navbar-collapse
 	}
 
 	async function login() {
@@ -29,13 +31,17 @@
 			$user = user_data;
 		}
 	});
+
+	function toggleMenu() {
+		isOpen = !isOpen;
+	}
 </script>
 
 <div class="m-auto mt-12 flex w-full max-w-6xl justify-between px-8 xl:px-0">
 	<div class="absolute left-0 top-0 w-full overflow-x-clip">
 		<img
 			src="{base}/assets/Asset 2.png"
-			class="gradient absolute left-[-500px] top-[-700px] z-[-100] h-[1000px] w-[1000px] rotate-[180deg]"
+			class="gradient absolute left-[-500px] top-[-700px] -z-10 h-[1000px] w-[1000px] rotate-[180deg]"
 			alt="Gradient background"
 		/>
 	</div>
@@ -59,5 +65,32 @@
 			<Button href="{base}/" primary>Signup</Button>
 		{/if}
 	</div>
-	<p class="block xl:hidden">Menu</p>
+	<div class="relative flex items-center justify-center xl:hidden">
+		<button class="block h-fit" on:click={toggleMenu}>
+			<div class="space-y-2">
+				<span class="block h-0.5 w-6 bg-zinc-400"></span>
+				<span class="block h-0.5 w-6 bg-zinc-400"></span>
+				<span class="block h-0.5 w-6 bg-zinc-400"></span>
+			</div>
+		</button>
+	</div>
+</div>
+<div
+	class="absolute right-8 z-10 flex w-56 flex-col justify-center rounded-2xl bg-black xl:hidden"
+	style="display: {isOpen ? 'block' : 'none'};"
+>
+	<div class="space-y-4 px-8 py-8 xl:hidden">
+		<a href="{base}/" class="block">Leaderboard</a>
+		<a href="{base}/" class="block">Projects</a>
+		<a href="{base}/" class="block">Dashboard</a>
+		<div class="flex flex-col space-y-4 xl:hidden">
+			{#if $user.id}
+				<a href="{base}/">Logout</a>
+				<a href="{base}/" class="... truncate">{$user.name}</a>
+			{:else}
+				<a href="{base}/">Login</a>
+				<a href="{base}/">Signup</a>
+			{/if}
+		</div>
+	</div>
 </div>

src/routes/+page.svelte

@@ -14,16 +14,21 @@
 <Section>
 	<img
 		src="assets/Asset 4.png"
-		class="gradient absolute right-[-512px] top-[-256px] z-[-100] h-[1024px] w-[1024px] rotate-[128deg]"
+		class="gradient absolute right-[-512px] top-[-256px] -z-10 h-[1024px] w-[1024px] rotate-[128deg]"
 		alt="Gradient"
 	/>
 	<div class="relative mb-8 flex flex-col space-y-8 xl:flex-row xl:items-center">
 		<h1>FOSSit ‘24</h1>
-		<img src="{base}/logo.png" class="h-24 w-24 xl:mx-8" alt="FOSSit Logo" />
+		<img
+			src="{base}/logo.png"
+			class="h-20 w-20
+      -translate-y-3 xl:mx-8"
+			alt="FOSSit Logo"
+		/>
 	</div>
 	<h3 class="text-zinc-400">The open source Hackathon and Workshop</h3>
 	<div class="flex w-fit flex-col space-y-4 xl:flex-row xl:space-x-8 xl:space-y-0">
-		<Button href="{base}/" primary>Get started</Button>
+		<Button href="{base}/register" primary>Get started</Button>
 		<Button href="{base}/">Learn more</Button>
 	</div>
 </Section>
@@ -42,7 +47,7 @@
 <Section>
 	<img
 		src="{base}/assets/Asset 3.png"
-		class="gradient absolute left-1/2 top-1/2 z-[-100] h-screen translate-x-[-50%] translate-y-[-50%]"
+		class="gradient absolute left-1/2 top-1/2 -z-10 h-screen translate-x-[-50%] translate-y-[-50%]"
 		alt="Gradient"
 	/>
 	<Glass>
@@ -51,7 +56,26 @@
 			<h4 class="text-foreground">Contribute to real projects</h4>
 			<h4>Embark your journey by contributing to projects built by the linux club</h4>
 		</div>
-		<a class="font-bold text-foreground" href="{base}/">Take a peek -</a>
+		<div class="flex flex-row space-x-2">
+			<a class="font-bold text-foreground" href="{base}/">Take a peek </a>
+			<svg
+				width="16"
+				height="24"
+				viewBox="0 0 18 30"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<line x1="1.82288" y1="2.23223" x2="15.9029" y2="16.3122" stroke="white" stroke-width="5" />
+				<line
+					y1="-2.5"
+					x2="19.9121"
+					y2="-2.5"
+					transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 0 26)"
+					stroke="white"
+					stroke-width="5"
+				/>
+			</svg>
+		</div>
 	</Glass>
 	<div class="mt-4 flex flex-col space-y-4 xl:flex-row xl:space-x-4 xl:space-y-0">
 		<Glass>
@@ -72,7 +96,7 @@
 <Section>
 	<img
 		src="{base}/assets/Asset 2.png"
-		class="gradient absolute right-[-512px] top-0 z-[-100] h-[1024px] w-[1024px]"
+		class="gradient absolute right-[-512px] top-0 -z-10 h-[1024px] w-[1024px]"
 		alt="Gradient"
 	/>
 	<h2 style="text-shadow: 0px 4px 84px 0px rgba(255, 255, 255, 0.85);" class="bg-transparent">
@@ -171,18 +195,18 @@
 </Section>
 
 <Section>
-	<div class="absolute left-0 top-[-3rem] box-content h-full w-full overflow-clip pb-64">
+	<div class="absolute left-0 top-[-3rem] -z-10 box-content h-[0px] w-full overflow-clip pb-[70vh]">
 		<img
 			src="{base}/assets/Asset 1.png"
-			class="gradient absolute left-1/2 top-0 z-[-100] w-[512px] max-w-lg translate-x-[-50%] rotate-[50deg] xl:w-[1024px]"
+			class="gradient absolute left-1/2 top-0 -z-10 w-[512px] max-w-lg translate-x-[-50%] rotate-[50deg] xl:w-[1024px]"
 			alt="Gradient"
 		/>
 	</div>
-	<div class="relative mb-12 flex items-center">
+	<div class="relative mb-12 mt-[30vh] flex items-center">
 		<h1>Get started now.</h1>
 	</div>
 	<div class="flex w-fit flex-col space-y-4 xl:flex-row xl:space-x-8 xl:space-y-0">
-		<Button href="{base}/" primary>Get started</Button>
+		<Button href="{base}/register" primary>Get started</Button>
 		<Button href="{base}/">Learn more</Button>
 	</div>
 </Section>

src/routes/register/+page.svelte

@@ -13,11 +13,11 @@
 	<img src="{base}/logo.png" class="m-auto mb-12 h-24 w-24" alt="FOSSit Logo" />
 	<h1 class="mb-16 text-center text-4xl xl:text-7xl">Register for FOSSit ‘24</h1>
 	<div
-		class="absolute left-0 top-0 z-[-100] box-content h-full w-full overflow-clip xl:top-[-12rem] xl:pb-[calc(100vh-693px)]"
+		class="absolute left-0 top-0 -z-10 box-content h-full w-full overflow-clip xl:top-[-12rem] xl:pb-[calc(100vh-693px)]"
 	>
 		<img
 			src="{base}/assets/Asset 1.png"
-			class="gradient absolute left-1/2 top-64 z-[-100] w-[512px] max-w-lg translate-x-[-50%] rotate-[50deg] !brightness-75 xl:w-[768px]"
+			class="gradient absolute left-1/2 top-64 -z-10 w-[512px] max-w-lg translate-x-[-50%] rotate-[50deg] !brightness-75 xl:w-[768px]"
 			alt="Gradient"
 		/>
 	</div>