jigsaw_engine 0.4.0

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

@@ -0,0 +1,155 @@
+iimport { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Quote } from "lucide-react";
+
+function QuoteIcon({ className }: { className?: string }) {
+  return (
+    <Quote
+      className={`size-10 shrink-0 text-rose-500 ${className}`}
+      strokeWidth={1.5}
+      aria-hidden
+    />
+  );
+}
+
+export default function TestimonialsMasonry() {
+  return (
+    <section className="py-14 md:py-24">
+      <div className="mx-auto max-w-6xl px-4 md:px-6">
+        <header className="mb-14 text-center">
+          <Badge variant="outline" className="mb-4">
+            Testimonials
+          </Badge>
+          <h2 className="text-3xl md:text-4xl font-bold leading-tight">What They Say About Us</h2>
+          <p className="text-muted-foreground mt-3 text-base">
+            Find out how our happy clients are raving about us.
+          </p>
+        </header>
+
+        <div className="grid gap-4 lg:grid-cols-[1fr_1fr]">
+          <Card className="overflow-hidden shadow-none">
+            <CardContent className="flex h-full flex-col gap-4">
+              <div className="flex items-end gap-2">
+                <span className="text-4xl font-bold md:text-5xl">6X</span>
+                <p className="mt-1 font-semibold">
+                  Increase in lead Confidence
+                </p>
+              </div>
+              <QuoteIcon />
+              <p className="text-muted-foreground leading-relaxed">
+                From the very beginning, the team demonstrated a deep
+                understanding of our brand and goals. Their ability to translate
+                our vision into a clean, modern interface was nothing short of
+                impressive. Not only did they meet our expectations—they
+                exceeded them in every way. We&apos;ve already seen a positive
+                impact on user engagement
+              </p>
+              <div className="mt-auto flex items-center gap-3">
+                <Avatar>
+                  <AvatarImage
+                    src="https://i.pravatar.cc/100?img=11"
+                    alt="Sabin Adhikari"
+                  />
+                  <AvatarFallback>SA</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="font-semibold">Sabin Adhikari</p>
+                  <p className="text-muted-foreground text-xs">
+                    Marketing Director, Spotify
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <div className="flex flex-col gap-4">
+            <Card className="overflow-hidden shadow-none">
+              <CardContent className="flex flex-col gap-4">
+                <QuoteIcon />
+                <p className="text-muted-foreground leading-relaxed">
+                  Working with this team has been a game-changer for our
+                  business. Their professionalism, attention to detail, and
+                  consistent delivery exceeded all expectations.
+                </p>
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-3">
+                    <Avatar>
+                      <AvatarImage
+                        src="https://i.pravatar.cc/100?img=12"
+                        alt="Jetha lal Gadha"
+                      />
+                      <AvatarFallback>JG</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="font-semibold">Jetha lal Gadha</p>
+                      <p className="text-muted-foreground text-xs">
+                        Marketing Director, Gadha Electronics
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <div className="grid md:grid-cols-2 gap-4">
+              <Card className="overflow-hidden shadow-none">
+                <CardContent className="flex flex-col gap-4">
+                  <QuoteIcon />
+                  <p className="text-muted-foreground leading-relaxed">
+                    In a fast-paced startup environment, speed and flexibility
+                    are everything. This team delivered both, with no compromise
+                    on quality.
+                  </p>
+                  <div className="flex items-center gap-3">
+                    <Avatar>
+                      <AvatarImage
+                        src="https://i.pravatar.cc/100?img=13"
+                        alt="Bhasme don"
+                      />
+                      <AvatarFallback>Bd</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="font-semibold">Bhasme don</p>
+                      <p className="text-muted-foreground text-xs">
+                        Founder, Candy Crush
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-primary overflow-hidden border-0 shadow-none">
+                <CardContent className="text-primary-foreground flex flex-col gap-4">
+                  <QuoteIcon />
+                  <p className="text-sm leading-relaxed">
+                    Honestly, I wasn&apos;t sure what to expect at first. But
+                    from the initial consultation to the final delivery,
+                    everything was smooth, friendly, and well-organized.
+                  </p>
+                  <div className="flex items-center gap-3">
+                    <Avatar>
+                      <AvatarImage
+                        src="https://i.pravatar.cc/100?img=14"
+                        alt="Rajesh Dai"
+                      />
+                      <AvatarFallback>RD</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="text-background font-semibold">
+                        Rajesh Dai
+                      </p>
+                      <p className="text-background/70 text-xs">
+                        Founder, World
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,102 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+
+const testimonials = [
+  {
+    quote:
+      "Teamway is simply a great solution, quick to get started and find talent, easy to onboard and a perfect solution when you need real flexibility.",
+    name: "Mathias Hany",
+    role: "Co-founder & CEO Google",
+    image: "https://i.pravatar.cc/100?img=33",
+    tags: ["Category", "type", "Tag"],
+    metric: "97%",
+    metricLabel: "Match Rate",
+    gradient: "from-pink-200/80 via-purple-200/50 to-transparent",
+  },
+  {
+    quote:
+      "If hiring great engineers feels tough and time-consuming, try Teamway. Intuitive, fast, and packed with top talent.",
+    name: "Dennis C. Lieber",
+    role: "Head of Product, Amazon",
+    image: "https://i.pravatar.cc/100?img=47",
+    tags: ["Category", "type", "Tag"],
+    metric: "7x",
+    metricLabel: "Faster than traditional hiring",
+    gradient: "from-blue-200/80 via-cyan-200/50 to-transparent",
+  },
+] as const;
+
+export default function TestimonialsIconic() {
+  return (
+    <section className="bg-background py-20">
+      <div className="mx-auto max-w-4xl px-4 md:px-6">
+        <header className="mb-12 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+          <h2 className="text-2xl font-bold tracking-tight md:text-3xl lg:text-4xl">
+            Used by Iconic companies to hire their dream teams.
+          </h2>
+          <Button className="shrink-0" size="lg">
+            Learn More
+            <ArrowRight className="ml-2 size-4" />
+          </Button>
+        </header>
+
+        <div className="flex flex-col gap-6">
+          {testimonials.map((t, i) => (
+            <article
+              key={i}
+              className="relative flex overflow-hidden rounded-2xl border bg-muted/40 shadow-sm"
+            >
+              <div
+                className="absolute inset-0 opacity-[0.03]"
+                style={{
+                  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+                }}
+                aria-hidden
+              />
+              <div className="relative flex w-full flex-col md:flex-row">
+                <div className="flex shrink-0 p-6 md:p-8">
+                  <img
+                    src={t.image}
+                    alt={t.name}
+                    width={120}
+                    height={120}
+                    className="rounded-xl border border-border/60 object-cover size-24 md:size-28"
+                  />
+                </div>
+                <div className="flex min-w-0 flex-1 flex-col justify-center gap-3 px-6 pb-6 md:px-0 md:pb-0 md:pr-0 md:py-8">
+                  <blockquote className="text-foreground text-sm leading-relaxed md:text-base">
+                    &ldquo;{t.quote}&rdquo;
+                  </blockquote>
+                  <div>
+                    <p className="font-semibold">{t.name}</p>
+                    <p className="text-muted-foreground text-sm">{t.role}</p>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {t.tags.map((tag, j) => (
+                      <span
+                        key={j}
+                        className="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <div
+                  className={`flex shrink-0 flex-col justify-center bg-linear-to-l ${t.gradient} px-8 py-6 md:min-w-[140px] md:px-10`}
+                >
+                  <p className="text-2xl font-bold md:text-3xl">{t.metric}</p>
+                  <p className="text-muted-foreground mt-1 text-sm font-medium">
+                    {t.metricLabel}
+                  </p>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,161 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+const testimonials = [
+  {
+    id: 1,
+    quote:
+      "The attention to detail and creative vision transformed our brand identity completely.",
+    author: "Sarah Chen",
+    role: "Creative Director",
+    company: "Studio Forma",
+    image: "https://i.pravatar.cc/100?img=1",
+  },
+  {
+    id: 2,
+    quote:
+      "Working with them felt like a true creative partnership from day one.",
+    author: "Marcus Webb",
+    role: "Head of Design",
+    company: "Minimal Co",
+    image: "https://i.pravatar.cc/100?img=2",
+  },
+  {
+    id: 3,
+    quote:
+      "They understand that great design is invisible yet unforgettable.",
+    author: "Elena Voss",
+    role: "Art Director",
+    company: "Pixel & Co",
+    image: "https://i.pravatar.cc/100?img=3",
+  },
+];
+
+export default function TestimonialsEditorial() {
+  const [active, setActive] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  const handleChange = (index: number) => {
+    if (index === active || isTransitioning) return;
+    setIsTransitioning(true);
+    setTimeout(() => {
+      setActive(index);
+      setTimeout(() => setIsTransitioning(false), 50);
+    }, 300);
+  };
+
+  const handlePrev = () => {
+    const newIndex = active === 0 ? testimonials.length - 1 : active - 1;
+    handleChange(newIndex);
+  };
+
+  const handleNext = () => {
+    const newIndex =
+      active === testimonials.length - 1 ? 0 : active + 1;
+    handleChange(newIndex);
+  };
+
+  const current = testimonials[active];
+
+  return (
+    <div className="mx-auto w-full max-w-2xl px-6 py-16">
+      <div className="flex items-start gap-8">
+        <span
+          className="text-foreground/10 select-none text-[120px] font-light leading-none transition-all duration-500"
+          style={{ fontFeatureSettings: '"tnum"' }}
+        >
+          {String(active + 1).padStart(2, "0")}
+        </span>
+
+        <div className="flex-1 pt-6">
+          <blockquote
+            className={`text-foreground text-2xl font-light leading-relaxed tracking-tight transition-all duration-300 md:text-3xl ${
+              isTransitioning
+                ? "translate-x-4 opacity-0"
+                : "translate-x-0 opacity-100"
+            }`}
+          >
+            {current.quote}
+          </blockquote>
+
+          <div
+            className={`mt-10 cursor-default transition-all duration-300 delay-100 group ${
+              isTransitioning ? "opacity-0" : "opacity-100"
+            }`}
+          >
+            <div className="flex items-center gap-4">
+              <div className="relative size-12 overflow-hidden rounded-full ring-2 ring-foreground/10 transition-all duration-300 group-hover:ring-foreground/30">
+                <Image
+                  src={current.image}
+                  alt={current.author}
+                  fill
+                  className="object-cover grayscale transition-all duration-500 group-hover:grayscale-0"
+                />
+              </div>
+              <div>
+                <p className="text-foreground font-medium">{current.author}</p>
+                <p className="text-muted-foreground text-sm">
+                  {current.role}
+                  <span className="text-foreground/20 mx-2">/</span>
+                  <span className="transition-colors duration-300 group-hover:text-foreground">
+                    {current.company}
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-16 flex items-center justify-between">
+        <div className="flex items-center gap-6">
+          <div className="flex items-center gap-3">
+            {testimonials.map((_, index) => (
+              <button
+                key={testimonials[index].id}
+                type="button"
+                onClick={() => handleChange(index)}
+                className="group relative py-4"
+                aria-label={`Go to testimonial ${index + 1}`}
+              >
+                <span
+                  className={`block h-px transition-all duration-500 ease-out ${
+                    index === active
+                      ? "w-12 bg-foreground"
+                      : "w-6 bg-foreground/20 group-hover:w-8 group-hover:bg-foreground/40"
+                  }`}
+                />
+              </button>
+            ))}
+          </div>
+          <span className="text-muted-foreground text-xs uppercase tracking-widest">
+            {String(active + 1).padStart(2, "0")} /{" "}
+            {String(testimonials.length).padStart(2, "0")}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={handlePrev}
+            className="rounded-full p-2 text-foreground/40 transition-all duration-300 hover:bg-foreground/5 hover:text-foreground"
+            aria-label="Previous testimonial"
+          >
+            <ChevronLeft className="size-5" />
+          </button>
+          <button
+            type="button"
+            onClick={handleNext}
+            className="rounded-full p-2 text-foreground/40 transition-all duration-300 hover:bg-foreground/5 hover:text-foreground"
+            aria-label="Next testimonial"
+          >
+            <ChevronRight className="size-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,195 @@
+"use client";
+
+import { useRef, useState, useCallback } from "react";
+import { Star } from "lucide-react";
+
+const testimonials = [
+  {
+    name: "Ashley Cole",
+    role: "Teacher at Stanford",
+    image: "https://i.pravatar.cc/100?img=20",
+    quote:
+      "Super easy to use and actually works! I've already recommended it to a few friends.",
+  },
+  {
+    name: "Mark Allen",
+    role: "College Professor",
+    image: "https://i.pravatar.cc/100?img=21",
+    quote:
+      "Clean design, fast results. Honestly, one of the best purchases I've made this year.",
+  },
+  {
+    name: "Tyler Durden",
+    role: "Football Coach",
+    image: "https://i.pravatar.cc/100?img=22",
+    quote:
+      "Game-changer. Simple, effective and gets real results. Everyone needs this.",
+  },
+  {
+    name: "Jessica Moore",
+    role: "Marketing Lead",
+    image: "https://i.pravatar.cc/100?img=23",
+    quote:
+      "Exceeded expectations. The team was responsive and the outcome was exactly what we needed.",
+  },
+  {
+    name: "David Park",
+    role: "Software Engineer",
+    image: "https://i.pravatar.cc/100?img=24",
+    quote:
+      "Straightforward setup, great support. Would recommend to anyone looking for a reliable solution.",
+  },
+  {
+    name: "Rachel Green",
+    role: "Product Manager",
+    image: "https://i.pravatar.cc/100?img=25",
+    quote:
+      "Real impact on our workflow. We've seen measurable improvements since day one.",
+  },
+  {
+    name: "Chris Taylor",
+    role: "Operations Director",
+    image: "https://i.pravatar.cc/100?img=26",
+    quote:
+      "Professional from start to finish. Delivered on every promise and then some.",
+  },
+] as const;
+
+const CARD_WIDTH = 320;
+const CARD_GAP = 24;
+
+export default function TestimonialsCarousel() {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const scrollToIndex = useCallback((index: number) => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const card = container.children[index] as HTMLElement;
+    if (card) {
+      card.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+      setActiveIndex(index);
+    }
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const scrollLeft = container.scrollLeft;
+    const cardTotalWidth = CARD_WIDTH + CARD_GAP;
+    const index = Math.round(scrollLeft / cardTotalWidth);
+    setActiveIndex(Math.min(Math.max(0, index), testimonials.length - 1));
+  }, []);
+
+  return (
+    <section className="py-16">
+      <div className="mx-auto max-w-6xl px-4 md:px-6">
+        <header className="mb-14 text-left">
+          <h2 className="text-4xl font-bold tracking-tight  md:text-4xl">
+            Real Words. Real Impact.
+          </h2>
+          <p className="text-gray-500 mt-2 text-lg">
+            Loved by 1000+ Regular Customers around the World.
+          </p>
+        </header>
+
+        <div
+          ref={scrollRef}
+          onScroll={handleScroll}
+          className="flex gap-6 overflow-x-auto pb-2 scroll-snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          style={{ gap: CARD_GAP }}
+        >
+          {testimonials.map((t, i) => {
+            const isDarkCard = i % 2 === 0;
+            return (
+              <article
+                key={i}
+                className="relative flex shrink-0 snap-center overflow-hidden rounded-2xl shadow-lg"
+                style={{
+                  width: CARD_WIDTH,
+                  minWidth: CARD_WIDTH,
+                }}
+              >
+                {/* Top: image filling most of card, name/role overlaid at top */}
+                <div
+                  className="relative h-[240px] w-full overflow-hidden"
+                  style={{
+                    backgroundColor: isDarkCard ? "#1a1a1a" : "#e5e7eb",
+                  }}
+                >
+                  <img
+                    src={t.image}
+                    alt=""
+                    className="absolute inset-0 size-full object-cover object-top"
+                  />
+                  <div
+                    className="absolute inset-0"
+                    style={{
+                      background: isDarkCard
+                        ? "linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 50%)"
+                        : "linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 50%)",
+                    }}
+                  />
+                  <div className="absolute left-0 right-0 top-6 text-center">
+                    <p className="text-lg font-semibold text-white drop-shadow-sm">
+                      {t.name}
+                    </p>
+                    <p className="text-sm text-white/90">{t.role}</p>
+                  </div>
+                </div>
+
+                {/* Bottom: solid dark block with stars + quote */}
+                <div
+                  className="flex flex-col items-center px-5 pb-6 pt-4"
+                  style={{
+                    backgroundColor: isDarkCard ? "#1a1a1a" : "#374151",
+                    minHeight: 140,
+                  }}
+                >
+                  <div className="flex gap-0.5">
+                    {Array.from({ length: 5 }).map((_, j) => (
+                      <Star
+                        key={j}
+                        className="size-5 fill-amber-400 text-amber-400"
+                        aria-hidden
+                      />
+                    ))}
+                  </div>
+                  <blockquote className="mt-3 text-center text-sm leading-relaxed text-white">
+                    &ldquo;{t.quote}&rdquo;
+                  </blockquote>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+
+        {/* Pagination: 7 dots, active darker/filled */}
+        <div className="mt-10 flex justify-center gap-2">
+          {testimonials.map((_, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={() => scrollToIndex(i)}
+              className="rounded-full p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2"
+              aria-label={`Go to testimonial ${i + 1}`}
+              aria-current={activeIndex === i ? "true" : undefined}
+            >
+              <span
+                className={`block rounded-full transition-all ${
+                  activeIndex === i
+                    ? "size-2.5 bg-gray-900"
+                    : "size-2 bg-gray-300 hover:bg-gray-400"
+                }`}
+              />
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/project-management-charts-1/config.json

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

data/app/javascript/seeds/blocks/project-management-charts-1/data.js

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