vela 0.1.0 → 0.9.1

package/templates/static/src/app.css

@@ -0,0 +1,121 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.129 0.042 264.695);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.129 0.042 264.695);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.129 0.042 264.695);
+	--primary: oklch(0.208 0.042 265.755);
+	--primary-foreground: oklch(0.984 0.003 247.858);
+	--secondary: oklch(0.968 0.007 247.896);
+	--secondary-foreground: oklch(0.208 0.042 265.755);
+	--muted: oklch(0.968 0.007 247.896);
+	--muted-foreground: oklch(0.554 0.046 257.417);
+	--accent: oklch(0.968 0.007 247.896);
+	--accent-foreground: oklch(0.208 0.042 265.755);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.929 0.013 255.508);
+	--input: oklch(0.929 0.013 255.508);
+	--ring: oklch(0.704 0.04 256.788);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.984 0.003 247.858);
+	--sidebar-foreground: oklch(0.129 0.042 264.695);
+	--sidebar-primary: oklch(0.208 0.042 265.755);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.968 0.007 247.896);
+	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+	--sidebar-border: oklch(0.929 0.013 255.508);
+	--sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+	--background: oklch(0.129 0.042 264.695);
+	--foreground: oklch(0.984 0.003 247.858);
+	--card: oklch(0.208 0.042 265.755);
+	--card-foreground: oklch(0.984 0.003 247.858);
+	--popover: oklch(0.208 0.042 265.755);
+	--popover-foreground: oklch(0.984 0.003 247.858);
+	--primary: oklch(0.929 0.013 255.508);
+	--primary-foreground: oklch(0.208 0.042 265.755);
+	--secondary: oklch(0.279 0.041 260.031);
+	--secondary-foreground: oklch(0.984 0.003 247.858);
+	--muted: oklch(0.279 0.041 260.031);
+	--muted-foreground: oklch(0.704 0.04 256.788);
+	--accent: oklch(0.279 0.041 260.031);
+	--accent-foreground: oklch(0.984 0.003 247.858);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.551 0.027 264.364);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.208 0.042 265.755);
+	--sidebar-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.279 0.041 260.031);
+	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/templates/static/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/templates/static/src/app.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="text-scale" content="scale" />
+		%sveltekit.head%
+	</head>
+
+	<body class="min-h-dvh" data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/templates/static/src/hooks.server.ts

@@ -0,0 +1,26 @@
+import { dev } from '$app/environment';
+import { error, type Handle } from '@sveltejs/kit';
+
+/** Pages a `vela` command generates, and the command that generates them. */
+const GENERATED_PAGES: Record<string, string> = {
+	'/privacy': 'vela legal privacy',
+	'/terms': 'vela legal terms'
+};
+
+/**
+ * The footer links to these before they exist. In dev, say which command creates
+ * the page instead of showing a bare 404.
+ *
+ * Server hooks run in dev and at prerender time; a static build has no server, so
+ * the `dev` guard also keeps this out of the prerendered output.
+ */
+export const handle: Handle = async ({ event, resolve }) => {
+	const response = await resolve(event);
+
+	if (dev && response.status === 404) {
+		const command = GENERATED_PAGES[event.url.pathname];
+		if (command) error(404, `Run \`${command}\` to create this page.`);
+	}
+
+	return response;
+};

package/templates/static/src/lib/assets/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="15.87 6.75 78.15 98.88">
+    <style>
+        path {
+          fill: #00B2FF;
+        }
+      </style>
+    <path d="M42.18 99.49c-4.02.83-8.35 1.51-9.62 1.51-2.31 0-2.31 0-.98-6.25 5.2-24.38 1.05-54.7-10.67-78.03L15.9 6.75l3.96 3.14C36.8 23.31 50.44 47.8 53.48 70.25c.35 2.61 1.03 4.75 1.51 4.75 1.49 0 15.24-15.72 20.72-23.68C82.96 40.79 85.76 35.2 90.14 22.5c4.36-12.65 4.79-11.3 2.41 7.54-4.23 33.45-16.49 54.96-37.05 65-3.3 1.61-9.29 3.61-13.32 4.45Zm40.32 3.55c-5.66 1.8-9.87 2.28-22 2.54-14.05.29-23.95-.66-25.8-2.49-.44-.44 2.26-1.08 6-1.43 10.68-1 21.43-5.62 30.97-13.3L75.84 85l2.12 3.43c2.52 4.09 8.06 9.12 11.07 10.08 3.01.96 1.58 1.95-6.53 4.53Z"/>
+</svg>

