kofi-stack-template-generator 2.1.52 → 2.1.53

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>