kofi-stack-template-generator 2.1.51 → 2.1.52

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

@@ -0,0 +1,249 @@
+"use client"
+
+import {
+  BarChart3,
+  Globe,
+  Layers,
+  type LucideIcon,
+  Rocket,
+  Settings,
+  Shield,
+  Zap,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface Feature {
+  size?: "small" | "tall"
+  style?: "default" | "primary" | "accent" | "gradient"
+  icon?: string
+  stat?: string
+  title: string
+  description: string
+}
+
+interface BentoFeaturesProps {
+  heading?: string
+  subheading?: string
+  features?: Feature[]
+}
+
+const iconMap: Record<string, LucideIcon> = {
+  rocket: Rocket,
+  zap: Zap,
+  layers: Layers,
+  shield: Shield,
+  globe: Globe,
+  settings: Settings,
+  barChart: BarChart3,
+}
+
+const gridPositions = [
+  "md:col-span-1 md:row-span-1",
+  "md:col-span-1 md:row-span-1",
+  "md:col-span-1 md:row-span-1",
+  "md:col-span-1 md:row-span-2",
+  "md:col-span-1 md:row-span-1",
+  "md:col-span-1 md:row-span-1",
+  "md:col-span-1 md:row-span-1",
+  "md:col-span-1 md:row-span-1",
+]
+
+const styleClasses: Record<string, { bg: string; text: string; icon: string; statText: string }> = {
+  default: {
+    bg: "bg-card border border-border/50 hover:border-border",
+    text: "text-foreground",
+    icon: "bg-primary/10 text-primary",
+    statText: "text-primary",
+  },
+  primary: {
+    bg: "bg-primary hover:bg-primary/95",
+    text: "text-primary-foreground",
+    icon: "bg-white/20 text-white",
+    statText: "text-white",
+  },
+  accent: {
+    bg: "bg-gradient-to-br from-teal-500 to-teal-600 hover:from-teal-500/95 hover:to-teal-600/95",
+    text: "text-white",
+    icon: "bg-white/20 text-white",
+    statText: "text-white",
+  },
+  gradient: {
+    bg: "bg-gradient-to-br from-primary via-primary/90 to-secondary hover:from-primary/95",
+    text: "text-white",
+    icon: "bg-white/20 text-white",
+    statText: "text-white",
+  },
+}
+
+const defaultFeatures: Feature[] = [
+  {
+    size: "small",
+    style: "gradient",
+    icon: "zap",
+    stat: "5x",
+    title: "Faster onboarding",
+    description: "Get your team up and running in hours, not weeks.",
+  },
+  {
+    size: "small",
+    style: "accent",
+    icon: "rocket",
+    title: "Quick setup",
+    description: "Configure your workspace, invite your team, and start collaborating.",
+  },
+  {
+    size: "small",
+    style: "default",
+    icon: "layers",
+    title: "Powerful integrations",
+    description: "Connect with 100+ tools you already use.",
+  },
+  {
+    size: "tall",
+    style: "primary",
+    icon: "shield",
+    title: "Enterprise security",
+    description: "SOC 2 compliant with end-to-end encryption and complete audit trails for peace of mind.",
+  },
+  {
+    size: "small",
+    style: "default",
+    icon: "globe",
+    stat: "99.9%",
+    title: "Uptime",
+    description: "Reliable infrastructure you can count on.",
+  },
+  {
+    size: "small",
+    style: "default",
+    icon: "globe",
+    title: "Global scale",
+    description: "Multi-region with custom domains.",
+  },
+  {
+    size: "small",
+    style: "default",
+    icon: "settings",
+    title: "Smart automation",
+    description: "Automate repetitive tasks and workflows.",
+  },
+  {
+    size: "small",
+    style: "default",
+    icon: "layers",
+    title: "Flexible workflows",
+    description: "Build custom processes for any use case.",
+  },
+]
+
+export function BentoFeatures({
+  heading = "Discover what SaaSify can do",
+  subheading = "Everything you need to work smarter and scale faster",
+  features = defaultFeatures,
+}: BentoFeaturesProps) {
+  const displayFeatures = features.length > 0 ? features : defaultFeatures
+
+  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-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6">
+                {heading}
+              </h2>
+            )}
+            {subheading && (
+              <p className="text-xl md:text-2xl text-muted-foreground">{subheading}</p>
+            )}
+          </div>
+        )}
+
+        {/* Bento Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5 md:grid-rows-[repeat(3,minmax(140px,160px))]">
+          {displayFeatures.map((feature, index) => {
+            const style = feature.style || "default"
+            const iconKey = feature.icon
+            const Icon = iconKey && iconKey in iconMap ? iconMap[iconKey] : null
+            const styleConfig = styleClasses[style] || styleClasses.default
+            const gridPosition = gridPositions[index] || "md:col-span-1 md:row-span-1"
+            const isLarge =
+              gridPosition.includes("col-span-2") && gridPosition.includes("row-span-2")
+
+            return (
+              <div
+                key={feature.title}
+                className={cn(
+                  "relative rounded-2xl overflow-hidden p-5 md:p-6 flex flex-col transition-all duration-300 group",
+                  "hover:shadow-lg hover:-translate-y-0.5",
+                  "col-span-1 row-span-1",
+                  gridPosition,
+                  styleConfig.bg
+                )}
+              >
+                {/* Decorative elements */}
+                {!isLarge && feature.size === "tall" && (
+                  <div className="absolute -right-6 -bottom-6 w-24 h-24 md:w-32 md:h-32 rounded-full bg-white/10 blur-xl" />
+                )}
+
+                {/* Content */}
+                <div className="relative z-10 flex flex-col h-full">
+                  {/* Icon */}
+                  {Icon && (
+                    <div
+                      className={cn(
+                        "w-10 h-10 md:w-11 md:h-11 rounded-xl flex items-center justify-center mb-auto",
+                        styleConfig.icon
+                      )}
+                    >
+                      <Icon className="w-5 h-5 md:w-5 md:h-5" />
+                    </div>
+                  )}
+
+                  {/* Spacer */}
+                  <div className="flex-1 min-h-2" />
+
+                  {/* Stat */}
+                  {feature.stat && (
+                    <div
+                      className={cn(
+                        "font-bold mb-0.5 leading-none",
+                        isLarge ? "text-5xl md:text-6xl" : "text-3xl md:text-4xl",
+                        styleConfig.statText
+                      )}
+                    >
+                      {feature.stat}
+                    </div>
+                  )}
+
+                  {/* Title */}
+                  <h3
+                    className={cn(
+                      "font-semibold mb-1",
+                      isLarge ? "text-lg md:text-xl" : "text-base md:text-lg",
+                      styleConfig.text
+                    )}
+                  >
+                    {feature.title}
+                  </h3>
+
+                  {/* Description */}
+                  <p
+                    className={cn(
+                      "leading-snug",
+                      isLarge ? "text-sm md:text-base" : "text-xs md:text-sm",
+                      style === "default" ? "text-muted-foreground" : "text-white/80"
+                    )}
+                  >
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,110 @@
+"use client"
+
+import Link from "next/link"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface FeatureShowcaseProps {
+  label?: string
+  headline: string
+  description: string
+  features?: { text: string }[]
+  link?: {
+    label: string
+    href: string
+  }
+  imagePosition?: "left" | "right"
+}
+
+export function FeatureShowcase({
+  label,
+  headline,
+  description,
+  features = [],
+  link,
+  imagePosition = "right",
+}: FeatureShowcaseProps) {
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        <div
+          className={cn(
+            "grid md:grid-cols-2 gap-12 lg:gap-16 items-center",
+            imagePosition === "left" && "md:grid-flow-dense"
+          )}
+        >
+          {/* Content */}
+          <div className={cn(imagePosition === "left" && "md:col-start-2")}>
+            {label && (
+              <span className="inline-block text-sm font-medium text-primary mb-4">
+                {label}
+              </span>
+            )}
+            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+              {headline}
+            </h2>
+            <p className="text-lg text-muted-foreground mb-6">
+              {description}
+            </p>
+
+            {features.length > 0 && (
+              <ul className="space-y-3 mb-8">
+                {features.map((feature) => (
+                  <li key={feature.text} className="flex items-center gap-3">
+                    <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">
+                      <Check className="h-3 w-3 text-primary" />
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {feature.text}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {link && (
+              <Link
+                href={link.href}
+                className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"
+              >
+                {link.label}
+                <span aria-hidden="true">→</span>
+              </Link>
+            )}
+          </div>
+
+          {/* Image Placeholder */}
+          <div
+            className={cn(
+              "relative aspect-[4/3] rounded-2xl bg-muted overflow-hidden",
+              imagePosition === "left" && "md:col-start-1 md:row-start-1"
+            )}
+          >
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-xl bg-primary/10 flex items-center justify-center">
+                  <svg
+                    className="w-8 h-8 text-primary"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    />
+                  </svg>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Feature illustration
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,91 @@
+"use client"
+
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+interface FinalCTALink {
+  label: string
+  href: string
+  variant: "default" | "outline"
+}
+
+interface FinalCTAProps {
+  headline?: string
+  subheading?: string
+  links?: FinalCTALink[]
+  style?: "dark" | "light" | "gradient"
+}
+
+export function FinalCTA({
+  headline = "Ready to transform how your team works?",
+  subheading = "Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow.",
+  links = [
+    { label: "Start free trial", href: "/sign-up", variant: "outline" },
+    { label: "Book a demo", href: "/contact", variant: "default" },
+  ],
+  style = "dark",
+}: FinalCTAProps) {
+  const bgClasses = {
+    dark: "bg-foreground text-background",
+    light: "bg-muted text-foreground",
+    gradient: "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground",
+  }
+
+  const buttonClasses = {
+    dark: {
+      default: "bg-background text-foreground hover:bg-background/90",
+      outline: "border border-background/30 text-background hover:bg-background/10",
+    },
+    light: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      outline: "border border-border hover:bg-background",
+    },
+    gradient: {
+      default: "bg-background text-foreground hover:bg-background/90",
+      outline: "border border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",
+    },
+  }
+
+  return (
+    <section className={cn("py-16 md:py-24", bgClasses[style])}>
+      <div className="container mx-auto px-4">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">
+            {headline}
+          </h2>
+          {subheading && (
+            <p
+              className={cn(
+                "text-lg md:text-xl mb-8",
+                style === "dark"
+                  ? "text-background/80"
+                  : style === "gradient"
+                    ? "text-primary-foreground/80"
+                    : "text-muted-foreground"
+              )}
+            >
+              {subheading}
+            </p>
+          )}
+
+          {links && links.length > 0 && (
+            <div className="flex flex-wrap gap-4 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",
+                    buttonClasses[style][link.variant]
+                  )}
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,137 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+interface Tab {
+  name: string
+  stat: string
+  statLabel: string
+  description: string
+  link?: {
+    label: string
+    href: string
+  }
+}
+
+interface IndustryTabsProps {
+  heading?: string
+  subheading?: string
+  tabs?: Tab[]
+}
+
+const defaultTabs: Tab[] = [
+  {
+    name: "Sales Teams",
+    stat: "40%",
+    statLabel: "Faster deal cycles with smart pipeline tools",
+    description:
+      "Close deals faster with intelligent pipeline management, automated follow-ups, and real-time insights that help your team hit quota every quarter.",
+    link: { label: "Solutions for sales", href: "/use-cases/sales" },
+  },
+  {
+    name: "Marketing Teams",
+    stat: "3x",
+    statLabel: "Campaign velocity with streamlined workflows",
+    description:
+      "Launch campaigns that convert with collaborative planning, asset management, and performance analytics all in one place.",
+    link: { label: "Solutions for marketing", href: "/use-cases/marketing" },
+  },
+  {
+    name: "Product Teams",
+    stat: "50%",
+    statLabel: "Faster shipping with better prioritization",
+    description:
+      "Ship features users love with roadmap planning, feedback collection, and release management that keeps everyone aligned.",
+    link: { label: "Solutions for product", href: "/use-cases/product" },
+  },
+  {
+    name: "Operations",
+    stat: "60%",
+    statLabel: "Time saved with process automation",
+    description:
+      "Scale your operations without the chaos. Automate processes, manage resources, and get visibility across your entire organization.",
+    link: { label: "Solutions for ops", href: "/use-cases/operations" },
+  },
+]
+
+export function IndustryTabs({
+  heading = "Solutions that deliver real results",
+  subheading = "Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.",
+  tabs = defaultTabs,
+}: IndustryTabsProps) {
+  const [activeTab, setActiveTab] = useState(0)
+  const displayTabs = tabs.length > 0 ? tabs : defaultTabs
+  const activeContent = displayTabs[activeTab]
+
+  return (
+    <section className="py-16 md:py-24 bg-muted/30">
+      <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>
+        )}
+
+        {/* Tabs */}
+        <div className="flex flex-wrap justify-center gap-2 mb-12">
+          {displayTabs.map((tab, index) => (
+            <button
+              key={tab.name}
+              type="button"
+              onClick={() => setActiveTab(index)}
+              className={cn(
+                "px-4 py-2 text-sm font-medium rounded-full transition-colors",
+                activeTab === index
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-background border border-border hover:bg-muted"
+              )}
+            >
+              {tab.name}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="grid md:grid-cols-2 gap-12 lg:gap-16 items-center max-w-5xl mx-auto">
+          {/* Stats side */}
+          <div className="text-center md:text-left">
+            <div className="text-7xl md:text-8xl lg:text-9xl font-bold text-primary mb-2">
+              {activeContent.stat}
+            </div>
+            <p className="text-xl md:text-2xl font-medium text-foreground">
+              {activeContent.statLabel}
+            </p>
+          </div>
+
+          {/* Description side */}
+          <div>
+            <p className="text-lg text-muted-foreground mb-6">
+              {activeContent.description}
+            </p>
+            {activeContent.link && (
+              <Link
+                href={activeContent.link.href}
+                className="inline-flex items-center gap-2 px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+              >
+                {activeContent.link.label}
+                <span aria-hidden="true">→</span>
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,80 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+
+interface Logo {
+  name: string
+  initials?: string
+}
+
+interface LogoBannerProps {
+  heading?: string
+  logos?: Logo[]
+  style?: "scroll" | "grid"
+}
+
+const defaultLogos: Logo[] = [
+  { name: "TechFlow Inc", initials: "TF" },
+  { name: "Acme Corp", initials: "AC" },
+  { name: "Evergreen HQ", initials: "EH" },
+  { name: "Atlas Network", initials: "AN" },
+  { name: "Beacon Digital", initials: "BD" },
+  { name: "Cascade Systems", initials: "CS" },
+]
+
+function LogoItem({ logo }: { logo: Logo }) {
+  return (
+    <div
+      className={cn(
+        "logo-item flex items-center justify-center px-6 md:px-8",
+        "grayscale hover:grayscale-0 transition-all duration-300"
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <span className="w-8 h-8 rounded bg-muted flex items-center justify-center text-xs font-bold text-foreground">
+          {logo.initials || logo.name.slice(0, 2).toUpperCase()}
+        </span>
+        <span className="text-sm font-medium text-muted-foreground hidden md:block">
+          {logo.name}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export function LogoBanner({
+  heading = "Trusted by fast-growing companies everywhere",
+  logos = defaultLogos,
+  style = "scroll",
+}: LogoBannerProps) {
+  const displayLogos = logos.length > 0 ? logos : defaultLogos
+
+  return (
+    <section className="py-12 md:py-16 border-y border-border/50">
+      <div className="container mx-auto px-4">
+        {heading && (
+          <p className="text-center text-sm text-muted-foreground mb-8 uppercase tracking-wider">
+            {heading}
+          </p>
+        )}
+
+        {style === "scroll" ? (
+          <div className="logo-scroll-container">
+            <div className="logo-scroll-track">
+              {/* Double the logos for seamless loop */}
+              {[...displayLogos, ...displayLogos].map((logo, index) => (
+                <LogoItem key={`${logo.name}-${index}`} logo={logo} />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-3 md:grid-cols-6 gap-8 items-center justify-items-center">
+            {displayLogos.map((logo) => (
+              <LogoItem key={logo.name} logo={logo} />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}