package/templates/static/src/lib/components/ui/button/button.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				destructive:
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+				outline:
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/templates/static/src/lib/components/ui/button/index.ts

@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants
+} from './button.svelte';
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant
+};

package/templates/static/src/lib/components/ui/navbar/index.ts

@@ -0,0 +1,11 @@
+import Root from './navbar.svelte';
+import Logo from './navbar-logo.svelte';
+import List from './navbar-list.svelte';
+import MobileToggle from './navbar-mobile-toggle.svelte';
+import Item from './navbar-item.svelte';
+import Mode from './navbar-mode.svelte';
+import Link from './navbar-link.svelte';
+import Brand from './navbar-brand.svelte';
+import BrandName from './navbar-brandname.svelte';
+
+export { Root, Root as Navbar, Logo, List, MobileToggle, Item, Mode, Link, Brand, BrandName };

package/templates/static/src/lib/components/ui/navbar/navbar-brand.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	let { href, children, class: className = '' } = $props();
+</script>
+
+<a {href} class={cn('flex items-center space-x-3 rtl:space-x-reverse', className)}>
+	{@render children?.()}
+</a>

package/templates/static/src/lib/components/ui/navbar/navbar-brandname.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	let { children, class: className = '' } = $props();
+</script>
+
+<span class={cn('self-center text-2xl font-semibold whitespace-nowrap dark:text-white', className)}>
+	{@render children?.()}
+</span>

package/templates/static/src/lib/components/ui/navbar/navbar-item.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	let { children = undefined, class: className = '' } = $props();
+</script>
+
+<li class={cn('flex items-center', className)}>{@render children?.()}</li>

package/templates/static/src/lib/components/ui/navbar/navbar-link.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	let { href, children, class: className = '' } = $props();
+</script>
+
+<a
+	{href}
+	class={cn(
+		'block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500',
+		className
+	)}
+	aria-current="page">{@render children?.()}</a
+>

package/templates/static/src/lib/components/ui/navbar/navbar-list.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { getContext } from 'svelte';
+	import { MOBILE_MENU_CONTEXT_KEY, type MobileMenuContext } from './navbar-store';
+
+	let { children, class: className = '' } = $props();
+
+	const { menuOpen } = getContext<MobileMenuContext>(MOBILE_MENU_CONTEXT_KEY);
+</script>
+
+<div
+	class={cn('hidden w-full md:block md:w-auto', className, menuOpen.isOpen && 'block')}
+	id="navbar-default"
+>
+	<ul
+		class={cn(
+			'font-medium flex flex-col p-2 md:p-0 mt-4 border rounded-lg bg-card md:flex-row md:space-x-4 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-transparent'
+		)}
+	>
+		{@render children?.()}
+	</ul>
+</div>

package/templates/static/src/lib/components/ui/navbar/navbar-logo.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	let {
+		src = 'https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg',
+		alt = 'Logo',
+		class: className = ''
+	} = $props();
+</script>
+
+<img {src} class={cn('h-8', className)} {alt} />

package/templates/static/src/lib/components/ui/navbar/navbar-mobile-toggle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { Button } from '$lib/components/ui/button';
+	import MenuIcon from '@lucide/svelte/icons/menu';
+	import { MOBILE_MENU_CONTEXT_KEY, type MobileMenuContext } from './navbar-store';
+
+	const { toggleMenu } = getContext<MobileMenuContext>(MOBILE_MENU_CONTEXT_KEY);
+</script>
+
+<Button
+	type="button"
+	aria-controls="navbar-default"
+	aria-expanded="false"
+	variant="ghost"
+	class="md:hidden"
+	onclick={toggleMenu}
+>
+	<span class="sr-only">Open main menu</span>
+	<MenuIcon class="size-6" />
+</Button>

