npm - @digilogiclabs/create-saas-app - Versions diffs - 2.9.1 → 2.10.0 - Mend

@digilogiclabs/create-saas-app 2.9.1 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (323) hide show

package/dist/templates/web/iot-dashboard/template/src/app/globals.css CHANGED Viewed

@@ -1,20 +1,97 @@
-@import "tailwindcss";
-@theme {
-  --color-primary: oklch(55% 0.18 160);
-  --color-background: oklch(98% 0.01 256);
-  --color-foreground: oklch(15% 0.02 256);
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --radius: 0.5rem;
-}
-.dark {
-  --color-background: oklch(15% 0.02 256);
-  --color-foreground: oklch(95% 0 0);
-}
-body {
-  font-family: var(--font-sans);
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-}
+@import "tailwindcss";
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-brand-from: hsl(var(--brand-from));
+  --color-brand-via: hsl(var(--brand-via));
+  --color-brand-to: hsl(var(--brand-to));
+}
+:root {
+  --brand-from: 160 84% 39%;
+  --brand-via: 158 64% 52%;
+  --brand-to: 155 47% 59%;
+  --background: 210 20% 98%;
+  --foreground: 215 25% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 215 25% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 215 25% 10%;
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 215 25% 10%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 215 25% 10%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 160 84% 39%;
+}
+.dark {
+  --brand-from: 160 84% 39%;
+  --brand-via: 158 64% 52%;
+  --brand-to: 155 47% 59%;
+  --background: 215 28% 7%;
+  --foreground: 210 40% 98%;
+  --card: 215 28% 7%;
+  --card-foreground: 210 40% 98%;
+  --popover: 215 28% 7%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 215 25% 15%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 215 25% 15%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 215 25% 15%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 215 25% 15%;
+  --input: 215 25% 15%;
+  --ring: 160 84% 39%;
+}
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    font-family: var(--font-sans);
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

package/dist/templates/web/iot-dashboard/template/src/app/layout.tsx CHANGED Viewed

@@ -19,6 +19,9 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <AppProviders>
+          <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
+            Skip to content
+          </a>
           {children}
         </AppProviders>
       </body>

package/dist/templates/web/iot-dashboard/template/src/app/loading.tsx CHANGED Viewed

@@ -2,9 +2,9 @@ import { Card, SkeletonText } from '@digilogiclabs/saas-factory-ui'
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+    <div className="min-h-screen bg-background">
       {/* Header skeleton */}
-      <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 py-4">
+      <div className="bg-card border-b border-border px-4 py-4">
         <div className="max-w-7xl mx-auto flex items-center justify-between">
           <div className="flex items-center gap-2">
             <SkeletonText className="h-8 w-8 rounded-lg" />
