jigsaw_engine 0.4.0

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

@@ -0,0 +1,125 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { X, Facebook, Linkedin } from "lucide-react";
+
+export default function Component() {
+  const teamMembers = [
+    {
+      name: "Azunyan U. Wu",
+      role: "Founder & CEO",
+      bio: "Former IBM engineer with a passion for building innovative and human-centered software products.",
+      image:
+        "https://plus.unsplash.com/premium_photo-1754211654507-e0a561f6b9c4?q=80&w=721&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      social: {
+        x: "#",
+        facebook: "#",
+        linkedin: "#"
+      }
+    },
+    {
+      name: "Silverstone Gray",
+      role: "Lead Designer",
+      bio: "Creative strategist focused on clean UI and intuitive UX. Believes in the power of simplicity.",
+      image:
+        "https://images.unsplash.com/photo-1754051486494-cfdbf29a589c?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      social: {
+        x: "#",
+        facebook: "#",
+        linkedin: "#"
+      }
+    },
+    {
+      name: "Alan D. Watts",
+      role: "Lead Engineer",
+      bio: "Award-winning developer with a passion for solving complex problems and building scalable systems.",
+      image:
+        "https://images.unsplash.com/photo-1754006320747-a90ba54b93cd?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      social: {
+        x: "#",
+        facebook: "#",
+        linkedin: "#"
+      }
+    },
+    {
+      name: "X_AE_B-15",
+      role: "Facilities Manager",
+      bio: "Behind-the-scenes operator ensuring our workspace runs smoothly and efficiently.",
+      image:
+        "https://images.unsplash.com/photo-1598891960072-675d49bb4242?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      social: {
+        x: "#",
+        facebook: "#",
+        linkedin: "#"
+      }
+    }
+  ];
+
+  return (
+    <section className="py-12 md:py-24 lg:py-28">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="max-w-xl space-y-4">
+            <span className="inline-block rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-600 dark:bg-blue-900 dark:text-blue-200">
+              We&#39;re Hiring!
+            </span>
+            <h2 className="text-3xl leading-tight font-bold md:text-4xl">Let&#39;s Meet Our Team</h2>
+            <p className="text-muted-foreground text-balance lg:text-xl">
+              Gravida in fermentum et sollicitudin ac orci phasellus egestas. Molestie a iaculis at
+              erat pellentesque adipiscing commodo.
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" className="rounded-full px-6 py-3">
+              About Us
+            </Button>
+            <Button className="rounded-full">Job Openings</Button>
+          </div>
+        </div>
+        <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {teamMembers.map((member, index) => (
+            <div key={index} className="flex flex-col items-start gap-4">
+              <div className="relative size-20 overflow-hidden rounded-full">
+                <Image
+                  src={member.image}
+                  alt={`Picture of ${member.name}`}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+              <div className="space-y-1">
+                <h3 className="text-xl font-bold">{member.name}</h3>
+                <p className="font-medium text-indigo-600">{member.role}</p>
+                <p className="text-muted-foreground">{member.bio}</p>
+              </div>
+              <div className="flex gap-3">
+                <Link
+                  href={member.social.x}
+                  className="text-muted-foreground hover:text-gray-900"
+                  prefetch={false}>
+                  <X className="h-5 w-5" />
+                  <span className="sr-only">X (Twitter)</span>
+                </Link>
+                <Link
+                  href={member.social.facebook}
+                  className="text-muted-foreground hover:text-gray-900"
+                  prefetch={false}>
+                  <Facebook className="h-5 w-5" />
+                  <span className="sr-only">Facebook</span>
+                </Link>
+                <Link
+                  href={member.social.linkedin}
+                  className="text-muted-foreground hover:text-gray-900"
+                  prefetch={false}>
+                  <Linkedin className="h-5 w-5" />
+                  <span className="sr-only">LinkedIn</span>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+

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

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

data/app/javascript/seeds/blocks/marketing/team-sections-3/data.js

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

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

@@ -0,0 +1,136 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Linkedin } from "lucide-react";
+
+export default function Component() {
+  const founders = [
+    {
+      name: "Alex Rivera",
+      title: "Founder & CEO",
+      image:
+        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      linkedin: "#",
+    },
+    {
+      name: "Maya Chen",
+      title: "Founder & CEO",
+      image:
+        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      linkedin: "#",
+    },
+    {
+      name: "Jordan Taylor",
+      title: "Founder & CEO",
+      image:
+        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      linkedin: "#",
+    },
+  ];
+
+  const designers = [
+    {
+      name: "Sofia Martinez",
+      title: "Senior Designer",
+      image:
+        "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      linkedin: "#",
+    },
+    {
+      name: "Emma Wilson",
+      title: "Design Director",
+      image:
+        "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      linkedin: "#",
+    },
+    {
+      name: "David Kim",
+      title: "Creative Lead",
+      image:
+        "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      linkedin: "#",
+    },
+  ];
+
+  return (
+    <section className="py-10 lg:py-16">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mb-6 space-y-4 lg:mb-16">
+          <h2 className="text-4xl leading-tight font-bold lg:text-4xl">
+            Our Team
+          </h2>
+          <p className="text-muted-foreground max-w-2xl text-lg">
+            Our diverse team brings together expertise from various design
+            disciplines to provide comprehensive and personalized solutions for
+            our clients.
+          </p>
+        </div>
+
+        <div className="space-y-6 lg:space-y-16">
+          <div className="grid gap-4 lg:grid-cols-3">
+            <h3 className="mb-6 font-serif text-2xl text-balance lg:mb-12 lg:text-3xl">
+              Founders and <br className="hidden lg:block" /> partners
+            </h3>
+            <div className="grid grow gap-8 sm:grid-cols-2 lg:col-span-2 lg:grid-cols-3">
+              {founders.map((member, index) => (
+                <div key={index} className="group relative">
+                  <div className="relative aspect-3/4 w-full overflow-hidden">
+                    <Image
+                      src={member.image}
+                      alt={`Picture of ${member.name}`}
+                      fill
+                      className="object-cover grayscale transition-all duration-300 group-hover:grayscale-0"
+                    />
+                    <Link
+                      href={member.linkedin}
+                      className="bg-background absolute right-4 bottom-4 flex h-8 w-8 items-center justify-center"
+                      prefetch={false}
+                    >
+                      <Linkedin className="h-4 w-4" />
+                      <span className="sr-only">LinkedIn</span>
+                    </Link>
+                  </div>
+                  <div className="mt-4 space-y-1">
+                    <h4 className="text-xl font-medium">{member.name}</h4>
+                    <p className="text-muted-foreground">{member.title}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="grid gap-4 border-t pt-16 lg:grid-cols-3">
+            <h3 className="mb-6 font-serif text-2xl text-balance lg:mb-12 lg:text-3xl">
+              Design excellence
+            </h3>
+            <div className="grid grow gap-8 sm:grid-cols-2 lg:col-span-2 lg:grid-cols-3">
+              {designers.map((member, index) => (
+                <div key={index} className="group relative">
+                  <div className="relative aspect-3/4 w-full overflow-hidden">
+                    <Image
+                      src={member.image}
+                      alt={`Picture of ${member.name}`}
+                      fill
+                      className="object-cover grayscale transition-all duration-300 group-hover:grayscale-0"
+                    />
+                    <Link
+                      href={member.linkedin}
+                      className="bg-background absolute right-4 bottom-4 flex h-8 w-8 items-center justify-center"
+                      prefetch={false}
+                    >
+                      <Linkedin className="h-4 w-4" />
+                      <span className="sr-only">LinkedIn</span>
+                    </Link>
+                  </div>
+                  <div className="mt-4 space-y-1">
+                    <h4 className="text-xl font-medium">{member.name}</h4>
+                    <p className="text-muted-foreground">{member.title}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/team-sections-4/data.js

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

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

@@ -0,0 +1,107 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Twitter, Instagram, Facebook } from "lucide-react";
+
+export default function Component() {
+  const teamMembers = [
+    {
+      name: "Priya Patel",
+      title: "Co-Founder",
+      image:
+        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+    {
+      name: "Harsh Monic",
+      title: "CEO",
+      image:
+        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+    {
+      name: "William Foster",
+      title: "Project Manager",
+      image:
+        "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+  ];
+
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
+          <div className="flex flex-col justify-center space-y-6">
+            <div className="space-y-4">
+              <h2 className="text-4xl leading-tight font-bold text-balance lg:text-4xl">
+                Our Best Working Team
+              </h2>
+              <p className="text-muted-foreground text-lg text-balance">
+                Effective teams communicate openly, leverage strengths, and
+                embrace diversity for success.
+              </p>
+            </div>
+            <Button className="w-fit">Join Our Team</Button>
+          </div>
+
+          <div className="grid gap-6 sm:grid-cols-3">
+            {teamMembers.map((member, index) => (
+              <div
+                key={index}
+                className="bg-card flex flex-col items-center space-y-4 rounded-lg border p-6"
+              >
+                <div className="bg-background relative h-24 w-24 overflow-hidden rounded-lg border">
+                  <Image
+                    src={member.image}
+                    alt={`Picture of ${member.name}`}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+                <div className="space-y-2 text-center">
+                  <h3 className="font-medium">{member.name}</h3>
+                  <p className="text-muted-foreground text-sm">
+                    {member.title}
+                  </p>
+                  <div className="flex items-center justify-center gap-3 pt-2">
+                    <Link
+                      href={member.twitter}
+                      className="text-muted-foreground hover:text-foreground transition-colors"
+                      prefetch={false}
+                    >
+                      <Twitter className="h-4 w-4" />
+                      <span className="sr-only">Twitter</span>
+                    </Link>
+                    <Link
+                      href={member.instagram}
+                      className="text-muted-foreground hover:text-foreground transition-colors"
+                      prefetch={false}
+                    >
+                      <Instagram className="h-4 w-4" />
+                      <span className="sr-only">Instagram</span>
+                    </Link>
+                    <Link
+                      href={member.facebook}
+                      className="text-muted-foreground hover:text-foreground transition-colors"
+                      prefetch={false}
+                    >
+                      <Facebook className="h-4 w-4" />
+                      <span className="sr-only">Facebook</span>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/team-sections-5/data.js

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

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

@@ -0,0 +1,124 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Twitter, Instagram, Facebook } from "lucide-react";
+
+export default function Component() {
+  const teamMembers = [
+    {
+      name: "Sarah Mitchell",
+      title: "Lead Developer",
+      image:
+        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+    {
+      name: "David Chen",
+      title: "Full Stack Engineer",
+      image:
+        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+    {
+      name: "Emma Thompson",
+      title: "UI/UX Designer",
+      image:
+        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+    {
+      name: "Marcus Johnson",
+      title: "DevOps Specialist",
+      image:
+        "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+    {
+      name: "Olivia Martinez",
+      title: "Product Manager",
+      image:
+        "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+    {
+      name: "Ryan Anderson",
+      title: "Backend Architect",
+      image:
+        "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0",
+      twitter: "#",
+      instagram: "#",
+      facebook: "#",
+    },
+  ];
+
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mb-12 text-center">
+          <h2 className="mb-4 text-4xl leading-tight font-bold text-balance lg:text-4xl">
+            Our Development Team
+          </h2>
+          <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
+            Meet our talented developers - a dynamic blend of expertise,
+            innovation, and passion, building exceptional digital experiences
+            together.
+          </p>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-10 sm:gap-20">
+          {teamMembers.map((member, index) => (
+            <div key={index} className="space-y-4">
+              <div className="relative mx-auto size-30 lg:size-48 overflow-hidden rounded-full">
+                <Image
+                  src={member.image}
+                  alt={`Picture of ${member.name}`}
+                  fill
+                  className="object-cover grayscale"
+                />
+              </div>
+              <div className="space-y-2 text-center">
+                <h3 className="md:text-xl font-semibold">{member.name}</h3>
+                <p className="text-muted-foreground text-sm">{member.title}</p>
+                <div className="flex justify-center gap-4 mt-4">
+                  <Link
+                    href={member.twitter}
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                    prefetch={false}
+                  >
+                    <Twitter className="size-4" />
+                    <span className="sr-only">Twitter</span>
+                  </Link>
+                  <Link
+                    href={member.instagram}
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                    prefetch={false}
+                  >
+                    <Instagram className="size-4" />
+                    <span className="sr-only">Instagram</span>
+                  </Link>
+                  <Link
+                    href={member.facebook}
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                    prefetch={false}
+                  >
+                    <Facebook className="size-4" />
+                    <span className="sr-only">Facebook</span>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,112 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
+export default function Component() {
+  const testimonials = [
+    {
+      quote:
+        "This product has revolutionized the way we work. The intuitive interface and powerful features have significantly boosted our productivity.",
+      name: "Sarah Chen",
+      title: "CEO, Tech Solutions",
+      avatar: "/images/avatars/01.png",
+    },
+    {
+      quote:
+        "Outstanding customer support and a truly robust platform. We've seen remarkable improvements since integrating this into our workflow.",
+      name: "Michael Lee",
+      title: "Lead Developer, Innovate Corp",
+      avatar: "/images/avatars/02.png",
+    },
+    {
+      quote:
+        "A game-changer for our business! The scalability and reliability are unmatched, allowing us to focus on growth without technical worries.",
+      name: "Jessica Kim",
+      title: "Marketing Director, Global Brands",
+      avatar: "/images/avatars/03.png",
+    },
+    {
+      quote:
+        "The best investment we've made this year. It's incredibly user-friendly and has exceeded all our expectations.",
+      name: "David Miller",
+      title: "Operations Manager, Future Systems",
+      avatar: "/images/avatars/04.png",
+    },
+    {
+      quote:
+        "Seamless integration and powerful analytics. This tool has given us insights we never had before.",
+      name: "Emily White",
+      title: "Data Scientist, Analytics Hub",
+      avatar: "/images/avatars/05.png",
+    },
+  ];
+
+  return (
+    <section className="py-14 lg:py-24">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          <div className="max-w-xl space-y-2">
+            <h2 className="text-4xl sm:text-4xl font-bold leading-tight">What Our Customers Say</h2>
+            <p className="text-muted-foreground text-balance lg:text-lg">
+              Hear directly from the people who have experienced the impact of
+              our product.
+            </p>
+          </div>
+        </div>
+        <div className="mx-auto max-w-5xl py-12">
+          <Carousel
+            opts={{
+              align: "start",
+              loop: true,
+            }}
+            className="w-full"
+          >
+            <CarouselContent>
+              {testimonials.map((testimonial, index) => (
+                <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+                  <Card className="flex h-full flex-col shadow-none">
+                    <CardContent className="flex grow flex-col items-center justify-between text-center">
+                      <blockquote className="text-muted-foreground leading-snug lg:leading-normal">
+                        &ldquo;{testimonial.quote}&rdquo;
+                      </blockquote>
+                      <div className="mt-6 flex flex-col items-center">
+                        <Avatar className="size-10">
+                          <AvatarImage
+                            src={testimonial.avatar}
+                            alt={`Avatar of ${testimonial.name}`}
+                          />
+                          <AvatarFallback>
+                            {testimonial.name
+                              .split(" ")
+                              .map((n) => n[0])
+                              .join("")}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="mt-4">
+                          <div className="font-semibold">
+                            {testimonial.name}
+                          </div>
+                          <div className="text-muted-foreground text-sm">
+                            {testimonial.title}
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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