create-mantiq 0.7.0 → 0.7.2

package/stubs/themes/corporate/react/src/pages/Register.tsx.stub

@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import { post } from '../lib/api.ts'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+interface RegisterProps {
+  appName?: string
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Register({ appName = 'Mantiq', navigate }: RegisterProps) {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const { ok, data } = await post('/register', { name, email, password })
+    if (ok) navigate('/dashboard')
+    else setError(data?.error?.message ?? data?.error ?? 'Registration failed. Please try again.')
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-muted/50 flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        {/* Logo */}
+        <div className="mb-8 flex flex-col items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold shadow-sm">
+            M
+          </div>
+          <span className="text-lg font-semibold tracking-tight">{appName}</span>
+        </div>
+
+        {/* Card */}
+        <div className="rounded-lg border bg-card shadow-sm p-6">
+          <div className="mb-6">
+            <h1 className="text-xl font-semibold tracking-tight">Create an account</h1>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Get started with {appName} today
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-4 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+                placeholder="John Doe"
+                autoComplete="name"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="you@example.com"
+                autoComplete="email"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                placeholder="Create a strong password"
+                autoComplete="new-password"
+                minLength={8}
+              />
+              <p className="text-xs text-muted-foreground">Must be at least 8 characters</p>
+            </div>
+
+            <div className="flex items-start gap-2">
+              <input
+                type="checkbox"
+                id="terms"
+                className="mt-1 h-3.5 w-3.5 rounded border-input accent-primary"
+                required
+              />
+              <label htmlFor="terms" className="text-xs text-muted-foreground leading-relaxed">
+                I agree to the{' '}
+                <button type="button" className="font-medium text-primary hover:text-primary/80">Terms of Service</button>
+                {' '}and{' '}
+                <button type="button" className="font-medium text-primary hover:text-primary/80">Privacy Policy</button>
+              </label>
+            </div>
+
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Creating account...' : 'Create account'}
+            </Button>
+          </form>
+
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <Separator className="w-full" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card px-2 text-muted-foreground">or</span>
+            </div>
+          </div>
+
+          <p className="text-center text-sm text-muted-foreground">
+            Already have an account?{' '}
+            <button
+              type="button"
+              className="font-medium text-primary hover:text-primary/80"
+              onClick={() => navigate('/login')}
+            >
+              Sign in
+            </button>
+          </p>
+        </div>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-muted-foreground">
+          Powered by {appName}
+        </p>
+      </div>
+    </div>
+  )
+}

package/stubs/themes/corporate/react/src/style.css.stub

@@ -0,0 +1,135 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * shadcn/ui theme — Corporate
+ *
+ * Dense, professional, data-focused. Small-medium radius. Indigo primary.
+ * Crisp borders, pure white cards on light gray background. Inspired by Stripe.
+ */
+
+@theme inline {
+  --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-destructive-foreground: var(--destructive-foreground);
+  --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);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.375rem;
+  --background: oklch(0.98 0.001 247.858);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.585 0.233 277.117);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.96 0.003 264);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.96 0.003 264);
+  --muted-foreground: oklch(0.50 0.016 285.938);
+  --accent: oklch(0.96 0.003 264);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.895 0.006 264);
+  --input: oklch(0.895 0.006 264);
+  --ring: oklch(0.585 0.233 277.117);
+  --chart-1: oklch(0.585 0.233 277.117);
+  --chart-2: oklch(0.553 0.213 264.364);
+  --chart-3: oklch(0.496 0.265 301.924);
+  --chart-4: oklch(0.6 0.118 184.714);
+  --chart-5: oklch(0.828 0.189 84.429);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.585 0.233 277.117);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.96 0.003 264);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.895 0.006 264);
+  --sidebar-ring: oklch(0.585 0.233 277.117);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.178 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.178 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.65 0.21 277.117);
+  --primary-foreground: oklch(0.145 0.004 285.823);
+  --secondary: oklch(0.24 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.24 0.006 286.033);
+  --muted-foreground: oklch(0.65 0.014 286.067);
+  --accent: oklch(0.24 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.704 0.191 22.216);
+  --border: oklch(0.28 0.006 286.033);
+  --input: oklch(0.28 0.006 286.033);
+  --ring: oklch(0.65 0.21 277.117);
+  --chart-1: oklch(0.65 0.21 277.117);
+  --chart-2: oklch(0.623 0.214 262.881);
+  --chart-3: oklch(0.627 0.265 303.9);
+  --chart-4: oklch(0.696 0.17 162.48);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.16 0.005 285.823);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.65 0.21 277.117);
+  --sidebar-primary-foreground: oklch(0.145 0.004 285.823);
+  --sidebar-accent: oklch(0.24 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.28 0.006 286.033);
+  --sidebar-ring: oklch(0.65 0.21 277.117);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.4s ease-out; }