package/templates/static/src/lib/components/ui/navbar/navbar-mode.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import SunIcon from '@lucide/svelte/icons/sun';
+	import MoonIcon from '@lucide/svelte/icons/moon';
+</script>
+
+<SunIcon
+	class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 !transition-all dark:-rotate-90 dark:scale-0"
+/>
+<MoonIcon
+	class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 !transition-all dark:rotate-0 dark:scale-100"
+/>
+<span class="sr-only">Toggle theme</span>

package/templates/static/src/lib/components/ui/navbar/navbar-store.ts

@@ -0,0 +1,5 @@
+export const MOBILE_MENU_CONTEXT_KEY = Symbol('mobile-menu');
+export type MobileMenuContext = {
+	menuOpen: { isOpen: boolean };
+	toggleMenu: () => void;
+};

package/templates/static/src/lib/components/ui/navbar/navbar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { cn } from '$lib/utils.js';
+	let { children, class: className = '' } = $props();
+
+	import { MOBILE_MENU_CONTEXT_KEY } from './navbar-store';
+
+	let menuOpen = $state({ isOpen: false });
+
+	setContext(MOBILE_MENU_CONTEXT_KEY, {
+		menuOpen,
+		toggleMenu: () => (menuOpen.isOpen = !menuOpen.isOpen)
+	});
+</script>
+
+<nav class={cn(className)}>
+	<div class="max-w-7xl flex flex-wrap items-center justify-between mx-auto p-4">
+		{@render children?.()}
+	</div>
+</nav>

package/templates/static/src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';

package/templates/static/src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+/>

package/templates/static/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/templates/static/src/lib/site.template.ts

@@ -0,0 +1,11 @@
+/**
+ * Site-wide metadata.
+ *
+ * A static build has no backend to read this from, so this file is the source of
+ * truth. Set `url` to where the site is actually deployed — canonical links and
+ * Open Graph image URLs are built from it at prerender time.
+ */
+export const site = {
+	name: '~APP_NAME~',
+	url: 'http://localhost:5173'
+};

package/templates/static/src/lib/utils.ts

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };

package/templates/static/src/routes/(public)/+layout.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import RootLayout from './root-layout.svelte';
+
+	let { data, children } = $props();
+</script>
+
+<RootLayout {data}>
+	{@render children?.()}
+</RootLayout>

package/templates/static/src/routes/(public)/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import favicon from '$lib/assets/favicon.svg';
+
+	let { data } = $props();
+</script>
+
+<main class="flex-1">
+	<section class="px-6 py-16 md:py-24">
+		<div class="mx-auto max-w-4xl text-center">
+			<a href="/" class="inline-flex items-center gap-2 font-medium">
+				<span
+					class="bg-primary text-primary-foreground inline-flex size-6 items-center justify-center rounded-md"
+				>
+					<img src={favicon} alt="logo" class="size-4" />
+				</span>
+				{data.meta.appName}
+			</a>
+
+			<h1 class="mt-6 text-4xl font-semibold tracking-tight sm:text-5xl">
+				A modern way to get things done
+			</h1>
+			<p class="text-muted-foreground mt-4 text-lg">
+				Everything you need to launch faster, collaborate better, and stay focused.
+			</p>
+
+			<div class="mt-8 flex items-center justify-center gap-3">
+				<a
+					href="#features"
+					class="bg-primary text-primary-foreground inline-flex items-center rounded-md px-5 py-2.5"
+				>
+					Get started
+				</a>
+				<a
+					href="https://svelte.dev/docs/kit"
+					class="border border-border text-foreground inline-flex items-center rounded-md px-5 py-2.5"
+				>
+					Read the docs
+				</a>
+			</div>
+		</div>
+	</section>
+
+	<section id="features" class="px-6 pb-16 md:pb-24">
+		<div class="mx-auto grid max-w-5xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
+			<div class="bg-card text-card-foreground rounded-lg border p-6">
+				<h3 class="font-medium">Fast</h3>
+				<p class="text-muted-foreground mt-2">
+					Simple workflows that help you move from idea to done.
+				</p>
+			</div>
+			<div class="bg-card text-card-foreground rounded-lg border p-6">
+				<h3 class="font-medium">Flexible</h3>
+				<p class="text-muted-foreground mt-2">
+					Works for teams of any size and adapts to your process.
+				</p>
+			</div>
+			<div class="bg-card text-card-foreground rounded-lg border p-6">
+				<h3 class="font-medium">Secure</h3>
+				<p class="text-muted-foreground mt-2">
+					Built with best practices and modern standards in mind.
+				</p>
+			</div>
+		</div>
+	</section>
+</main>

