@trackany-device/components 1.0.0

package/src/layouts/app/partials/Navbar.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import type { NavItem } from '../../../types/navigation';
+import { cn } from '../../../lib/utils';
+import { ChevronDown } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../../components/ui/dropdown-menu';
+
+interface NavbarProps {
+    navItems?: NavItem[];
+    currentUrl?: string;
+    rightSlot?: ReactNode;
+    className?: string;
+}
+
+function isActive(item: NavItem, currentUrl: string): boolean {
+    if (!item.href || item.href === '#') return false;
+    return currentUrl.startsWith(item.href);
+}
+
+function hasActiveChild(items: NavItem[], currentUrl: string): boolean {
+    return items.some((item) => isActive(item, currentUrl) || (item.items && hasActiveChild(item.items, currentUrl)));
+}
+
+export function Navbar({ navItems = [], currentUrl = '', rightSlot, className }: NavbarProps) {
+    return (
+        <div className={cn('border-b border-border pb-5 lg:pb-0 mb-5 lg:mb-10', className)}>
+            <div className="container mx-auto px-4 flex flex-wrap justify-between items-center gap-2">
+                <nav className="flex items-stretch overflow-x-auto">
+                    {navItems.map((item, index) => {
+                        const active = isActive(item, currentUrl);
+                        const childActive = item.items ? hasActiveChild(item.items, currentUrl) : false;
+                        const highlighted = active || childActive;
+
+                        if (item.items && item.items.length > 0) {
+                            return (
+                                <DropdownMenu key={index}>
+                                    <DropdownMenuTrigger asChild>
+                                        <button
+                                            className={cn(
+                                                'flex items-center gap-1.5 px-3 py-3.5 text-sm text-nowrap border-b-2 transition-colors',
+                                                'hover:text-mono bg-transparent border-transparent',
+                                                highlighted ? 'text-mono border-mono' : 'text-secondary-foreground',
+                                            )}
+                                        >
+                                            {item.title}
+                                            <ChevronDown className="size-3.5" />
+                                        </button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent sideOffset={0} className="min-w-[175px]">
+                                        {item.items.map((child, ci) => (
+                                            <DropdownMenuItem key={ci} asChild>
+                                                <a
+                                                    href={child.href}
+                                                    className={cn(isActive(child, currentUrl) && 'bg-accent')}
+                                                >
+                                                    {child.title}
+                                                </a>
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                            );
+                        }
+
+                        return (
+                            <a
+                                key={index}
+                                href={item.href}
+                                className={cn(
+                                    'flex items-center px-3 py-3.5 text-sm text-nowrap border-b-2 transition-colors',
+                                    'hover:text-mono border-transparent',
+                                    highlighted ? 'text-mono border-mono' : 'text-secondary-foreground',
+                                )}
+                            >
+                                {item.title}
+                            </a>
+                        );
+                    })}
+                </nav>
+                {rightSlot && <div className="flex items-center gap-4">{rightSlot}</div>}
+            </div>
+        </div>
+    );
+}

package/src/layouts/app/partials/Toolbar.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { BreadcrumbItem } from '../../../types/navigation';
+import { cn } from '../../../lib/utils';
+import { ChevronRight } from 'lucide-react';
+
+interface ToolbarProps {
+    title?: string;
+    breadcrumbs?: BreadcrumbItem[];
+    actions?: ReactNode;
+    className?: string;
+    currentUrl?: string;
+}
+
+export function Toolbar({ title, breadcrumbs = [], actions, className, currentUrl }: ToolbarProps) {
+    return (
+        <div className={cn('mb-5 lg:mb-10', className)}>
+            <div className="container mx-auto px-4 flex items-center justify-between flex-wrap gap-5">
+                <div className="flex items-center flex-wrap gap-1 lg:gap-5">
+                    {title && <h1 className="font-medium text-lg text-mono">{title}</h1>}
+                    {breadcrumbs.length > 0 && (
+                        <nav className="flex items-center gap-1 text-xs lg:text-sm font-medium">
+                            {breadcrumbs.map((item, index) => {
+                                const isLast = index === breadcrumbs.length - 1;
+                                const isActive = currentUrl ? currentUrl === item.href : isLast;
+                                return (
+                                    <span key={index} className="flex items-center gap-1">
+                                        {item.href && !isLast ? (
+                                            <a href={item.href} className={cn('hover:text-primary transition-colors', isActive ? 'text-mono' : 'text-muted-foreground')}>
+                                                {item.title}
+                                            </a>
+                                        ) : (
+                                            <span className={isLast ? 'text-mono' : 'text-muted-foreground'}>
+                                                {item.title}
+                                            </span>
+                                        )}
+                                        {!isLast && <ChevronRight className="size-3.5 text-muted-foreground" />}
+                                    </span>
+                                );
+                            })}
+                        </nav>
+                    )}
+                </div>
+                {actions && <div className="flex items-center gap-2.5">{actions}</div>}
+            </div>
+        </div>
+    );
+}

package/src/layouts/app-layout.tsx

@@ -0,0 +1,29 @@
+/**
+ * AppLayout — tenant operational portal layout (sidebar variant).
+ *
+ * This is the thin dispatcher used by Inertia page layouts in the core app.
+ * It delegates to AppSidebarLayout which wraps AppTopNav.
+ *
+ * NOTE: AppTopNav is an app-level component — it uses wayfinder routes and
+ * app-specific navigation that cannot be defined in this package. The consuming
+ * app (core/) provides the AppTopNav via app-sidebar-layout.tsx; this file
+ * exists here so the package exports a consistent AppLayout type.
+ *
+ * Use in app layouts:
+ *   import AppLayoutTemplate from '@trackany-device/components/layouts/app/app-sidebar-layout';
+ */
+export type AppLayoutProps = {
+    breadcrumbs?: Array<{ title: string; href: string }>;
+    children: React.ReactNode;
+};
+
+/**
+ * Placeholder re-exported for type compatibility. The real implementation is
+ * in core/resources/js/layouts/app-layout.tsx which uses the app's own
+ * app-sidebar-layout.tsx (which knows about AppTopNav).
+ */
+export default function AppLayout({
+    children,
+}: AppLayoutProps) {
+    return <>{children}</>;
+}

package/src/layouts/auth/AuthBrandedLayout.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { Card, CardContent } from '../../components/ui/card';
+
+interface AuthBrandedLayoutProps {
+    children: ReactNode;
+    logo?: ReactNode;
+    brandTitle?: string;
+    brandSubtitle?: string;
+    brandImage?: string;
+    brandImageDark?: string;
+    logoHref?: string;
+}
+
+export default function AuthBrandedLayout({
+    children,
+    logo,
+    brandTitle = 'Secure Dashboard Access',
+    brandSubtitle = 'A robust authentication gateway ensuring secure, efficient access.',
+    brandImage,
+    brandImageDark,
+    logoHref = '/',
+}: AuthBrandedLayoutProps) {
+    return (
+        <>
+            {(brandImage || brandImageDark) && (
+                <style>{`
+                    .auth-branded-bg { ${brandImage ? `background-image: url('${brandImage}');` : ''} }
+                    .dark .auth-branded-bg { ${brandImageDark ? `background-image: url('${brandImageDark}');` : ''} }
+                `}</style>
+            )}
+            <div className="grid lg:grid-cols-2 grow min-h-screen">
+                {/* Form panel */}
+                <div className="flex justify-center items-center p-8 lg:p-10 order-2 lg:order-1">
+                    <Card className="w-full max-w-[400px]">
+                        <CardContent className="p-6">
+                            {children}
+                        </CardContent>
+                    </Card>
+                </div>
+
+                {/* Brand panel */}
+                <div className={`lg:rounded-xl lg:border lg:border-border lg:m-5 order-1 lg:order-2 bg-top xxl:bg-center xl:bg-cover bg-no-repeat auth-branded-bg bg-muted`}>
+                    <div className="flex flex-col p-8 lg:p-16 gap-4">
+                        {logo && (
+                            <a href={logoHref} className="shrink-0">
+                                {logo}
+                            </a>
+                        )}
+                        <div className="flex flex-col gap-3">
+                            <h3 className="text-2xl font-semibold text-mono">{brandTitle}</h3>
+                            <p className="text-base font-medium text-secondary-foreground">{brandSubtitle}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

package/src/layouts/auth/AuthCardLayout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { AuthLayoutProps } from '../../types';
+import { Card } from '../../components/Card';
+
+interface Props extends AuthLayoutProps {
+    logo?: ReactNode;
+    homeUrl?: string;
+}
+
+export default function AuthCardLayout({ children, title, description, logo, homeUrl = '/' }: Props) {
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+            <div className="flex w-full max-w-md flex-col gap-6">
+                {logo && (
+                    <a href={homeUrl} className="self-center">
+                        {logo}
+                    </a>
+                )}
+                <Card>
+                    <div className="px-10 pt-8 pb-0 text-center">
+                        <h2 className="text-xl font-semibold">{title}</h2>
+                        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+                    </div>
+                    <div className="px-10 py-8">
+                        {children}
+                    </div>
+                </Card>
+            </div>
+        </div>
+    );
+}

package/src/layouts/auth/AuthCenteredLayout.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { AuthLayoutProps } from '../../types';
+
+interface Props extends AuthLayoutProps {
+    logo?: ReactNode;
+    appName?: string;
+    homeUrl?: string;
+    bannerUrl?: string;
+}
+
+export default function AuthCenteredLayout({ children, title, description, logo, appName, homeUrl = '/', bannerUrl = '/banner.png' }: Props) {
+    return (
+        <div className="relative flex min-h-svh flex-col items-center justify-center bg-background bg-cover bg-center bg-no-repeat p-6"
+            style={{ backgroundImage: `url(${bannerUrl})` }}>
+            <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-background/95 via-background/85 to-primary-subtle/60" />
+
+            <div className="relative z-10 w-full max-w-md">
+                <a href={homeUrl} className="mb-6 flex flex-col items-center gap-2 text-foreground">
+                    {logo}
+                    {appName && <span className="font-display text-sm font-semibold">{appName}</span>}
+                </a>
+
+                <div className="rounded-2xl border bg-card/95 p-8 shadow-lg backdrop-blur">
+                    <div className="mb-6 text-center">
+                        <h1 className="font-display text-xl font-semibold text-foreground">{title}</h1>
+                        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+                    </div>
+                    {children}
+                </div>
+
+                <p className="mt-4 text-center text-xs text-muted-foreground">
+                    <a href="/terms" className="hover:text-foreground hover:underline">Terms</a>
+                    {' · '}
+                    <a href="/privacy" className="hover:text-foreground hover:underline">Privacy</a>
+                    {' · '}
+                    <a href="/cookies" className="hover:text-foreground hover:underline">Cookies</a>
+                </p>
+            </div>
+        </div>
+    );
+}

package/src/layouts/auth/AuthClassicLayout.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { Card, CardContent } from '../../components/ui/card';
+
+interface AuthClassicLayoutProps {
+    children: ReactNode;
+    logo?: ReactNode;
+    logoHref?: string;
+    backgroundImage?: string;
+    backgroundImageDark?: string;
+}
+
+export default function AuthClassicLayout({
+    children,
+    logo,
+    logoHref = '/',
+    backgroundImage,
+    backgroundImageDark,
+}: AuthClassicLayoutProps) {
+    return (
+        <>
+            {(backgroundImage || backgroundImageDark) && (
+                <style>{`
+                    .auth-classic-bg { ${backgroundImage ? `background-image: url('${backgroundImage}');` : ''} }
+                    .dark .auth-classic-bg { ${backgroundImageDark ? `background-image: url('${backgroundImageDark}');` : ''} }
+                `}</style>
+            )}
+            <div className="flex flex-col items-center justify-center grow min-h-screen bg-center bg-no-repeat auth-classic-bg">
+                {logo && (
+                    <div className="m-5">
+                        <a href={logoHref}>{logo}</a>
+                    </div>
+                )}
+                <Card className="w-full max-w-[400px]">
+                    <CardContent className="p-6">
+                        {children}
+                    </CardContent>
+                </Card>
+            </div>
+        </>
+    );
+}

package/src/layouts/auth/AuthSimpleLayout.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { AuthLayoutProps } from '../../types';
+
+interface Props extends AuthLayoutProps {
+    logo?: ReactNode;
+    homeUrl?: string;
+}
+
+export default function AuthSimpleLayout({ children, title, description, logo, homeUrl = '/' }: Props) {
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+            <div className="w-full max-w-sm">
+                <div className="flex flex-col gap-8">
+                    <div className="flex flex-col items-center gap-4">
+                        {logo && (
+                            <a href={homeUrl} className="flex flex-col items-center gap-2 font-medium">
+                                <div className="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
+                                    {logo}
+                                </div>
+                                <span className="sr-only">{title}</span>
+                            </a>
+                        )}
+                        <div className="space-y-2 text-center">
+                            <h1 className="text-xl font-medium">{title}</h1>
+                            <p className="text-center text-sm text-muted-foreground">{description}</p>
+                        </div>
+                    </div>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/layouts/auth/AuthSplitLayout.tsx

@@ -0,0 +1,89 @@
+import { Activity, MapPin, Radio, Shield } from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { AuthLayoutProps } from '../../types';
+
+const FEATURES = [
+    { icon: MapPin,     label: 'Real-time GPS tracking',    sub: 'Live positions on interactive maps' },
+    { icon: Shield,     label: 'Beat zone enforcement',     sub: 'Instant geo-fence breach alerts' },
+    { icon: Radio,      label: 'Multi-device support',      sub: 'P901 · GF-07 · JT808 and more' },
+    { icon: Activity,   label: 'Incident management',       sub: 'SOS, offline, and violation tracking' },
+];
+
+interface Props extends AuthLayoutProps {
+    logo?: ReactNode;
+    appName?: string;
+}
+
+export default function AuthSplitLayout({ children, title, description, logo, appName = 'Track Any Device' }: Props) {
+    return (
+        <div className="flex h-dvh overflow-hidden bg-background">
+            {/* LEFT PANEL */}
+            <aside className="relative hidden overflow-hidden border-r border-border bg-[#0b1220] lg:flex lg:w-[48%] lg:flex-col">
+                <div aria-hidden className="pointer-events-none absolute -top-32 -right-32 h-[480px] w-[480px] rounded-full opacity-25 blur-3xl"
+                    style={{ background: 'radial-gradient(circle, var(--primary) 0%, transparent 70%)' }} />
+                <div aria-hidden className="pointer-events-none absolute -bottom-32 -left-24 h-[420px] w-[420px] rounded-full opacity-20 blur-3xl"
+                    style={{ background: 'radial-gradient(circle, #38bdf8 0%, transparent 70%)' }} />
+                <div aria-hidden className="pointer-events-none absolute inset-0 opacity-[0.05]"
+                    style={{ backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)', backgroundSize: '24px 24px' }} />
+
+                <div className="relative z-10 flex h-full flex-col justify-between p-10">
+                    <div className="flex items-center gap-3">
+                        {logo && <div className="flex h-10 items-center rounded-lg bg-white/95 px-3 shadow-sm">{logo}</div>}
+                        <span className="text-base font-semibold text-white">{appName}</span>
+                    </div>
+
+                    <div className="max-w-md">
+                        <span className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/[0.06] px-3 py-1 text-[11px] font-medium tracking-wider text-white/70 uppercase">
+                            <span className="relative flex h-1.5 w-1.5">
+                                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-80" />
+                                <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                            </span>
+                            Live operations platform
+                        </span>
+
+                        <h2 className="text-4xl leading-tight font-bold tracking-tight text-white">
+                            Field intelligence,<br />in one view.
+                        </h2>
+                        <p className="mt-5 text-base leading-relaxed text-white/65">
+                            Real-time GPS tracking, beat zone enforcement, and automated incident management — built for fleet, government, and IoT operators.
+                        </p>
+
+                        <ul className="mt-9 space-y-2">
+                            {FEATURES.map((f) => (
+                                <li key={f.label} className="flex items-start gap-3 rounded-xl border border-white/[0.08] bg-white/[0.04] p-3 backdrop-blur-sm transition-colors hover:border-white/15 hover:bg-white/[0.06]">
+                                    <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-primary"
+                                        style={{ background: 'color-mix(in oklab, var(--primary) 18%, transparent)' }}>
+                                        <f.icon className="h-4 w-4" />
+                                    </span>
+                                    <span className="leading-tight">
+                                        <span className="block text-sm font-semibold text-white">{f.label}</span>
+                                        <span className="block text-xs text-white/55">{f.sub}</span>
+                                    </span>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    <div className="text-[11px] tracking-wide text-white/35">
+                        © {new Date().getFullYear()} · Secure · Encrypted · Enterprise-grade
+                    </div>
+                </div>
+            </aside>
+
+            {/* RIGHT PANEL */}
+            <div className="flex flex-1 items-center justify-center overflow-y-auto bg-background p-6 lg:p-12">
+                <div className="w-full max-w-sm">
+                    {logo && <div className="mb-8 flex items-center justify-center gap-2 lg:hidden">{logo}</div>}
+                    <div className="rounded-2xl border border-border bg-card p-8 shadow-sm">
+                        <div className="mb-6">
+                            <h1 className="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
+                            {description && <p className="mt-1.5 text-sm text-muted-foreground">{description}</p>}
+                        </div>
+                        {children}
+                    </div>
+                    <p className="mt-5 text-center text-xs text-muted-foreground">Secure · Encrypted · Enterprise-grade</p>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/layouts/web-app-layout.tsx

@@ -0,0 +1,162 @@
+'use client';
+import { PlatformLink, usePlatformUrl } from '../platform/context';
+import {
+    AlertTriangle,
+    LayoutDashboard,
+    MapPin,
+    Package,
+    Shield,
+    Smartphone,
+    User,
+} from 'lucide-react';
+
+import SiteHeader from '../components/web/SiteHeader';
+
+type SidebarItem = {
+    label: string;
+    href: string;
+    icon: React.ComponentType<{ className?: string }>;
+    matchPrefixes: string[];
+};
+
+const SIDEBAR: SidebarItem[] = [
+    {
+        label: 'Dashboard',
+        href: '/dashboard',
+        icon: LayoutDashboard,
+        matchPrefixes: ['/dashboard'],
+    },
+    {
+        label: 'Live Tracking',
+        href: '/live-tracking',
+        icon: MapPin,
+        matchPrefixes: ['/live-tracking'],
+    },
+    {
+        label: 'My Devices',
+        href: '/devices',
+        icon: Smartphone,
+        matchPrefixes: ['/devices', '/my-devices'],
+    },
+    {
+        label: 'My Beats',
+        href: '/beats',
+        icon: Shield,
+        matchPrefixes: ['/beats', '/my-beats'],
+    },
+    {
+        label: 'My Incidents',
+        href: '/incidents',
+        icon: AlertTriangle,
+        matchPrefixes: ['/incidents', '/my-incidents'],
+    },
+    {
+        label: 'My Orders',
+        href: '/orders',
+        icon: Package,
+        matchPrefixes: ['/orders', '/my-orders'],
+    },
+    {
+        label: 'Profile',
+        href: '/settings/profile',
+        icon: User,
+        matchPrefixes: ['/settings'],
+    },
+];
+
+/**
+ * WebAppLayout — used for authenticated web-host user-area pages.
+ *
+ * Composition:
+ *   ┌───────────────────────────────────┐
+ *   │           SiteHeader              │  (public web header, with auth menu)
+ *   ├──────────┬────────────────────────┤
+ *   │ Sidebar  │   Main page content    │
+ *   │ (Dash,   │                        │
+ *   │  My Dev, │                        │
+ *   │  Orders, │                        │
+ *   │  Profile)│                        │
+ *   ├──────────┴────────────────────────┤
+ *   │           SiteFooter              │
+ *   └───────────────────────────────────┘
+ *
+ * Distinct from the tenant-portal AppLayout, which uses an app-style sidebar
+ * + breadcrumbs and no public footer.
+ *
+ */
+export default function WebAppLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const url = usePlatformUrl();
+    const appName =
+        (typeof window !== 'undefined' && window.AppConfig?.appName) ||
+        'Fleet Tracking';
+
+    return (
+        <div className="flex min-h-screen flex-col bg-background text-foreground">
+            <SiteHeader />
+
+            <div className="mt-16 flex-1 px-4 sm:px-6 lg:px-8">
+                <div className="mx-auto flex w-full max-w-7xl flex-col lg:flex-row">
+                    <aside className="border-b border-border bg-muted/30 lg:w-56 lg:shrink-0 lg:rounded-l-xl lg:border-r lg:border-b-0">
+                        <nav className="sticky top-16 flex gap-1 overflow-x-auto p-3 lg:flex-col lg:gap-0.5 lg:overflow-visible lg:p-4">
+                            {SIDEBAR.map((item) => {
+                                const isActive = item.matchPrefixes.some(
+                                    (prefix) =>
+                                        url === prefix ||
+                                        url.startsWith(prefix + '/') ||
+                                        url.startsWith(prefix + '?'),
+                                );
+                                const Icon = item.icon;
+
+                                return (
+                                    <PlatformLink
+                                        key={item.href}
+                                        href={item.href}
+                                        className={
+                                            'flex shrink-0 items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors lg:shrink ' +
+                                            (isActive
+                                                ? 'bg-primary text-primary-foreground'
+                                                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground')
+                                        }
+                                    >
+                                        <Icon className="size-4" />
+                                        <span>{item.label}</span>
+                                    </PlatformLink>
+                                );
+                            })}
+                        </nav>
+                    </aside>
+
+                    <main className="min-w-0 flex-1 py-6 lg:px-6 lg:py-8">
+                        {children}
+                    </main>
+                </div>
+            </div>
+
+            <footer className="mt-8 border-t border-border bg-card">
+                <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-2 px-4 py-4 text-xs text-muted-foreground sm:flex-row sm:px-6 lg:px-8">
+                    <span>
+                        © {new Date().getFullYear()} {appName}
+                    </span>
+                    <nav className="flex flex-wrap items-center gap-3">
+                        <PlatformLink href="/terms" className="hover:text-foreground">
+                            Terms
+                        </PlatformLink>
+                        <PlatformLink href="/privacy" className="hover:text-foreground">
+                            Privacy
+                        </PlatformLink>
+                        <PlatformLink href="/cookies" className="hover:text-foreground">
+                            Cookies
+                        </PlatformLink>
+                        <PlatformLink href="/contact" className="hover:text-foreground">
+                            Contact
+                        </PlatformLink>
+                    </nav>
+                </div>
+            </footer>
+        </div>
+    );
+}

package/src/layouts/web-layout.tsx

@@ -0,0 +1,23 @@
+import { PlatformLink } from '../platform/context';
+import SiteFooter from '../components/web/SiteFooter';
+import SiteHeader from '../components/web/SiteHeader';
+
+/**
+ * WebLayout — wraps central-host public pages with the shared shadcn
+ * header + footer. Token-driven, so it respects the active tenant
+ * data-theme + light/dark mode.
+ *
+ * Pages with a full-bleed hero (home/) render SiteHeader / SiteFooter
+ * directly so they can sit above and below the hero without the
+ * fixed-header offset.
+ *
+ */
+export default function WebLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="flex min-h-screen flex-col bg-background text-foreground">
+            <SiteHeader />
+            <main className="mt-16 flex flex-1 flex-col">{children}</main>
+            <SiteFooter />
+        </div>
+    );
+}