├── src
    ├── routes
    │   ├── auth
    │   │   ├── +page.svelte
    │   │   ├── login
    │   │   │   ├── +page.server.ts
    │   │   │   └── +page.svelte
    │   │   ├── success
    │   │   │   └── +page.svelte
    │   │   ├── create-account
    │   │   │   ├── +page.server.ts
    │   │   │   └── +page.svelte
    │   │   └── forgot-password
    │   │   │   └── +page.svelte
    │   ├── dashboard
    │   │   ├── +page.svelte
    │   │   ├── [slug]
    │   │   │   ├── +page.ts
    │   │   │   ├── [subslug]
    │   │   │   │   ├── +page.ts
    │   │   │   │   └── +page.svelte
    │   │   │   └── +page.svelte
    │   │   ├── +layout.server.ts
    │   │   └── +layout.svelte
    │   ├── +layout.server.ts
    │   ├── +layout.svelte
    │   └── +page.svelte
    ├── lib
    │   ├── index.ts
    │   ├── supabase.ts
    │   └── leftnavoptions
    │   │   ├── Title1.svelte
    │   │   ├── SectionsMinimal.svelte
    │   │   ├── SectionsUI.svelte
    │   │   ├── Avatar.svelte
    │   │   ├── SectionsIcons.svelte
    │   │   ├── SectionsLine.svelte
    │   │   └── LeftAlert.svelte
    ├── app.css
    ├── stores
    │   ├── navigation.ts
    │   └── leftNavData.ts
    ├── app.html
    └── app.d.ts
├── .npmrc
├── .prettierignore
├── static
    ├── favicon.png
    ├── forest.jpg
    └── productimage.png
├── postcss.config.js
├── .prettierrc
├── vite.config.ts
├── .gitignore
├── tsconfig.json
├── svelte.config.js
├── README.md
├── tailwind.config.ts
└── package.json


/src/routes/auth/+page.svelte:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Package Managers
2 | package-lock.json
3 | pnpm-lock.yaml
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaslappenbusch/svelte-5-dashboard/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/static/forest.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaslappenbusch/svelte-5-dashboard/HEAD/static/forest.jpg


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {}
5 | 	}
6 | };
7 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss/base';
2 | @import 'tailwindcss/components';
3 | @import 'tailwindcss/utilities';
4 | 


--------------------------------------------------------------------------------
/src/stores/navigation.ts:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 | 
3 | export const isNavOpen = writable(true);


--------------------------------------------------------------------------------
/static/productimage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaslappenbusch/svelte-5-dashboard/HEAD/static/productimage.png


--------------------------------------------------------------------------------
/src/lib/supabase.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from '@supabase/supabase-js'
2 | 
3 | export const supabase = createClient(
4 |     import.meta.env.VITE_SUPABASE_URL,
5 |     import.meta.env.VITE_SUPABASE_ANON_KEY
6 | )


--------------------------------------------------------------------------------
/src/routes/dashboard/+page.svelte:
--------------------------------------------------------------------------------
1 | <div class="flex flex-col items-center space-y-7">
2 |     <div class="text-ui-tx-2 text-5xl">Choose a <span class="text-ui-tx">section </span> to get started.</div>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/src/routes/dashboard/[slug]/+page.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { error } from '@sveltejs/kit';
3 | import type { PageLoad } from './$types';
4 | 
5 | export const load: PageLoad = ({ params }:any) => {
6 |     return {
7 |         slug: params.slug
8 |     };
9 | };


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte"],
 7 | 	"overrides": [
 8 | 		{
 9 | 			"files": "*.svelte",
10 | 			"options": {
11 | 				"parser": "svelte"
12 | 			}
13 | 		}
14 | 	]
15 | }
16 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | import Icons from 'unplugin-icons/vite'
 3 | import { defineConfig } from 'vite';
 4 | 
 5 | export default defineConfig({
 6 | 	plugins: [sveltekit(),
 7 | 		Icons({
 8 | 		  compiler: 'svelte',
 9 | 		  autoInstall: true,
10 | 		})
11 | 	]
12 | });
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # Output
 4 | .output
 5 | .vercel
 6 | .netlify
 7 | .wrangler
 8 | /.svelte-kit
 9 | /build
10 | 
11 | # OS
12 | .DS_Store
13 | Thumbs.db
14 | 
15 | # Env
16 | .env
17 | .env.*
18 | !.env.example
19 | !.env.test
20 | 
21 | # Vite
22 | vite.config.js.timestamp-*
23 | vite.config.ts.timestamp-*
24 | 


--------------------------------------------------------------------------------
/src/routes/dashboard/[slug]/[subslug]/+page.ts:
--------------------------------------------------------------------------------
 1 | import { error } from '@sveltejs/kit';
 2 | import type { PageLoad } from './$types';
 3 | 
 4 | export const load: PageLoad = ({ params }) => {
 5 |     return {
 6 |         slug: params.slug,
 7 |         subslug: params.subslug
 8 |     };
 9 | 
10 |     error(404, 'Route Not found');
11 | };


--------------------------------------------------------------------------------
/src/routes/dashboard/[slug]/[subslug]/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     /** @type {{ data: import('./$types').PageData }} */
 3 | 	let { data } = $props();
 4 | 
 5 | </script>
 6 | 
 7 | <div class="flex flex-col items-center space-y-7">
 8 |     <div class="text-ui-tx-2 text-5xl">The <span class="text-ui-tx">{data.subslug}</span> section.</div>
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body data-sveltekit-preload-data="hover">
10 | 		<div style="display: contents">%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | import type { Session, SupabaseClient, User } from '@supabase/supabase-js'
 2 | 
 3 | declare global {
 4 |   namespace App {
 5 |     // interface Error {}
 6 |     interface Locals {
 7 |       supabase: SupabaseClient
 8 |       safeGetSession: () => Promise<{ session: Session | null; user: User | null }>
 9 |       session: Session | null
10 |       user: User | null
11 |     }
12 |     interface PageData {
13 |       session: Session | null
14 |     }
15 |     // interface PageState {}
16 |     // interface Platform {}
17 |   }
18 | }
19 | 
20 | export {}


--------------------------------------------------------------------------------
/src/routes/+layout.server.ts:
--------------------------------------------------------------------------------
 1 | import type { LayoutServerLoad } from './$types';
 2 | import { supabase } from '$lib/supabase';
 3 | 
 4 | export const load: LayoutServerLoad = async () => {
 5 |     const { data: { session }, error } = await supabase.auth.getSession();
 6 |     console.log('Root layout server session check:', session?.user);
 7 |     
 8 |     return {
 9 |         session,
10 |         userData: {
11 |             email: session?.user?.email,
12 |             id: session?.user?.id,
13 |             lastSignIn: session?.user?.last_sign_in_at,
14 |             created: session?.user?.created_at
15 |         }
16 |     };
17 | };


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import '../app.css';
 3 | 
 4 | 	let { children, data } = $props<{
 5 |         children: any;
 6 |         data: {
 7 |             session: any;
 8 |             userData: {
 9 |                 email: string | undefined;
10 |                 id: string | undefined;
11 |                 lastSignIn: string | undefined;
12 |                 created: string | undefined;
13 |             }
14 |         }
15 |     }>();
16 | 
17 |     $effect(() => {
18 |         console.log('Current user data:', {
19 |             session: data.session,
20 |             userData: data.userData
21 |         });
22 |     });
23 | 
24 | </script>
25 | 
26 | {@render children()}
27 | 


