kofi-stack-template-generator 2.1.51 → 2.1.53

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>

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

@@ -0,0 +1,106 @@
+---
+interface Testimonial {
+  stat: string
+  statLabel: string
+  quote: string
+  author: string
+  company: string
+}
+
+interface Props {
+  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",
+  },
+]
+
+const {
+  heading = "Loved by teams at companies of all sizes",
+  subheading = "See how leading teams use SaaSify to drive growth and productivity.",
+  testimonials = defaultTestimonials,
+} = Astro.props
+
+const displayTestimonials = testimonials.length > 0 ? testimonials : defaultTestimonials
+---
+
+<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>
+    )}
+
+    <!-- Testimonials Grid -->
+    <div class="grid md:grid-cols-3 gap-6 lg:gap-8">
+      {displayTestimonials.map((testimonial) => (
+        <div class="relative bg-card border border-border rounded-2xl p-6 md:p-8">
+          <!-- Stat -->
+          <div class="mb-6">
+            <div class="text-4xl md:text-5xl font-bold text-primary mb-1">
+              {testimonial.stat}
+            </div>
+            <p class="text-sm font-medium text-muted-foreground">
+              {testimonial.statLabel}
+            </p>
+          </div>
+
+          <!-- Quote -->
+          <blockquote class="text-foreground mb-6">
+            "{testimonial.quote}"
+          </blockquote>
+
+          <!-- Author -->
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
+              <span class="text-sm font-medium">
+                {testimonial.author.split(" ").map((n) => n[0]).join("")}
+              </span>
+            </div>
+            <div>
+              <p class="text-sm font-medium text-foreground">
+                {testimonial.author}
+              </p>
+              <p class="text-sm text-muted-foreground">
+                {testimonial.company}
+              </p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,88 @@
+---
+import { Zap, Plug, Database, Cloud, Shield, Lock, Award, Globe } from "lucide-astro"
+
+interface TrustItem {
+  icon: string
+  text: string
+}
+
+interface TrustColumn {
+  label: string
+  heading: string
+  description: string
+  items: TrustItem[]
+}
+
+interface Props {
+  columns?: TrustColumn[]
+}
+
+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" },
+    ],
+  },
+]
+
+const { columns = defaultColumns } = Astro.props
+
+const displayColumns = columns.length > 0 ? columns : defaultColumns
+---
+
+<section class="py-16 md:py-24">
+  <div class="container mx-auto px-4">
+    <div class="grid md:grid-cols-2 gap-12 lg:gap-16">
+      {displayColumns.map((column) => (
+        <div>
+          <span class="inline-block text-sm font-medium text-primary mb-4">
+            {column.label}
+          </span>
+          <h2 class="text-2xl md:text-3xl font-bold tracking-tight mb-4">
+            {column.heading}
+          </h2>
+          <p class="text-muted-foreground mb-8">
+            {column.description}
+          </p>
+
+          <ul class="space-y-4">
+            {column.items.map((item) => (
+              <li class="flex items-center gap-3">
+                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                  {item.icon === "zap" && <Zap class="h-4 w-4 text-primary" />}
+                  {item.icon === "plug" && <Plug class="h-4 w-4 text-primary" />}
+                  {item.icon === "database" && <Database class="h-4 w-4 text-primary" />}
+                  {item.icon === "cloud" && <Cloud class="h-4 w-4 text-primary" />}
+                  {item.icon === "shield" && <Shield class="h-4 w-4 text-primary" />}
+                  {item.icon === "lock" && <Lock class="h-4 w-4 text-primary" />}
+                  {item.icon === "award" && <Award class="h-4 w-4 text-primary" />}
+                  {item.icon === "globe" && <Globe class="h-4 w-4 text-primary" />}
+                </div>
+                <span class="text-sm font-medium">
+                  {item.text}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>