@@ -66,10 +66,10 @@ export default function Loading() {
         <div className="flex justify-center">
           <div className="flex items-center gap-3">
             <div className="relative">
-              <div className="w-8 h-8 border-4 border-slate-200 dark:border-slate-700 rounded-full"></div>
-              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-emerald-600 border-t-transparent rounded-full animate-spin"></div>
+              <div className="w-8 h-8 border-4 border-border rounded-full"></div>
+              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
             </div>
-            <p className="text-sm text-slate-600 dark:text-slate-300">Loading IoT dashboard...</p>
+            <p className="text-sm text-muted-foreground">Loading IoT dashboard...</p>
           </div>
         </div>
       </div>

package/dist/templates/web/iot-dashboard/template/src/app/page.tsx CHANGED Viewed

@@ -1,189 +1,266 @@
-'use client'
-import { Button, Card, PulseIndicator } from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { Cpu, Activity, Signal, Bell, Settings, ArrowRight, User, LogOut, Wifi, ThermometerSun, Gauge, Shield } from 'lucide-react'
-import Link from 'next/link'
-const FEATURES = [
-  {
-    icon: Cpu,
-    title: 'Device Management',
-    description: 'Monitor and control all your IoT devices from one dashboard',
-  },
-  {
-    icon: Activity,
-    title: 'Real-time Telemetry',
-    description: 'Live data streams with historical analysis and trends',
-  },
-  {
-    icon: Bell,
-    title: 'Smart Alerts',
-    description: 'Configurable alerts and notifications for critical events',
-  },
-  {
-    icon: Shield,
-    title: 'Secure & Scalable',
-    description: 'Enterprise-grade security for your connected devices',
-  },
-]
-const DEVICE_TYPES = [
-  { name: 'Temperature Sensors', count: 24, icon: ThermometerSun, status: 'online' },
-  { name: 'Pressure Gauges', count: 12, icon: Gauge, status: 'online' },
-  { name: 'Network Gateways', count: 8, icon: Wifi, status: 'online' },
-  { name: 'Motion Sensors', count: 18, icon: Signal, status: 'partial' },
-]
-export default function Home() {
-  const { user, signOut, loading } = useAuth()
-  const projectName = "{{titleCaseName}}"
-  const handleSignOut = async () => {
-    try {
-      await signOut()
-    } catch (err) {
-      console.error('Sign out error:', err)
-    }
-  }
-  return (
-    <main className="min-h-screen bg-slate-50 dark:bg-slate-900">
-      {/* Header */}
-      <header className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            <Link href="/" className="flex items-center gap-2">
-              <div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center">
-                <Cpu className="w-5 h-5 text-white" />
-              </div>
-              <span className="text-2xl font-bold text-slate-900 dark:text-white">{projectName}</span>
-            </Link>
-            <nav className="hidden md:flex items-center gap-6">
-              <Link href="/devices" className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition">
-                Devices
-              </Link>
-              <Link href="/analytics" className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition">
-                Analytics
-              </Link>
-              <Link href="/alerts" className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition">
-                Alerts
-              </Link>
-            </nav>
-            <div className="flex items-center gap-4">
-              {loading ? (
-                <div className="text-sm text-slate-600">Loading...</div>
-              ) : user ? (
-                <div className="flex items-center gap-2">
-                  <Link href="/dashboard">
-                    <Button variant="outline" size="sm">
-                      <User className="w-4 h-4 mr-2" />
-                      Dashboard
-                    </Button>
-                  </Link>
-                  <Button variant="ghost" size="sm" onClick={handleSignOut}>
-                    <LogOut className="w-4 h-4" />
-                  </Button>
-                </div>
-              ) : (
-                <div className="flex gap-2">
-                  <Link href="/login">
-                    <Button variant="outline" size="sm">Sign In</Button>
-                  </Link>
-                  <Link href="/signup">
-                    <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700">Get Started</Button>
-                  </Link>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </header>
-      <div className="max-w-7xl mx-auto px-4 py-16">
-        {/* Hero */}
-        <div className="text-center mb-16">
-          <div className="inline-flex items-center px-4 py-2 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-sm mb-6">
-            <Signal className="w-4 h-4 mr-2" />
-            IoT Management Platform
-          </div>
-          <h1 className="text-5xl font-bold text-slate-900 dark:text-white mb-6">
-            Monitor Your <span className="text-emerald-600">Connected Devices</span>
-          </h1>
-          <p className="text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto mb-8">
-            Real-time monitoring, analytics, and control for your IoT infrastructure.
-            Built for scale, designed for simplicity.
-          </p>
-          <div className="flex gap-4 justify-center">
-            <Link href="/dashboard">
-              <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700">
-                <Activity className="w-5 h-5 mr-2" />
-                View Dashboard
-              </Button>
-            </Link>
-            <Link href="/devices">
-              <Button size="lg" variant="outline">
-                Manage Devices
-              </Button>
-            </Link>
-          </div>
-        </div>
-        {/* Device Overview */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-16">
-          {DEVICE_TYPES.map((device) => (
-            <Card key={device.name} className="p-6">
-              <div className="flex items-center justify-between mb-3">
-                <div className="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
-                  <device.icon className="w-5 h-5 text-emerald-600" />
-                </div>
-                <PulseIndicator
-                  status={device.status === 'online' ? 'success' : 'loading'}
-                  label={device.status === 'online' ? 'All Online' : 'Partial'}
-                  size="sm"
-                />
-              </div>
-              <h3 className="font-semibold text-slate-900 dark:text-white">{device.name}</h3>
-              <p className="text-2xl font-bold text-emerald-600">{device.count}</p>
-            </Card>
-          ))}
-        </div>
-        {/* Features */}
-        <div className="mb-16">
-          <h2 className="text-3xl font-bold text-slate-900 dark:text-white text-center mb-12">
-            Everything You Need
-          </h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {FEATURES.map((feature) => (
-              <Card key={feature.title} className="p-6 text-center">
-                <div className="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
-                  <feature.icon className="w-6 h-6 text-emerald-600" />
-                </div>
-                <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">{feature.title}</h3>
-                <p className="text-slate-600 dark:text-slate-400 text-sm">{feature.description}</p>
-              </Card>
-            ))}
-          </div>
-        </div>
-        {/* CTA */}
-        <Card className="p-12 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-center">
-          <h2 className="text-3xl font-bold mb-4">Ready to Connect?</h2>
-          <p className="text-white/80 mb-8 max-w-md mx-auto">
-            Start monitoring your IoT devices in minutes. Free tier available for up to 10 devices.
-          </p>
-          <Link href="/signup">
-            <Button size="lg" variant="secondary">
-              Get Started Free
-              <ArrowRight className="w-5 h-5 ml-2" />
-            </Button>
-          </Link>
-        </Card>
-      </div>
-    </main>
-  )
-}
+'use client'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { Cpu, Activity, Signal, Bell, Shield, ArrowRight, Wifi, ThermometerSun, Gauge, Sun, Moon, Radio } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+const DEVICE_TYPES = [
+  {
+    name: 'Temperature Sensors',
+    count: 24,
+    icon: ThermometerSun,
+    status: 'online' as const,
+    color: 'text-emerald-500',
+    bg: 'bg-emerald-500/10',
+  },
+  {
+    name: 'Pressure Gauges',
+    count: 12,
+    icon: Gauge,
+    status: 'online' as const,
+    color: 'text-cyan-500',
+    bg: 'bg-cyan-500/10',
+  },
+  {
+    name: 'Network Gateways',
+    count: 8,
+    icon: Wifi,
+    status: 'online' as const,
+    color: 'text-violet-500',
+    bg: 'bg-violet-500/10',
+  },
+  {
+    name: 'Motion Sensors',
+    count: 18,
+    icon: Radio,
+    status: 'partial' as const,
+    color: 'text-amber-500',
+    bg: 'bg-amber-500/10',
+  },
+]
+const FEATURES = [
+  {
+    icon: Cpu,
+    title: 'Device Management',
+    description: 'Register, provision, and manage your entire device fleet from a single pane of glass.',
+    color: 'text-emerald-500 group-hover:text-emerald-400',
+    bg: 'bg-emerald-500/10 group-hover:bg-emerald-500/20',
+    border: 'group-hover:border-emerald-500/30',
+  },
+  {
+    icon: Activity,
+    title: 'Real-time Telemetry',
+    description: 'Live data streams with historical analysis, trend detection, and customizable dashboards.',
+    color: 'text-cyan-500 group-hover:text-cyan-400',
+    bg: 'bg-cyan-500/10 group-hover:bg-cyan-500/20',
+    border: 'group-hover:border-cyan-500/30',
+  },
+  {
+    icon: Bell,
+    title: 'Smart Alerts',
+    description: 'Configurable thresholds and anomaly detection with multi-channel notifications.',
+    color: 'text-amber-500 group-hover:text-amber-400',
+    bg: 'bg-amber-500/10 group-hover:bg-amber-500/20',
+    border: 'group-hover:border-amber-500/30',
+  },
+  {
+    icon: Shield,
+    title: 'Secure & Scalable',
+    description: 'End-to-end encryption, device authentication, and infrastructure that scales with your fleet.',
+    color: 'text-violet-500 group-hover:text-violet-400',
+    bg: 'bg-violet-500/10 group-hover:bg-violet-500/20',
+    border: 'group-hover:border-violet-500/30',
+  },
+]
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return <div className="w-9 h-9" />
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="inline-flex items-center justify-center w-9 h-9 rounded-md border border-border bg-background hover:bg-accent hover:text-accent-foreground active:scale-95 transition-all duration-200 cursor-pointer"
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+    </button>
+  )
+}
+export default function Home() {
+  return (
+    <main id="main-content" className="min-h-screen bg-background text-foreground">
+      {/* Nav */}
+      <nav className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-lg">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2 hover:opacity-80 active:scale-[0.97] transition-all duration-200">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+              <Cpu className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-lg">{`{{titleCaseName}}`}</span>
+          </Link>
+          <div className="hidden md:flex items-center gap-6">
+            <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+              Devices
+            </Link>
+            <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+              Analytics
+            </Link>
+            <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+              Alerts
+            </Link>
+          </div>
+          <div className="flex items-center gap-2">
+            <ThemeToggle />
+            <Link href="/login">
+              <Button variant="ghost" size="sm" className="hover:bg-accent active:scale-95 transition-all duration-200 cursor-pointer">Sign In</Button>
+            </Link>
+            <Link href="/signup">
+              <Button size="sm" className="hover:brightness-110 active:scale-95 transition-all duration-200 cursor-pointer shadow-sm hover:shadow-md">Get Started</Button>
+            </Link>
+          </div>
+        </div>
+      </nav>
+      {/* Hero */}
+      <section className="relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent" />
+        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 pt-16 sm:pt-24 pb-16 text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-border bg-muted text-muted-foreground text-sm font-medium mb-8 hover:bg-accent hover:border-primary/20 transition-colors duration-200 cursor-default">
+            <Signal className="w-3.5 h-3.5 text-primary" />
+            IoT Management Platform
+          </div>
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
+            Monitor Your
+            <br />
+            <span className="text-primary">Connected Devices</span>
+          </h1>
+          <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed">
+            Real-time monitoring, analytics, and control for your IoT infrastructure.
+            Built for scale, designed for simplicity.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/dashboard">
+              <Button size="lg" className="w-full sm:w-auto text-base px-8 h-12 hover:brightness-110 active:scale-[0.97] transition-all duration-200 cursor-pointer shadow-md hover:shadow-lg">
+                <Activity className="w-4 h-4 mr-2" />
+                View Dashboard
+              </Button>
+            </Link>
+            <Link href="/dashboard">
+              <Button variant="outline" size="lg" className="w-full sm:w-auto text-base px-8 h-12 hover:bg-accent hover:border-primary/30 active:scale-[0.97] transition-all duration-200 cursor-pointer">
+                Manage Devices
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+      {/* Device Overview */}
+      <section className="max-w-6xl mx-auto px-4 sm:px-6 pb-16 sm:pb-24">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          {DEVICE_TYPES.map((device) => (
+            <Card key={device.name} className="group cursor-default hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
+              <CardContent className="p-5 sm:p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <div className={`w-10 h-10 ${device.bg} rounded-xl flex items-center justify-center transition-colors duration-300`}>
+                    <device.icon className={`w-5 h-5 ${device.color} transition-colors duration-300`} />
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className={`w-2 h-2 rounded-full ${device.status === 'online' ? 'bg-emerald-500' : 'bg-amber-500'}`} />
+                    <span className="text-xs text-muted-foreground">
+                      {device.status === 'online' ? 'All Online' : 'Partial'}
+                    </span>
+                  </div>
+                </div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">{device.name}</h3>
+                <p className="text-3xl font-bold text-primary">{device.count}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+      {/* Features */}
+      <section className="bg-muted/50">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
+          <div className="text-center mb-12 sm:mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Everything You Need</h2>
+            <p className="text-muted-foreground text-lg max-w-xl mx-auto">
+              A complete toolkit for managing your connected device infrastructure.
+            </p>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {FEATURES.map((feature) => (
+              <Card key={feature.title} className={`group cursor-default hover:shadow-xl hover:-translate-y-1 ${feature.border} transition-all duration-300`}>
+                <CardContent className="p-6 sm:p-8">
+                  <div className={`w-12 h-12 ${feature.bg} rounded-xl flex items-center justify-center mb-5 transition-colors duration-300`}>
+                    <feature.icon className={`w-6 h-6 ${feature.color} transition-colors duration-300`} />
+                  </div>
+                  <h3 className="text-lg font-semibold mb-3 group-hover:text-primary transition-colors duration-200">{feature.title}</h3>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {feature.description}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+      {/* CTA */}
+      <section className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
+        <div className="overflow-hidden rounded-2xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to text-white p-8 sm:p-12 text-center hover:shadow-2xl hover:shadow-primary/20 transition-shadow duration-500">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to Connect?</h2>
+          <p className="text-white/80 text-lg mb-8 max-w-lg mx-auto">
+            Start monitoring your IoT devices in minutes. Free tier available for up to 10 devices.
+          </p>
+          <Link href="/signup">
+            <Button variant="secondary" size="lg" className="px-8 h-12 text-base font-semibold hover:brightness-110 active:scale-[0.97] transition-all duration-200 cursor-pointer shadow-lg hover:shadow-xl">
+              Get Started Free
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </Button>
+          </Link>
+          <p className="text-white/60 text-sm mt-4">No credit card required</p>
+        </div>
+      </section>
+      {/* Footer */}
+      <footer className="border-t border-border">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
+            <Link href="/" className="flex items-center gap-2 hover:opacity-80 active:scale-[0.97] transition-all duration-200">
+              <div className="w-6 h-6 rounded bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+                <Cpu className="w-3 h-3 text-white" />
+              </div>
+              <span className="text-sm font-medium">{`{{titleCaseName}}`}</span>
+            </Link>
+            <nav className="flex items-center gap-6">
+              <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Devices
+              </Link>
+              <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Analytics
+              </Link>
+              <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Alerts
+              </Link>
+              <Link href="/login" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Sign In
+              </Link>
+            </nav>
+          </div>
+          <div className="mt-6 pt-6 border-t border-border text-center">
+            <p className="text-xs text-muted-foreground">
+              Built with DLL Platform. Ship fast, own everything.
+            </p>
+          </div>
+        </div>
+      </footer>
+    </main>
+  )
+}