--------------------------------------------------------------------------------
/src/routes/dashboard/+layout.server.ts:
--------------------------------------------------------------------------------
 1 | import type { LayoutServerLoad } from './$types';
 2 | import { supabase } from '$lib/supabase';
 3 | 
 4 | export const load = (async ({ depends }) => {
 5 |     // Tell Svelte to re-run this load function when auth changes
 6 |     depends('supabase:auth');
 7 | 
 8 |     const { data: { session }, error } = await supabase.auth.getSession();
 9 |     
10 |     return {
11 |         session,
12 |         userData: {
13 |             email: session?.user?.email,
14 |             id: session?.user?.id,
15 |             lastSignIn: session?.user?.last_sign_in_at,
16 |             created: session?.user?.created_at
17 |         }
18 |     };
19 | }) satisfies LayoutServerLoad;


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true,
12 | 		"moduleResolution": "bundler"
13 | 	}
14 | 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15 | 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16 | 	//
17 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://svelte.dev/docs/kit/integrations
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
11 | 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12 | 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14 | 		adapter: adapter()
15 | 	}
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-5-dashboard - A Coastal UI boilerplate
 2 | 
 3 | A powerful, customizable dashboard template built with modern technologies. Perfect for building your next admin panel, analytics dashboard, or SaaS platform.
 4 | 
 5 | Join our growing community on [Discord](https://discord.gg/fB5uJYYD8E) for support, feature discussions, and updates! Also visit [Coastal UI](https://coastalui.com) to learn more about the components and such we work on.
 6 | 
 7 | ## Tech Stack
 8 | 
 9 | - **Svelte** - A radical new approach to building user interfaces
10 | - **Supabase** - Open source Firebase alternative
11 | - **Tailwind CSS** - A utility-first CSS framework
12 | - **TypeScript** - JavaScript that scales
13 | 
14 | ## Getting Started
15 | 
16 | ```bash
17 | # create a new project in the current directory
18 | npx sv create
19 | 
20 | # create a new project in my-app
21 | npx sv create my-app
22 | 


--------------------------------------------------------------------------------
/src/routes/auth/login/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { fail, redirect } from '@sveltejs/kit';
 2 | import type { Actions } from './$types';
 3 | import { supabase } from '$lib/supabase';
 4 | 
 5 | export const actions = {
 6 |     login: async ({ request }) => {
 7 |         const formData = await request.formData();
 8 |         const email = String(formData.get('email'));
 9 |         const password = String(formData.get('password'));
10 | 
11 |         console.log('Attempting login with:', email); // Log the attempt
12 | 
13 |         const { data, error } = await supabase.auth.signInWithPassword({
14 |             email,
15 |             password
16 |         });
17 | 
18 |         console.log('Login response:', { data, error }); // Log the response
19 | 
20 |         if (error) {
21 |             return fail(400, { message: error.message });
22 |         }
23 | 
24 |         throw redirect(303, '/dashboard');
25 |     }
26 | } satisfies Actions;


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss';
 2 | 
 3 | export default {
 4 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
 5 | 
 6 | 	theme: {
 7 | 		extend: {
 8 | 			colors: {
 9 | 				ui: {
10 | 					// Backgrounds - Lightened for better contrast
11 | 					bg: '#070707',     // Main background
12 | 					'bg-2': '#0A0A0A', // Slightly lighter
13 | 					'bg-3': '#0D0D0D', // Just a touch lighter
14 | 					
15 | 					// Text - Enhanced contrast
16 | 					tx: '#FFFFFF',     // Main text
17 | 					'tx-2': '#CCCCCC', // Secondary text (significantly lightened)
18 | 					'tx-3': '#A3A3A3', // Tertiary text (lightened more)
19 | 					'tx-h': '#E5E5E5', // Hover text (very light)
20 | 					'tx-subhead': '#F0F0F0', // Subheadings (almost white)
21 | 					
22 | 					// Borders - More visible
23 | 					br: '#2A2A2A',     // Border
24 | 					'br-h': '#363636', // Hover border
25 | 					
26 | 					// Accent
27 | 					ac: '#FFFFFF',     // Accent color
28 | 				}
29 | 			}
30 | 		}
31 | 	},
32 | 
33 | 	plugins: []
34 | } satisfies Config;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "dash-boiler",
 3 | 	"private": true,
 4 | 	"version": "0.0.1",
 5 | 	"type": "module",
 6 | 	"scripts": {
 7 | 		"dev": "vite dev",
 8 | 		"build": "vite build",
 9 | 		"preview": "vite preview",
10 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12 | 		"format": "prettier --write .",
13 | 		"lint": "prettier --check ."
14 | 	},
15 | 	"devDependencies": {
16 | 		"@iconify-json/cib": "^1.2.1",
17 | 		"@iconify-json/material-symbols-light": "^1.2.12",
18 | 		"@iconify-json/ri": "^1.2.1",
19 | 		"@sveltejs/adapter-auto": "^3.0.0",
20 | 		"@sveltejs/kit": "^2.9.0",
21 | 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
22 | 		"autoprefixer": "^10.4.20",
23 | 		"prettier": "^3.3.2",
24 | 		"prettier-plugin-svelte": "^3.2.6",
25 | 		"svelte": "^5.0.0",
26 | 		"svelte-check": "^4.0.0",
27 | 		"tailwindcss": "^3.4.9",
28 | 		"typescript": "^5.0.0",
29 | 		"unplugin-icons": "^0.22.0",
30 | 		"vite": "^6.0.0"
31 | 	},
32 | 	"dependencies": {
33 | 		"@supabase/ssr": "^0.5.2",
34 | 		"@supabase/supabase-js": "^2.47.10",
35 | 		"lucide-svelte": "^0.468.0"
36 | 	}
37 | }
38 | 


--------------------------------------------------------------------------------
/src/routes/auth/success/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { goto } from "$app/navigation";
 3 | 
 4 | </script>
 5 | 
 6 | <div class="w-screen h-screen bg-ui-bg flex items-center justify-center relative">
 7 |     <div class="absolute top-4 left-6 text-2xl text-ui-tx">SvelteDashboard</div>
 8 |     <div class="px-10 flex flex-col items-center justify-center w-[450px]">
 9 |         <div class="w-16 h-16 rounded-full border-2 border-green-500 flex items-center justify-center mb-6">
10 |             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
11 |                 <path fill="rgb(34,197,94)" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
12 |             </svg>
13 |         </div>
14 |         <div class="text-3xl mb-4 text-ui-tx text-center ">Account Created!</div>
15 |         <div class="text-ui-tx-2 text-center mb-8">Your account has been successfully created. You can now access the dashboard.</div>
16 |         <button 
17 |             onclick={()=> goto("/dashboard")}
18 |             class="py-2 px-6 flex items-center justify-center border border-ui-br rounded-md hover:text-ui-tx text-sm hover:bg-ui-bg-2 transition focus:outline-none focus:border hover:border-ui-tx-3 text-ui-tx-3">
19 |             Continue to Dashboard
20 |         </button>
21 |     </div>
22 | </div>


--------------------------------------------------------------------------------
/src/routes/auth/create-account/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { fail, redirect } from '@sveltejs/kit';
 2 | import type { Actions } from './$types';
 3 | import { supabase } from '$lib/supabase';
 4 | 
 5 | export const actions = {
 6 |     emailSignUp: async ({ request }) => {
 7 |         const formData = await request.formData();
 8 |         const email = String(formData.get('email'));
 9 |         const password = String(formData.get('password'));
10 | 
11 |         // Create account with email confirmation disabled
12 |         const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
13 |             email,
14 |             password,
15 |             options: {
16 |                 data: {
17 |                     email_confirmed: true
18 |                 }
19 |             }
20 |         });
21 | 
22 |         if (signUpError) {
23 |             console.error('Signup Error:', signUpError);
24 |             return fail(400, { message: signUpError.message });
25 |         }
26 | 
27 |         // Sign them in immediately
28 |         const { data: signInData, error: signInError } = await supabase.auth.signInWithPassword({
29 |             email,
30 |             password
31 |         });
32 | 
33 |         if (signInError) {
34 |             console.error('SignIn Error:', signInError);
35 |             return fail(400, { message: signInError.message });
36 |         }
37 | 
38 |         console.log('Successfully signed in:', signInData);
39 |         throw redirect(303, '/auth/success');
40 |     }
41 | } satisfies Actions;


--------------------------------------------------------------------------------
/src/lib/leftnavoptions/Title1.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { goto } from "$app/navigation";
 3 |     import { get } from "svelte/store";
 4 |     import { isNavOpen } from "../../stores/navigation";   
 5 |     import { fly } from "svelte/transition";
 6 |     import { CloudRainWind } from "lucide-svelte";
 7 |     
 8 |     function toggleNav() {
 9 |         isNavOpen.update(value => !value);
10 |         console.log('Nav is open:', get(isNavOpen));
11 |     }
12 | 
13 |     interface TitleInterface {
14 |         string: string;
15 |         logo?: string;
16 |     }
17 | 
18 |     interface ComponentInterface {
19 |         title: TitleInterface;
20 |     }
21 | 
22 |     let props: ComponentInterface = $props();
23 |     let { title } = props;
24 | </script>
25 | 
26 | <div class="flex items-center justify-between h-[34px] w-full relative">
27 |     {#if $isNavOpen}
28 |         <div 
29 |             in:fly={{ x: -1, duration: 100}}
30 |             out:fly={{ x: -5, duration: 50 }}  
31 |             class="flex items-center justify-center absolute left-0"
32 |         >
33 |             <div class="text-white font-medium text-xl pointer-events-none">
34 |                 SvelteDashboard
35 |             </div>
36 |         </div>
37 |     {:else}
38 |         <div></div>
39 |     {/if}
40 |     <div></div>
41 |     <!-- svelte-ignore a11y_consider_explicit_label -->
42 |     <button 
43 |         onclick={toggleNav} 
44 |         class="text-xs group w-12 flex items-center justify-center"
45 |     >
46 |         <svg  
47 |             class={`text-ui-tx-3 group-hover:text-ui-tx-2 transition-colors w-7 h-7 duration-500 border p-[3px] pl-[5px] rounded-md border-ui-br-h hover:border-ui-tx-3 ${$isNavOpen ? 'ml-5' : 'rotate-180 scale-110'}`} 
48 |             xmlns="http://www.w3.org/2000/svg" 
49 |             viewBox="0 0 24 24"
50 |         >
51 |             <path fill="currentColor" d="M11.92 19.92L4 12l7.92-7.92l1.41 1.42l-5.5 5.5H22v2H7.83l5.51 5.5zM4 12V2H2v20h2z"/>
52 |         </svg>
53 |     </button>
54 | </div>


--------------------------------------------------------------------------------
/src/routes/auth/forgot-password/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { goto } from "$app/navigation";
 3 | 
 4 |     let email = $state("")
 5 |     let error = $state("")
 6 |     let success = $state(false)
 7 | </script>
 8 | 
 9 | <div class="w-screen h-screen bg-ui-bg flex items-center justify-center relative">
10 |     <div class="absolute top-4 left-6 text-2xl text-ui-tx">SvelteDashboard</div>
11 |     <div class="px-10 flex flex-col items-start justify-start w-[450px]">
12 |         <div class="text-3xl mb-4 text-ui-tx">Reset password</div>
13 |         <div class="text-ui-tx-2 mb-6">Enter your email address and we'll send you instructions to reset your password.</div>
14 |         
15 |         {#if !success}
16 |             <div class="flex flex-col w-full">
17 |                 <div class="text-ui-tx-2 mb-1 text-sm">Email</div>
18 |                 <input
19 |                     bind:value={email}
20 |                     class="border-ui-br bg-transparent border rounded-md w-full focus:outline-none focus:border focus:border-ui-tx-3 transition duration-500 text-ui-tx px-2 py-1 placeholder-ui-br-h/50"
21 |                     placeholder="Enter your email address"
22 |                 />
23 |             </div>
24 |             <div class="flex flex-col items-start justify-center mt-5 w-full">
25 |                 {#if error}
26 |                     <div class="text-sm mb-1 text-red-700">Error: {error}</div>
27 |                 {/if}
28 |                 <button class="py-2 flex items-center justify-center border border-ui-br w-full rounded-md text-ui-tx text-sm hover:bg-ui-bg-2 transition focus:outline-none focus:border focus:border-ui-tx-3">
29 |                     Send Reset Link
30 |                 </button>
31 |             </div>
32 |         {:else}
33 |             <div class="w-full p-4 rounded-md bg-green-500/10 border border-green-500/20 text-green-500 text-sm">
34 |                 Check your email for password reset instructions.
35 |             </div>
36 |         {/if}
37 |         
38 |         <div class="mt-4 text-ui-tx text-sm">
39 |             Remember your password? <button onclick={() => goto("/auth/login")} class="text-ui-tx-3 underline opacity-80 hover:opacity-100 hover:text-ui-tx-2 transition ml-[1px]">Back to login</button>
40 |         </div>
41 |     </div>
42 | </div>


--------------------------------------------------------------------------------
/src/routes/dashboard/[slug]/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { navStore } from "../../../stores/leftNavData";
 3 | 
 4 |     let { data } = $props();
 5 | 
 6 |     function createTestAlert() {
 7 |     const alerts = [
 8 |         // Success alerts (Completed actions)
 9 |         {
10 |             leftIcon: "success",
11 |             size: "small",
12 |             title: "Deploy Successful",
13 |             description: "Version 2.0.4 is now live."
14 |         },
15 |         {
16 |             leftIcon: "success",
17 |             size: "small",
18 |             title: "Backup Complete",
19 |             description: "Database backup finished at 3:00 AM."
20 |         },
21 | 
22 |         // Download alerts (File operations)
23 |         {
24 |             leftIcon: "download",
25 |             size: "small",
26 |             title: "Download Complete",
27 |             description: "Monthly_Report.pdf saved locally.",
28 |             interaction: "open"
29 |         },
30 |         {
31 |             leftIcon: "download",
32 |             size: "small",
33 |             title: "New Update Available",
34 |             description: "Version 2.1.0 ready to install.",
35 |             interaction: "install"
36 |         },
37 | 
38 |         // Sync alerts (System processes)
39 |         {
40 |             leftIcon: "sync",
41 |             size: "small",
42 |             title: "Data Sync in Progress",
43 |             description: "Syncing user data, 45% complete."
44 |         },
45 |         {
46 |             leftIcon: "sync",
47 |             size: "small",
48 |             title: "Cache Refresh",
49 |             description: "Clearing system cache...",
50 |             interaction: "view status"
51 |         }
52 |     ];
53 | 
54 |         const randomAlert:any = alerts[Math.floor(Math.random() * alerts.length)];
55 |         navStore.addAlert(randomAlert);
56 |     }
57 | </script>
58 | 
59 | <div class="flex flex-col items-center space-y-7">
60 |     <div class="text-ui-tx-2 text-5xl">
61 |         The <span class="text-ui-tx">{data.slug}</span> section.
62 |     </div>
63 |     
64 |     <button
65 |         onclick={createTestAlert}
66 |         class="px-4 py-2 bg-ui-bg-2 text-ui-tx border border-ui-br rounded-md hover:bg-ui-bg-3 transition-colors duration-200"
67 |     >
68 |         Create Test Alert
69 |     </button>
70 | </div>


--------------------------------------------------------------------------------
/src/lib/leftnavoptions/SectionsMinimal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { goto } from "$app/navigation";
 3 |     import { page } from "$app/stores";
 4 |     import { fade, fly } from "svelte/transition";
 5 |     import { isNavOpen } from "../../stores/navigation";
 6 |     
 7 |     let { data } = $props();
 8 |     
 9 |     // Flatten all items into a single array
10 |     const allItems = data.flatMap((section: { items: any[]; }) => 
11 |         section.items.map((item: { title: string; }) => ({
12 |             ...item,
13 |             route: `/dashboard/${item.title.toLowerCase().replace(' ', '-')}`
14 |         }))
15 |     );
16 |     
17 |     function handleNavigation(route: string) {
18 |         goto(route);
19 |     }
20 | 
21 | </script>
22 | 
23 | {#if $isNavOpen}
24 |     <div 
25 |         in:fly={{ x: -5, duration: 100}}
26 |         out:fly={{ x: -5, duration: 200 }}
27 |         class="w-full flex flex-col"
28 |     >
29 |         {#each allItems as item}
30 |             <button 
31 |                 class="group flex items-center justify-start w-full h-full transition-colors group relative group"
32 |                 onclick={() => handleNavigation(item.route)}
33 |             >
34 |                 <div class="absolute right-4 z-[1] group-hover:opacity-100 opacity-0 transition duration-200 group-hover:translate-x-1">
35 |                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24"><path fill="#fff" fill-rule="evenodd" d="M10.157 12.711L4.5 18.368l-1.414-1.414l4.95-4.95l-4.95-4.95L4.5 5.64l5.657 5.657a1 1 0 0 1 0 1.414"/></svg>
36 |                 </div>
37 |                 <div 
38 |                     class={`h-full w-[1px] transition-colors ${
39 |                         $page.url.pathname === item.route 
40 |                         ? 'bg-ui-ac' 
41 |                         : 'bg-ui-br group-hover:bg-ui-tx-h'
42 |                     }`}
43 |                 ></div>
44 |                 <div 
45 |                     class={`relative py-[7px] pl-3 flex-grow flex justify-between items-center transition-transform duration-200 ease-out ${
46 |                         $page.url.pathname === item.route
47 |                         ? 'text-ui-ac bg-ui-bg-3'
48 |                         : 'text-ui-tx-2 group-hover:text-ui-tx-h group-hover:translate-x-1'
49 |                     }`}
50 |                 >
51 |                     <span>{item.title}</span>
52 |                 </div>
53 |             </button>
54 |         {/each}
55 |     </div>
56 | {/if}


--------------------------------------------------------------------------------
/src/lib/leftnavoptions/SectionsUI.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     
 3 |     import { goto } from "$app/navigation";
 4 |     import { page } from "$app/stores";
 5 | 	import { fly } from "svelte/transition";
 6 |     import { isNavOpen } from "../../stores/navigation";
 7 |     
 8 |     let { data } = $props();
 9 |     
10 |     function handleNavigation(sectionTitle: string, itemTitle: string) {
11 |         const route = `/dashboard/${itemTitle.toLowerCase().replace(' ', '-')}`;
12 |         goto(route);
13 |     }
14 |     
15 | </script>
16 | 
17 | {#if $isNavOpen}
18 |     <div transition:fly={{ duration: 100}} class="w-full flex flex-col space-y-6">
19 |         {#each data as section, sectionIndex}
20 |             <div class="flex flex-col space-y-1">
21 |                 <!-- Section Header (hidden for first section) -->
22 |                 {#if sectionIndex !== 0}
23 |                     <div class="pl-1 text-ui-tx-3 text-xs font-medium uppercase tracking-wider mb-2">
24 |                         {section.title}
25 |                     </div>
26 |                 {/if}
27 |                 
28 |                 <!-- Section Items -->
29 |                 <div class="flex flex-col space-y-[2px]">
30 |                     {#each section.items as item}
31 |                         {@const route = `/dashboard/${item.title.toLowerCase().replace(' ', '-')}`}
32 |                         <button 
33 |                             class="w-full text-left h-[36px] pl-3 border rounded-lg {
34 |                                 $page.url.pathname === route 
35 |                                     ? 'bg-ui-bg-2 text-ui-tx border-ui-br font-medium' 
36 |                                     : 'text-ui-tx-2 border-transparent'
37 |                             }"
38 |                             onclick={() => handleNavigation(section.title, item.title)}
39 |                         >
40 |                             <div class="flex items-center justify-between">
41 |                                 <span class="relative">{item.title}</span>
42 |                                 {#if item.totalNotifications > 0}
43 |                                     <span class="text-xs bg-ui-bg-3 w-[30px] px-[12px] py-[2px] rounded-full">
44 |                                         {item.totalNotifications}
45 |                                     </span>
46 |                                 {/if}
47 |                             </div>
48 |                         </button>
49 |                     {/each}
50 |                 </div>
51 |             </div>
52 |         {/each}
53 |     </div>
54 | {/if}


--------------------------------------------------------------------------------
/src/lib/leftnavoptions/Avatar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { goto } from "$app/navigation";
 3 |     import { page } from "$app/stores";
 4 |     import { fade } from "svelte/transition";
 5 |     import { isNavOpen } from "../../stores/navigation";
 6 |     import { supabase } from "$lib/supabase";
 7 |  
 8 |     let { data } = $props();
 9 |     
10 |     // Generate route from section title and item name
11 |     function generateRoute(sectionTitle: string, itemName: string): string {
12 |         const baseRoute = sectionTitle.toLowerCase() === 'dashboard' 
13 |             ? '' 
14 |             : sectionTitle.toLowerCase().replace(' ', '-');
15 |         const itemRoute = itemName.toLowerCase().replace(' ', '-');
16 |         return `/${baseRoute}${baseRoute ? '/' : ''}${itemRoute}`;
17 |     }
18 |     
19 |     // Handle navigation
20 |     function handleNavigation(route: string) {
21 |         goto(route);
22 |     }
23 |  
24 |     async function handleLogout() {
25 |         const { error } = await supabase.auth.signOut();
26 |         if (!error) {
27 |             goto('/auth/login');
28 |         } else {
29 |             console.error('Error logging out:', error);
30 |         }
31 |     }
32 |  </script>
33 |  
34 |  
35 |  <div class="h-10 flex items-center justify-start mt-2 w-full">
36 |     <div class="relative h-10 w-10 flex-shrink-0">
37 |         <img 
38 |             alt="currentUser" 
39 |             src="https://avatars.githubusercontent.com/u/19" 
40 |             class="h-10 w-10 rounded-full border border-zinc-500 opacity-80"
41 |         />
42 |         {#if data.statusColor}
43 |             <div class="absolute right-0 bottom-[2px] h-[10px] w-[10px] {data.statusColor} rounded-full"></div>
44 |         {/if}
45 |     </div>
46 |     {#if $isNavOpen}
47 |         <div in:fade={{ duration: 100}} class="flex flex-col justify-center items-start ml-3 min-w-0 flex-grow">
48 |             <div class="text-ui-tx w-full truncate pb-[1px]">thomaslappenbusch@gmail.com</div>
49 |             <div class="flex items-center">
50 |                 <button 
51 |                     class="flex items-center px-1 py-[1px] rounded-md border border-ui-br space-x-[2px]"
52 |                     onclick={handleLogout}
53 |                 >
54 |                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="#fff" d="M3 21V3h9v2H5v14h7v2zm13-4l-1.375-1.45l2.55-2.55H9v-2h8.175l-2.55-2.55L16 7l5 5z"/></svg>
55 |                     <span class="text-[10px] text-ui-tx-2 font-medium">Logout</span>
56 |                 </button>
57 |             </div>
58 |         </div>
59 |     {/if}
60 |  </div>


--------------------------------------------------------------------------------
/src/lib/leftnavoptions/SectionsIcons.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { goto } from "$app/navigation";
 3 |     import { page } from "$app/stores";
 4 | 
 5 |     let { leftNavData } = $props();
 6 |     
 7 |     function generateRoute(sectionTitle: string, itemName: string): string {
 8 |         const baseRoute = sectionTitle.toLowerCase() === 'dashboard' 
 9 |             ? '' 
10 |             : sectionTitle.toLowerCase().replace(' ', '-');
11 |         const itemRoute = itemName.toLowerCase().replace(' ', '-');
12 |         return `/${baseRoute}${baseRoute ? '/' : ''}${itemRoute}`;
13 |     }
14 |     
15 |     function handleNavigation(route: string) {
16 |         goto(route);
17 |     }
18 |     
19 |     // Simple function to get an icon name based on text
20 |     // In a real app, you'd probably pass this as a prop or use a mapping
21 |     function getIconName(text: string): string {
22 |         const icons: Record<string, string> = {
23 |             'Overview': '📊',
24 |             'Analytics': '📈',
25 |             'Reports': '📑',
26 |             'First': '1️⃣',
27 |             'Second': '2️⃣',
28 |             'Third': '3️⃣'
29 |         };
30 |         return icons[text] || '📎';
31 |     }
32 | </script>
33 | 
34 | {#each leftNavData as section, sectionIndex}
35 |     <div class={`mb-6 ${sectionIndex > 0 ? 'mt-8' : ''}`}>
36 |         <div class="flex items-center mb-3">
37 |             <div class="h-px flex-grow bg-ui-br"></div>
38 |             <span class="px-4 text-ui-tx-subhead font-medium">
39 |                 {section.title}
40 |             </span>
41 |             <div class="h-px flex-grow bg-ui-br"></div>
42 |         </div>
43 |         {#each section.items as text, itemIndex}
44 |             {@const route = generateRoute(section.title, text)}
45 |             <button 
46 |                 class="group w-full flex items-center space-x-3 p-2 rounded-lg mb-1 transition-all"
47 |                 class:bg-ui-bg-3={$page.url.pathname === route}
48 |                 class:text-ui-ac={$page.url.pathname === route}
49 |                 class:text-ui-tx-2={$page.url.pathname !== route}
50 |                 onclick={() => handleNavigation(route)}
51 |             >
52 |                 <span class="text-lg w-6 text-center">
53 |                     {getIconName(text)}
54 |                 </span>
55 |                 <span class="flex-grow text-left group-hover:translate-x-1 transition-transform">
56 |                     {text}
57 |                 </span>
58 |                 {#if $page.url.pathname === route}
59 |                     <span class="text-ui-ac">→</span>
60 |                 {/if}
61 |             </button>
62 |         {/each}
63 |     </div>
64 | {/each}


--------------------------------------------------------------------------------
/src/lib/leftnavoptions/SectionsLine.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { goto } from "$app/navigation";
 3 |     import { page } from "$app/stores";
 4 |     import { fade, fly } from "svelte/transition";
 5 |     import { isNavOpen } from "../../stores/navigation";
 6 |     
 7 |     let { data } = $props();
 8 |     
 9 |     // Generate route from section title and item title
10 |     function generateRoute(sectionTitle: string, item: { title: string; totalNotifications: number }): string {
11 |         // Always start with /dashboard
12 |         const basePath = '/dashboard';
13 |         
14 |         // If section is Dashboard, only append the item route
15 |         if (sectionTitle.toLowerCase() === 'dashboard') {
16 |             const itemRoute = item.title.toLowerCase().replace(' ', '-');
17 |             return `${basePath}/${itemRoute}`;
18 |         }
19 |         
20 |         // For other sections, include both section and item in the route
21 |         const sectionRoute = sectionTitle.toLowerCase().replace(' ', '-');
22 |         const itemRoute = item.title.toLowerCase().replace(' ', '-');
23 |         return `${basePath}/${sectionRoute}/${itemRoute}`;
24 |     }
25 |     
26 |     // Handle navigation
27 |     function handleNavigation(route: string) {
28 |         goto(route);
29 |     }
30 | </script>
31 | 
32 | {#if $isNavOpen}
33 |     <div 
34 |         in:fly={{ x: -5, duration: 100}}
35 |         out:fly={{ x: -5, duration: 200 }}
36 |         class="w-full flex flex-col"
37 |     >
38 |         {#each data as section, sectionIndex}
39 |             <div class="flex flex-col h-full">
40 |                 <div class={`font-semibold text-sm mb-3 ${sectionIndex > 0 ? 'mt-5' : ''} text-ui-tx-subhead`}>
41 |                     {section.title}
42 |                 </div>
43 |                 {#each section.items as item, itemIndex}
44 |                     {@const route = generateRoute(section.title, item)}
45 |                     <button 
46 |                         class="group flex items-center justify-start pl-2 w-full h-full transition-colors group"
47 |                         onclick={() => handleNavigation(route)}
48 |                     >
49 |                         <div 
50 |                             class={`h-full w-[1px] transition-colors ${
51 |                                 $page.url.pathname === route 
52 |                                 ? 'bg-ui-ac' 
53 |                                 : 'bg-ui-br group-hover:bg-ui-tx-h'
54 |                             }`}
55 |                         ></div>
56 |                         <div 
57 |                             class={`relative py-[5px] pl-3 flex-grow flex justify-between items-center transition-transform duration-200 ease-out ${
58 |                                 $page.url.pathname === route
59 |                                 ? 'text-ui-ac bg-ui-bg-3'
60 |                                 : 'text-ui-tx-2 group-hover:text-ui-tx-h group-hover:translate-x-1'
61 |                             }`}
62 |                         >
63 |                             <span>{item.title}</span>
64 |                             {#if item.totalNotifications > 0}
65 |                                 <div 
66 |                                     class="mr-3 text-ui-tx rounded-full p-1 flex items-center justify-center h-4 w-4 text-[12px] font-thin"
67 |                                 >
68 |                                     {item.totalNotifications}
69 |                                 </div>
70 |                             {/if}
71 |                         </div>
72 |                     </button>
73 |                 {/each}
74 |             </div>
75 |         {/each}
76 |     </div>
77 | {/if}


--------------------------------------------------------------------------------
/src/stores/leftNavData.ts:
--------------------------------------------------------------------------------
  1 | import { writable } from 'svelte/store';
  2 | 
  3 | export interface Alert {
  4 |     id: number;
  5 |     leftIcon: "avatar" | "warning" | "hazard";
  6 |     size: "small";
  7 |     title: string;
  8 |     description: string;
  9 |     interaction?: string;
 10 | }
 11 | 
 12 | export interface NavDataType {
 13 |     title: {
 14 |         string: string;
 15 |         logo?: any; // Can be SVG string or URL
 16 |     };
 17 |     sections: {
 18 |         title: string;
 19 |         items: {
 20 |             title: string;
 21 |             totalNotifications: number;
 22 |         }[];
 23 |     }[];
 24 |     alerts: Alert[];
 25 |     profile: {
 26 |         username: string;
 27 |         line: string;
 28 |         statusColor: string;
 29 |     };
 30 | }
 31 | 
 32 | 
 33 | const createNavStore = () => {
 34 |     const { subscribe, set, update } = writable<NavDataType>({
 35 |         title: {
 36 |             string: "Svelte5",
 37 |             logo: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.1 118" class="h-5 w-5"><path d="..." fill="#FF3E00"/></svg>'
 38 |         },
 39 |         sections: [
 40 |             {
 41 |                 title: "Dashboard",
 42 |                 items: [
 43 |                     { title: "Home", totalNotifications: 0 },
 44 |                     { title: "Analytics", totalNotifications: 0 },
 45 |                     { title: "Reports", totalNotifications: 0 }
 46 |                 ]
 47 |             },
 48 |             {
 49 |                 title: "System",
 50 |                 items: [
 51 |                     { title: "Performance", totalNotifications: 0 },
 52 |                     { title: "Monitoring", totalNotifications: 0 },
 53 |                     { title: "Logs", totalNotifications: 0 }
 54 |                 ]
 55 |             }
 56 |         ],
 57 |         alerts: [
 58 |             {
 59 |                 id: 0,
 60 |                 leftIcon: "avatar",
 61 |                 size: "small",
 62 |                 title: "Aspen Septimus",
 63 |                 description: "3 new messages.",
 64 |                 interaction: "open chat"
 65 |             },
 66 |             {
 67 |                 id: 1,
 68 |                 leftIcon: "warning",
 69 |                 size: "small",
 70 |                 title: "Error",
 71 |                 description: "Payment processing."
 72 |             },
 73 |             {
 74 |                 id: 2,
 75 |                 leftIcon: "hazard",
 76 |                 size: "small",
 77 |                 title: "Warning",
 78 |                 description: "You need to update your info."
 79 |             }
 80 |         ],
 81 |         profile: {
 82 |             username: "",
 83 |             line: "WWU 2023",
 84 |             statusColor: "bg-green-600"
 85 |         }
 86 |     });
 87 | 
 88 |     return {
 89 |         subscribe,
 90 |         setProfile: (username: string) => update(data => ({
 91 |             ...data,
 92 |             profile: { ...data.profile, username }
 93 |         })),
 94 |         addAlert: (alert: Omit<Alert, 'id'>) => update(data => {
 95 |             const newAlert = {
 96 |                 ...alert,
 97 |                 id: Math.max(0, ...data.alerts.map(a => a.id)) + 1
 98 |             };
 99 |             return {
100 |                 ...data,
101 |                 alerts: [newAlert, ...data.alerts]
102 |             };
103 |         }),
104 |         deleteAlert: (id: number) => update(data => {
105 |             console.log('Store: Deleting alert', id);
106 |             console.log('Current alerts:', data.alerts);
107 |             const newAlerts = data.alerts.filter(alert => alert.id !== id);
108 |             console.log('New alerts:', newAlerts);
109 |             return {
110 |                 ...data,
111 |                 alerts: newAlerts
112 |             };
113 |         })
114 |     };
115 | };
116 | 
117 | export const navStore = createNavStore();


--------------------------------------------------------------------------------
/src/lib/leftnavoptions/LeftAlert.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { fly, fade, slide } from "svelte/transition";
 3 |     import { isNavOpen } from "../../stores/navigation";
 4 |     import { navStore } from "../../stores/leftNavData";
 5 | 
 6 |     interface ComponentInterface {
 7 |         title?: string;
 8 |         leftIcon?: "avatar" | "warning" | "hazard";
 9 |         description?: string;
10 |         size?: string;
11 |         id: number; // Changed to number to match store type
12 |         index: number;
13 |         'on:close'?: (event: CustomEvent<{ id: number }>) => void;
14 |     }
15 | 
16 |     let { title, leftIcon, description, size, id, index }: ComponentInterface = $props();
17 | 
18 |     async function handleDelete() {
19 |         console.log('Attempting to delete alert with ID:', id);
20 |         navStore.deleteAlert(id);
21 |     }
22 | 
23 | </script>
24 | 
25 | {#if size === "small"}
26 |     <div 
27 |         transition:slide|local={{ duration: 300 }}
28 |     >
29 |         <div 
30 |             class="h-12 group bg-ui-bg-3 rounded-md overflow-hidden relative flex justify-start items-center w-auto transition-transform duration-200 mb-3 {$isNavOpen ? 'hover:translate-x-2' : ''}"
31 |             transition:fade|local={{ duration: 200 }}
32 |         >
33 |             <div class="absolute left-0 bottom-0 h-full w-[2px] {leftIcon === 'warning' ? 'bg-red-600' : leftIcon === 'hazard' ? 'bg-yellow-500' : 'bg-zinc-500'}"></div>
34 |             <!-- svelte-ignore a11y_consider_explicit_label -->
35 |             <button 
36 |                 class="absolute top-[2px] right-[2px]"
37 |                 onclick={handleDelete}
38 |             >
39 |                 <svg class="text-ui-tx-3/20 group-hover:text-ui-tx-3 transition duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243"/></svg>
40 |             </button>
41 |             
42 |             <div class="h-full aspect-square flex items-center justify-center flex-shrink-0">
43 |                 {#if leftIcon === "warning"}
44 |                     <svg class="text-red-600 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
45 |                         <path fill="currentColor" d="M12 17q.425 0 .713-.288T13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17m-1-4h2V7h-2zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
46 |                     </svg>
47 |                 {:else if leftIcon === "hazard"}
48 |                     <svg class="text-yellow-500 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
49 |                         <path fill="currentColor" d="M1 21L12 2l11 19zm3.45-2h15.1L12 6zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m-1-3h2v-5h-2zm1-2.5"/>
50 |                     </svg>
51 |                 {:else if leftIcon === "avatar"}
52 |                     <img 
53 |                         src="https://avatars.githubusercontent.com/u/2" 
54 |                         class="h-8 w-8 ml-[2px] rounded-full border border-zinc-500"
55 |                         alt="User avatar"
56 |                     />
57 |                 {:else if leftIcon === "success"}
58 |                     <svg class="text-green-500 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
59 |                         <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4l8-8z"/>
60 |                     </svg>
61 |                 {:else if leftIcon === "download"}
62 |                     <svg class="text-blue-500 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
63 |                         <path fill="currentColor" d="M12 15.575q-.2 0-.375-.062T11.3 15.3l-3.6-3.6q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l1.9 1.9V4q0-.425.288-.713T12 3q.425 0 .713.288T13 4v8.2l1.9-1.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7l-3.6 3.6q-.15.15-.325.213t-.375.062M6 21q-.825 0-1.413-.588T4 19v-2q0-.425.288-.713T5 16q.425 0 .713.288T6 17v2h12v-2q0-.425.288-.713T19 16q.425 0 .713.288T20 17v2q0 .825-.588 1.413T18 21z"/>
64 |                     </svg>
65 |                 {:else if leftIcon === "sync"}
66 |                     <svg class="text-purple-500 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
67 |                         <path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4l-4-4z"/>
68 |                     </svg>
69 |                 {/if}
70 |             </div>
71 | 
72 |             <div class="flex-grow flex flex-col">
73 |                 {#if $isNavOpen}
74 |                     <div 
75 |                         in:fly={{ x: -5, duration: 100}}
76 |                         out:fly={{ x: -5, duration: 100 }}
77 |                         class="text-ui-tx text-sm font-medium truncate line-clamp-1"
78 |                     >
79 |                         {title}
80 |                     </div>
81 |                     <div 
82 |                         in:fly={{ x: -5, duration: 100}}
83 |                         out:fly={{ x: -5, duration: 100 }}
84 |                         class="text-ui-tx-2 text-[11px] font-medium truncate line-clamp-1"
85 |                     >
86 |                         {description}
87 |                     </div>
88 |                 {/if}
89 |             </div>
90 |         </div>
91 |     </div>
92 | {/if}


--------------------------------------------------------------------------------
/src/routes/auth/create-account/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import { goto } from "$app/navigation";
  3 |     import { enhance } from "$app/forms";
  4 |     import type { ActionResult } from '@sveltejs/kit';
  5 | 
  6 |     let email = $state("")
  7 |     let password = $state("")
  8 |     let confirmPassword = $state("")
  9 |     let error = $state("")
 10 |     let isSubmitting = $state(false)
 11 | 
 12 |     let hasEightChars = $derived(password.length >= 8);
 13 |     let hasSpecialChar = $derived(/[!@#$%^&*(),.?":{}|<>]/.test(password));
 14 |     let isValid = $derived(
 15 |         hasEightChars && 
 16 |         hasSpecialChar && 
 17 |         password === confirmPassword && 
 18 |         email.includes('@')
 19 |     );
 20 | 
 21 |     interface FormResult {
 22 |         message: string;
 23 |         [key: string]: unknown;
 24 |     }
 25 | 
 26 |     const handleSubmit = () => {
 27 |         return async ({ result, update }: { 
 28 |             result: ActionResult,
 29 |             update: () => Promise<void> 
 30 |         }) => {
 31 |             isSubmitting = true;
 32 |             try {
 33 |                 if (result.type === 'failure') {
 34 |                     error = result.data?.message as string || 'Something went wrong';
 35 |                 } else if (result.type === 'redirect') {
 36 |                     await goto(result.location);
 37 |                 } else if (result.type === 'success') {
 38 |                     await update();
 39 |                 }
 40 |             } catch (e) {
 41 |                 error = 'An unexpected error occurred';
 42 |             } finally {
 43 |                 isSubmitting = false;
 44 |             }
 45 |         };
 46 |     };
 47 | </script>
 48 | 
 49 | <div class="w-screen h-screen bg-ui-bg flex items-center justify-center relative">
 50 |     <div class="absolute top-4 left-6 text-2xl text-ui-tx">SvelteDashboard</div>
 51 |     <div class="px-10 flex flex-col items-start justify-start w-[450px]">
 52 |         <div class="text-3xl mb-6 text-ui-tx">Create an account</div>
 53 |         <div class="text-ui-tx text-sm mb-6">
 54 |             Already have an account? 
 55 |             <button 
 56 |                 type="button"
 57 |                 onclick={() => goto("/auth/login")} 
 58 |                 class="text-ui-tx-3 underline opacity-80 hover:opacity-100 hover:text-ui-tx-2 transition ml-[1px]"
 59 |             >
 60 |                 Login
 61 |             </button>
 62 |         </div>
 63 |         
 64 |         <form class="w-full" method="POST" action="?/emailSignUp" use:enhance={handleSubmit}>
 65 |             <div class="flex flex-col w-full">
 66 |                 <div class="text-ui-tx-2 mb-1 text-sm">Email</div>
 67 |                 <input
 68 |                     name="email"
 69 |                     type="email"
 70 |                     required
 71 |                     bind:value={email}
 72 |                     class="border-ui-br bg-transparent border rounded-md w-full focus:outline-none focus:border focus:border-ui-tx-3 transition duration-100 text-ui-tx px-2 py-1 placeholder-ui-br"
 73 |                     placeholder="Enter your email address"
 74 |                 />
 75 |             </div>
 76 | 
 77 |             <div class="flex flex-col w-full mt-5">
 78 |                 <div class="text-ui-tx-2 mb-1 text-sm">Password</div>
 79 |                 <input
 80 |                     name="password"
 81 |                     type="password"
 82 |                     required
 83 |                     bind:value={password}
 84 |                     class="border-ui-br bg-transparent border rounded-md w-full focus:outline-none focus:border focus:border-ui-tx-3 transition duration-500 text-ui-tx px-2 py-1 placeholder-ui-br-h/50"
 85 |                     placeholder="Create a strong password"
 86 |                 />
 87 |             </div>
 88 | 
 89 |             <div class="flex flex-col mt-5 w-full">
 90 |                 <div class="text-ui-tx-2 mb-1 text-sm">Confirm Password</div>
 91 |                 <input
 92 |                     name="confirmPassword"
 93 |                     type="password"
 94 |                     required
 95 |                     bind:value={confirmPassword}
 96 |                     class="border-ui-br bg-transparent border rounded-md w-full focus:outline-none focus:border focus:border-ui-tx-3 transition duration-100 text-ui-tx px-2 py-1"
 97 |                 />
 98 |             </div>
 99 | 
100 |             <div class="flex flex-col mt-3 w-full">
101 |                 <div class="flex items-center">
102 |                     <div class="h-4 w-4 border-ui-br border rounded-full flex items-center justify-center">
103 |                         {#if hasEightChars}
104 |                             <svg class="opacity-80" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
105 |                                 <path fill="#fff" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
106 |                             </svg>
107 |                         {/if}
108 |                     </div>
109 |                     <div class="text-ui-tx-2 text-xs ml-2 -mt-[1px]">8 or more characters</div>
110 |                 </div>
111 |                 
112 |                 <div class="flex items-center mt-2">
113 |                     <div class="h-4 w-4 border-ui-br border rounded-full flex items-center justify-center">
114 |                         {#if hasSpecialChar}
115 |                             <svg class="opacity-80" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
116 |                                 <path fill="#fff" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
117 |                             </svg>
118 |                         {/if}
119 |                     </div>
120 |                     <div class="text-ui-tx-2 text-xs ml-2 -mt-[1px]">One special character</div>
121 |                 </div>
122 |             </div>
123 | 
124 |             <div class="flex flex-col items-start justify-center mt-5 w-full">
125 |                 {#if error}
126 |                     <div class="text-sm mb-1 text-red-700">Error: {error}</div>
127 |                 {/if}
128 |                 <button
129 |                     type="submit"
130 |                     disabled={!isValid || isSubmitting}
131 |                     class="py-2 flex items-center justify-center border border-ui-br w-full rounded-md text-ui-tx text-sm hover:bg-ui-bg-2 transition focus:outline-none focus:border focus:border-ui-tx-3 disabled:opacity-50 disabled:cursor-not-allowed"
132 |                 >
133 |                     {#if isSubmitting}
134 |                         Creating Account...
135 |                     {:else}
136 |                         Create Account
137 |                     {/if}
138 |                 </button>
139 |             </div>
140 |         </form>
141 |     </div>
142 | </div>


--------------------------------------------------------------------------------
/src/routes/auth/login/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import { goto } from "$app/navigation";
  3 |     import { enhance } from "$app/forms";
  4 |     import type { ActionResult } from '@sveltejs/kit';
  5 | 
  6 |     let email = $state("")
  7 |     let password = $state("")
  8 |     let error = $state("")
  9 |     let rememberMe = $state(false)
 10 |     let isSubmitting = $state(false)
 11 | 
 12 |     const handleSubmit = () => {
 13 |         return async ({ result, update }: { 
 14 |             result: ActionResult,
 15 |             update: () => Promise<void> 
 16 |         }) => {
 17 |             isSubmitting = true;
 18 |             try {
 19 |                 if (result.type === 'failure') {
 20 |                     error = result.data?.message as string || 'Something went wrong';
 21 |                 } else if (result.type === 'redirect') {
 22 |                     await goto(result.location);
 23 |                 } else if (result.type === 'success') {
 24 |                     await update();
 25 |                 }
 26 |             } catch (e) {
 27 |                 error = 'An unexpected error occurred';
 28 |             } finally {
 29 |                 isSubmitting = false;
 30 |             }
 31 |         };
 32 |     };
 33 | </script>
 34 | 
 35 | <div class="w-screen h-screen bg-ui-bg flex items-center justify-center relative">
 36 |     <div class="absolute top-4 left-6 text-2xl text-ui-tx">SvelteDashboard</div>
 37 |     <div class="px-10 flex flex-col items-start justify-start w-[450px]">
 38 |         <div class="text-3xl mb-6 text-ui-tx">Welcome back</div>
 39 |         <div class="text-ui-tx text-sm mb-6">
 40 |             New to SvelteDashboard?
 41 |             <button 
 42 |                 type="button"
 43 |                 onclick={() => goto("/auth/create-account")} 
 44 |                 class="text-ui-tx-3 underline opacity-80 hover:opacity-100 hover:text-ui-tx-2 transition ml-[1px]"
 45 |             >
 46 |                 Create account
 47 |             </button>
 48 |         </div>
 49 | 
 50 |         <form 
 51 |             class="w-full" 
 52 |             method="POST" 
 53 |             action="?/login" 
 54 |             use:enhance={handleSubmit}
 55 |         >
 56 |             <div class="flex flex-col w-full">
 57 |                 <div class="text-ui-tx-2 mb-1 text-sm">Email</div>
 58 |                 <input
 59 |                     name="email"
 60 |                     type="email"
 61 |                     required
 62 |                     bind:value={email}
 63 |                     class="border-ui-br bg-transparent border rounded-md w-full focus:outline-none focus:border focus:border-ui-tx-3 transition duration-500 text-ui-tx px-2 py-1 placeholder-ui-br-h/50"
 64 |                     placeholder="Enter your email address"
 65 |                 />
 66 |             </div>
 67 | 
 68 |             <div class="flex flex-col w-full mt-5">
 69 |                 <div class="text-ui-tx-2 mb-1 text-sm">Password</div>
 70 |                 <input
 71 |                     name="password"
 72 |                     type="password"
 73 |                     required
 74 |                     bind:value={password}
 75 |                     class="border-ui-br bg-transparent border rounded-md w-full focus:outline-none focus:border focus:border-ui-tx-3 transition duration-500 text-ui-tx px-2 py-1"
 76 |                 />
 77 |             </div>
 78 | 
 79 |             <div class="flex items-center justify-between w-full mt-2">
 80 |                 <div class="flex items-center">
 81 |                     <input
 82 |                         type="checkbox"
 83 |                         name="rememberMe"
 84 |                         bind:checked={rememberMe}
 85 |                         class="appearance-none border-ui-br bg-transparent border rounded focus:outline-none focus:border focus:border-ui-tx-h w-4 h-4"
 86 |                     />
 87 |                     <div class="text-ui-tx-2 text-sm ml-2">Remember me</div>
 88 |                 </div>
 89 |                 <button 
 90 |                     type="button"
 91 |                     onclick={() => goto("/auth/forgot-password")} 
 92 |                     class="text-ui-tx-3 text-sm underline opacity-80 hover:opacity-100 hover:text-ui-tx-2 transition"
 93 |                 >
 94 |                     Forgot password?
 95 |                 </button>
 96 |             </div>
 97 | 
 98 |             <div class="flex flex-col items-start justify-center mt-5 w-full">
 99 |                 {#if error}
100 |                     <div class="text-sm mb-1 text-red-700">Error: {error}</div>
101 |                 {/if}
102 |                 <button
103 |                     type="submit"
104 |                     disabled={isSubmitting}
105 |                     class="py-2 flex items-center justify-center border border-ui-br w-full rounded-md text-ui-tx text-sm hover:bg-ui-bg-2 transition focus:outline-none focus:border focus:border-ui-tx-3 disabled:opacity-50 disabled:cursor-not-allowed"
106 |                 >
107 |                     {#if isSubmitting}
108 |                         Signing in...
109 |                     {:else}
110 |                         Sign In
111 |                     {/if}
112 |                 </button>
113 |             </div>
114 |         </form>
115 | 
116 |         <div class="flex items-center my-3 w-full">
117 |             <div class="flex-grow h-[1px] bg-ui-br w-full"></div>
118 |             <div class="mx-3 text-ui-tx-2 text-xs font-medium">OR</div>
119 |             <div class="flex-grow h-[1px] bg-ui-br w-full"></div>
120 |         </div>
121 | 
122 |         <button class="py-2 flex items-center justify-center border border-ui-br w-full rounded-md text-sm hover:bg-ui-bg-2 transition focus:outline-none focus:border focus:border-ui-tx-3">
123 |             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#fff" d="M9.333 6.929L14.546 1H13.31L8.783 6.147L5.169 1H1l5.466 7.783L1 15h1.235l4.779-5.436L10.83 15H15zM7.641 8.852l-.554-.776L2.68 1.911h1.898l3.557 4.977l.552.776l4.623 6.47h-1.897z"/></svg>
124 |             <div class="ml-2 text-ui-tx text-opacity-80">Continue with X</div>
125 |         </button>
126 | 
127 |         <button class="py-2 flex items-center justify-center border mt-2 border-ui-br w-full rounded-md text-sm hover:bg-ui-bg-2 transition focus:outline-none focus:border focus:border-ui-tx-3">
128 |             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 262"><path fill="#4285f4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"/><path fill="#34a853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"/><path fill="#fbbc05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"/><path fill="#eb4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"/></svg>
129 |             <div class="ml-2 text-ui-tx text-opacity-80">Continue with Google</div>
130 |         </button>
131 |     </div>
132 | </div>


--------------------------------------------------------------------------------
/src/routes/dashboard/+layout.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import { page } from '$app/stores';
  3 |     import { goto } from '$app/navigation';
  4 |     import SectionsLine from '$lib/leftnavoptions/SectionsLine.svelte';
  5 |     import Title1 from '$lib/leftnavoptions/Title1.svelte';
  6 |     import { isNavOpen } from '../../stores/navigation';
  7 |     import SectionsIcons from '$lib/leftnavoptions/SectionsIcons.svelte';
  8 |     import SectionsMinimal from '$lib/leftnavoptions/SectionsMinimal.svelte';
  9 |     import Avatar from '$lib/leftnavoptions/Avatar.svelte';
 10 |     import LeftAlert from '$lib/leftnavoptions/LeftAlert.svelte';
 11 |     import { fade, fly } from 'svelte/transition';
 12 |     import { flip } from 'svelte/animate';
 13 |     import { navStore } from '../../stores/leftNavData';
 14 |     import SectionsUI from '$lib/leftnavoptions/SectionsUI.svelte';
 15 | 
 16 |     let { children, data } = $props<{
 17 |         children: any;
 18 |         data: {
 19 |             session: any;
 20 |             userData: {
 21 |                 email: string | undefined;
 22 |                 id: string | undefined;
 23 |                 lastSignIn: string | undefined;
 24 |                 created: string | undefined;
 25 |             }
 26 |         }
 27 |     }>();
 28 | 
 29 |     // Update profile when session changes
 30 |     $effect(() => {
 31 |         if (data.session?.user?.email) {
 32 |             navStore.setProfile(data.session.user.email);
 33 |         } else {
 34 |             goto('/auth/login');
 35 |         }
 36 |     });
 37 | 
 38 |     function deleteItem(id: number) {
 39 |         navStore.deleteAlert(id);
 40 |     }
 41 | </script>
 42 | 
 43 | {#if data?.session}
 44 |     <div class="w-full flex relative">
 45 |         <div class={`h-full fixed overflow-hidden flex flex-col bg-ui-bg justify-start items-start px-4 py-5 flex-shrink-0 border-r border-ui-br
 46 |             transition-all duration-300 ease-out
 47 |             ${$isNavOpen ? 'w-72' : 'w-[74px] px-[12px]'}`}>        
 48 |             <Title1 title={$navStore.title}/>
 49 | 			<div class="my-2 h-[1px] "></div>
 50 |             <SectionsUI data={$navStore.sections}/>
 51 |             <div class="flex-grow"></div>
 52 |             <div class="flex flex-col gap-4 w-full mb-3 justify-end">
 53 |                 {#each $navStore.alerts as item (item.id)}
 54 |                     <div 
 55 | 						class="flex h-12 justify-between items-center rounded-md overflow-hidden shadow-sm bg-ui-bg-3 relative group"
 56 | 						animate:flip={{ duration: 550 }}
 57 | 						transition:fly={{duration:100, x:-12}}
 58 |                     >
 59 |                         <!-- Absolute Things -->
 60 | 						<button 
 61 | 							class="absolute top-[2px] right-[2px]"
 62 | 							onclick={() => deleteItem(item.id)}
 63 | 						>
 64 | 							<svg class="text-ui-tx-3/20 group-hover:text-ui-tx-3 transition duration-200 {$isNavOpen ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243"/></svg>
 65 | 						</button>
 66 |                         <div class="absolute left-0 bottom-0 h-full w-[2px] { 
 67 |                             item.leftIcon === 'warning' ? 'bg-red-600' : 
 68 |                             item.leftIcon === 'hazard' ? 'bg-yellow-500' : 
 69 |                             item.leftIcon === 'success' ? 'bg-green-500' :
 70 |                             item.leftIcon === 'download' ? 'bg-blue-500' :
 71 |                             item.leftIcon === 'sync' ? 'bg-purple-500' :
 72 |                             'bg-zinc-500'
 73 |                         }"></div>
 74 |                         
 75 |                         <!-- Icon -->
 76 |                         <div class="h-full aspect-square flex items-center justify-center flex-shrink-0">
 77 |                             {#if item.leftIcon === "warning"}
 78 |                                 <svg class="text-red-600 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 79 |                                     <path fill="currentColor" d="M12 17q.425 0 .713-.288T13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17m-1-4h2V7h-2zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
 80 |                                 </svg>
 81 |                             {:else if item.leftIcon === "hazard"}
 82 |                                 <svg class="text-yellow-500 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 83 |                                     <path fill="currentColor" d="M1 21L12 2l11 19zm3.45-2h15.1L12 6zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m-1-3h2v-5h-2zm1-2.5"/>
 84 |                                 </svg>
 85 |                             {:else if item.leftIcon === "avatar"}
 86 |                                 <img 
 87 |                                     src="https://avatars.githubusercontent.com/u/2" 
 88 |                                     class="h-8 w-8 ml-[2px] rounded-full border border-zinc-500"
 89 |                                     alt="User avatar"
 90 |                                 />
 91 |                             {:else if item.leftIcon === "success"}
 92 |                                 <svg class="text-green-500 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/></svg>
 93 |                             {:else if item.leftIcon === "download"}
 94 |                                 <svg class="text-blue-500 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 95 |                                     <path fill="currentColor" d="M12 15.575q-.2 0-.375-.062T11.3 15.3l-3.6-3.6q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l1.9 1.9V4q0-.425.288-.713T12 3q.425 0 .713.288T13 4v8.2l1.9-1.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7l-3.6 3.6q-.15.15-.325.213t-.375.062M6 21q-.825 0-1.413-.588T4 19v-2q0-.425.288-.713T5 16q.425 0 .713.288T6 17v2h12v-2q0-.425.288-.713T19 16q.425 0 .713.288T20 17v2q0 .825-.588 1.413T18 21z"/>
 96 |                                 </svg>
 97 |                             {:else if item.leftIcon === "sync"}
 98 |                                 <svg class="text-purple-500 p-[10px] ml-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 99 |                                     <path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4l-4-4z"/>
100 |                                 </svg>
101 |                             {/if}
102 |                         </div>
103 | 
104 |                         <!-- Text Area -->
105 |                         <div class="flex-grow flex flex-col">
106 |                             {#if $isNavOpen}
107 |                                 <div 
108 |                                     in:fly={{ x: -5, duration: 100}}
109 |                                     out:fly={{ x: -5, duration: 100 }}
110 |                                     class="text-ui-tx text-sm font-medium truncate line-clamp-1"
111 |                                 >
112 |                                     {item.title}
113 |                                 </div>
114 |                                 <div 
115 |                                     in:fly={{ x: -5, duration: 100}}
116 |                                     out:fly={{ x: -5, duration: 100 }}
117 |                                     class="text-ui-tx-2 text-[11px] font-medium truncate line-clamp-1 mr-2"
118 |                                 >
119 |                                     {item.description} 
120 |                                     {#if item.interaction}
121 |                                         <button class="text-ui-tx-3 underline hover:text-ui-tx-h transition duration-100">
122 |                                             {item.interaction}
123 |                                         </button>
124 |                                     {/if}
125 |                                 </div>
126 |                             {/if}
127 |                         </div>
128 |                     </div>
129 |                 {/each}
130 |             </div>
131 |             <Avatar data={$navStore.profile}/>
132 |         </div>
133 |         <div class={`
134 |             flex justify-center flex-grow flex-col bg-ui-bg min-h-screen
135 |             transition-all duration-300 ease-out w-full
136 |             ${$isNavOpen ? 'ml-72' : 'ml-[74px]'}
137 |         `}>
138 |             <div class="flex-grow flex items-center justify-center">
139 |                 {@render children()}
140 |             </div>
141 |         </div>
142 |     </div>
143 | {:else}
144 |     <script>
145 |         goto('/auth/login');
146 |     </script>
147 | {/if}


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { goto } from "$app/navigation";
  3 |     import { page } from "$app/state";
  4 | 
  5 |     let currentPage:any = $state(page.route.id)
  6 |     
  7 | </script>
  8 | 
  9 | <div class="flex flex-col bg-ui-bg overflow-hidden">
 10 |     <div class="h-[60vh] w-full flex items-center justify-center text-ui-tx-2 relative">
 11 |         <!-- Absolute elements -->
 12 |         <div class="absolute left-0 h-full w-96 bg-gradient-to-r from-[#030303] to-ui-bg z-0">
 13 |         </div>
 14 |         <div class="absolute right-0 h-full w-96 bg-gradient-to-l from-[#030303] to-ui-bg z-0">
 15 |         </div>
 16 |         <div class="absolute -left-24 -top-24 z-10 w-64 h-64 bg-zinc-800 blur-[160px]">
 17 |         </div>
 18 |         <div class="absolute -right-24 -top-24 z-10 w-64 h-64 bg-zinc-800 blur-[160px]">
 19 |         </div>
 20 |         <div class="absolute top-4 left-1/2 -translate-x-1/2 max-w-[1600px] w-full flex items-center justify-center px-6">
 21 |             <div class="flex items-center justify-center space-x-12">
 22 |                 <button class="w-48">Home</button>
 23 |                 <button class="w-48">Documentation</button>
 24 |                 <div class="flex items-center justify-center">
 25 |                     <button class="w-36 ml mr-2 -8 px-5 h-8 rounded-md border-ui-br border-2">View Live Site</button>
 26 |                     <button aria-label="joinDiscordLink" onclick={() => console.log(currentPage)} class="h-8 w-8 bg-indigo-600 border-2 border-indigo-700 border rounded-lg text-ui-tx">
 27 |                         <svg class="h-auto w-auto p-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"/></svg>
 28 |                     </button>
 29 |                 </div>
 30 |             </div>
 31 |         </div>
 32 |         <div class="w-full h-[80%] flex items-center justify-center z-10 px-8  max-w-[1500px]">
 33 |             <div class="flex flex-col items-start justify-center mr-12 flex-shrink-0">
 34 |                 <div class="rounded-full bg-ui-bg-3 px-2 py-1 border border-ui-br flex items-center justify-center text-ui-tx-3">
 35 |                     <svg class="text-ui-tx-2 h-5 -my-[2px] mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M23 18H1l7.25-9.67l2 2.67L14 6zm-11.5-5.33L14 16h5l-5-6.67zM5 16h6.5l-3.25-4.33z"/></svg>
 36 |                     <div class="text-xs">CoastalUI</div>
 37 |                 </div>
 38 |                 <div class="text-8xl font-semibold pb-2 bg-gradient-to-b from-white via-white to-zinc-100 bg-clip-text text-transparent -mt-[2px] flex-shrink-0 line-clamp-1">
 39 |                     Svelte 5
 40 |                 </div>
 41 |                 <div class="text-5xl font-semibold bg-gradient-to-b from-zinc-100 via-zinc-100 to-zinc-600 pb-3 bg-clip-text text-transparent">
 42 |                     Dashboard Boilerplates
 43 |                 </div>
 44 |                 <div class="flex items-center justify-center mt-2">
 45 |                     <button class="px-6 py-2 mr-3 border border-1 border-zinc-500 hover:border-zinc-400 rounded-lg text-zinc-300 bg-ui-tx-2 hover:text-white flex items-center transition duration-500 group relative overflow-hidden">
 46 |                         <div class="relative z-10 text-ui-bg font-medium flex items-center">
 47 |                             View Features
 48 |                         </div>
 49 |                     </button>
 50 |                     <button onclick={() => goto("/dashboard")} class="px-6 py-2 border-2 border-zinc-500 hover:border-zinc-400 rounded-lg text-zinc-300 hover:text-white flex items-center hover:bg-zinc-950 transition duration-500 group relative overflow-hidden">
 51 |                         <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-tr from-zinc-500 to-gray-600 opacity-0 group-hover:opacity-60 h-8 w-8 blur-[20px] z-0 group-hover:w-full transition-all duration-500">
 52 |                         </div>
 53 |                         <div class="relative z-10 text-zinc-200 flex items-center font-medium">
 54 |                             Open Live Site
 55 |                             <svg class="ml-3 text-zinc-200 transition group-hover:text-white group-hover:rotate-90 duration-500" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 56 |                                 <path d="M5 12h14">
 57 |                                 </path>
 58 |                                 <path d="m12 5 7 7-7 7">
 59 |                                 </path>
 60 |                             </svg>
 61 |                         </div>
 62 |                     </button>
 63 |                 </div>
 64 |             </div>
 65 |             <div class=" w-[830px] aspect-video rounded-lg border-2 border-ui-br min-w-[500px] flex items-center justify-center bg-ui-bg-2  invisible md:visible">
 66 |                 <svg class="h-12 w-12 text-ui-tx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M1.5 8a6.5 6.5 0 1 0 13 0a6.5 6.5 0 0 0-13 0m4.879-2.773l4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215"/></svg>
 67 |             </div>
 68 |         </div>
 69 |     </div>
 70 |     <div class="w-full bg-ui-bg-3 border-y-2 border-ui-br flex flex-col items-center justify-start overflow-hidden relative">
 71 |         <div class="absolute -top-4 left-1/2 -translate-x-1/2 h-5 w-32 rounded-full bg-ui-br"></div>
 72 |         <div class="absolute -bottom-4 left-1/2 -translate-x-1/2 h-5 w-32 rounded-full bg-ui-br"></div>
 73 |         <div class="absolute -top-5 -right-16 h-5 w-32 rounded-full bg-ui-br"></div>
 74 |         <div class="grid grid-cols-1 md:grid-cols-2 gap-y-20 gap-x-12 justify-center items-start max-w-[1300px] w-full my-20 px-8">            
 75 |             <div class="flex w-full items-center justify-center">
 76 |                 <div class="border border-ui-br rounded-md bg-ui-bg-2">
 77 |                     <svg class="h-14 w-14 text-green-600 p-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3.084 15.25c-1.664 0-2.6-1.912-1.58-3.226L10.21.806C10.794.054 12 .466 12 1.42v7.33h8.916c1.663 0 2.6 1.912 1.58 3.226L13.79 23.194c-.584.752-1.79.34-1.79-.613V15.25z"/></svg>
 78 |                 </div>
 79 |                 <div class="flex-grow h-20 flex flex-col justify-center ml-4">
 80 |                     <div class="text-ui-tx font-medium">Supabase Integration</div>
 81 |                     <div class="text-ui-tx-2/60 text-lg">Secure database and authentication, ready to deploy.</div>
 82 |                 </div>
 83 |             </div>
 84 |         
 85 |             <div class="flex w-full items-center justify-center">
 86 |                 <div class="border border-ui-br rounded-md bg-ui-bg-2">
 87 |                     <svg class="h-14 w-14 text-[#635bff] p-[6px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="m8.25 10.435l-2.165.46l-.01 7.12c0 1.315.99 2.165 2.305 2.165c.73 0 1.265-.135 1.56-.295v-1.69c-.285.115-1.685.525-1.685-.785v-3.16H9.94v-1.89H8.255zm4.455 2.58l-.135-.655h-1.92v7.66h2.215v-5.155c.525-.69 1.41-.555 1.695-.465v-2.04c-.3-.105-1.335-.3-1.855.655M17.32 9.4l-2.23.475v1.81l2.23-.475zM2.245 14.615c0-.345.29-.48.755-.485c.675 0 1.535.205 2.21.57v-2.09a5.9 5.9 0 0 0-2.205-.405c-1.8 0-3 .94-3 2.51c0 2.46 3.375 2.06 3.375 3.12c0 .41-.355.545-.85.545c-.735 0-1.685-.305-2.43-.71v2c.825.355 1.66.505 2.425.505c1.845 0 3.115-.79 3.115-2.39c0-2.645-3.395-2.17-3.395-3.17M32 16.28c0-2.275-1.1-4.07-3.21-4.07s-3.395 1.795-3.395 4.055c0 2.675 1.515 3.91 3.675 3.91c1.06 0 1.855-.24 2.46-.575v-1.67c-.605.305-1.3.49-2.18.49c-.865 0-1.625-.305-1.725-1.345h4.345c.01-.115.03-.58.03-.795m-4.395-.84c0-1 .615-1.42 1.17-1.42c.545 0 1.125.42 1.125 1.42zm-5.645-3.23c-.87 0-1.43.41-1.74.695l-.115-.55H18.15v10.24l2.22-.47l.005-2.51c.32.235.795.56 1.57.56c1.59 0 3.04-1.16 3.04-3.98c.005-2.58-1.465-3.985-3.025-3.985m-.53 6.125c-.52 0-.83-.19-1.045-.42l-.015-3.3c.23-.255.55-.44 1.06-.44c.81 0 1.37.91 1.37 2.07c.005 1.195-.545 2.09-1.37 2.09m-6.335 1.685h2.23v-7.66h-2.23z"/></svg>
 88 |                 </div>
 89 |                 <div class="flex-grow h-20 flex flex-col justify-center ml-4">
 90 |                     <div class="text-ui-tx font-medium">Stripe Payments</div>
 91 |                     <div class="text-ui-tx-2/60 text-lg">Subscription system configured and ready to use.</div>
 92 |                 </div>
 93 |             </div>
 94 |         
 95 |             <div class="flex w-full items-center justify-center">
 96 |                 <div class="border border-ui-br rounded-md bg-ui-bg-2">
 97 |                     <svg  class="h-14 w-14 text-zinc-200 p-2" viewBox="0 0 256 256"><path fill="currentColor" d="M216 42H40a14 14 0 0 0-14 14v144a14 14 0 0 0 14 14h176a14 14 0 0 0 14-14V56a14 14 0 0 0-14-14M38 200v-50h18a6 6 0 0 0 0-12H38v-20h18a6 6 0 0 0 0-12H38V86h18a6 6 0 0 0 0-12H38V56a2 2 0 0 1 2-2h42v148H40a2 2 0 0 1-2-2m180 0a2 2 0 0 1-2 2H94V54h122a2 2 0 0 1 2 2Z"/></svg>                </div>
 98 |                 <div class="flex-grow h-20 flex flex-col justify-center ml-4">
 99 |                     <div class="text-ui-tx font-medium">Dashboard Navigation</div>
100 |                     <div class="text-ui-tx-2/60 text-lg">Professional dashboard layout with only navigation built-in.</div>
101 |                 </div>
102 |             </div>
103 |         
104 |             <div class="flex w-full items-center justify-center">
105 |                 <div class="border border-ui-br rounded-md bg-ui-bg-2">
106 |                     <svg class="h-14 w-14 text-zinc-300 p-[10px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 8h-1V7c0-2.757-2.243-5-5-5S7 4.243 7 7v1H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2M9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v1H9zm4 8.723V18h-2v-2.277c-.595-.346-1-.984-1-1.723a2 2 0 1 1 4 0c0 .738-.405 1.376-1 1.723"/></svg>                
107 |                 </div>
108 |                 <div class="flex-grow h-20 flex flex-col justify-center ml-4">
109 |                     <div class="text-ui-tx font-medium">Authentication Routes</div>
110 |                     <div class="text-ui-tx-2/60 text-lg">Everything from /login to /reset-password.</div>
111 |                 </div>
112 |             </div>
113 |         
114 |             <div class="flex w-full items-center justify-center">
115 |                 <div class="border border-ui-br rounded-md bg-ui-bg-2">
116 |                     <svg class="h-14 w-14 text-[#38bdf8] p-[6px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.31.74 1.91 1.35c.98 1 2.09 2.15 4.59 2.15c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C15.61 7.15 14.5 6 12 6m-5 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.3.74 1.91 1.35C8.39 16.85 9.5 18 12 18c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C10.61 13.15 9.5 12 7 12"/></svg>
117 |                 </div>
118 |                 <div class="flex-grow h-20 flex flex-col justify-center ml-4">
119 |                     <div class="text-ui-tx font-medium">Tailwind Config Styling</div>
120 |                     <div class="text-ui-tx-2/60 text-lg">Easily change from one color scheme to another.</div>
121 |                 </div>
122 |             </div>
123 |         
124 |             <div class="flex w-full items-center justify-center">
125 |                 <div class="border border-ui-br rounded-md bg-ui-bg-2">
126 |                     <svg class="h-14 w-14 text-green-600 p-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3.084 15.25c-1.664 0-2.6-1.912-1.58-3.226L10.21.806C10.794.054 12 .466 12 1.42v7.33h8.916c1.663 0 2.6 1.912 1.58 3.226L13.79 23.194c-.584.752-1.79.34-1.79-.613V15.25z"/></svg>
127 |                 </div>
128 |                 <div class="flex-grow h-20 flex flex-col justify-center ml-4">
129 |                     <div class="text-ui-tx font-medium">Always Free</div>
130 |                     <div class="text-ui-tx-2/60 text-lg">No hidden costs or premium features. Everything included.*</div>
131 |                 </div>
132 |             </div>
133 |         </div>
134 |     </div>
135 |     <div class="w-full bg-ui-bg flex flex-col items-center justify-start overflow-hidden relative">
136 |         <div class="flex items-center justify-center z-10 mx-8  max-w-[1400px] w-full px-8">
137 |             <div class="flex flex-col items-start justify-center mr-12 mt-16">
138 |                 <div class="rounded-full bg-ui-bg-3 px-3 py-[2px] border border-ui-br flex items-center justify-center text-ui-tx-3">
139 |                     <div class="text-xs">Get Inspired</div>
140 |                 </div>
141 |                 <div class="text-5xl font-semibold pb-2 bg-gradient-to-b from-white via-white to-zinc-300 bg-clip-text text-transparent mt-1">
142 |                     Dashboard Build-out Showcase
143 |                 </div>
144 |             </div>
145 |             <div class="flex-grow"></div>
146 |         </div>
147 |         <div class="flex flex-col items-center justify-start z-10 max-w-[1400px] w-full px-8 mt-8">
148 |             <div class="w-full aspect-video border-2 rounded-md border-ui-br relative mb-32">
149 |                 <div class="absolute -bottom-7 w-full left-1/2 -translate-x-1/2 text-sm text-ui-tx-2/80 flex items-center justify-between">
150 |                     <button class="flex items-center justfy-center underline underline-offset-2">
151 |                         <svg class="w-4 h-4 mr-1 mt-[4px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="M21 3h-6m6 0l-9 9m9-9v6"/><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/></g></svg>
152 |                         thephoenixclub.com
153 |                     </button>
154 |                     <div class="invisible md:visible">A course website that teaches young professionals important business skills.</div>
155 |                 </div>
156 |             </div>
157 |             <div class="w-full aspect-video border-2 rounded-md border-ui-br relative mb-32">
158 |                 <div class="absolute -bottom-7 w-full left-1/2 -translate-x-1/2 text-sm text-ui-tx-2/80 flex items-center justify-between">
159 |                     <button class="flex items-center justfy-center underline underline-offset-2">
160 |                         <svg class="w-4 h-4 mr-1 mt-[4px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="M21 3h-6m6 0l-9 9m9-9v6"/><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/></g></svg>
161 |                         fitmetrics.io
162 |                     </button>
163 |                     <div class="invisible md:visible">A fitness tracking platform that visualizes workout data and nutrition trends.</div>
164 |                 </div>
165 |             </div>
166 |             <div class="w-full aspect-video border-2 rounded-md border-ui-br relative mb-32">
167 |                 <div class="absolute -bottom-7 w-full left-1/2 -translate-x-1/2 text-sm text-ui-tx-2/80 flex items-center justify-between">
168 |                     <button class="flex items-center justfy-center underline underline-offset-2">
169 |                         <svg class="w-4 h-4 mr-1 mt-[4px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="M21 3h-6m6 0l-9 9m9-9v6"/><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/></g></svg>
170 |                         budgetflow.app
171 |                     </button>
172 |                     <div class="invisible md:visible">A personal finance dashboard tracking spending patterns and investment portfolios.</div>
173 |                 </div>
174 |             </div>
175 |         </div>
176 |     </div>
177 |     <div class="w-full bg-ui-bg-2 border-y-2 border-ui-br flex flex-col items-center justify-center overflow-hidden relative pt-20 pb-20">
178 |         <div class="absolute -top-4 left-1/2 -translate-x-1/2 h-5 w-32 rounded-full bg-ui-br"></div>
179 |         <div class="absolute -top-5 -right-16 h-5 w-32 rounded-full bg-ui-br"></div>
180 |         <div class="flex justify-between items-center  w-full max-w-7xl">
181 |             <div class="space-y-4">
182 |                 <h3 class="text-ui-tx text-xl font-semibold">SvelteDashboard</h3>
183 |                 <p class="text-ui-tx-2 text-lg">A dashboard boilerplate built with Svelte 5, Tailwind CSS, TypeScript and Supabase.</p>
184 |                 <div class="flex space-x-2 pt-2">
185 |                     <button class="w-8 h-8 bg-[#5865F2] border border-[#4752C4] rounded-md flex items-center justify-center">
186 |                         <svg class="p-[4px]" fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
187 |                             <path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028zM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38z">
188 |                             </path>
189 |                         </svg>
190 |                     </button>
191 |                     <button class="w-8 h-8 bg-[#24292E] border border-[#1B1F23] rounded-md flex items-center justify-center border-ui-br border">
192 |                         <svg class="p-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
193 |                             <path fill="#fff" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2">
194 |                             </path>
195 |                         </svg>
196 |                     </button>
197 |                     <button class="w-8 h-8 bg-[#0a0a0a] border border-[#1B1F23] rounded-md flex items-center justify-center border-ui-br border">
198 |                         <svg class="text-ui-tx h-6 -my-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M23 18H1l7.25-9.67l2 2.67L14 6zm-11.5-5.33L14 16h5l-5-6.67zM5 16h6.5l-3.25-4.33z"/></svg>
199 |                     </button>
200 |                 </div>
201 |             </div>
202 |             <button class="px-12 py-2 border border-ui-br rounded-md text-ui-tx bg-ui-bg-3 transition hover:bg-ui-bg">
203 |                 Go to Live Demo
204 |             </button>
205 |         </div>
206 |         
207 |         <div class="max-w-7xl mx-auto pt-8 mt-8 border-t border-ui-br w-full">
208 |             <div class="flex flex-col md:flex-row justify-between items-center">
209 |                 <p class="text-ui-tx-3 text-sm">© 2024 CoastalUI. All rights reserved.</p>
210 |                 <p class="text-ui-tx-3 text-sm mt-2 md:mt-0">A CoastalUI Project</p>
211 |             </div>
212 |         </div>
213 |     </div>
214 | </div>
215 | 


--------------------------------------------------------------------------------