From 04a97dc90c9fcf2c8201e1af6b5a856f74e135ce Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:08:23 +0000
Subject: [PATCH] Seed: saas template (34 files)

---
 src/pages/Features.tsx | 146 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 src/pages/Features.tsx

diff --git a/src/pages/Features.tsx b/src/pages/Features.tsx
new file mode 100644
index 0000000..365f602
--- /dev/null
+++ b/src/pages/Features.tsx
@@ -0,0 +1,146 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  ArrowRight, CheckCircle2, Zap, Shield, BarChart3, Users,
+  Layers, Globe, Workflow, BrainCircuit, GitBranch, Blocks
+} from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const featureSections = [
+  {
+    badge: "Automation",
+    title: "Intelligent Automation That Learns",
+    desc: "Our AI engine observes how your team works and continuously optimizes task routing, resource allocation, and sprint planning.",
+    bullets: [
+      "AI-powered task assignment based on team capacity and expertise",
+      "Automated status updates and progress tracking",
+      "Smart deadline predictions using historical sprint data",
+    ],
+    icon: BrainCircuit,
+    gradient: "from-indigo-500 to-purple-600",
+  },
+  {
+    badge: "Collaboration",
+    title: "Collaboration Without Boundaries",
+    desc: "Break down silos with real-time collaboration tools that keep remote, hybrid, and in-office teams perfectly in sync.",
+    bullets: [
+      "Real-time document editing with inline comments",
+      "Video huddles and screen sharing built right in",
+      "Cross-team visibility with shared project boards",
+    ],
+    icon: Users,
+    gradient: "from-cyan-500 to-blue-600",
+  },
+  {
+    badge: "Analytics",
+    title: "Analytics That Drive Decisions",
+    desc: "Go beyond vanity metrics. Get actionable insights with AI-powered predictions and automated reporting.",
+    bullets: [
+      "Customizable dashboards with drag-and-drop widgets",
+      "Predictive burn-down charts and velocity tracking",
+      "Automated weekly reports delivered to your inbox",
+    ],
+    icon: BarChart3,
+    gradient: "from-emerald-500 to-teal-600",
+  },
+];
+
+const integrations = [
+  "Slack", "GitHub", "Figma", "Jira", "Google Drive",
+  "Notion", "Zoom", "Linear", "Salesforce", "HubSpot", "Stripe", "Zapier",
+];
+
+const stats = [
+  { value: "10M+", label: "Tasks completed" },
+  { value: "200+", label: "Integrations" },
+  { value: "150+", label: "Countries" },
+  { value: "60%", label: "Faster delivery" },
+];
+
+export default function FeaturesPage() {
+  return (
+    <div className="min-h-screen bg-white text-slate-900 antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="pt-32 pb-16 bg-gradient-to-b from-slate-950 via-indigo-950 to-slate-900">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <Badge className="mb-4 bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">Platform</Badge>
+          <h1 className="animate-fade-up text-4xl font-bold tracking-tight text-white sm:text-5xl">Platform Features</h1>
+          <p className="mt-4 text-lg text-slate-400 max-w-2xl mx-auto">
+            Discover every tool your team needs to plan, build, and ship world-class products.
+          </p>
+        </div>
+      </section>
+
+      {/* ── FEATURE SECTIONS (Alternating) ── */}
+      {featureSections.map((section, i) => (
+        <section key={section.title} className={`py-24 \${i % 2 === 1 ? "bg-slate-50" : "bg-white"}`}>
+          <div className="mx-auto max-w-7xl px-6">
+            <div className="grid lg:grid-cols-2 gap-16 items-center">
+              <div className={i % 2 === 1 ? "lg:order-2" : ""}>
+                <Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">{section.badge}</Badge>
+                <h2 className="animate-fade-up text-3xl font-bold tracking-tight">{section.title}</h2>
+                <p className="mt-4 text-lg text-slate-500 leading-relaxed">{section.desc}</p>
+                <ul className="mt-8 space-y-4">
+                  {section.bullets.map((b) => (
+                    <li key={b} className="flex items-start gap-3">
+                      <CheckCircle2 className="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" />
+                      <span className="text-slate-600">{b}</span>
+                    </li>
+                  ))}
+                </ul>
+                <Button asChild className="active:scale-[0.98] mt-8 rounded-full bg-indigo-600 hover:bg-indigo-500">
+                  <Link to="/pricing">Learn More <ArrowRight className="ml-2 h-4 w-4" /></Link>
+                </Button>
+              </div>
+              <div className={i % 2 === 1 ? "lg:order-1" : ""}>
+                <div className={`animate-scale-in aspect-[4/3] rounded-2xl bg-gradient-to-br \${section.gradient} flex items-center justify-center shadow-2xl shadow-indigo-500/10 relative overflow-hidden`}>
+                  <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-60" />
+                  <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-white/10 blur-3xl" />
+                  <div className="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-white/10 blur-3xl" />
+                  <section.icon className="relative h-24 w-24 text-white/30" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      ))}
+
+      {/* ── INTEGRATIONS ── */}
+      <section className="py-24 bg-white">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <Badge className="mb-4 bg-cyan-50 text-cyan-600 border-0">Integrations</Badge>
+          <h2 className="animate-fade-up text-3xl font-bold tracking-tight sm:text-4xl">Works with your favorite tools</h2>
+          <p className="mt-4 text-slate-500 max-w-2xl mx-auto">Connect Nexus to the tools you already use. 200+ integrations and growing.</p>
+          <div className="mt-12 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 max-w-4xl mx-auto stagger">
+            {integrations.map((name) => (
+              <div key={name} className="flex items-center justify-center h-20 rounded-xl border border-slate-200 hover:border-indigo-200 hover:shadow-md hover:scale-110 transition-all duration-300 bg-white">
+                <span className="text-sm font-medium text-slate-600">{name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── STATS ── */}
+      <section className="py-20 bg-gradient-to-br from-indigo-600 to-slate-900">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+            {stats.map((s) => (
+              <div key={s.label}>
+                <div className="text-4xl font-bold text-white">{s.value}</div>
+                <div className="mt-2 text-sm text-indigo-200">{s.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}