kofi-stack-template-generator 2.1.59 → 2.1.61

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

@@ -0,0 +1,140 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { FinalCTA } from "@/components/blocks"
+import { Workflow, Users, FileText, CheckSquare, Kanban, Calendar } from "lucide-react"
+
+const features = [
+  {
+    icon: <Workflow className="h-6 w-6" />,
+    title: "Custom Workflows",
+    description:
+      "Design workflows that match how your team actually works. Fully customizable stages and transitions.",
+  },
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Team Collaboration",
+    description:
+      "Assign tasks, leave comments, and collaborate in real-time. Everyone stays in sync.",
+  },
+  {
+    icon: <FileText className="h-6 w-6" />,
+    title: "Templates Library",
+    description:
+      "Start fast with pre-built templates for common workflows. Customize as needed.",
+  },
+  {
+    icon: <CheckSquare className="h-6 w-6" />,
+    title: "Task Dependencies",
+    description:
+      "Link tasks together with dependencies. See the critical path at a glance.",
+  },
+  {
+    icon: <Kanban className="h-6 w-6" />,
+    title: "Kanban Boards",
+    description:
+      "Visualize your workflow with drag-and-drop kanban boards. Track progress instantly.",
+  },
+  {
+    icon: <Calendar className="h-6 w-6" />,
+    title: "Timeline View",
+    description:
+      "See your workflow on a timeline. Plan sprints and manage deadlines visually.",
+  },
+]
+
+export default function WorkflowsPage() {
+  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">
+                Workflows
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Build workflows that match how you work
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Design custom workflows with kanban boards, timelines, and task dependencies. Keep your team aligned and projects on track.
+              </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>
+
+        {/* Workflow 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">
+                  <Kanban className="h-16 w-16 mx-auto mb-4 opacity-50" />
+                  <p>Workflow 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">
+                Everything you need to manage work
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Powerful features that adapt to any team or project type.
+              </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 streamline your workflow?"
+          subheading="Start your free trial and build your first workflow in minutes."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Explore templates", href: "#", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/app/use-cases/marketing/page.tsx

@@ -0,0 +1,154 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { TestimonialsGrid, FinalCTA } from "@/components/blocks"
+import { Megaphone, BarChart3, Calendar, Users, Sparkles, Target } from "lucide-react"
+
+const benefits = [
+  {
+    icon: <Megaphone className="h-6 w-6" />,
+    title: "Campaign Management",
+    description:
+      "Plan, execute, and track campaigns across channels. Everything in one place.",
+  },
+  {
+    icon: <BarChart3 className="h-6 w-6" />,
+    title: "Performance Analytics",
+    description:
+      "See what's working with real-time dashboards. ROI tracking for every campaign.",
+  },
+  {
+    icon: <Calendar className="h-6 w-6" />,
+    title: "Content Calendar",
+    description:
+      "Plan your content pipeline visually. Collaborate on drafts and approvals.",
+  },
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Team Collaboration",
+    description:
+      "Creative briefs, feedback, and approvals in one workflow. No more email chains.",
+  },
+  {
+    icon: <Sparkles className="h-6 w-6" />,
+    title: "AI-Powered Insights",
+    description:
+      "Get recommendations for improving campaign performance based on your data.",
+  },
+  {
+    icon: <Target className="h-6 w-6" />,
+    title: "Audience Segmentation",
+    description:
+      "Build and manage audience segments. Personalize at scale.",
+  },
+]
+
+const stats = [
+  { value: "40%", label: "More campaigns shipped" },
+  { value: "2.5x", label: "Faster time to launch" },
+  { value: "25%", label: "Better campaign ROI" },
+]
+
+export default function MarketingPage() {
+  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">
+                For Marketing Teams
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Launch campaigns that drive results
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Plan, execute, and measure marketing campaigns with a platform built for modern marketing teams.
+              </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>
+
+        {/* Stats */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-3xl md:text-4xl font-bold text-primary mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Benefits 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">
+                Built for modern marketing
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Everything you need to plan, execute, and measure your marketing efforts.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {benefits.map((benefit) => (
+                <div
+                  key={benefit.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">
+                    {benefit.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
+                  <p className="text-muted-foreground text-sm">{benefit.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Testimonials */}
+        <TestimonialsGrid
+          heading="Trusted by marketing teams everywhere"
+          subheading="See how teams like yours are driving results with SaaSify."
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to level up your marketing?"
+          subheading="Start your free trial and see why top marketing teams choose SaaSify."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Talk to us", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/app/use-cases/operations/page.tsx

@@ -0,0 +1,154 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { TestimonialsGrid, FinalCTA } from "@/components/blocks"
+import { Settings, Workflow, Clock, Shield, BarChart3, Users } from "lucide-react"
+
+const benefits = [
+  {
+    icon: <Workflow className="h-6 w-6" />,
+    title: "Process Automation",
+    description:
+      "Automate repetitive tasks and approvals. Free your team to focus on strategic work.",
+  },
+  {
+    icon: <Settings className="h-6 w-6" />,
+    title: "Resource Management",
+    description:
+      "Track and allocate resources across projects. Optimize utilization and reduce waste.",
+  },
+  {
+    icon: <Clock className="h-6 w-6" />,
+    title: "Time Tracking",
+    description:
+      "Track time across projects and clients. Automated timesheets and billing integration.",
+  },
+  {
+    icon: <Shield className="h-6 w-6" />,
+    title: "Compliance Management",
+    description:
+      "Track compliance requirements and deadlines. Audit trails for everything.",
+  },
+  {
+    icon: <BarChart3 className="h-6 w-6" />,
+    title: "Operational Analytics",
+    description:
+      "Real-time dashboards for operational metrics. Identify bottlenecks and optimize.",
+  },
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Vendor Management",
+    description:
+      "Track vendors, contracts, and renewals. Never miss a deadline.",
+  },
+]
+
+const stats = [
+  { value: "50%", label: "Less manual work" },
+  { value: "35%", label: "Cost reduction" },
+  { value: "99%", label: "Compliance rate" },
+]
+
+export default function OperationsPage() {
+  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">
+                For Operations Teams
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Run operations like a well-oiled machine
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Automate processes, manage resources, and ensure compliance. The operations platform that scales with you.
+              </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>
+
+        {/* Stats */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-3xl md:text-4xl font-bold text-primary mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Benefits 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">
+                Built for operational excellence
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Everything you need to run efficient, compliant operations.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {benefits.map((benefit) => (
+                <div
+                  key={benefit.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">
+                    {benefit.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
+                  <p className="text-muted-foreground text-sm">{benefit.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Testimonials */}
+        <TestimonialsGrid
+          heading="Trusted by operations teams everywhere"
+          subheading="See how teams like yours are optimizing operations with SaaSify."
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to optimize your operations?"
+          subheading="Start your free trial and see why top operations teams choose SaaSify."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Talk to us", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/app/use-cases/product/page.tsx

@@ -0,0 +1,154 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { TestimonialsGrid, FinalCTA } from "@/components/blocks"
+import { Lightbulb, GitBranch, MessageSquare, BarChart3, Users, Rocket } from "lucide-react"
+
+const benefits = [
+  {
+    icon: <Lightbulb className="h-6 w-6" />,
+    title: "Idea Management",
+    description:
+      "Capture and prioritize ideas from your team and customers. Never lose a great idea.",
+  },
+  {
+    icon: <GitBranch className="h-6 w-6" />,
+    title: "Roadmap Planning",
+    description:
+      "Build visual roadmaps that keep stakeholders aligned. Easy drag-and-drop planning.",
+  },
+  {
+    icon: <MessageSquare className="h-6 w-6" />,
+    title: "User Feedback",
+    description:
+      "Collect and organize user feedback. Close the loop with customers automatically.",
+  },
+  {
+    icon: <BarChart3 className="h-6 w-6" />,
+    title: "Product Analytics",
+    description:
+      "Track feature adoption and usage patterns. Make data-driven product decisions.",
+  },
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Cross-Team Collaboration",
+    description:
+      "Connect product, engineering, and design. Everyone works from the same source of truth.",
+  },
+  {
+    icon: <Rocket className="h-6 w-6" />,
+    title: "Release Management",
+    description:
+      "Plan releases, coordinate launches, and communicate changes across the organization.",
+  },
+]
+
+const stats = [
+  { value: "45%", label: "Faster time to market" },
+  { value: "3x", label: "More features shipped" },
+  { value: "60%", label: "Better stakeholder alignment" },
+]
+
+export default function ProductPage() {
+  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">
+                For Product Teams
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Ship better products, faster
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                From idea to launch, manage your entire product lifecycle. Roadmaps, feedback, and collaboration in one platform.
+              </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>
+
+        {/* Stats */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-3xl md:text-4xl font-bold text-primary mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Benefits 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">
+                Built for product-led teams
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Everything you need to build products users love.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {benefits.map((benefit) => (
+                <div
+                  key={benefit.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">
+                    {benefit.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
+                  <p className="text-muted-foreground text-sm">{benefit.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Testimonials */}
+        <TestimonialsGrid
+          heading="Trusted by product teams everywhere"
+          subheading="See how teams like yours are shipping better products with SaaSify."
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to build better products?"
+          subheading="Start your free trial and see why top product teams choose SaaSify."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Talk to us", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}