kofi-stack-template-generator 2.1.51 → 2.1.53

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

@@ -0,0 +1,210 @@
+"use client"
+
+import Link from "next/link"
+import { Check, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface PricingFeature {
+  feature: string
+  included: boolean
+}
+
+interface PricingPlan {
+  name: string
+  price: string
+  description: string
+  featured?: boolean
+  features: PricingFeature[]
+  link: {
+    label: string
+    href: string
+    variant: "default" | "outline"
+  }
+}
+
+interface PricingTableProps {
+  heading?: string
+  subheading?: string
+  plans?: PricingPlan[]
+}
+
+const defaultPlans: PricingPlan[] = [
+  {
+    name: "Free",
+    price: "$0/mo",
+    description: "Perfect for trying SaaSify.",
+    features: [
+      { feature: "Up to 3 users", included: true },
+      { feature: "Basic features", included: true },
+      { feature: "Community support", included: true },
+    ],
+    link: { label: "Get started free", href: "/sign-up", variant: "outline" },
+  },
+  {
+    name: "Pro",
+    price: "$29/mo",
+    description: "For small teams getting started.",
+    featured: true,
+    features: [
+      { feature: "Up to 10 users", included: true },
+      { feature: "Advanced features", included: true },
+      { feature: "Integrations", included: true },
+      { feature: "Priority support", included: true },
+    ],
+    link: { label: "Get Pro", href: "/sign-up", variant: "default" },
+  },
+  {
+    name: "Business",
+    price: "$99/mo",
+    description: "For teams ready to scale.",
+    features: [
+      { feature: "Unlimited users", included: true },
+      { feature: "All features", included: true },
+      { feature: "API access", included: true },
+      { feature: "Dedicated support", included: true },
+    ],
+    link: { label: "Get Business", href: "/sign-up", variant: "outline" },
+  },
+]
+
+export function PricingTable({
+  heading = "Simple, transparent pricing",
+  subheading = "Start free, upgrade as your team grows. No hidden fees.",
+  plans = defaultPlans,
+}: PricingTableProps) {
+  const displayPlans = plans.length > 0 ? plans : defaultPlans
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        {(heading || subheading) && (
+          <div className="text-center mb-12 md:mb-16 max-w-3xl mx-auto">
+            {heading && (
+              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">
+                {heading}
+              </h2>
+            )}
+            {subheading && (
+              <p className="text-lg md:text-xl text-muted-foreground">
+                {subheading}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Pricing Cards */}
+        <div className="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto">
+          {displayPlans.map((plan) => (
+            <div
+              key={plan.name}
+              className={cn(
+                "relative rounded-2xl p-6 md:p-8 flex flex-col",
+                plan.featured
+                  ? "bg-primary text-primary-foreground border-2 border-primary"
+                  : "bg-card border border-border"
+              )}
+            >
+              {plan.featured && (
+                <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 text-xs font-medium rounded-full bg-background text-foreground">
+                  Most Popular
+                </span>
+              )}
+
+              {/* Plan header */}
+              <div className="mb-6">
+                <h3
+                  className={cn(
+                    "text-lg font-semibold mb-2",
+                    plan.featured ? "text-primary-foreground" : "text-foreground"
+                  )}
+                >
+                  {plan.name}
+                </h3>
+                <div
+                  className={cn(
+                    "text-4xl font-bold mb-2",
+                    plan.featured ? "text-primary-foreground" : "text-foreground"
+                  )}
+                >
+                  {plan.price}
+                </div>
+                <p
+                  className={cn(
+                    "text-sm",
+                    plan.featured ? "text-primary-foreground/80" : "text-muted-foreground"
+                  )}
+                >
+                  {plan.description}
+                </p>
+              </div>
+
+              {/* Features */}
+              <ul className="space-y-3 mb-8 flex-1">
+                {plan.features.map((feature) => (
+                  <li key={feature.feature} className="flex items-center gap-3">
+                    {feature.included ? (
+                      <Check
+                        className={cn(
+                          "h-4 w-4",
+                          plan.featured ? "text-primary-foreground" : "text-primary"
+                        )}
+                      />
+                    ) : (
+                      <X
+                        className={cn(
+                          "h-4 w-4",
+                          plan.featured ? "text-primary-foreground/50" : "text-muted-foreground"
+                        )}
+                      />
+                    )}
+                    <span
+                      className={cn(
+                        "text-sm",
+                        plan.featured
+                          ? feature.included
+                            ? "text-primary-foreground"
+                            : "text-primary-foreground/50"
+                          : feature.included
+                            ? "text-foreground"
+                            : "text-muted-foreground"
+                      )}
+                    >
+                      {feature.feature}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+
+              {/* CTA */}
+              <Link
+                href={plan.link.href}
+                className={cn(
+                  "w-full inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",
+                  plan.featured
+                    ? "bg-background text-foreground hover:bg-background/90"
+                    : plan.link.variant === "default"
+                      ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                      : "border border-border bg-background hover:bg-muted"
+                )}
+              >
+                {plan.link.label}
+              </Link>
+            </div>
+          ))}
+        </div>
+
+        {/* View all link */}
+        <div className="text-center mt-8">
+          <Link
+            href="/pricing"
+            className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"
+          >
+            View full comparison
+            <span aria-hidden="true">→</span>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,72 @@
+"use client"
+
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+interface ProofBannerLink {
+  label: string
+  href: string
+  variant: "default" | "outline"
+}
+
+interface ProofBannerProps {
+  headline?: string
+  subtext?: string
+  links?: ProofBannerLink[]
+  style?: "centered" | "left"
+}
+
+export function ProofBanner({
+  headline = "Transform how your team works, collaborates, and grows",
+  subtext = "Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint.",
+  links = [
+    { label: "Start free trial", href: "/sign-up", variant: "default" },
+    { label: "Book a demo", href: "/contact", variant: "outline" },
+  ],
+  style = "centered",
+}: ProofBannerProps) {
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        <div
+          className={cn(
+            "max-w-4xl",
+            style === "centered" ? "mx-auto text-center" : ""
+          )}
+        >
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">
+            {headline}
+          </h2>
+          {subtext && (
+            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+              {subtext}
+            </p>
+          )}
+          {links && links.length > 0 && (
+            <div
+              className={cn(
+                "flex flex-wrap gap-4",
+                style === "centered" ? "justify-center" : ""
+              )}
+            >
+              {links.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={cn(
+                    "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",
+                    link.variant === "default"
+                      ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                      : "border border-border bg-background hover:bg-muted"
+                  )}
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,119 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+
+interface Testimonial {
+  stat: string
+  statLabel: string
+  quote: string
+  author: string
+  company: string
+}
+
+interface TestimonialsGridProps {
+  heading?: string
+  subheading?: string
+  testimonials?: Testimonial[]
+}
+
+const defaultTestimonials: Testimonial[] = [
+  {
+    stat: "94%",
+    statLabel: "Faster onboarding",
+    quote:
+      "We got our entire team onboarded in under a day. The intuitive interface and powerful integrations saved us weeks of setup time.",
+    author: "Sarah Chen",
+    company: "TechFlow Inc",
+  },
+  {
+    stat: "3x",
+    statLabel: "Productivity",
+    quote:
+      "Our team is shipping features faster than ever. The automation tools eliminated hours of manual work every week.",
+    author: "Marcus Rivera",
+    company: "Beacon Digital",
+  },
+  {
+    stat: "40%",
+    statLabel: "Cost reduction",
+    quote:
+      "We consolidated five different tools into SaaSify. The ROI was immediate and our team loves having everything in one place.",
+    author: "David Kim",
+    company: "Cascade Systems",
+  },
+]
+
+export function TestimonialsGrid({
+  heading = "Loved by teams at companies of all sizes",
+  subheading = "See how leading teams use SaaSify to drive growth and productivity.",
+  testimonials = defaultTestimonials,
+}: TestimonialsGridProps) {
+  const displayTestimonials = testimonials.length > 0 ? testimonials : defaultTestimonials
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        {(heading || subheading) && (
+          <div className="text-center mb-12 md:mb-16 max-w-3xl mx-auto">
+            {heading && (
+              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">
+                {heading}
+              </h2>
+            )}
+            {subheading && (
+              <p className="text-lg md:text-xl text-muted-foreground">
+                {subheading}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Testimonials Grid */}
+        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
+          {displayTestimonials.map((testimonial) => (
+            <div
+              key={testimonial.author}
+              className="relative bg-card border border-border rounded-2xl p-6 md:p-8"
+            >
+              {/* Stat */}
+              <div className="mb-6">
+                <div className="text-4xl md:text-5xl font-bold text-primary mb-1">
+                  {testimonial.stat}
+                </div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {testimonial.statLabel}
+                </p>
+              </div>
+
+              {/* Quote */}
+              <blockquote className="text-foreground mb-6">
+                "{testimonial.quote}"
+              </blockquote>
+
+              {/* Author */}
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
+                  <span className="text-sm font-medium">
+                    {testimonial.author
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </span>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-foreground">
+                    {testimonial.author}
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    {testimonial.company}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,110 @@
+"use client"
+
+import {
+  Award,
+  Cloud,
+  Database,
+  Globe,
+  Lock,
+  Plug,
+  Shield,
+  Zap,
+  type LucideIcon,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface TrustItem {
+  icon: string
+  text: string
+}
+
+interface TrustColumn {
+  label: string
+  heading: string
+  description: string
+  items: TrustItem[]
+}
+
+interface TrustColumnsProps {
+  columns?: TrustColumn[]
+}
+
+const iconMap: Record<string, LucideIcon> = {
+  zap: Zap,
+  plug: Plug,
+  database: Database,
+  cloud: Cloud,
+  shield: Shield,
+  lock: Lock,
+  award: Award,
+  globe: Globe,
+}
+
+const defaultColumns: TrustColumn[] = [
+  {
+    label: "Integrations",
+    heading: "Connect anywhere",
+    description:
+      "Plug in and get started immediately with pre-built connectors for every major platform.",
+    items: [
+      { icon: "zap", text: "Go live in minutes" },
+      { icon: "plug", text: "Pre-built connectors" },
+      { icon: "database", text: "Complete data sync" },
+      { icon: "cloud", text: "Cloud-native infrastructure" },
+    ],
+  },
+  {
+    label: "Security & Compliance",
+    heading: "Enterprise-level security",
+    description:
+      "Keep your data safe with encryption, granular access control, and compliance-ready infrastructure.",
+    items: [
+      { icon: "shield", text: "SOC 2 Type II certified" },
+      { icon: "lock", text: "End-to-end encryption" },
+      { icon: "award", text: "Complete audit trails" },
+      { icon: "globe", text: "GDPR compliant" },
+    ],
+  },
+]
+
+export function TrustColumns({ columns = defaultColumns }: TrustColumnsProps) {
+  const displayColumns = columns.length > 0 ? columns : defaultColumns
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        <div className="grid md:grid-cols-2 gap-12 lg:gap-16">
+          {displayColumns.map((column) => (
+            <div key={column.label}>
+              <span className="inline-block text-sm font-medium text-primary mb-4">
+                {column.label}
+              </span>
+              <h2 className="text-2xl md:text-3xl font-bold tracking-tight mb-4">
+                {column.heading}
+              </h2>
+              <p className="text-muted-foreground mb-8">
+                {column.description}
+              </p>
+
+              <ul className="space-y-4">
+                {column.items.map((item) => {
+                  const Icon = iconMap[item.icon] || Shield
+                  return (
+                    <li key={item.text} className="flex items-center gap-3">
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                        <Icon className="h-4 w-4 text-primary" />
+                      </div>
+                      <span className="text-sm font-medium">
+                        {item.text}
+                      </span>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,9 @@
+export { LogoBanner } from "./LogoBanner"
+export { ProofBanner } from "./ProofBanner"
+export { BentoFeatures } from "./BentoFeatures"
+export { FeatureShowcase } from "./FeatureShowcase"
+export { IndustryTabs } from "./IndustryTabs"
+export { TestimonialsGrid } from "./TestimonialsGrid"
+export { TrustColumns } from "./TrustColumns"
+export { PricingTable } from "./PricingTable"
+export { FinalCTA } from "./FinalCTA"