kofi-stack-template-generator 2.1.52 → 2.1.53

package/templates/marketing/astro/src/components/blocks/FeatureShowcase.astro

@@ -0,0 +1,102 @@
+---
+import { Check } from "lucide-astro"
+
+interface Props {
+  label?: string
+  headline: string
+  description: string
+  features?: { text: string }[]
+  link?: {
+    label: string
+    href: string
+  }
+  imagePosition?: "left" | "right"
+}
+
+const {
+  label,
+  headline,
+  description,
+  features = [],
+  link,
+  imagePosition = "right",
+} = Astro.props
+---
+
+<section class="py-16 md:py-24">
+  <div class="container mx-auto px-4">
+    <div class:list={[
+      "grid md:grid-cols-2 gap-12 lg:gap-16 items-center",
+      imagePosition === "left" && "md:grid-flow-dense"
+    ]}>
+      <!-- Content -->
+      <div class:list={[imagePosition === "left" && "md:col-start-2"]}>
+        {label && (
+          <span class="inline-block text-sm font-medium text-primary mb-4">
+            {label}
+          </span>
+        )}
+        <h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+          {headline}
+        </h2>
+        <p class="text-lg text-muted-foreground mb-6">
+          {description}
+        </p>
+
+        {features.length > 0 && (
+          <ul class="space-y-3 mb-8">
+            {features.map((feature) => (
+              <li class="flex items-center gap-3">
+                <div class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">
+                  <Check class="h-3 w-3 text-primary" />
+                </div>
+                <span class="text-sm text-muted-foreground">
+                  {feature.text}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {link && (
+          <a
+            href={link.href}
+            class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"
+          >
+            {link.label}
+            <span aria-hidden="true">&rarr;</span>
+          </a>
+        )}
+      </div>
+
+      <!-- Image Placeholder -->
+      <div class:list={[
+        "relative aspect-[4/3] rounded-2xl bg-muted overflow-hidden",
+        imagePosition === "left" && "md:col-start-1 md:row-start-1"
+      ]}>
+        <div class="absolute inset-0 flex items-center justify-center">
+          <div class="text-center">
+            <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-primary/10 flex items-center justify-center">
+              <svg
+                class="w-8 h-8 text-primary"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="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 class="text-sm text-muted-foreground">
+              Feature illustration
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/templates/marketing/astro/src/components/blocks/FinalCTA.astro

@@ -0,0 +1,82 @@
+---
+interface FinalCTALink {
+  label: string
+  href: string
+  variant: "default" | "outline"
+}
+
+interface Props {
+  headline?: string
+  subheading?: string
+  links?: FinalCTALink[]
+  style?: "dark" | "light" | "gradient"
+}
+
+const {
+  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",
+} = Astro.props
+
+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",
+  },
+}
+
+const subtextClasses = {
+  dark: "text-background/80",
+  light: "text-muted-foreground",
+  gradient: "text-primary-foreground/80",
+}
+---
+
+<section class:list={["py-16 md:py-24", bgClasses[style]]}>
+  <div class="container mx-auto px-4">
+    <div class="max-w-3xl mx-auto text-center">
+      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">
+        {headline}
+      </h2>
+      {subheading && (
+        <p class:list={["text-lg md:text-xl mb-8", subtextClasses[style]]}>
+          {subheading}
+        </p>
+      )}
+
+      {links && links.length > 0 && (
+        <div class="flex flex-wrap gap-4 justify-center">
+          {links.map((link) => (
+            <a
+              href={link.href}
+              class:list={[
+                "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",
+                buttonClasses[style][link.variant]
+              ]}
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+</section>

package/templates/marketing/astro/src/components/blocks/IndustryTabs.astro

@@ -0,0 +1,177 @@
+---
+interface Tab {
+  name: string
+  stat: string
+  statLabel: string
+  description: string
+  link?: {
+    label: string
+    href: string
+  }
+}
+
+interface Props {
+  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" },
+  },
+]
+
+const {
+  heading = "Solutions that deliver real results",
+  subheading = "Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.",
+  tabs = defaultTabs,
+} = Astro.props
+
+const displayTabs = tabs.length > 0 ? tabs : defaultTabs
+---
+
+<section class="py-16 md:py-24 bg-muted/30">
+  <div class="container mx-auto px-4">
+    <!-- Header -->
+    {(heading || subheading) && (
+      <div class="text-center mb-12 md:mb-16 max-w-3xl mx-auto">
+        {heading && (
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">
+            {heading}
+          </h2>
+        )}
+        {subheading && (
+          <p class="text-lg md:text-xl text-muted-foreground">
+            {subheading}
+          </p>
+        )}
+      </div>
+    )}
+
+    <!-- Tabs -->
+    <div class="flex flex-wrap justify-center gap-2 mb-12" id="industry-tabs">
+      {displayTabs.map((tab, index) => (
+        <button
+          type="button"
+          data-tab-index={index}
+          class:list={[
+            "industry-tab px-4 py-2 text-sm font-medium rounded-full transition-colors",
+            index === 0
+              ? "bg-primary text-primary-foreground"
+              : "bg-background border border-border hover:bg-muted"
+          ]}
+        >
+          {tab.name}
+        </button>
+      ))}
+    </div>
+
+    <!-- Content -->
+    <div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center max-w-5xl mx-auto">
+      {displayTabs.map((tab, index) => (
+        <div
+          data-tab-content={index}
+          class:list={["tab-content text-center md:text-left", index !== 0 && "hidden"]}
+        >
+          <div class="text-7xl md:text-8xl lg:text-9xl font-bold text-primary mb-2">
+            {tab.stat}
+          </div>
+          <p class="text-xl md:text-2xl font-medium text-foreground">
+            {tab.statLabel}
+          </p>
+        </div>
+      ))}
+
+      {displayTabs.map((tab, index) => (
+        <div
+          data-tab-description={index}
+          class:list={["tab-description", index !== 0 && "hidden"]}
+        >
+          <p class="text-lg text-muted-foreground mb-6">
+            {tab.description}
+          </p>
+          {tab.link && (
+            <a
+              href={tab.link.href}
+              class="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"
+            >
+              {tab.link.label}
+              <span aria-hidden="true">&rarr;</span>
+            </a>
+          )}
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<script>
+  function initIndustryTabs() {
+    const tabsContainer = document.getElementById('industry-tabs')
+    if (!tabsContainer) return
+
+    const tabs = tabsContainer.querySelectorAll('.industry-tab')
+    const contents = document.querySelectorAll('.tab-content')
+    const descriptions = document.querySelectorAll('.tab-description')
+
+    tabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        const index = tab.getAttribute('data-tab-index')
+
+        // Update tab styles
+        tabs.forEach((t) => {
+          t.classList.remove('bg-primary', 'text-primary-foreground')
+          t.classList.add('bg-background', 'border', 'border-border', 'hover:bg-muted')
+        })
+        tab.classList.add('bg-primary', 'text-primary-foreground')
+        tab.classList.remove('bg-background', 'border', 'border-border', 'hover:bg-muted')
+
+        // Update content visibility
+        contents.forEach((content) => {
+          if (content.getAttribute('data-tab-content') === index) {
+            content.classList.remove('hidden')
+          } else {
+            content.classList.add('hidden')
+          }
+        })
+
+        descriptions.forEach((desc) => {
+          if (desc.getAttribute('data-tab-description') === index) {
+            desc.classList.remove('hidden')
+          } else {
+            desc.classList.add('hidden')
+          }
+        })
+      })
+    })
+  }
+
+  initIndustryTabs()
+  document.addEventListener('astro:after-swap', initIndustryTabs)
+</script>

package/templates/marketing/astro/src/components/blocks/LogoBanner.astro

@@ -0,0 +1,95 @@
+---
+interface Logo {
+  name: string
+  initials?: string
+}
+
+interface Props {
+  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" },
+]
+
+const {
+  heading = "Trusted by fast-growing companies everywhere",
+  logos = defaultLogos,
+  style = "scroll",
+} = Astro.props
+
+const displayLogos = logos.length > 0 ? logos : defaultLogos
+---
+
+<section class="py-12 md:py-16 border-y border-border/50">
+  <div class="container mx-auto px-4">
+    {heading && (
+      <p class="text-center text-sm text-muted-foreground mb-8 uppercase tracking-wider">
+        {heading}
+      </p>
+    )}
+
+    {style === "scroll" ? (
+      <div class="logo-scroll-container">
+        <div class="logo-scroll-track">
+          {[...displayLogos, ...displayLogos].map((logo, index) => (
+            <div class="logo-item flex items-center justify-center px-6 md:px-8 grayscale hover:grayscale-0 transition-all duration-300">
+              <div class="flex items-center gap-2">
+                <span class="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 class="text-sm font-medium text-muted-foreground hidden md:block">
+                  {logo.name}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    ) : (
+      <div class="grid grid-cols-3 md:grid-cols-6 gap-8 items-center justify-items-center">
+        {displayLogos.map((logo) => (
+          <div class="logo-item flex items-center justify-center px-6 md:px-8 grayscale hover:grayscale-0 transition-all duration-300">
+            <div class="flex items-center gap-2">
+              <span class="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 class="text-sm font-medium text-muted-foreground hidden md:block">
+                {logo.name}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    )}
+  </div>
+</section>
+
+<style>
+  .logo-scroll-container {
+    overflow: hidden;
+    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+  }
+
+  .logo-scroll-track {
+    display: flex;
+    animation: scroll 30s linear infinite;
+    width: max-content;
+  }
+
+  @keyframes scroll {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+  }
+
+  .logo-scroll-container:hover .logo-scroll-track {
+    animation-play-state: paused;
+  }
+</style>

package/templates/marketing/astro/src/components/blocks/PricingTable.astro

@@ -0,0 +1,176 @@
+---
+import { Check, X } from "lucide-astro"
+
+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 Props {
+  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" },
+  },
+]
+
+const {
+  heading = "Simple, transparent pricing",
+  subheading = "Start free, upgrade as your team grows. No hidden fees.",
+  plans = defaultPlans,
+} = Astro.props
+
+const displayPlans = plans.length > 0 ? plans : defaultPlans
+---
+
+<section class="py-16 md:py-24">
+  <div class="container mx-auto px-4">
+    <!-- Header -->
+    {(heading || subheading) && (
+      <div class="text-center mb-12 md:mb-16 max-w-3xl mx-auto">
+        {heading && (
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">
+            {heading}
+          </h2>
+        )}
+        {subheading && (
+          <p class="text-lg md:text-xl text-muted-foreground">
+            {subheading}
+          </p>
+        )}
+      </div>
+    )}
+
+    <!-- Pricing Cards -->
+    <div class="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto">
+      {displayPlans.map((plan) => (
+        <div
+          class:list={[
+            "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 class="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 class="mb-6">
+            <h3 class:list={["text-lg font-semibold mb-2", plan.featured ? "text-primary-foreground" : "text-foreground"]}>
+              {plan.name}
+            </h3>
+            <div class:list={["text-4xl font-bold mb-2", plan.featured ? "text-primary-foreground" : "text-foreground"]}>
+              {plan.price}
+            </div>
+            <p class:list={["text-sm", plan.featured ? "text-primary-foreground/80" : "text-muted-foreground"]}>
+              {plan.description}
+            </p>
+          </div>
+
+          <!-- Features -->
+          <ul class="space-y-3 mb-8 flex-1">
+            {plan.features.map((feature) => (
+              <li class="flex items-center gap-3">
+                {feature.included ? (
+                  <Check class:list={["h-4 w-4", plan.featured ? "text-primary-foreground" : "text-primary"]} />
+                ) : (
+                  <X class:list={["h-4 w-4", plan.featured ? "text-primary-foreground/50" : "text-muted-foreground"]} />
+                )}
+                <span
+                  class:list={[
+                    "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 -->
+          <a
+            href={plan.link.href}
+            class:list={[
+              "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}
+          </a>
+        </div>
+      ))}
+    </div>
+
+    <!-- View all link -->
+    <div class="text-center mt-8">
+      <a
+        href="/pricing"
+        class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"
+      >
+        View full comparison
+        <span aria-hidden="true">&rarr;</span>
+      </a>
+    </div>
+  </div>
+</section>

package/templates/marketing/astro/src/components/blocks/ProofBanner.astro

@@ -0,0 +1,56 @@
+---
+interface ProofBannerLink {
+  label: string
+  href: string
+  variant: "default" | "outline"
+}
+
+interface Props {
+  headline?: string
+  subtext?: string
+  links?: ProofBannerLink[]
+  style?: "centered" | "left"
+}
+
+const {
+  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",
+} = Astro.props
+---
+
+<section class="py-16 md:py-24">
+  <div class="container mx-auto px-4">
+    <div class:list={["max-w-4xl", style === "centered" ? "mx-auto text-center" : ""]}>
+      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">
+        {headline}
+      </h2>
+      {subtext && (
+        <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+          {subtext}
+        </p>
+      )}
+      {links && links.length > 0 && (
+        <div class:list={["flex flex-wrap gap-4", style === "centered" ? "justify-center" : ""]}>
+          {links.map((link) => (
+            <a
+              href={link.href}
+              class:list={[
+                "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}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+</section>