kofi-stack-template-generator 2.1.59 → 2.1.60

package/templates/marketing/nextjs/src/app/features/automation/page.tsx

@@ -0,0 +1,171 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { FinalCTA } from "@/components/blocks"
+import { Zap, GitBranch, Clock, Repeat, Mail, Bell } from "lucide-react"
+
+const features = [
+  {
+    icon: <Zap className="h-6 w-6" />,
+    title: "Visual Workflow Builder",
+    description:
+      "Build powerful automations with our drag-and-drop builder. No coding required.",
+  },
+  {
+    icon: <GitBranch className="h-6 w-6" />,
+    title: "Conditional Logic",
+    description:
+      "Create smart workflows with if/then rules, filters, and branching paths.",
+  },
+  {
+    icon: <Clock className="h-6 w-6" />,
+    title: "Scheduled Triggers",
+    description:
+      "Run automations on a schedule. Daily reports, weekly syncs, monthly reviews.",
+  },
+  {
+    icon: <Repeat className="h-6 w-6" />,
+    title: "Cross-App Actions",
+    description:
+      "Trigger actions across all your connected tools. True end-to-end automation.",
+  },
+  {
+    icon: <Mail className="h-6 w-6" />,
+    title: "Email Automation",
+    description:
+      "Send automated emails based on triggers. Follow-ups, reminders, notifications.",
+  },
+  {
+    icon: <Bell className="h-6 w-6" />,
+    title: "Smart Notifications",
+    description:
+      "Route notifications intelligently. Right message, right person, right time.",
+  },
+]
+
+const useCases = [
+  {
+    title: "Lead Assignment",
+    description: "Automatically assign new leads to sales reps based on territory or round-robin.",
+  },
+  {
+    title: "Approval Workflows",
+    description: "Route documents for approval with multi-step workflows and escalation.",
+  },
+  {
+    title: "Onboarding",
+    description: "Create welcome sequences for new customers or team members automatically.",
+  },
+  {
+    title: "Status Updates",
+    description: "Sync status changes across tools and notify stakeholders automatically.",
+  },
+]
+
+export default function AutomationPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                Automation
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Eliminate busywork with smart automation
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/demo"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors"
+                >
+                  See it in action
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Automation that scales with you
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                From simple triggers to complex workflows, automate anything.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground text-sm">{feature.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Use Cases */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Popular automation recipes
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Get started quickly with pre-built templates for common workflows.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
+              {useCases.map((useCase) => (
+                <div
+                  key={useCase.title}
+                  className="p-6 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors"
+                >
+                  <h3 className="font-semibold mb-2">{useCase.title}</h3>
+                  <p className="text-muted-foreground text-sm">{useCase.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to automate your workflow?"
+          subheading="Start your free trial and build your first automation in minutes."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "View templates", href: "#", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/app/features/dashboard/page.tsx

@@ -0,0 +1,140 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { FinalCTA } from "@/components/blocks"
+import { LayoutDashboard, Layers, Palette, Monitor, Smartphone, Share2 } from "lucide-react"
+
+const features = [
+  {
+    icon: <LayoutDashboard className="h-6 w-6" />,
+    title: "Customizable Layouts",
+    description:
+      "Drag and drop widgets to create the perfect view for your workflow.",
+  },
+  {
+    icon: <Layers className="h-6 w-6" />,
+    title: "Multiple Views",
+    description:
+      "Switch between board, list, timeline, and calendar views instantly.",
+  },
+  {
+    icon: <Palette className="h-6 w-6" />,
+    title: "Personalized Themes",
+    description:
+      "Choose from light, dark, or system themes. Make it yours.",
+  },
+  {
+    icon: <Monitor className="h-6 w-6" />,
+    title: "Desktop App",
+    description:
+      "Native apps for Mac and Windows. Full offline support included.",
+  },
+  {
+    icon: <Smartphone className="h-6 w-6" />,
+    title: "Mobile Ready",
+    description:
+      "Full-featured iOS and Android apps. Stay productive on the go.",
+  },
+  {
+    icon: <Share2 className="h-6 w-6" />,
+    title: "Shareable Dashboards",
+    description:
+      "Share views with stakeholders. Public links or password-protected.",
+  },
+]
+
+export default function DashboardPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                Dashboard
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Your command center for everything
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                A beautiful, customizable dashboard that puts everything you need at your fingertips. Multiple views, drag-and-drop widgets, and full mobile support.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/demo"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors"
+                >
+                  Watch demo
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Dashboard Preview */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-5xl mx-auto">
+              <div className="aspect-video bg-gradient-to-br from-primary/20 to-primary/5 rounded-lg border border-border flex items-center justify-center">
+                <div className="text-center text-muted-foreground">
+                  <LayoutDashboard className="h-16 w-16 mx-auto mb-4 opacity-50" />
+                  <p>Dashboard Preview</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                A dashboard that works for you
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Customize every aspect of your workspace to match how you work best.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground text-sm">{feature.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to build your perfect workspace?"
+          subheading="Start your free trial and customize your dashboard in minutes."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Watch demo", href: "/demo", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/app/features/integrations/page.tsx

@@ -0,0 +1,174 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { LogoBanner, FinalCTA } from "@/components/blocks"
+import { Link2, RefreshCw, Code2, Zap, ArrowRight, Check } from "lucide-react"
+
+const features = [
+  {
+    icon: <Link2 className="h-6 w-6" />,
+    title: "100+ Native Integrations",
+    description:
+      "Connect with the tools your team already uses. From CRMs to project management, we've got you covered.",
+  },
+  {
+    icon: <RefreshCw className="h-6 w-6" />,
+    title: "Two-Way Sync",
+    description:
+      "Changes flow automatically between apps. Update in one place, see it everywhere.",
+  },
+  {
+    icon: <Code2 className="h-6 w-6" />,
+    title: "Developer API",
+    description:
+      "Build custom integrations with our comprehensive REST API and webhooks.",
+  },
+  {
+    icon: <Zap className="h-6 w-6" />,
+    title: "Real-Time Updates",
+    description:
+      "Data syncs instantly, not in batches. Always work with the latest information.",
+  },
+]
+
+const integrationCategories = [
+  {
+    name: "CRM & Sales",
+    tools: ["Salesforce", "HubSpot", "Pipedrive", "Close"],
+  },
+  {
+    name: "Communication",
+    tools: ["Slack", "Microsoft Teams", "Discord", "Email"],
+  },
+  {
+    name: "Project Management",
+    tools: ["Jira", "Asana", "Linear", "Notion"],
+  },
+  {
+    name: "Productivity",
+    tools: ["Google Workspace", "Microsoft 365", "Dropbox", "Box"],
+  },
+]
+
+export default function IntegrationsPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                Integrations
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Connect everything your team uses
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Integrate with 100+ popular tools. Two-way sync keeps everything up to date automatically.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/contact"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors"
+                >
+                  Request integration
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground text-sm">{feature.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Integration Categories */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Integrations for every workflow
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Connect the tools you already use to streamline your work.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+              {integrationCategories.map((category) => (
+                <div key={category.name} className="bg-card rounded-lg border border-border p-6">
+                  <h3 className="font-semibold mb-4">{category.name}</h3>
+                  <ul className="space-y-3">
+                    {category.tools.map((tool) => (
+                      <li key={tool} className="flex items-center text-sm text-muted-foreground">
+                        <Check className="h-4 w-4 text-primary mr-2 shrink-0" />
+                        {tool}
+                      </li>
+                    ))}
+                  </ul>
+                  <a
+                    href="#"
+                    className="inline-flex items-center text-sm text-primary hover:underline mt-4"
+                  >
+                    See all <ArrowRight className="h-4 w-4 ml-1" />
+                  </a>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Logo Banner */}
+        <LogoBanner
+          heading="Integrates with your favorite tools"
+          style="grid"
+          logos={[
+            { name: "Slack", initials: "SL" },
+            { name: "Salesforce", initials: "SF" },
+            { name: "HubSpot", initials: "HS" },
+            { name: "Google Workspace", initials: "GW" },
+            { name: "Zapier", initials: "ZP" },
+            { name: "Jira", initials: "JI" },
+          ]}
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to connect your tools?"
+          subheading="Start your free trial and integrate with your favorite apps in minutes."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "View all integrations", href: "#", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/app/features/security/page.tsx

@@ -0,0 +1,150 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { FinalCTA } from "@/components/blocks"
+import { Shield, Lock, Key, Eye, Server, FileCheck } from "lucide-react"
+
+const features = [
+  {
+    icon: <Shield className="h-6 w-6" />,
+    title: "SOC 2 Type II Certified",
+    description:
+      "We've passed rigorous third-party audits to verify our security controls and practices.",
+  },
+  {
+    icon: <Lock className="h-6 w-6" />,
+    title: "AES-256 Encryption",
+    description:
+      "All data is encrypted at rest and in transit using industry-standard encryption.",
+  },
+  {
+    icon: <Key className="h-6 w-6" />,
+    title: "Single Sign-On (SSO)",
+    description:
+      "Connect with your identity provider. Support for SAML 2.0, OIDC, and OAuth.",
+  },
+  {
+    icon: <Eye className="h-6 w-6" />,
+    title: "Audit Logs",
+    description:
+      "Track every action in your workspace. Full audit trails for compliance and security.",
+  },
+  {
+    icon: <Server className="h-6 w-6" />,
+    title: "99.9% Uptime SLA",
+    description:
+      "We guarantee availability with redundant infrastructure across multiple regions.",
+  },
+  {
+    icon: <FileCheck className="h-6 w-6" />,
+    title: "GDPR Compliant",
+    description:
+      "Full compliance with GDPR, CCPA, and other privacy regulations. Your data, your control.",
+  },
+]
+
+const certifications = [
+  { name: "SOC 2 Type II", description: "Audited security controls" },
+  { name: "GDPR", description: "EU data protection" },
+  { name: "CCPA", description: "California privacy" },
+  { name: "ISO 27001", description: "Information security" },
+]
+
+export default function SecurityPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                Security
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Enterprise-grade security for every team
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Your data is protected by industry-leading security practices. SOC 2 certified, GDPR compliant, and built for enterprise.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/contact"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors"
+                >
+                  Contact security team
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Certifications */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
+              {certifications.map((cert) => (
+                <div
+                  key={cert.name}
+                  className="text-center p-6 rounded-lg border border-border bg-card"
+                >
+                  <div className="font-semibold mb-1">{cert.name}</div>
+                  <div className="text-sm text-muted-foreground">{cert.description}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Security you can trust
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                We take security seriously at every layer of our platform.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground text-sm">{feature.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to secure your workflow?"
+          subheading="Start your free trial with enterprise-grade security from day one."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "View security docs", href: "#", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}