landing page done, just needs the login button sorted

src/app.css

@@ -36,7 +36,7 @@
 	}
 
 	.dark {
-		--background: 240 10% 3.9%;
+		--background: 0 0% 3.9%;
 		--foreground: 210 40% 98%;
 
 		--muted: 217.2 32.6% 17.5%;

src/lib/components/headers/app-header.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-50 w-full bg-[#202020]"
+	class="sticky top-0 z-50 w-full bg-gradient-to-b from-[#202020] to-[#020202]"
 >
 	<div
 		class="container mx-auto flex h-24 max-w-screen-2xl items-center px-4 2xl:px-0"

src/lib/components/headers/landing-header.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
-	import LogoGreen from "$lib//logos/Logo-GreenWithText.svg";
+	import type { User } from "lucia";
+	import LogoGreen from "$lib/logos/Logo-GreenWithText.svg";
+	import { AccountHeaderComponent } from "@/account";
 
+	interface Props {
+		user: User | null;
+	}
+
+	const { user }: Props = $props();
 </script>
 
 <header
-	class="sticky top-0 z-50 w-full bg-[#202020] shadow-lg"
+	class="sticky top-0 z-50 w-full shadow-lg h-28 bg-gradient-to-b from-[#202020] to-[#020202]"
 >
-	<div class="items-center justify-center flex flex-row px-20 py-2">
-		<img src={LogoGreen} alt="JailBird Green" class="h-28 " />
+	<div class="flex items-center justify-end px-20 py-4 h-full">
+		<AccountHeaderComponent {user} avatar_size="custom" />
+	</div>
+
+	<div class="absolute inset-0 flex items-center justify-center">
+		<img src={LogoGreen} alt="JailBird Green" class="h-20" />
 	</div>
 
 </header>

src/routes/(landing)/+layout.svelte

@@ -9,7 +9,9 @@
 
 <LandingHeader {user} />
 
-<div class="bg-cover bg-center h-full" style="background-image: url('/src/lib/backgroundsAndAssets/landerDecoBackgroundV2.svg'), linear-gradient(to right, #000000 30%, #6CFF96 100%); background-position: right center; background-repeat: no-repeat; background-size: 40%;">
+<!-- div to add background to pages solely affected by the landing layout -->
+
+<div class="bg-cover bg-center h-full" style="background-image: url('/backgroundsAndAssets/landerDecoBackgroundV2.svg'), linear-gradient(to right, #0A0A0A 30%, #6CFF96 100%); background-position: right center; background-repeat: no-repeat; background-size: 40%;">
 	<Main class="h-landing-main">
 		{@render children()}
 	</Main>

src/routes/+layout.svelte

@@ -24,7 +24,7 @@
 <Toaster position="bottom-center" theme={$mode ?? "system"} richColors />
 
 <QueryClientProvider client={queryClient}>
-	<div style="background-color: #000000; min-height: 100vh;">
+	<div style="min-height: 100vh;">
 		{@render children()}
 	</div>
 	<SvelteQueryDevtools />

tailwind.config.js

@@ -77,7 +77,7 @@ const config = {
 				"app-main": "calc(100vh - 9.5rem - 2px)",
 			},
 			height: {
-				"landing-main": "calc(100vh - 12rem - 2px)",
+				"landing-main": "calc(100vh - 7rem - 2px)",
 				"app-main": "calc(100vh - 9.5rem - 2px)",
 			},
 		},