@digilogiclabs/create-saas-app 2.9.1 → 2.11.0

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

@@ -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>
+  )
+}