jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/marketing/testimonials-10/render.jsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+
+const testimonials = [
+  {
+    quote:
+      "From concept to delivery, the collaboration was seamless. The design direction was exactly what we needed to stand out in a crowded market.",
+    name: "Sarah Mitchell",
+    role: "Marketing Director, Atlas Inc",
+    image: "https://i.pravatar.cc/100?img=20",
+  },
+  {
+    quote:
+      "Working with Hayden was a game-changer for our brand. The new identity he created not only looks fantastic but also resonates deeply with our audience. We've seen a significant increase in engagement since the redesign!",
+    name: "Christopher",
+    role: "CEO at Hungrycorp",
+    image: "https://i.pravatar.cc/100?img=12",
+  },
+  {
+    quote:
+      "Professional, creative, and incredibly responsive. The rebrand exceeded our expectations and our customers have noticed the difference.",
+    name: "James Chen",
+    role: "Founder, Nova Labs",
+    image: "https://i.pravatar.cc/100?img=33",
+  },
+] as const;
+
+export default function TestimonialsSpeechBubble() {
+  const [active, setActive] = useState(1);
+  const current = testimonials[active];
+
+  return (
+    <section className="bg-muted/50 py-16">
+      <div className="mx-auto max-w-3xl px-4 text-center md:px-6">
+        <Badge
+          variant="outline"
+          className="bg-background text-muted-foreground px-3 py-1.5 text-[11px] font-medium tracking-wider uppercase"
+        >
+          Testimonials
+        </Badge>
+
+        <h2 className="mt-5 text-3xl font-bold tracking-tight md:text-4xl">
+          What Clients Are Saying
+        </h2>
+        <p className="text-muted-foreground mt-3 text-base leading-relaxed md:text-lg">
+          Read what they have to say about our collaborations and how my design
+          solutions have helped them connect with their audiences
+        </p>
+
+        <div className="mt-12 flex items-center justify-center gap-8">
+          {testimonials.map((t, i) => (
+            <div key={i} className="relative">
+              <button
+                type="button"
+                onClick={() => setActive(i)}
+                className="relative rounded-full transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                aria-label={`View testimonial by ${t.name}`}
+                aria-current={active === i ? "true" : undefined}
+              >
+                <img
+                  src={t.image}
+                  alt=""
+                  width={72}
+                  height={72}
+                  className={`rounded-full object-cover transition-all ${
+                    active === i
+                      ? "size-16 ring-2 ring-gray-800 ring-offset-2 md:size-20 md:ring-[3px] md:ring-offset-[3px]"
+                      : "size-14 grayscale md:size-16"
+                  }`}
+                  style={
+                    active === i
+                      ? { boxShadow: "0 4px 12px rgba(0,0,0,0.12)" }
+                      : undefined
+                  }
+                />
+              </button>
+              {active === i && (
+                <div
+                  className="border-b-background absolute -bottom-3 left-1/2 z-10 -translate-x-1/2 border-12 border-transparent"
+                  style={{
+                    filter: "drop-shadow(0 -2px 2px rgba(0,0,0,0.06))",
+                  }}
+                  aria-hidden
+                />
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Testimonial card with speech-bubble tail */}
+        <div
+          className="bg-background relative mx-auto mt-3 max-w-2xl rounded-lg px-6 py-8 text-left md:px-10 md:py-10 shadow-lg"
+        >
+          <blockquote className="text-base leading-relaxed md:text-lg">
+            &ldquo;{current.quote}&rdquo;
+          </blockquote>
+          <p className="text-muted-foreground mt-5 text-sm md:text-base">
+            {current.name}, {current.role}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/testimonials-11/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/testimonials-11/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/marketing/testimonials-11/render.jsx

@@ -0,0 +1,79 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+
+const testimonials = [
+  {
+    name: "Darlene Robertson",
+    role: "Co-founder & CEO, Nucanon",
+    image: "https://i.pravatar.cc/100?img=47",
+    quote:
+      "Alpha saved us months of work while upgrading our clusters. It used to take 3 people 4 weeks to do one upgrade. With Alpha, it takes 1 person 1 week. Also, Alpha brings standardization to our upgrade process so I am finally able to delegate upgrades to other team members.",
+  },
+  {
+    name: "Wade Warren",
+    role: "Co-founder & CEO, Nucanon",
+    image: "https://i.pravatar.cc/100?img=33",
+    quote:
+      "Alpha cut our deployment time drastically. What once needed 3 engineers working 2 weeks now takes just 1 engineer in 3 days. Plus, the consistency Alpha adds means I can confidently hand off tasks without constant oversight.",
+  },
+  {
+    name: "Albert Flores",
+    role: "Co-founder & CEO, Nucanon",
+    image: "https://i.pravatar.cc/100?img=12",
+    quote:
+      "Regulatory requirements mandate that we take serious measures to avoid downtime. Alpha enables us to do that. Before Alpha, our upgrade process was risky, fragile and tedious.",
+  },
+  {
+    name: "Jenny Wilson",
+    role: "Co-founder & CEO, Nucanon",
+    image: "https://i.pravatar.cc/100?img=20",
+    quote:
+      "Compliance rules mean we must minimize downtime at all costs. Beta makes that possible. Before Alpha, upgrades felt unreliable, error-prone, and time-consuming.",
+  },
+] as const;
+
+export default function TestimonialsGrid() {
+  return (
+    <section className="py-16 md:py-20">
+      <div className="mx-auto max-w-6xl px-4 md:px-6">
+        <header className="mb-10 space-y-3">
+          <Badge variant="outline">
+            <span
+              className="size-2 rounded-full"
+              style={{ backgroundColor: "#0d9488" }}
+              aria-hidden
+            />
+            Trusted Reliability
+          </Badge>
+          <h2 className="text-3xl md:text-4xl font-bold leading-tight">What Our Users Are Saying</h2>
+          <p className="text-muted-foreground md:text-lg">
+            Trusted by Teams to Drive Safe, Efficient Operations
+          </p>
+        </header>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          {testimonials.map((t, i) => (
+            <Card key={i} className="shadow-none">
+              <CardContent className="flex flex-col items-start space-y-4">
+                <div className="flex items-start gap-3">
+                  <Avatar className="size-10 shrink-0 rounded-full object-cover">
+                    <AvatarImage src={t.image} alt={t.name} />
+                    <AvatarFallback>{t.name.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0">
+                    <p className="font-medium">{t.name}</p>
+                    <p className="text-muted-foreground text-sm">{t.role}</p>
+                  </div>
+                </div>
+                <blockquote className="text-muted-foreground leading-relaxed">
+                  {t.quote}
+                </blockquote>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/testimonials-12/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/testimonials-12/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/marketing/testimonials-12/render.jsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { Quote } from "lucide-react";
+
+const stats = [
+  { value: "10k", label: "Freelancers" },
+  { value: "$10m", label: "Invoices paid" },
+  { value: "500k", label: "Invoices Generated" },
+] as const;
+
+export default function TestimonialsDark() {
+  return (
+    <section
+      className="relative overflow-hidden py-16 md:py-20"
+      style={{ backgroundColor: "#111111" }}
+    >
+      {/* Subtle green gradient bottom-left */}
+      <div
+        className="pointer-events-none absolute bottom-0 left-0 size-80 opacity-30"
+        style={{
+          background:
+            "radial-gradient(circle at 0% 100%, rgba(34, 197, 94, 0.25) 0%, transparent 70%)",
+        }}
+        aria-hidden
+      />
+
+      <div className="relative mx-auto max-w-6xl px-4 md:px-6">
+        <div className="grid gap-8 lg:grid-cols-[1fr_1.1fr] lg:items-start">
+          {/* Left: Heading */}
+          <header className="lg:pt-2">
+            <div className="inline-block rounded-md bg-white/10 px-4 py-2">
+              <span className="text-xs font-medium uppercase tracking-wider text-white">
+                Testimonials
+              </span>
+            </div>
+            <h2 className="mt-6 max-w-lg text-3xl font-bold leading-tight text-white md:text-4xl">
+              We take care of the invoices, and freelancers get to focus on the
+              work they love
+            </h2>
+          </header>
+
+          {/* Right: Testimonials + Image grid — row1: big card | image, row2: small | small */}
+          <div className="grid gap-5 md:grid-cols-2">
+            {/* Large testimonial card */}
+            <article
+              className="flex flex-col overflow-hidden rounded-2xl bg-white sm:flex-row"
+              style={{
+                boxShadow: "0 8px 30px rgba(0, 0, 0, 0.25)",
+              }}
+            >
+              <div className="flex shrink-0 items-center justify-center bg-gray-100 p-6 sm:w-2/5">
+                <img
+                  src="https://i.pravatar.cc/200?img=33"
+                  alt=""
+                  width={160}
+                  height={160}
+                  className="rounded-full object-cover size-32 sm:size-40"
+                />
+              </div>
+              <div className="flex flex-col justify-center p-6 sm:p-8 sm:w-3/5">
+                <Quote
+                  className="text-foreground mb-2 size-10 shrink-0"
+                  strokeWidth={1}
+                  aria-hidden
+                />
+                <blockquote className="text-gray-800 text-base leading-relaxed md:text-[15px]">
+                  &ldquo;I used to dread invoicing. Now it takes me 2 minutes.
+                  InvoiceIt saved me hours every month and I actually get paid
+                  faster because the invoices look so professional.&rdquo;
+                </blockquote>
+                <div className="mt-4">
+                  <p className="font-semibold text-gray-900">Jeff Oyetan</p>
+                  <p className="text-gray-500 text-sm">
+                    Freelance Designer, Lagos
+                  </p>
+                </div>
+              </div>
+            </article>
+
+            {/* Image */}
+            <div className="overflow-hidden rounded-2xl min-h-[280px] md:min-h-[320px]">
+              <img
+                src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&auto=format&fit=crop&q=80"
+                alt=""
+                width={400}
+                height={320}
+                className="size-full object-cover"
+              />
+            </div>
+
+            {/* Small testimonial 1 */}
+            <article
+              className="rounded-2xl bg-white p-5"
+              style={{
+                boxShadow: "0 8px 30px rgba(0, 0, 0, 0.25)",
+              }}
+            >
+              <blockquote className="text-gray-800 text-sm leading-relaxed">
+                &ldquo;The recurring invoice feature is a game-changer. My
+                retainer clients get invoiced automatically. I literally set it
+                once and forget it.&rdquo;
+              </blockquote>
+              <div className="mt-4 flex items-center gap-3">
+                <img
+                  src="https://i.pravatar.cc/100?img=47"
+                  alt=""
+                  width={40}
+                  height={40}
+                  className="size-10 rounded-full object-cover"
+                />
+                <div>
+                  <p className="font-semibold text-gray-900">Sarah Martinez</p>
+                  <p className="text-gray-500 text-sm">
+                    Developer & Consultant
+                  </p>
+                </div>
+              </div>
+            </article>
+
+            {/* Small testimonial 2 */}
+            <article
+              className="rounded-2xl bg-white p-5"
+              style={{
+                boxShadow: "0 8px 30px rgba(0, 0, 0, 0.25)",
+              }}
+            >
+              <blockquote className="text-gray-800 text-sm leading-relaxed">
+                &ldquo;I spend way less time chasing payments now. Everything is
+                clear, professional, and easy for my clients.&rdquo;
+              </blockquote>
+              <div className="mt-4 flex items-center gap-3">
+                <img
+                  src="https://i.pravatar.cc/100?img=15"
+                  alt=""
+                  width={40}
+                  height={40}
+                  className="size-10 rounded-full object-cover"
+                />
+                <div>
+                  <p className="font-semibold text-gray-900">Antonio B.</p>
+                  <p className="text-gray-500 text-sm">
+                    Content Writer, Spain
+                  </p>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        {/* Stats row */}
+        <div className="mt-12 grid gap-4 sm:grid-cols-3">
+          {stats.map((s, i) => (
+            <div
+              key={i}
+              className="rounded-2xl px-6 py-6 text-center"
+              style={{
+                backgroundColor: "#84cc16",
+                boxShadow: "0 4px 14px rgba(132, 204, 22, 0.35)",
+              }}
+            >
+              <p className="text-xl font-bold text-white md:text-2xl">
+                {s.value}
+              </p>
+              <p className="text-white/95 mt-1 text-sm font-medium">
+                {s.label}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/testimonials-13/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/testimonials-13/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/marketing/testimonials-13/render.jsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import { Button } from "@/components/ui/button";
+
+const testimonials = [
+  {
+    quote:
+      "This platform transformed how we work. The team delivered exactly what we needed and the results speak for themselves.",
+    highlightedText: "exactly what we needed",
+    authorName: "Alex Morgan",
+    authorPosition: "Head of Product, TechFlow",
+    authorImage: "https://i.pravatar.cc/100?img=14",
+  },
+  {
+    quote:
+      "Outstanding support and a truly robust product. We've seen remarkable improvements since we started using it.",
+    highlightedText: "remarkable improvements",
+    authorName: "Sarah Chen",
+    authorPosition: "CEO, Tech Solutions",
+    authorImage: "https://i.pravatar.cc/100?img=1",
+  },
+  {
+    quote:
+      "A game-changer for our team. The scalability and reliability are unmatched. Best decision we made this year.",
+    highlightedText: "game-changer",
+    authorName: "Michael Lee",
+    authorPosition: "Lead Developer, Innovate Corp",
+    authorImage: "https://i.pravatar.cc/100?img=2",
+  },
+];
+
+export default function TestimonialCarousel() {
+  const [api, setApi] = useState<CarouselApi>();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setSelectedIndex(api.selectedScrollSnap());
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    const handler = () => onSelect(api);
+    api.on("select", handler);
+    return () => {
+      api.off("select", handler);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <section className="py-16">
+      <div className="mx-auto max-w-7xl px-4 lg:px-8">
+        <Carousel
+          opts={{ align: "start", loop: true }}
+          setApi={setApi}
+          className="w-full"
+        >
+          <CarouselContent>
+            {testimonials.map((t, i) => {
+              const formattedQuote = t.highlightedText
+                ? t.quote.replace(
+                    t.highlightedText,
+                    `<strong class="font-semibold">${t.highlightedText}</strong>`,
+                  )
+                : t.quote;
+              return (
+                <CarouselItem key={i} className="basis-full pl-4 md:pl-6">
+                  <div className="flex flex-col items-center text-center">
+                    <p
+                      className="text-foreground max-w-xl text-balance text-xl sm:text-2xl"
+                      dangerouslySetInnerHTML={{
+                        __html: `"${formattedQuote}"`,
+                      }}
+                    />
+                    <p className="text-muted-foreground mt-5 font-medium">
+                      {t.authorName}
+                    </p>
+                    <p className="text-foreground/40 mt-1.5 font-medium">
+                      {t.authorPosition}
+                    </p>
+                    {t.authorImage && (
+                      <img
+                        src={t.authorImage}
+                        alt=""
+                        width={48}
+                        height={48}
+                        className="bg-muted mt-5 size-12 rounded-full object-cover"
+                      />
+                    )}
+                  </div>
+                </CarouselItem>
+              );
+            })}
+          </CarouselContent>
+
+          <div className="mt-8 flex justify-center gap-2">
+            {testimonials.map((_, i) => (
+              <Button
+                key={i}
+                variant={selectedIndex === i ? "default" : "ghost"}
+                size="icon"
+                className="h-2 w-2 min-h-0 min-w-0 rounded-full p-0 md:h-2.5 md:w-2.5"
+                onClick={() => api?.scrollTo(i)}
+                aria-label={`Go to testimonial ${i + 1}`}
+                aria-current={selectedIndex === i ? "true" : undefined}
+              />
+            ))}
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/testimonials-14/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/testimonials-14/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/marketing/testimonials-14/render.jsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { motion } from "motion/react";
+import { Quote } from "lucide-react";
+
+const testimonials = [
+  {
+    quote:
+      "The team is committed to exceeding expectations. We received candidate profiles the same day, and the selected candidate was onboarded by the end of the week.",
+    name: "James Robinson",
+    position: "VP of HR, Apex Dynamics",
+    image: "https://i.pravatar.cc/100?img=11",
+    bg: "bg-blue-100 dark:bg-blue-950",
+    x: "10%",
+    y: "5%",
+    rotate: -3,
+  },
+  {
+    quote:
+      "Our project timelines were incredibly tight, yet TechWave exceeded our expectations by not only delivering top-tier talent swiftly but also ensuring a seamless onboarding process.",
+    name: "David Mitchell",
+    position: "Project Lead, NexGen",
+    image: "https://i.pravatar.cc/100?img=12",
+    bg: "bg-violet-100 dark:bg-violet-950",
+    x: "45%",
+    y: "0%",
+    rotate: 2,
+  },
+  {
+    quote:
+      "They delivered exactly what we needed — top-quality talent through a free, streamlined process every time.",
+    name: "Emily Carter",
+    position: "Operations Director, Stellar Solutions",
+    image: "https://i.pravatar.cc/100?img=47",
+    bg: "bg-green-100 dark:bg-green-950",
+    x: "0%",
+    y: "35%",
+    rotate: 4,
+  },
+  {
+    quote:
+      "Despite the challenges of a compressed schedule, TechWave not only provided exceptional professionals promptly but also facilitated an effortless integration experience.",
+    name: "Emily Carter",
+    position: "Operations Director, Stellar Solutions",
+    image: "https://i.pravatar.cc/100?img=47",
+    bg: "bg-rose-100 dark:bg-rose-950",
+    x: "8%",
+    y: "55%",
+    rotate: -2,
+  },
+  {
+    quote:
+      "We got the candidate profiles on the same day, and the chosen candidate was fully integrated by the week's end.",
+    name: "Mark Johnson",
+    position: "Talent Specialist, InnovateTech Solutions",
+    image: "https://i.pravatar.cc/100?img=33",
+    bg: "bg-amber-100 dark:bg-amber-950",
+    x: "35%",
+    y: "50%",
+    rotate: 1,
+  },
+  {
+    quote:
+      "The best partner we've worked with. They quickly understood our requirements and delivered talent who are already thriving on our team.",
+    name: "Michael Torres",
+    position: "CEO, Visionary Ventures",
+    image: "https://i.pravatar.cc/100?img=15",
+    bg: "bg-teal-100 dark:bg-teal-950",
+    x: "55%",
+    y: "45%",
+    rotate: -4,
+  },
+] as const;
+
+const BASE_Z = 1;
+const TOP_Z = 100;
+const DRAGGING_Z = 150;
+
+export default function TestimonialsDraggable() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+  const [lastDroppedIndex, setLastDroppedIndex] = useState<number | null>(null);
+
+  return (
+    <section className="py-16">
+      <div className="mx-auto max-w-6xl px-4">
+        <h2 className="text-center text-3xl md:text-4xl font-bold leading-tight">
+          What they say about us
+        </h2>
+
+        <div
+          ref={containerRef}
+          className="relative mt-14 min-h-[520px] md:min-h-[580px]"
+        >
+          {testimonials.map((t, i) => (
+            <motion.div
+              key={i}
+              className={`absolute w-[min(320px,85vw)] max-w-sm cursor-grab rounded-2xl p-4  active:cursor-grabbing ${t.bg}`}
+              style={{
+                left: t.x,
+                top: t.y,
+                rotate: t.rotate,
+                zIndex:
+                  draggingIndex === i
+                    ? DRAGGING_Z
+                    : lastDroppedIndex === i
+                      ? TOP_Z
+                      : BASE_Z + i,
+              }}
+              initial={false}
+              drag
+              dragElastic={0.1}
+              dragMomentum
+              dragConstraints={containerRef}
+              dragTransition={{ bounceStiffness: 300, bounceDamping: 20 }}
+              onDragStart={() => {
+                setLastDroppedIndex(i);
+                setDraggingIndex(i);
+              }}
+              onDragEnd={() => setDraggingIndex(null)}
+              whileDrag={{
+                scale: 1.02,
+                boxShadow: "0 20px 40px rgba(0,0,0,0.15)",
+              }}
+            >
+              <div className="rounded-xl p-4">
+                <Quote
+                  className="text-foreground/70 mb-2 size-10"
+                  strokeWidth={1}
+                  aria-hidden
+                />
+                <blockquote className="text-foreground text-sm leading-relaxed">
+                  &ldquo;{t.quote}&rdquo;
+                </blockquote>
+                <div className="mt-4 flex items-center gap-3">
+                  <img
+                    src={t.image}
+                    alt=""
+                    width={40}
+                    height={40}
+                    className="size-10 rounded-full object-cover"
+                  />
+                  <div>
+                    <p className="font-medium">{t.name}</p>
+                    <p className="text-muted-foreground text-xs">
+                      {t.position}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/testimonials-15/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/testimonials-15/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }