jigsaw_engine 0.4.0

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

@@ -0,0 +1,109 @@
+i"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+const testimonials = [
+  {
+    quote:
+      "I can't recommend Credenza enough! Their lending solutions have made it easier for us to manage customer applications and approvals, resulting in faster turnaround times and happier clients.",
+    name: "William Ashford",
+    position: "Co-Founder, Asterisk Inc",
+    avatar: "https://i.pravatar.cc/150?img=12",
+  },
+  {
+    quote:
+      "Exceptional service from start to finish. The team understood our needs and delivered a solution that exceeded our expectations.",
+    name: "Sarah Chen",
+    position: "CEO, TechFlow",
+    avatar: "https://i.pravatar.cc/150?img=5",
+  },
+  {
+    quote:
+      "A game-changer for our operations. We've seen measurable improvements in efficiency and client satisfaction since we started working with them.",
+    name: "Marcus Webb",
+    position: "Operations Director, NexGen",
+    avatar: "https://i.pravatar.cc/150?img=33",
+  },
+] as const;
+
+export default function TestimonialsTwoColumn() {
+  const [active, setActive] = useState(0);
+  const current = testimonials[active];
+
+  const goPrev = () =>
+    setActive((i) => (i === 0 ? testimonials.length - 1 : i - 1));
+  const goNext = () =>
+    setActive((i) => (i === testimonials.length - 1 ? 0 : i + 1));
+
+  return (
+    <section className="py-16">
+      <div className="mx-auto max-w-6xl px-4 lg:px-8">
+        <div className="grid gap-12 lg:grid-cols-2">
+          <div className="space-y-4">
+            <h2 className="text-3xl leading-tight font-bold">
+              What Our Clients Are Saying
+            </h2>
+            <p className="text-muted-foreground leading-relaxed">
+              We take pride in delivering exceptional solutions that deliver
+              great results. But don&apos;t just take our word for it.
+            </p>
+            <Button variant="outline">
+              View All Testimonials
+              <ChevronRight />
+            </Button>
+          </div>
+
+          <div className="relative">
+            <AnimatePresence mode="wait" initial={false}>
+              <motion.div
+                key={active}
+                initial={{ opacity: 0, y: 3 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -3 }}
+                transition={{ duration: 0.3, ease: "easeInOut" }}
+              >
+                <blockquote className="md:text-xl/relaxed">
+                  &ldquo;{current.quote}&rdquo;
+                </blockquote>
+                <div className="mt-6 flex items-center gap-3">
+                  <Avatar>
+                    <AvatarImage src={current.avatar} alt={current.name} />
+                    <AvatarFallback>{current.name.slice(0, 2)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className="font-medium">{current.name}</p>
+                    <p className="text-muted-foreground text-sm">
+                      {current.position}
+                    </p>
+                  </div>
+                </div>
+              </motion.div>
+            </AnimatePresence>
+            <div className="mt-8 flex justify-end gap-2">
+              <Button
+                variant="secondary"
+                size="icon"
+                onClick={goPrev}
+                aria-label="Previous testimonial"
+              >
+                <ChevronLeft />
+              </Button>
+              <Button
+                variant="secondary"
+                size="icon"
+                onClick={goNext}
+                aria-label="Next testimonial"
+              >
+                <ChevronRight />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+const testimonials = [
+  {
+    quote:
+      "Exceptional service and dedication. The team brought our vision to life and exceeded all expectations.",
+    name: "Alex Turner",
+    role: "CEO at VentureLabs",
+    image: "https://i.pravatar.cc/100?img=1",
+  },
+  {
+    quote:
+      "Creative solutions, fast delivery, and outstanding professionalism. Highly recommend working with them.",
+    name: "Julia Williams",
+    role: "Marketing Director at Creatify",
+    image: "https://i.pravatar.cc/100?img=2",
+  },
+  {
+    quote:
+      "An innovative approach and seamless communication. We achieved our goals sooner thanks to their expertise.",
+    name: "Samuel Lee",
+    role: "Product Owner at NexGen",
+    image: "https://i.pravatar.cc/100?img=3",
+  },
+];
+
+export default function TestimonialsMinimal() {
+  const [active, setActive] = useState(0);
+
+  return (
+    <div className="mx-auto w-full max-w-xl px-6 py-16">
+      <div className="relative mb-12 min-h-[80px]">
+        {testimonials.map((t, i) => (
+          <p
+            key={i}
+            className={`text-foreground absolute inset-0 text-xl leading-relaxed font-light transition-all duration-500 ease-out md:text-2xl ${
+              active === i
+                ? "blur-0 translate-y-0 opacity-100"
+                : "pointer-events-none translate-y-4 opacity-0 blur-sm"
+            } `}
+          >
+            "{t.quote}"
+          </p>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-6">
+        <div className="flex -space-x-2">
+          {testimonials.map((t, i) => (
+            <button
+              key={i}
+              onClick={() => setActive(i)}
+              className={`ring-background relative h-10 w-10 overflow-hidden rounded-full ring-2 transition-all duration-300 ease-out ${active === i ? "z-10 scale-110" : "grayscale hover:scale-105 hover:grayscale-0"} `}
+            >
+              <Image src={t.image} alt={t.name} fill className="object-cover" />
+            </button>
+          ))}
+        </div>
+
+        <div className="bg-border h-8 w-px" />
+
+        <div className="relative min-h-[44px] flex-1">
+          {testimonials.map((t, i) => (
+            <div
+              key={i}
+              className={`absolute inset-0 flex flex-col justify-center transition-all duration-400 ease-out ${active === i ? "translate-x-0 opacity-100" : "pointer-events-none -translate-x-2 opacity-0"} `}
+            >
+              <span className="text-foreground text-sm font-medium">
+                {t.name}
+              </span>
+              <span className="text-muted-foreground text-xs">{t.role}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,149 @@
+i"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+const testimonials = [
+  {
+    text: "The professionalism and swift, solution-oriented approach of your team have dramatically increased our project efficiency.",
+    image: "https://i.pravatar.cc/100?img=30",
+    name: "Olivia Carter",
+    role: "Project Manager",
+  },
+  {
+    text: "Your technical expertise and continuous support have become invaluable. The user-friendly solutions made our work so much easier.",
+    image: "https://i.pravatar.cc/100?img=22",
+    name: "James Smith",
+    role: "Software Developer",
+  },
+  {
+    text: "The robust and flexible infrastructure fully met our needs. We felt in control of the entire process.",
+    image: "https://i.pravatar.cc/100?img=41",
+    name: "Sophia Lee",
+    role: "Operations Director",
+  },
+  {
+    text: "Your outstanding customer service and professional team exceeded our expectations in every way.",
+    image: "https://i.pravatar.cc/100?img=27",
+    name: "Michael Johnson",
+    role: "General Manager",
+  },
+  {
+    text: "Thanks to the fast integration and simple interface, our team adapted quickly and now works seamlessly together.",
+    image: "https://i.pravatar.cc/100?img=19",
+    name: "Ava Williams",
+    role: "Customer Relations Specialist",
+  },
+  {
+    text: "The support we received helped us achieve significant improvements in our business processes. Thank you!",
+    image: "https://i.pravatar.cc/100?img=17",
+    name: "Emma Brown",
+    role: "HR Specialist",
+  },
+  {
+    text: "It's a joy to work with such functional features and a responsive team.",
+    image: "https://i.pravatar.cc/100?img=23",
+    name: "William Davis",
+    role: "Marketing Director",
+  },
+  {
+    text: "Your comprehensive reporting and analytics tools have sped up our decision-making.",
+    image: "https://i.pravatar.cc/100?img=36",
+    name: "Emily Wilson",
+    role: "Sales Manager",
+  },
+  {
+    text: "Your solution-driven approach and effective communication made you a vital partner in our digital transformation.",
+    image: "https://i.pravatar.cc/100?img=26",
+    name: "Benjamin Miller",
+    role: "E-commerce Manager",
+  },
+] as const;
+
+const firstColumn = testimonials.slice(0, 3);
+const secondColumn = testimonials.slice(3, 6);
+const thirdColumn = testimonials.slice(6, 9);
+
+function TestimonialsColumn(props: {
+  className?: string;
+  testimonials: readonly (typeof testimonials)[number][];
+  duration?: number;
+}) {
+  return (
+    <div className={props.className}>
+      <motion.div
+        animate={{ translateY: "-50%" }}
+        transition={{
+          duration: props.duration ?? 10,
+          repeat: Infinity,
+          ease: "linear",
+          repeatType: "loop",
+        }}
+        className="bg-background flex flex-col gap-4 pb-6"
+      >
+        {[
+          ...new Array(2).fill(0).map((_, index) => (
+            <React.Fragment key={index}>
+              {props.testimonials.map(({ text, image, name, role }, i) => (
+                <Card className="w-full max-w-xs shadow-none">
+                  <CardContent className="flex flex-col gap-5">
+                    <div>{text}</div>
+                    <div className="flex items-center gap-3">
+                      <img
+                        width={40}
+                        height={40}
+                        src={image}
+                        alt={name}
+                        className="rounded-full"
+                      />
+                      <div className="flex flex-col space-y-0.5">
+                        <span className="leading-5 font-medium tracking-tight">
+                          {name}
+                        </span>
+                        <span className="text-sm leading-5 tracking-tight opacity-60">
+                          {role}
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </React.Fragment>
+          )),
+        ]}
+      </motion.div>
+    </div>
+  );
+}
+
+export default function Testimonials() {
+  return (
+    <section className="py-10">
+      <div className="mx-auto max-w-7xl">
+        <header className="flex mb-12 flex-col items-center justify-center space-y-2">
+          <Badge variant="outline">Testimonials</Badge>
+          <h2 className="text-4xl lg:text-4xl font-bold leading-tight">What our users say</h2>
+          <p className="text-center text-muted-foreground">
+            See what our customers have to say about us.
+          </p>
+        </header>
+
+        <div className="flex max-h-[740px] justify-center gap-4 overflow-hidden mask-[linear-gradient(to_bottom,transparent,black_25%,black_75%,transparent)]">
+          <TestimonialsColumn testimonials={firstColumn} duration={15} />
+          <TestimonialsColumn
+            testimonials={secondColumn}
+            className="hidden md:block"
+            duration={19}
+          />
+          <TestimonialsColumn
+            testimonials={thirdColumn}
+            className="hidden lg:block"
+            duration={17}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,148 @@
+"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+const testimonials = [
+  {
+    text: "The professionalism and swift, solution-oriented approach of your team have dramatically increased our project efficiency.",
+    image: "https://i.pravatar.cc/100?img=30",
+    name: "Olivia Carter",
+    role: "Project Manager",
+  },
+  {
+    text: "Your technical expertise and continuous support have become invaluable. The user-friendly solutions made our work so much easier.",
+    image: "https://i.pravatar.cc/100?img=22",
+    name: "James Smith",
+    role: "Software Developer",
+  },
+  {
+    text: "The robust and flexible infrastructure fully met our needs. We felt in control of the entire process.",
+    image: "https://i.pravatar.cc/100?img=41",
+    name: "Sophia Lee",
+    role: "Operations Director",
+  },
+  {
+    text: "Your outstanding customer service and professional team exceeded our expectations in every way.",
+    image: "https://i.pravatar.cc/100?img=27",
+    name: "Michael Johnson",
+    role: "General Manager",
+  },
+  {
+    text: "Thanks to the fast integration and simple interface, our team adapted quickly and now works seamlessly together.",
+    image: "https://i.pravatar.cc/100?img=19",
+    name: "Ava Williams",
+    role: "Customer Relations Specialist",
+  },
+  {
+    text: "The support we received helped us achieve significant improvements in our business processes. Thank you!",
+    image: "https://i.pravatar.cc/100?img=17",
+    name: "Emma Brown",
+    role: "HR Specialist",
+  },
+  {
+    text: "It's a joy to work with such functional features and a responsive team.",
+    image: "https://i.pravatar.cc/100?img=23",
+    name: "William Davis",
+    role: "Marketing Director",
+  },
+  {
+    text: "Your comprehensive reporting and analytics tools have sped up our decision-making.",
+    image: "https://i.pravatar.cc/100?img=36",
+    name: "Emily Wilson",
+    role: "Sales Manager",
+  },
+  {
+    text: "Your solution-driven approach and effective communication made you a vital partner in our digital transformation.",
+    image: "https://i.pravatar.cc/100?img=26",
+    name: "Benjamin Miller",
+    role: "E-commerce Manager",
+  },
+] as const;
+
+const firstColumn = testimonials.slice(0, 4);
+const secondColumn = testimonials.slice(4, 8);
+
+function TestimonialsColumn(props: {
+  className?: string;
+  testimonials: readonly (typeof testimonials)[number][];
+  duration?: number;
+}) {
+  return (
+    <div className={props.className}>
+      <motion.div
+        animate={{ translateY: "-50%" }}
+        transition={{
+          duration: props.duration ?? 10,
+          repeat: Infinity,
+          ease: "linear",
+          repeatType: "loop",
+        }}
+        className="flex flex-col gap-4"
+      >
+        {[
+          ...new Array(2).fill(0).map((_, index) => (
+            <React.Fragment key={index}>
+              {props.testimonials.map(({ text, image, name, role }, i) => (
+                <Card className="w-full max-w-xs shadow-none">
+                  <CardContent className="flex flex-col gap-5">
+                    <div>{text}</div>
+                    <div className="flex items-center gap-3">
+                      <img
+                        width={40}
+                        height={40}
+                        src={image}
+                        alt={name}
+                        className="rounded-full"
+                      />
+                      <div className="flex flex-col space-y-0.5">
+                        <span className="leading-5 font-medium tracking-tight">
+                          {name}
+                        </span>
+                        <span className="text-sm leading-5 tracking-tight opacity-60">
+                          {role}
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </React.Fragment>
+          )),
+        ]}
+      </motion.div>
+    </div>
+  );
+}
+
+export default function Testimonials() {
+  return (
+    <section className="bg-background py-20">
+      <div className="mx-auto max-w-7xl px-4 md:px-6">
+        <div className="grid gap-12 lg:grid-cols-[1fr_1.2fr] lg:items-center">
+          <div className="flex max-w-2xl mx-auto flex-col justify-center space-y-4">
+            <Badge variant="secondary">Community</Badge>
+            <h2 className="text-4xl lg:text-4xl font-bold leading-tight">
+              We believe in the power of community
+            </h2>
+            <p className="text-muted-foreground leading-relaxed">
+              Our goal is to create a product and service that you're satisfied
+              with and use it every day. This is why we're constantly working on
+              our services to make it better every day and really listen to what
+              our users has to say.
+            </p>
+            <Button className="w-fit">Read more testimonials</Button>
+          </div>
+
+          <div className="flex max-h-[740px] justify-center gap-4 overflow-hidden mask-[linear-gradient(to_bottom,transparent,black_25%,black_75%,transparent)]">
+            <TestimonialsColumn testimonials={firstColumn} duration={15} />
+            <TestimonialsColumn testimonials={secondColumn} duration={19} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,153 @@
+"use client";
+
+import { Star } from "lucide-react";
+import { motion } from "motion/react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+const testimonials = [
+  {
+    text: "The professionalism and swift, solution-oriented approach of your team have dramatically increased our project efficiency.",
+    image: "https://i.pravatar.cc/100?img=30",
+    name: "Olivia Carter",
+    role: "Project Manager",
+    rating: 5,
+  },
+  {
+    text: "Your technical expertise and continuous support have become invaluable. The user-friendly solutions made our work so much easier.",
+    image: "https://i.pravatar.cc/100?img=22",
+    name: "James Smith",
+    role: "Software Developer",
+    rating: 5,
+  },
+  {
+    text: "The robust and flexible infrastructure fully met our needs. We felt in control of the entire process.",
+    image: "https://i.pravatar.cc/100?img=41",
+    name: "Sophia Lee",
+    role: "Operations Director",
+    rating: 4,
+  },
+  {
+    text: "Your outstanding customer service and professional team exceeded our expectations in every way.",
+    image: "https://i.pravatar.cc/100?img=27",
+    name: "Michael Johnson",
+    role: "General Manager",
+    rating: 5,
+  },
+  {
+    text: "Thanks to the fast integration and simple interface, our team adapted quickly and now works seamlessly together.",
+    image: "https://i.pravatar.cc/100?img=19",
+    name: "Ava Williams",
+    role: "Customer Relations Specialist",
+    rating: 5,
+  },
+  {
+    text: "The support we received helped us achieve significant improvements in our business processes. Thank you!",
+    image: "https://i.pravatar.cc/100?img=17",
+    name: "Emma Brown",
+    role: "HR Specialist",
+    rating: 4,
+  },
+  {
+    text: "It's a joy to work with such functional features and a responsive team.",
+    image: "https://i.pravatar.cc/100?img=23",
+    name: "William Davis",
+    role: "Marketing Director",
+    rating: 5,
+  },
+  {
+    text: "Your comprehensive reporting and analytics tools have sped up our decision-making.",
+    image: "https://i.pravatar.cc/100?img=36",
+    name: "Emily Wilson",
+    role: "Sales Manager",
+    rating: 4,
+  },
+  {
+    text: "Your solution-driven approach and effective communication made you a vital partner in our digital transformation.",
+    image: "https://i.pravatar.cc/100?img=26",
+    name: "Benjamin Miller",
+    role: "E-commerce Manager",
+    rating: 5,
+  },
+] as const;
+
+function StarRating({ rating }: { rating: number }) {
+  return (
+    <div className="flex gap-0.5" aria-label={`${rating} out of 5 stars`}>
+      {[1, 2, 3, 4, 5].map((star) => (
+        <Star
+          key={star}
+          className={
+            star <= rating
+              ? "size-4 fill-amber-500 text-amber-500"
+              : "fill-muted text-muted size-4"
+          }
+        />
+      ))}
+    </div>
+  );
+}
+
+export default function Testimonials() {
+  return (
+    <section className="py-12 lg:py-24">
+      <div className="mx-auto max-w-7xl px-4">
+        <header className="flex max-w-2xl flex-col justify-center space-y-4">
+          <Badge variant="secondary">Community</Badge>
+          <h2 className="text-4xl lg:text-4xl font-bold leading-tight">
+            We believe in the power of community
+          </h2>
+          <p className="text-muted-foreground leading-relaxed">
+            Our goal is to create a product and service that you're satisfied
+            with and use it every day. This is why we're constantly working on
+            our services to make it better every day and really listen to what
+            our users has to say.
+          </p>
+          <Button className="w-fit">Read more testimonials</Button>
+        </header>
+      </div>
+
+      <div className="mt-10 mask-x-from-75% mask-x-to-90%">
+        <motion.div
+          animate={{ translateX: "-50%" }}
+          transition={{
+            duration: 15,
+            repeat: Infinity,
+            ease: "linear",
+            repeatType: "loop",
+          }}
+          className="flex gap-4"
+        >
+          {testimonials.map(({ text, image, name, role, rating }, i) => (
+            <Card key={i} className="w-72 shrink-0 shadow-none">
+              <CardContent className="flex flex-col gap-5">
+                <div className="space-y-3">
+                  <StarRating rating={rating} />
+                  <p className="text-muted-foreground">{text}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <img
+                    width={40}
+                    height={40}
+                    src={image}
+                    alt={name}
+                    className="rounded-full"
+                  />
+                  <div className="flex flex-col space-y-0.5">
+                    <span className="leading-5 font-medium tracking-tight">
+                      {name}
+                    </span>
+                    <span className="text-sm leading-5 tracking-tight opacity-60">
+                      {role}
+                    </span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

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

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

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