kofi-stack-template-generator 2.1.59 → 2.1.61

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

@@ -0,0 +1,154 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { TestimonialsGrid, FinalCTA } from "@/components/blocks"
+import { Target, TrendingUp, Users, Zap, BarChart3, Clock } from "lucide-react"
+
+const benefits = [
+  {
+    icon: <Target className="h-6 w-6" />,
+    title: "Close More Deals",
+    description:
+      "Track every opportunity from first contact to close. Never let a deal slip through the cracks.",
+  },
+  {
+    icon: <TrendingUp className="h-6 w-6" />,
+    title: "Forecast Accurately",
+    description:
+      "AI-powered forecasting gives you confidence in your pipeline. Know what's coming.",
+  },
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Align Your Team",
+    description:
+      "Keep everyone on the same page with shared visibility into accounts and deals.",
+  },
+  {
+    icon: <Zap className="h-6 w-6" />,
+    title: "Automate Follow-ups",
+    description:
+      "Never forget a follow-up. Automated reminders and sequences keep deals moving.",
+  },
+  {
+    icon: <BarChart3 className="h-6 w-6" />,
+    title: "Track Performance",
+    description:
+      "Real-time dashboards show rep performance, pipeline health, and revenue metrics.",
+  },
+  {
+    icon: <Clock className="h-6 w-6" />,
+    title: "Save Hours Weekly",
+    description:
+      "Reduce data entry with automatic logging. Spend more time selling.",
+  },
+]
+
+const stats = [
+  { value: "32%", label: "Faster deal cycles" },
+  { value: "28%", label: "Higher win rates" },
+  { value: "5hrs", label: "Saved per week" },
+]
+
+export default function SalesPage() {
+  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 Sales Teams
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Close more deals, faster
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Give your sales team the tools they need to hit quota. Track deals, automate follow-ups, and forecast with confidence.
+              </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 sales teams
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Everything you need to manage your pipeline and close more deals.
+              </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 sales teams everywhere"
+          subheading="See how teams like yours are crushing their quotas with SaaSify."
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to accelerate your sales?"
+          subheading="Start your free trial and see why top sales teams choose SaaSify."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Talk to sales", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/components/Header/index.tsx

@@ -3,13 +3,61 @@
 import Link from "next/link"
 import { Logo } from "@/components/Logo"
 import { MobileMenu } from "./MobileMenu"
+import { MegaMenu } from "./MegaMenu"
 import { cn } from "@/lib/utils"
 
-// Navigation for landing page
+// Features mega menu configuration
+const featuresMenu = {
+  label: "Features",
+  columns: [
+    {
+      title: "Platform",
+      items: [
+        { label: "Dashboard", description: "Your command center", href: "/features/dashboard", icon: "layout" },
+        { label: "Analytics", description: "Real-time insights", href: "/features/analytics", icon: "barChart" },
+        { label: "Integrations", description: "Connect your tools", href: "/features/integrations", icon: "layers" },
+      ],
+    },
+    {
+      title: "Capabilities",
+      items: [
+        { label: "Automation", description: "Eliminate busywork", href: "/features/automation", icon: "zap" },
+        { label: "Workflows", description: "Custom processes", href: "/features/workflows", icon: "settings" },
+        { label: "Security", description: "Enterprise-grade", href: "/features/security", icon: "shield" },
+      ],
+    },
+  ],
+}
+
+// Solutions mega menu configuration
+const solutionsMenu = {
+  label: "Solutions",
+  columns: [
+    {
+      title: "By Team",
+      items: [
+        { label: "Sales Teams", description: "Close more deals", href: "/use-cases/sales", icon: "target" },
+        { label: "Marketing Teams", description: "Launch campaigns", href: "/use-cases/marketing", icon: "rocket" },
+        { label: "Product Teams", description: "Ship faster", href: "/use-cases/product", icon: "layers" },
+        { label: "Operations", description: "Run efficiently", href: "/use-cases/operations", icon: "settings" },
+      ],
+    },
+  ],
+}
+
+// Simple navigation links
 const navLinks = [
+  { label: "Pricing", href: "/pricing" },
+  { label: "Blog", href: "/blog" },
+  { label: "About", href: "/about" },
+]
+
+// For mobile menu - flat list of all links
+const mobileNavLinks = [
   { label: "Features", href: "/features" },
   { label: "Pricing", href: "/pricing" },
   { label: "Blog", href: "/blog" },
+  { label: "About", href: "/about" },
 ]
 
 const ctaLinks = [
@@ -30,6 +78,8 @@ export function Header() {
 
           {/* Desktop navigation */}
           <nav className="hidden lg:flex items-center gap-1">
+            <MegaMenu menu={featuresMenu} />
+            <MegaMenu menu={solutionsMenu} />
             {navLinks.map((link) => (
               <Link
                 key={link.href}
@@ -71,7 +121,7 @@ export function Header() {
           </Link>
 
           <MobileMenu
-            navLinks={navLinks}
+            navLinks={mobileNavLinks}
             ctaLinks={ctaLinks}
           />
         </div>

package/templates/marketing/nextjs/src/components/blocks/FAQAccordion.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface FAQItem {
+  question: string
+  answer: string
+}
+
+interface FAQAccordionProps {
+  heading?: string
+  subheading?: string
+  items?: FAQItem[]
+}
+
+const defaultFAQs: FAQItem[] = [
+  {
+    question: "How does the free trial work?",
+    answer:
+      "Our 14-day free trial gives you full access to all features with no credit card required. At the end of your trial, you can choose the plan that best fits your needs.",
+  },
+  {
+    question: "Can I change plans at any time?",
+    answer:
+      "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any billing differences.",
+  },
+  {
+    question: "What payment methods do you accept?",
+    answer:
+      "We accept all major credit cards (Visa, Mastercard, American Express) as well as PayPal. For Enterprise plans, we also offer invoicing.",
+  },
+  {
+    question: "Is my data secure?",
+    answer:
+      "Absolutely. We use industry-standard encryption (AES-256) for all data at rest and in transit. We're SOC 2 Type II certified and GDPR compliant.",
+  },
+  {
+    question: "Do you offer discounts for nonprofits or educational institutions?",
+    answer:
+      "Yes! We offer 50% off for qualified nonprofits and educational institutions. Contact our sales team to learn more about our discount programs.",
+  },
+  {
+    question: "What kind of support do you offer?",
+    answer:
+      "All plans include email support with 24-hour response time. Professional plans get priority support, and Enterprise plans include a dedicated success manager.",
+  },
+]
+
+export function FAQAccordion({
+  heading = "Frequently asked questions",
+  subheading = "Everything you need to know about SaaSify",
+  items = defaultFAQs,
+}: FAQAccordionProps) {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <div className="text-center mb-12 md:mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+            {heading}
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            {subheading}
+          </p>
+        </div>
+
+        {/* Accordion */}
+        <div className="max-w-3xl mx-auto">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className="border-b border-border"
+            >
+              <button
+                onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                className="flex items-center justify-between w-full py-5 text-left"
+              >
+                <span className="font-medium text-foreground pr-4">
+                  {item.question}
+                </span>
+                <ChevronDown
+                  className={cn(
+                    "h-5 w-5 text-muted-foreground transition-transform shrink-0",
+                    openIndex === index && "rotate-180"
+                  )}
+                />
+              </button>
+              <div
+                className={cn(
+                  "overflow-hidden transition-all",
+                  openIndex === index ? "max-h-96 pb-5" : "max-h-0"
+                )}
+              >
+                <p className="text-muted-foreground">{item.answer}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Contact CTA */}
+        <div className="text-center mt-12">
+          <p className="text-muted-foreground mb-4">
+            Still have questions?
+          </p>
+          <a
+            href="/contact"
+            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"
+          >
+            Contact support
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/marketing/nextjs/src/components/blocks/HowItWorks.tsx

@@ -0,0 +1,95 @@
+import { UserPlus, Settings, Zap } from "lucide-react"
+
+interface Step {
+  icon: React.ReactNode
+  title: string
+  description: string
+}
+
+interface HowItWorksProps {
+  heading?: string
+  subheading?: string
+  steps?: Step[]
+}
+
+const defaultSteps: Step[] = [
+  {
+    icon: <UserPlus className="h-8 w-8" />,
+    title: "Sign up in seconds",
+    description:
+      "Create your account with just an email. No credit card required to get started.",
+  },
+  {
+    icon: <Settings className="h-8 w-8" />,
+    title: "Configure your workspace",
+    description:
+      "Set up your team, invite members, and customize your workspace to fit your workflow.",
+  },
+  {
+    icon: <Zap className="h-8 w-8" />,
+    title: "Start collaborating",
+    description:
+      "Hit the ground running with templates, integrations, and automation built right in.",
+  },
+]
+
+export function HowItWorks({
+  heading = "Get started in minutes",
+  subheading = "Three simple steps to transform how your team works",
+  steps = defaultSteps,
+}: HowItWorksProps) {
+  return (
+    <section className="py-16 md:py-24 bg-muted/30">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <div className="text-center mb-12 md:mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+            {heading}
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            {subheading}
+          </p>
+        </div>
+
+        {/* Steps */}
+        <div className="max-w-5xl mx-auto">
+          <div className="grid md:grid-cols-3 gap-8 md:gap-12">
+            {steps.map((step, index) => (
+              <div key={index} className="relative">
+                {/* Connector line (hidden on mobile, shown between items on desktop) */}
+                {index < steps.length - 1 && (
+                  <div className="hidden md:block absolute top-10 left-[calc(50%+3rem)] w-[calc(100%-6rem)] h-px bg-border" />
+                )}
+
+                <div className="flex flex-col items-center text-center">
+                  {/* Step number badge */}
+                  <div className="relative mb-6">
+                    <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+                      {step.icon}
+                    </div>
+                    <span className="absolute -top-2 -right-2 w-8 h-8 rounded-full bg-primary text-primary-foreground text-sm font-bold flex items-center justify-center">
+                      {index + 1}
+                    </span>
+                  </div>
+
+                  <h3 className="text-xl font-semibold mb-3">{step.title}</h3>
+                  <p className="text-muted-foreground">{step.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* CTA */}
+        <div className="text-center mt-12 md:mt-16">
+          <a
+            href="/sign-up"
+            className="inline-flex items-center justify-center px-8 py-4 text-base font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            Get started for free
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/marketing/nextjs/src/components/blocks/index.ts

@@ -7,3 +7,5 @@ export { TestimonialsGrid } from "./TestimonialsGrid"
 export { TrustColumns } from "./TrustColumns"
 export { PricingTable } from "./PricingTable"
 export { FinalCTA } from "./FinalCTA"
+export { FAQAccordion } from "./FAQAccordion"
+export { HowItWorks } from "./HowItWorks"

package/templates/marketing/payload/components.json.hbs

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+{{#if (eq shadcn.style "nova")}}
+  "style": "new-york",
+{{else if (eq shadcn.style "vega")}}
+  "style": "default",
+{{else if (eq shadcn.style "maia")}}
+  "style": "new-york",
+{{else if (eq shadcn.style "lyra")}}
+  "style": "new-york",
+{{else if (eq shadcn.style "mira")}}
+  "style": "default",
+{{else}}
+  "style": "new-york",
+{{/if}}
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/(frontend)/globals.css",
+    "baseColor": "{{shadcn.baseColor}}",
+    "cssVariables": true,
+    "prefix": ""
+  },
+{{#if (eq shadcn.iconLibrary "lucide")}}
+  "iconLibrary": "lucide",
+{{else if (eq shadcn.iconLibrary "hugeicons")}}
+  "iconLibrary": "lucide",
+{{else if (eq shadcn.iconLibrary "tabler")}}
+  "iconLibrary": "lucide",
+{{else if (eq shadcn.iconLibrary "phosphor")}}
+  "iconLibrary": "lucide",
+{{else}}
+  "iconLibrary": "lucide",
+{{/if}}
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utilities",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/templates/web/components.json.hbs

@@ -1,6 +1,12 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
+{{#if (eq shadcn.style "nova")}}
   "style": "new-york",
+{{else if (eq shadcn.style "vega")}}
+  "style": "default",
+{{else}}
+  "style": "new-york",
+{{/if}}
   "rsc": true,
   "tsx": true,
   "tailwind": {