package/stubs/themes/corporate/svelte/src/pages/Dashboard.svelte.stub

@@ -0,0 +1,271 @@
+<script lang="ts">
+  import AuthenticatedLayout from '$lib/components/layout/AuthenticatedLayout.svelte'
+  import Header from '$lib/components/layout/Header.svelte'
+  import Main from '$lib/components/layout/Main.svelte'
+  import TopNav from '$lib/components/layout/TopNav.svelte'
+  import { Button } from '$lib/components/ui/button'
+  import * as Card from '$lib/components/ui/card'
+  import { Badge } from '$lib/components/ui/badge'
+  import { Separator } from '$lib/components/ui/separator'
+  import * as Table from '$lib/components/ui/table'
+  import {
+    TrendingUp,
+    TrendingDown,
+    ArrowUpRight,
+    ArrowDownRight,
+    CreditCard,
+    DollarSign,
+    Users,
+    Activity,
+  } from 'lucide-svelte'
+
+  interface Props {
+    appName?: string
+    currentUser?: { id: number; name: string; email: string; role: string } | null
+    navigate?: (href: string) => void
+  }
+  let { appName = 'Mantiq', currentUser = null, navigate = () => {} }: Props = $props()
+
+  const topNav = [
+    { title: 'Overview', href: '/dashboard', isActive: true },
+    { title: 'Sales', href: '/dashboard', isActive: false, disabled: true },
+    { title: 'Tickets', href: '/dashboard', isActive: false, disabled: true },
+    { title: 'Performance', href: '/dashboard', isActive: false, disabled: true },
+  ]
+
+  const transactions = [
+    { customer: 'Olivia Martin', email: 'olivia@email.com', amount: '$1,999.00', status: 'Completed', date: 'Mar 15, 2025' },
+    { customer: 'Jackson Lee', email: 'jackson@email.com', amount: '$39.00', status: 'Completed', date: 'Mar 14, 2025' },
+    { customer: 'Isabella Nguyen', email: 'isabella@email.com', amount: '$299.00', status: 'Pending', date: 'Mar 14, 2025' },
+    { customer: 'William Kim', email: 'will@email.com', amount: '$99.00', status: 'Failed', date: 'Mar 13, 2025' },
+    { customer: 'Sofia Davis', email: 'sofia@email.com', amount: '$39.00', status: 'Completed', date: 'Mar 13, 2025' },
+  ]
+
+  function statusColor(status: string) {
+    if (status === 'Completed') return 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/20'
+    if (status === 'Pending') return 'bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/20'
+    return 'bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/20'
+  }
+
+  let activeRange = $state('7d')
+
+  // Revenue chart data
+  const chartData = [1200, 2100, 1800, 3200, 2800, 4100, 3600, 5200, 4800, 5800, 5100, 6200, 5600]
+  const maxVal = Math.max(...chartData)
+  const svgW = 700
+  const svgH = 220
+  const padL = 40
+  const padR = 10
+  const padT = 10
+  const padB = 30
+  const chartW = svgW - padL - padR
+  const chartH = svgH - padT - padB
+  const stepX = chartW / (chartData.length - 1)
+  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  const yLabels = ['$0', '$2k', '$4k', '$6k']
+
+  const points = chartData.map((val, i) => ({
+    x: padL + i * stepX,
+    y: padT + chartH - (val / maxVal) * chartH,
+  }))
+
+  const linePath = points.map((p, i) => {
+    if (i === 0) return `M ${p.x} ${p.y}`
+    const prev = points[i - 1]
+    const cpx1 = prev.x + stepX * 0.4
+    const cpx2 = p.x - stepX * 0.4
+    return `C ${cpx1} ${prev.y}, ${cpx2} ${p.y}, ${p.x} ${p.y}`
+  }).join(' ')
+
+  const areaPath = `${linePath} L ${points[points.length - 1].x} ${padT + chartH} L ${points[0].x} ${padT + chartH} Z`
+</script>
+
+<AuthenticatedLayout {currentUser} {appName} {navigate} activePath="/dashboard">
+  <Header {navigate}>
+    <TopNav links={topNav} onLinkClick={navigate} />
+  </Header>
+  <Main>
+    <div class="space-y-6">
+      <!-- Page title row -->
+      <div class="flex items-center justify-between">
+        <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+        <div class="flex items-center gap-1 rounded-lg border bg-card p-1">
+          {#each ['7d', '30d', '90d'] as range}
+            <button
+              onclick={() => activeRange = range}
+              class="rounded-md px-3 py-1.5 text-xs font-medium transition-colors {activeRange === range
+                ? 'bg-primary text-primary-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'}"
+            >
+              {range === '7d' ? '7 days' : range === '30d' ? '30 days' : '90 days'}
+            </button>
+          {/each}
+        </div>
+      </div>
+
+      <!-- Stat cards -->
+      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <Card.Root>
+          <Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <Card.Title class="text-sm font-medium">Total Revenue</Card.Title>
+            <DollarSign class="h-4 w-4 text-muted-foreground" />
+          </Card.Header>
+          <Card.Content>
+            <div class="text-2xl font-bold">$45,231.89</div>
+            <div class="mt-1 flex items-center gap-1">
+              <Badge variant="outline" class="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                <ArrowUpRight class="h-3 w-3" />
+                +20.1%
+              </Badge>
+              <span class="text-xs text-muted-foreground">from last period</span>
+            </div>
+          </Card.Content>
+        </Card.Root>
+
+        <Card.Root>
+          <Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <Card.Title class="text-sm font-medium">New Customers</Card.Title>
+            <Users class="h-4 w-4 text-muted-foreground" />
+          </Card.Header>
+          <Card.Content>
+            <div class="text-2xl font-bold">+2,350</div>
+            <div class="mt-1 flex items-center gap-1">
+              <Badge variant="outline" class="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                <ArrowUpRight class="h-3 w-3" />
+                +180.1%
+              </Badge>
+              <span class="text-xs text-muted-foreground">from last period</span>
+            </div>
+          </Card.Content>
+        </Card.Root>
+
+        <Card.Root>
+          <Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <Card.Title class="text-sm font-medium">Active Subscriptions</Card.Title>
+            <CreditCard class="h-4 w-4 text-muted-foreground" />
+          </Card.Header>
+          <Card.Content>
+            <div class="text-2xl font-bold">+12,234</div>
+            <div class="mt-1 flex items-center gap-1">
+              <Badge variant="outline" class="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                <ArrowUpRight class="h-3 w-3" />
+                +19%
+              </Badge>
+              <span class="text-xs text-muted-foreground">from last period</span>
+            </div>
+          </Card.Content>
+        </Card.Root>
+
+        <Card.Root>
+          <Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <Card.Title class="text-sm font-medium">Churn Rate</Card.Title>
+            <Activity class="h-4 w-4 text-muted-foreground" />
+          </Card.Header>
+          <Card.Content>
+            <div class="text-2xl font-bold">2.4%</div>
+            <div class="mt-1 flex items-center gap-1">
+              <Badge variant="outline" class="border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 gap-0.5 text-xs font-medium">
+                <ArrowDownRight class="h-3 w-3" />
+                -0.3%
+              </Badge>
+              <span class="text-xs text-muted-foreground">from last period</span>
+            </div>
+          </Card.Content>
+        </Card.Root>
+      </div>
+
+      <!-- Revenue chart -->
+      <Card.Root>
+        <Card.Header>
+          <div class="flex items-center justify-between">
+            <div>
+              <Card.Title>Revenue Overview</Card.Title>
+              <Card.Description>Daily revenue for the selected period</Card.Description>
+            </div>
+            <div class="flex items-center gap-2 text-sm">
+              <TrendingUp class="h-4 w-4 text-emerald-600" />
+              <span class="font-medium text-emerald-600">+12.5%</span>
+            </div>
+          </div>
+        </Card.Header>
+        <Card.Content>
+          <svg viewBox="0 0 {svgW} {svgH}" class="h-[280px] w-full" preserveAspectRatio="xMidYMid meet">
+            <defs>
+              <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" class="[stop-color:var(--color-primary)]" stop-opacity="0.3" />
+                <stop offset="100%" class="[stop-color:var(--color-primary)]" stop-opacity="0.02" />
+              </linearGradient>
+            </defs>
+
+            <!-- Grid lines -->
+            {#each yLabels as _, i}
+              {@const y = padT + chartH - (i / (yLabels.length - 1)) * chartH}
+              <line x1={padL} y1={y} x2={svgW - padR} y2={y} class="stroke-border" stroke-width="0.5" stroke-dasharray="4 4" />
+            {/each}
+
+            <!-- Y-axis labels -->
+            {#each yLabels as label, i}
+              {@const y = padT + chartH - (i / (yLabels.length - 1)) * chartH}
+              <text x={padL - 6} y={y + 3} text-anchor="end" class="fill-muted-foreground text-[9px]">
+                {label}
+              </text>
+            {/each}
+
+            <!-- Area fill -->
+            <path d={areaPath} fill="url(#areaGradient)" />
+
+            <!-- Line -->
+            <path d={linePath} fill="none" class="stroke-primary" stroke-width="2" stroke-linecap="round" />
+
+            <!-- X-axis labels -->
+            {#each days as day, i}
+              {@const idx = Math.round((i / (days.length - 1)) * (chartData.length - 1))}
+              <text x={points[idx].x} y={svgH - 6} text-anchor="middle" class="fill-muted-foreground text-[9px]">
+                {day}
+              </text>
+            {/each}
+          </svg>
+        </Card.Content>
+      </Card.Root>
+
+      <!-- Recent Transactions -->
+      <Card.Root>
+        <Card.Header>
+          <Card.Title>Recent Transactions</Card.Title>
+          <Card.Description>Latest payment activity across all channels</Card.Description>
+        </Card.Header>
+        <Card.Content>
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.Head>Customer</Table.Head>
+                <Table.Head>Amount</Table.Head>
+                <Table.Head>Status</Table.Head>
+                <Table.Head class="text-right">Date</Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {#each transactions as tx (tx.email)}
+                <Table.Row>
+                  <Table.Cell>
+                    <div>
+                      <p class="font-medium">{tx.customer}</p>
+                      <p class="text-sm text-muted-foreground">{tx.email}</p>
+                    </div>
+                  </Table.Cell>
+                  <Table.Cell class="font-medium">{tx.amount}</Table.Cell>
+                  <Table.Cell>
+                    <Badge variant="outline" class={statusColor(tx.status)}>
+                      {tx.status}
+                    </Badge>
+                  </Table.Cell>
+                  <Table.Cell class="text-right text-muted-foreground">{tx.date}</Table.Cell>
+                </Table.Row>
+              {/each}
+            </Table.Body>
+          </Table.Root>
+        </Card.Content>
+      </Card.Root>
+    </div>
+  </Main>
+</AuthenticatedLayout>

package/stubs/themes/corporate/svelte/src/pages/Login.svelte.stub

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { post } from '$lib/api'
+  import { Button } from '$lib/components/ui/button'
+  import { Input } from '$lib/components/ui/input'
+  import { Label } from '$lib/components/ui/label'
+  import { Separator } from '$lib/components/ui/separator'
+
+  interface Props {
+    appName?: string
+    navigate?: (href: string) => void
+  }
+  let { appName = 'Mantiq', navigate = () => {} }: Props = $props()
+
+  let email = $state('')
+  let password = $state('')
+  let error = $state('')
+  let loading = $state(false)
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    error = ''
+    loading = true
+    const { ok, data } = await post('/login', { email, password })
+    if (ok) navigate('/dashboard')
+    else error = data?.error ?? 'Invalid email or password. Please try again.'
+    loading = false
+  }
+</script>
+
+<div class="min-h-screen bg-muted/50 flex items-center justify-center p-4">
+  <div class="w-full max-w-sm">
+    <!-- Logo -->
+    <div class="mb-8 flex flex-col items-center gap-3">
+      <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold shadow-sm">
+        M
+      </div>
+      <span class="text-lg font-semibold tracking-tight">{appName}</span>
+    </div>
+
+    <!-- Card -->
+    <div class="rounded-lg border bg-card shadow-sm p-6">
+      <div class="mb-6">
+        <h1 class="text-xl font-semibold tracking-tight">Sign in</h1>
+        <p class="mt-1 text-sm text-muted-foreground">
+          Enter your credentials to continue
+        </p>
+      </div>
+
+      {#if error}
+        <div class="mb-4 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+          {error}
+        </div>
+      {/if}
+
+      <form onsubmit={handleSubmit} class="space-y-4">
+        <div class="space-y-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            bind:value={email}
+            required
+            placeholder="you@example.com"
+            autocomplete="email"
+          />
+        </div>
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <Label for="password">Password</Label>
+            <button
+              type="button"
+              class="text-xs font-medium text-primary hover:text-primary/80"
+              tabindex="-1"
+            >
+              Forgot password?
+            </button>
+          </div>
+          <Input
+            id="password"
+            type="password"
+            bind:value={password}
+            required
+            placeholder="Enter your password"
+            autocomplete="current-password"
+          />
+        </div>
+        <Button type="submit" class="w-full" disabled={loading}>
+          {loading ? 'Signing in...' : 'Sign in'}
+        </Button>
+      </form>
+
+      <div class="relative my-6">
+        <div class="absolute inset-0 flex items-center">
+          <Separator class="w-full" />
+        </div>
+        <div class="relative flex justify-center text-xs uppercase">
+          <span class="bg-card px-2 text-muted-foreground">or</span>
+        </div>
+      </div>
+
+      <p class="text-center text-sm text-muted-foreground">
+        <button
+          type="button"
+          class="font-medium text-primary hover:text-primary/80"
+          onclick={() => navigate('/register')}
+        >
+          Create an account
+        </button>
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <p class="mt-6 text-center text-xs text-muted-foreground">
+      Powered by {appName}
+    </p>
+  </div>
+</div>