super-svelte-skeleton 0.0.3

package/src/routes/(auth)/logout/+page.server.ts

@@ -0,0 +1,16 @@
+import type { Actions } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
+import { AUTH_COOKIE_NAME, LOGIN_ROUTE } from '$shared/config';
+
+export const actions: Actions = {
+    default: async ({ cookies }) => {
+        cookies.delete(AUTH_COOKIE_NAME, { path: '/' });
+        throw redirect(302, LOGIN_ROUTE);
+    }
+};
+
+// GET /logout — also works for simple <a href="/logout"> links
+export async function load({ cookies }) {
+    cookies.delete(AUTH_COOKIE_NAME, { path: '/' });
+    throw redirect(302, LOGIN_ROUTE);
+}

package/src/routes/(auth)/register/+page.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+    import * as m from '$lib/paraglide/messages';
+    import { Eye, EyeSlash } from 'svelte-bootstrap-icons';
+    import { resolve } from '$app/paths';
+
+    let name = $state('');
+    let email = $state('');
+    let password = $state('');
+    let confirm = $state('');
+    let showPassword = $state(false);
+    let showConfirm = $state(false);
+
+    const handleSubmit = (e: Event) => {
+        e.preventDefault();
+        // TODO: wire up registration logic
+    };
+</script>
+
+<svelte:head>
+    <title>{m.register_title()}</title>
+</svelte:head>
+
+<div class="min-h-screen bg-surface-tertiary flex items-center justify-center px-4 py-12">
+
+    <!-- Ambient blobs -->
+    <div class="fixed inset-0 -z-10 pointer-events-none overflow-hidden" aria-hidden="true">
+        <div class="absolute w-96 h-96 rounded-full bg-accent/5 -top-32 -right-32 blur-3xl"></div>
+        <div class="absolute w-80 h-80 rounded-full bg-warning/5 -bottom-24 -left-24 blur-3xl"></div>
+    </div>
+
+    <div class="w-full max-w-md">
+
+        <!-- Logo -->
+        <a href={resolve("/",{})} class="flex items-center justify-center gap-2 mb-8">
+            <span class="text-accent text-xl leading-none">✦</span>
+            <span class="font-semibold text-content-primary tracking-wide text-lg">{m.app_name()}</span>
+        </a>
+
+        <!-- Card -->
+        <div class="bg-surface-primary rounded-2xl shadow-xl border  p-8">
+
+            <!-- Heading -->
+            <div class="mb-8 text-center">
+                <h1 class="text-2xl font-bold text-content-primary mb-1">{m.register_title()}</h1>
+                <p class="text-sm text-content-secondary">{m.register_subtitle()}</p>
+            </div>
+
+            <form onsubmit={handleSubmit} class="flex flex-col gap-5">
+
+                <!-- Full Name -->
+                <div class="flex flex-col gap-1.5">
+                    <label for="name" class="text-sm font-medium text-content-primary">
+                        {m.register_name_label()}
+                    </label>
+                    <input
+                        id="name"
+                        type="text"
+                        bind:value={name}
+                        placeholder={m.register_name_placeholder()}
+                        required
+                        autocomplete="name"
+                        class="w-full px-4 py-2.5 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                    />
+                </div>
+
+                <!-- Email -->
+                <div class="flex flex-col gap-1.5">
+                    <label for="email" class="text-sm font-medium text-content-primary">
+                        {m.register_email_label()}
+                    </label>
+                    <input
+                        id="email"
+                        type="email"
+                        bind:value={email}
+                        placeholder={m.register_email_placeholder()}
+                        required
+                        autocomplete="email"
+                        class="w-full px-4 py-2.5 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                    />
+                </div>
+
+                <!-- Password -->
+                <div class="flex flex-col gap-1.5">
+                    <label for="password" class="text-sm font-medium text-content-primary">
+                        {m.register_password_label()}
+                    </label>
+                    <div class="relative">
+                        <input
+                            id="password"
+                            type={showPassword ? 'text' : 'password'}
+                            bind:value={password}
+                            placeholder={m.register_password_placeholder()}
+                            required
+                            autocomplete="new-password"
+                            class="w-full px-4 py-2.5 pr-11 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                        />
+                        <button
+                            type="button"
+                            onclick={() => showPassword = !showPassword}
+                            class="absolute right-3 top-1/2 -translate-y-1/2 text-content-tertiary hover:text-content-primary transition"
+                            aria-label="Toggle password visibility"
+                        >
+                            {#if showPassword}
+                                <EyeSlash width={16} height={16} />
+                            {:else}
+                                <Eye width={16} height={16} />
+                            {/if}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Confirm Password -->
+                <div class="flex flex-col gap-1.5">
+                    <label for="confirm" class="text-sm font-medium text-content-primary">
+                        {m.register_confirm_label()}
+                    </label>
+                    <div class="relative">
+                        <input
+                            id="confirm"
+                            type={showConfirm ? 'text' : 'password'}
+                            bind:value={confirm}
+                            placeholder={m.register_confirm_placeholder()}
+                            required
+                            autocomplete="new-password"
+                            class="w-full px-4 py-2.5 pr-11 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                        />
+                        <button
+                            type="button"
+                            onclick={() => showConfirm = !showConfirm}
+                            class="absolute right-3 top-1/2 -translate-y-1/2 text-content-tertiary hover:text-content-primary transition"
+                            aria-label="Toggle confirm password visibility"
+                        >
+                            {#if showConfirm}
+                                <EyeSlash width={16} height={16} />
+                            {:else}
+                                <Eye width={16} height={16} />
+                            {/if}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Submit -->
+                <button type="submit" class="btn btn-primary w-full py-3 text-base font-semibold mt-1">
+                    {m.register_submit()}
+                </button>
+
+            </form>
+
+            <!-- Divider -->
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-border-primary"></div>
+                </div>
+                <div class="relative flex justify-center text-xs">
+                    <span class="px-3 bg-surface-primary text-content-tertiary">{m.divider_text()}</span>
+                </div>
+            </div>
+
+            <!-- Sign in link -->
+            <p class="text-center text-sm text-content-secondary">
+                {m.register_have_account()}
+                <a href={resolve("/login",{})} class="text-accent font-medium hover:underline ml-1">{m.register_sign_in()}</a>
+            </p>
+
+        </div>
+    </div>
+</div>

package/src/routes/(auth)/reset-password/+page.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+    import * as m from '$lib/paraglide/messages';
+    import { page } from '$app/state';
+    import { Eye, EyeSlash, ExclamationCircleFill } from 'svelte-bootstrap-icons';
+    import { resolve } from '$app/paths';
+
+    // Token comes from ?token=... query param (emailed link)
+    const token = $derived(page.url.searchParams.get('token') ?? '');
+
+    let password = $state('');
+    let confirm = $state('');
+    let showPassword = $state(false);
+    let showConfirm = $state(false);
+    let error = $state('');
+
+    const handleSubmit = async (e: Event) => {
+        e.preventDefault();
+        error = '';
+        if (!token) {
+            error = 'Invalid or missing reset link.';
+            return;
+        }
+        if (password !== confirm) {
+            error = 'Passwords do not match.';
+            return;
+        }
+        // TODO: call authApi.resetPassword({ token, password, confirmPassword: confirm })
+    };
+</script>
+
+<svelte:head>
+    <title>{m.reset_title()}</title>
+</svelte:head>
+
+<div class="min-h-screen bg-surface-tertiary flex items-center justify-center px-4 py-12">
+
+    <div class="fixed inset-0 -z-10 pointer-events-none overflow-hidden" aria-hidden="true">
+        <div class="absolute w-80 h-80 rounded-full bg-accent/5 -bottom-24 -left-24 blur-3xl"></div>
+    </div>
+
+    <div class="w-full max-w-md">
+
+        <a href={resolve("/",{})} class="flex items-center justify-center gap-2 mb-8">
+            <span class="text-accent text-xl leading-none">✦</span>
+            <span class="font-semibold text-content-primary tracking-wide text-lg">{m.app_name()}</span>
+        </a>
+
+        <div class="bg-surface-primary rounded-2xl shadow-xl border  p-8">
+
+            <div class="mb-8 text-center">
+                <h1 class="text-2xl font-bold text-content-primary mb-1">{m.reset_title()}</h1>
+                <p class="text-sm text-content-secondary">{m.reset_subtitle()}</p>
+            </div>
+
+            <form onsubmit={handleSubmit} class="flex flex-col gap-5">
+
+                <!-- New password -->
+                <div class="flex flex-col gap-1.5">
+                    <label for="password" class="text-sm font-medium text-content-primary">
+                        {m.reset_new_label()}
+                    </label>
+                    <div class="relative">
+                        <input
+                            id="password"
+                            type={showPassword ? 'text' : 'password'}
+                            bind:value={password}
+                            placeholder={m.reset_new_placeholder()}
+                            required
+                            autocomplete="new-password"
+                            class="w-full px-4 py-2.5 pr-11 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                        />
+                        <button type="button" onclick={() => showPassword = !showPassword}
+                            class="absolute right-3 top-1/2 -translate-y-1/2 text-content-tertiary hover:text-content-primary transition"
+                            aria-label="Toggle visibility">
+                            {#if showPassword}
+                                <EyeSlash width={16} height={16} />
+                            {:else}
+                                <Eye width={16} height={16} />
+                            {/if}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Confirm password -->
+                <div class="flex flex-col gap-1.5">
+                    <label for="confirm" class="text-sm font-medium text-content-primary">
+                        {m.reset_confirm_label()}
+                    </label>
+                    <div class="relative">
+                        <input
+                            id="confirm"
+                            type={showConfirm ? 'text' : 'password'}
+                            bind:value={confirm}
+                            placeholder={m.reset_confirm_placeholder()}
+                            required
+                            autocomplete="new-password"
+                            class="w-full px-4 py-2.5 pr-11 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                        />
+                        <button type="button" onclick={() => showConfirm = !showConfirm}
+                            class="absolute right-3 top-1/2 -translate-y-1/2 text-content-tertiary hover:text-content-primary transition"
+                            aria-label="Toggle visibility">
+                            {#if showConfirm}
+                                <EyeSlash width={16} height={16} />
+                            {:else}
+                                <Eye width={16} height={16} />
+                            {/if}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Inline error -->
+                {#if error}
+                    <p class="text-xs text-error flex items-center gap-1.5">
+                        <ExclamationCircleFill width={12} height={12} />
+                        {error}
+                    </p>
+                {/if}
+
+                <button type="submit" class="btn btn-primary w-full py-3 text-base font-semibold mt-1">
+                    {m.reset_submit()}
+                </button>
+
+            </form>
+
+        </div>
+    </div>
+</div>

package/src/routes/+error.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { page } from '$app/state';
+	import { HttpStatus } from '$shared/api';
+    import { resolve } from '$app/paths';
+    import { LightbulbOff } from 'svelte-bootstrap-icons';
+
+    const status = $derived(page.status);
+    const message = $derived(page.error?.message ?? 'An unexpected error occurred');
+
+    const title = $derived(
+        status === HttpStatus.NOT_FOUND
+            ? "LOOKS LIKE YOU'RE LOST"
+            : status === HttpStatus.FORBIDDEN
+            ? "ACCESS DENIED"
+            : status === HttpStatus.INTERNAL_SERVER_ERROR
+            ? "SOMETHING BROKE"
+            : "SOMETHING WENT WRONG"
+    );
+
+    const hint = $derived(
+        status === HttpStatus.NOT_FOUND
+            ? "The page you are looking for is not available!"
+            : status === HttpStatus.FORBIDDEN
+            ? "You don't have permission to view this resource."
+            : status === HttpStatus.INTERNAL_SERVER_ERROR
+            ? "Our servers ran into an issue. Please try again in a moment."
+            : message
+    );
+</script>
+
+<svelte:head>
+    <title>Error {status}</title>
+</svelte:head>
+
+<main class="flex min-h-screen flex-col bg-primary">
+    <!-- Main content -->
+    <div class="flex flex-1 items-center justify-center px-8 pb-16">
+        <div class="flex flex-col items-center gap-16 md:flex-row md:gap-24">
+
+            <!-- Left: Icon in circle -->
+            <div class="shrink-0">
+                <div class="flex h-72 w-72 items-center justify-center rounded-full bg-error">
+                    <div class="text-error opacity-90 animate-bounce duration-300" >
+                        <LightbulbOff width={140} height={140} />
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right: Text content -->
+            <div class="flex flex-col gap-4 items-center ">
+                <!-- Big status number -->
+                <p
+                    class="leading-none text-error select-none text-[clamp(6rem,15vw,11rem)] "
+                >
+                    {status}
+                </p>
+
+                <!-- Title -->
+                <h1 class="text-lg font-bold uppercase tracking-widest text-content-secondary">
+                    {title}
+                </h1>
+
+                <!-- Hint -->
+                <p class="font-light italic" >
+                    {hint}
+                </p>
+
+                <!-- CTA -->
+                <div class="mt-10 flex items-center gap-8">
+                    <a
+                        href={resolve("/", {})}
+                        class="btn btn-primary"
+                    >
+                        GO TO HOME
+                        <span class="inline-block transition-transform group-hover:translate-x-1">→</span>
+                    </a>
+
+                    <button
+                        onclick={() => history.back()}
+                        class="btn btn-secondary"
+                    >
+                        Go back
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<style>
+    @keyframes float {
+        0%, 100% { transform: translateY(0px); }
+        50% { transform: translateY(-12px); }
+    }
+</style>

package/src/routes/+layout.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import '../app.css';
+	import { updated } from '$app/state';
+	import { beforeNavigate } from '$app/navigation';
+	import { snackStore, loaderStore, configStore } from '@aryagg/ui-kit';
+	import { SnackBar, Loader } from '@aryagg/ui-kit';
+	import { ESnackType } from '@aryagg/types';
+
+	let { children, data } = $props();
+
+	
+	$effect(() => {
+		// Set synchronously so children have config available on first render (SSR + CSR)
+		if (data.configError) {
+			snackStore.show({ type: ESnackType.DANGER, message: data.configError });
+		}
+		if (data.config) {
+			configStore.set(data.config);
+		}
+	});
+
+	// When a new build is deployed, force a full-page reload on the next navigation
+	// so the user always runs the latest code without a manual refresh.
+	beforeNavigate(({ willUnload, to }) => {
+		if (updated.current && !willUnload && to?.url) {
+			location.href = to.url.href;
+		}
+	});
+</script>
+
+{#if snackStore.current}<SnackBar />{/if}
+{#if loaderStore.isVisible}<Loader />{/if}
+
+<div class="h-screen w-screen">
+	{@render children()}
+</div>

package/src/routes/+layout.ts

@@ -0,0 +1,24 @@
+import { PUBLIC_CONFIG_ENV, PUBLIC_BASE_PATH } from "$env/static/public";
+import type { LayoutLoad } from "./$types";
+
+export const load: LayoutLoad = async ({ fetch }) => {
+    if (!PUBLIC_CONFIG_ENV) {
+        console.error("PUBLIC_CONFIG_ENV is not set");
+        return { config: null, configError: "Configuration environment missing" };
+    }
+
+    try {
+        const res = await fetch(`${PUBLIC_BASE_PATH}/config/config.${PUBLIC_CONFIG_ENV}.json`);
+
+        if (!res.ok) {
+            throw new Error(`Failed to load config.${PUBLIC_CONFIG_ENV}.json`);
+        }
+
+        const config = await res.json();
+        return { config, configError: null };
+
+    } catch (err) {
+        console.error(err);
+        return { config: null, configError: "Failed to load configuration" };
+    }
+};

package/src/routes/+page.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+    import * as m from '$lib/paraglide/messages';
+    import { Topbar } from '$widgets/topbar';
+    import {
+        ArrowRight,
+        LightningCharge,
+        ShieldLock,
+        Sun,
+        Globe2,
+        Grid3x3Gap,
+        CodeSlash,
+    } from 'svelte-bootstrap-icons';
+    import { resolve } from '$app/paths';
+
+    const features = [
+        {
+            title: 'Authentication',
+            desc: 'Login, register, forgot & reset password flows with server-side session management.',
+            tag: 'Ready',
+            href: resolve('/register', {}),
+            icon: ShieldLock,
+        },
+        {
+            title: 'Theming System',
+            desc: 'Light and dark themes using CSS variables with persistent user preference storage.',
+            tag: 'Built-in',
+            href: null,
+            icon: Sun,
+        },
+        {
+            title: 'Internationalization',
+            desc: '8 languages out of the box with Paraglide. RTL-aware layout support included.',
+            tag: '8 Languages',
+            href: null,
+            icon: Globe2,
+        },
+        {
+            title: 'Component Library',
+            desc: 'Over 20 pre-built UI components ready to use and customise across your app.',
+            tag: '20+ Items',
+            href: null,
+            icon: Grid3x3Gap,
+        },
+        {
+            title: 'TypeScript',
+            desc: 'Strict TypeScript throughout — full type safety from routes to components.',
+            tag: 'Strict Mode',
+            href: null,
+            icon: CodeSlash,
+        },
+    ];
+</script>
+
+<svelte:head>
+    <title>{m.home_title()}</title>
+    <meta name="description" content={m.home_description()} />
+</svelte:head>
+
+<div class="min-h-screen flex flex-col bg-surface-primary text-primary overflow-x-hidden">
+
+    <Topbar />
+
+    
+    <!-- HERO -->
+    <section class="flex-1 flex flex-col items-center justify-center px-6 py-20 text-center">
+
+        <!-- Logo mark -->
+        <div class="relative mb-10">
+            <div class="absolute inset-0 rounded-full bg-accent/15 blur-3xl scale-[2.5] pointer-events-none"></div>
+            <div class="relative w-20 h-20 rounded-3xl bg-accent flex items-center justify-center shadow-2xl rotate-12">
+                <span class="-rotate-12 text-on-accent">
+                    <LightningCharge width={36} height={36} />
+                </span>
+            </div>
+        </div>
+
+        <!-- Eyebrow badge -->
+        <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-accent/10 border border-accent/20 text-accent text-xs font-semibold tracking-[0.15em] uppercase mb-7">
+            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
+            {m.hero_eyebrow()}
+        </div>
+
+        <!-- Heading -->
+        <h1 class="text-5xl md:text-7xl font-bold leading-[1.06] tracking-tight text-primary mb-5 max-w-2xl">
+            {m.home_welcome()}
+        </h1>
+
+        <!-- Subtitle -->
+        <p class="text-secondary text-lg md:text-xl leading-relaxed max-w-md mb-10">
+            {m.home_subtitle()}
+        </p>
+
+        <!-- CTAs -->
+        <div class="flex flex-wrap items-center justify-center gap-3 mb-14">
+            <a
+                href={resolve('/register', {})}
+                class="no-underline inline-flex items-center gap-2 px-7 py-3.5 rounded-xl bg-accent text-on-accent font-semibold text-base transition-all duration-200 shadow-lg hover:opacity-90 hover:-translate-y-0.5"
+            >
+                {m.home_register_btn()}
+                <ArrowRight width={15} height={15} />
+            </a>
+            <a
+                href={resolve('/login', {})}
+                class="no-underline inline-flex items-center gap-2 px-7 py-3.5 rounded-xl border border-accent/40 text-accent hover:bg-accent/10 font-semibold text-base transition-all duration-200 hover:-translate-y-0.5"
+            >
+                {m.home_login_btn()}
+            </a>
+        </div>
+
+        <!-- Stats -->
+        <div class="flex items-center gap-6 sm:gap-10">
+            <div>
+                <p class="text-2xl font-bold text-primary">{m.hero_stat1_value()}</p>
+                <p class="text-[11px] text-tertiary uppercase tracking-widest mt-1">{m.hero_stat1_label()}</p>
+            </div>
+            <div class="w-px h-8 bg-border-primary"></div>
+            <div>
+                <p class="text-2xl font-bold text-primary">{m.hero_stat2_value()}</p>
+                <p class="text-[11px] text-tertiary uppercase tracking-widest mt-1">{m.hero_stat2_label()}</p>
+            </div>
+            <div class="w-px h-8 bg-border-primary"></div>
+            <div>
+                <p class="text-2xl font-bold text-primary">{m.hero_stat3_value()}</p>
+                <p class="text-[11px] text-tertiary uppercase tracking-widest mt-1">{m.hero_stat3_label()}</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- FEATURES GRID -->
+    <section class="w-full max-w-5xl mx-auto px-6 pb-24">
+
+        <!-- Section divider label -->
+        <div class="flex items-center gap-4 mb-8">
+            <span class="h-px flex-1 bg-linear-to-r from-transparent to-accent/30"></span>
+            <span class="section-label text-accent">What's Included</span>
+            <span class="h-px flex-1 bg-linear-to-l from-transparent to-accent/30"></span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {#each features as f, i (i)}
+                <div class="group flex items-start gap-4 p-5 rounded-2xl bg-surface-secondary border border-border-primary hover:border-accent/40 hover:bg-accent/3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg">
+
+                    <!-- Icon bubble -->
+                    <div class="flex-none w-10 h-10 rounded-xl bg-accent/10 group-hover:bg-accent/20 flex items-center justify-center transition-colors shrink-0 text-accent">
+                        <svelte:component this={f.icon} width={20} height={20} />
+                    </div>
+
+                    <!-- Text -->
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between gap-2 mb-1.5">
+                            <h3 class="text-sm font-semibold text-primary">{f.title}</h3>
+                            <span class="flex-none text-[10px] font-semibold px-1.5 py-0.5 rounded-md bg-accent/10 text-accent">{f.tag}</span>
+                        </div>
+                        <p class="text-xs text-secondary leading-relaxed">{f.desc}</p>
+                        {#if f.href}
+                            <a href={f.href} class="no-underline inline-flex items-center gap-1 mt-3 text-xs font-medium text-accent hover:gap-2 transition-all">
+                                Get started <ArrowRight width={11} height={11} />
+                            </a>
+                        {/if}
+                    </div>
+                </div>
+            {/each}
+        </div>
+    </section>
+
+    <!-- MARQUEE STRIP — unchanged -->
+    <div class="sticky flex-none bottom-0 z-40 border-t border-border-primary bg-surface-primary/80 backdrop-blur-sm overflow-hidden py-3">
+        <div class="flex gap-10 w-max marquee-track items-center">
+            {#each [0,1,2,3,4,5,6,7] as i (i)}
+                <span class="text-tertiary text-xs tracking-[0.18em] uppercase whitespace-nowrap">{m.marquee_1()}</span>
+                <span class="text-accent text-xs">✦</span>
+                <span class="text-tertiary text-xs tracking-[0.18em] uppercase whitespace-nowrap">{m.marquee_2()}</span>
+                <span class="text-accent text-xs">◈</span>
+                <span class="text-tertiary text-xs tracking-[0.18em] uppercase whitespace-nowrap">{m.marquee_3()}</span>
+                <span class="text-accent text-xs">✦</span>
+                <span class="text-tertiary text-xs tracking-[0.18em] uppercase whitespace-nowrap">{m.marquee_4()}</span>
+                <span class="text-accent text-xs">◈</span>
+            {/each}
+        </div>
+    </div>
+
+</div>
+
+<style>
+    .marquee-track {
+        animation: marquee 28s linear infinite;
+    }
+    @keyframes marquee {
+        from { transform: translateX(0); }
+        to   { transform: translateX(-50%); }
+    }
+</style>

package/src/routes/+page.ts

@@ -0,0 +1,3 @@
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

package/static/config/config.local.json

@@ -0,0 +1,3 @@
+{
+    "name": "local"
+}