package/templates/static/src/routes/(public)/root-layout.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import favicon from '$lib/assets/favicon.svg';
+
+	import { toggleMode } from 'mode-watcher';
+	import * as Navbar from '$lib/components/ui/navbar';
+	import { Button } from '$lib/components/ui/button';
+
+	let { children, data } = $props();
+</script>
+
+<div class="min-h-dvh grid grid-rows-[max-content_1fr_max-content] root-layout">
+	<Navbar.Root>
+		<Navbar.Brand href="/">
+			<Navbar.Logo src={favicon} alt="Logo" />
+		</Navbar.Brand>
+
+		<Navbar.MobileToggle />
+
+		<Navbar.List>
+			<Navbar.Item>
+				<Button class="w-full justify-start md:justify-center md:w-auto" href="/" variant="ghost">
+					Home
+				</Button>
+			</Navbar.Item>
+		</Navbar.List>
+	</Navbar.Root>
+
+	{@render children?.()}
+
+	<footer class="border-t border-border py-4">
+		<div
+			class="mx-auto flex max-w-7xl px-4 flex-col items-center justify-between gap-3 sm:flex-row"
+		>
+			<p class="text-muted-foreground text-sm">
+				&copy; {new Date().getFullYear()}
+				{data.meta.appName}. All rights reserved.
+			</p>
+			<nav class="flex items-center gap-4 text-sm">
+				<Button onclick={toggleMode} variant="ghost" size="icon">
+					<Navbar.Mode />
+				</Button>
+				<a href="/privacy" class="underline-offset-4 hover:underline">Privacy</a>
+				<a href="/terms" class="underline-offset-4 hover:underline">Terms</a>
+			</nav>
+		</div>
+	</footer>
+</div>
+
+<style lang="postcss">
+	@reference "tailwindcss";
+
+	.root-layout :global(section[data-role='content']) {
+		@apply container mx-auto max-w-7xl px-4 py-8 w-full;
+	}
+</style>

package/templates/static/src/routes/+error.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { Button } from '$lib/components/ui/button';
+	import RootLayout from './(public)/root-layout.svelte';
+
+	let { data } = $props();
+</script>
+
+<RootLayout {data}>
+	<main class="mx-auto max-w-7xl px-4 w-full flex items-center justify-center">
+		<div class="text-center space-y-4">
+			<div class="text-9xl font-bold text-primary">
+				{page.status}
+			</div>
+			<div class="relative">
+				<h1 class="text-4xl font-bold relative inline-block bg-background">
+					Oops! Something went wrong
+				</h1>
+			</div>
+			<p class="text-xl text-muted-foreground max-w-lg mx-auto">
+				{page.error?.message ||
+					"We couldn't find what you were looking for. Let's get you back on track!"}
+			</p>
+			<div>
+				<Button href="/" variant="default" size="lg">Take me home</Button>
+			</div>
+		</div>
+	</main>
+</RootLayout>