jigsaw_engine 0.4.0

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

@@ -0,0 +1,249 @@
+"use client";
+
+import React from "react";
+import { useMotionValue, animate, motion } from "motion/react";
+import useMeasure from "react-use-measure";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+export type InfiniteSliderProps = {
+  children: React.ReactNode;
+  gap?: number;
+  speed?: number;
+  speedOnHover?: number;
+  direction?: "horizontal" | "vertical";
+  reverse?: boolean;
+  className?: string;
+};
+
+export function MarqueeEffect({
+  children,
+  gap = 16,
+  speed = 100,
+  speedOnHover,
+  direction = "horizontal",
+  reverse = false,
+  className,
+}: InfiniteSliderProps) {
+  const [currentSpeed, setCurrentSpeed] = React.useState(speed);
+  const [ref, { width, height }] = useMeasure();
+  const translation = useMotionValue(0);
+  const [isTransitioning, setIsTransitioning] = React.useState(false);
+  const [key, setKey] = React.useState(0);
+
+  React.useEffect(() => {
+    let controls;
+    const size = direction === "horizontal" ? width : height;
+    const contentSize = size + gap;
+    const from = reverse ? -contentSize / 2 : 0;
+    const to = reverse ? 0 : -contentSize / 2;
+
+    const distanceToTravel = Math.abs(to - from);
+    const duration = distanceToTravel / currentSpeed;
+
+    if (isTransitioning) {
+      const remainingDistance = Math.abs(translation.get() - to);
+      const transitionDuration = remainingDistance / currentSpeed;
+
+      controls = animate(translation, [translation.get(), to], {
+        ease: "linear",
+        duration: transitionDuration,
+        onComplete: () => {
+          setIsTransitioning(false);
+          setKey((prevKey) => prevKey + 1);
+        },
+      });
+    } else {
+      controls = animate(translation, [from, to], {
+        ease: "linear",
+        duration,
+        repeat: Infinity,
+        repeatType: "loop",
+        repeatDelay: 0,
+        onRepeat: () => {
+          translation.set(from);
+        },
+      });
+    }
+
+    return controls?.stop;
+  }, [
+    key,
+    translation,
+    currentSpeed,
+    width,
+    height,
+    gap,
+    isTransitioning,
+    direction,
+    reverse,
+  ]);
+
+  const hoverProps = speedOnHover
+    ? {
+        onHoverStart: () => {
+          setIsTransitioning(true);
+          setCurrentSpeed(speedOnHover);
+        },
+        onHoverEnd: () => {
+          setIsTransitioning(true);
+          setCurrentSpeed(speed);
+        },
+      }
+    : {};
+
+  return (
+    <div className={cn("overflow-hidden", className)}>
+      <motion.div
+        className={cn("flex", { "w-max": direction !== "vertical" })}
+        style={{
+          ...(direction === "horizontal"
+            ? { x: translation }
+            : { y: translation }),
+          gap: `${gap}px`,
+          flexDirection: direction === "horizontal" ? "row" : "column",
+        }}
+        ref={ref}
+        {...hoverProps}
+      >
+        {children}
+        {children}
+      </motion.div>
+    </div>
+  );
+}
+
+const images = [
+  {
+    image:
+      "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1514996937319-344454492b37?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1514996937319-344454492b37?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1522312346375-d1a52e2b99b3?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1523381294911-8d3cead13475?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1528701800489-20be3c30c1d5?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1519741347686-2752c35adf94?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1543076447-215ad9ba6923?auto=format&fit=crop&w=800&q=80",
+  },
+];
+
+export default function HeroSection() {
+  return (
+    <section className="py-10">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="grid items-center lg:grid-cols-2">
+          <header className="relative z-10 mx-auto mb-8 max-w-xl text-center lg:mb-10 lg:text-start">
+            <Link href="#" className="inline-flex">
+              <Badge
+                variant="secondary"
+                className="mb-4 rounded-full px-3 py-1 text-xs font-medium"
+              >
+                New arrivals ready to shop
+              </Badge>
+            </Link>
+            <h3 className="font-bold mb-4 text-4xl text-balance md:text-5xl leading-tight">
+              Discover products you will love
+            </h3>
+            <p className="text-muted-foreground text-balance lg:text-lg">
+              Explore curated collections with fast delivery, easy returns, and
+              prices that feel friendly. Find your next favorite item in a few
+              clicks.
+            </p>
+            <div className="mt-6 flex flex-col items-center justify-center gap-4 sm:flex-row sm:items-stretch lg:justify-start">
+              <div className="flex gap-3">
+                <Button size="lg" className="flex-1">
+                  Browse products
+                  <ArrowRightIcon />
+                </Button>
+                <Button size="lg" variant="outline" className="flex-1">
+                  Explore collections
+                </Button>
+              </div>
+            </div>
+            <div className="mt-10 flex items-center justify-center gap-3 lg:justify-start">
+              <div className="flex -space-x-2">
+                {[1, 2, 3, 4].map((i) => (
+                  <Avatar key={i} className="border-background border-2">
+                    <AvatarImage
+                      src={`https://i.pravatar.cc/80?img=${i + 20}`}
+                      alt="Customer avatar"
+                    />
+                    <AvatarFallback>C{i}</AvatarFallback>
+                  </Avatar>
+                ))}
+              </div>
+              <div className="text-left text-xs sm:text-sm">
+                <p className="font-semibold">More than 25,000 orders shipped</p>
+                <p className="text-muted-foreground">
+                  Shoppers are checking out right now
+                </p>
+              </div>
+            </div>
+          </header>
+          <div className="absolute grid h-96 grid-cols-2 gap-4 overflow-hidden mask-t-from-80% mask-r-from-10% mask-b-from-80% mask-l-from-10% lg:static lg:h-150 lg:mask-r-from-70% lg:mask-l-from-70%">
+            {[
+              {
+                reverse: false,
+              },
+              {
+                reverse: true,
+              },
+            ].map((mq, i) => (
+              <MarqueeEffect
+                key={i}
+                gap={12}
+                direction="vertical"
+                reverse={mq.reverse}
+                speed={30}
+                speedOnHover={1}
+              >
+                {images.slice(i * 3, (i + 1) * 3).map((image, idx) => (
+                  <figure key={idx}>
+                    <img
+                      src={image.image}
+                      className="aspect-square object-cover"
+                    />
+                  </figure>
+                ))}
+              </MarqueeEffect>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/hero-section-2/data.js

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

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

@@ -0,0 +1,94 @@
+import Link from "next/link";
+import { ArrowRightIcon, StarIcon } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+export default function HeroSection() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-14 sm:px-6 sm:py-20 lg:max-w-7xl lg:px-8">
+      <div className="container">
+        <div className="mx-auto max-w-2xl text-center">
+          <div className="hidden sm:mb-4 sm:flex sm:justify-center">
+            <Link
+              href="#"
+              className="hover:bg-muted/50 relative space-x-2 rounded-full border px-2 py-1 text-sm"
+            >
+              <Badge className="rounded-full">New</Badge>
+              <span className="text-muted-foreground">
+                Announcing our next round of funding.
+              </span>
+            </Link>
+          </div>
+          <div className="text-center">
+            <h1 className="text-foreground text-4xl leading-tight font-bold md:text-5xl">
+              Empower Your Creativity with Innovative Tools
+            </h1>
+            <p className="text-muted-foreground mt-4 text-lg leading-relaxed">
+              Unlock your potential with a suite of tools designed to transform
+              your ideas into reality. Create, build, and inspire with ease
+              while achieving stunning results that truly stand out.
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-x-3">
+              <Button size="lg" asChild>
+                <Link href="#">Get started</Link>
+              </Button>
+              <Button
+                size="lg"
+                variant="ghost"
+                className="font-semibold"
+                asChild
+              >
+                <Link href="#">
+                  Learn more <ArrowRightIcon className="size-4" />
+                </Link>
+              </Button>
+            </div>
+            <div className="mx-auto mt-10 flex w-fit flex-col items-center gap-4 sm:flex-row">
+              <span className="inline-flex items-center -space-x-3">
+                <Avatar className="ring-background rounded-full ring-2">
+                  <AvatarImage
+                    src="https://i.pravatar.cc/80?img=1"
+                    alt="User avatar"
+                  />
+                </Avatar>
+                <Avatar className="ring-background rounded-full ring-2">
+                  <AvatarImage
+                    src="https://i.pravatar.cc/80?img=2"
+                    alt="User avatar"
+                  />
+                </Avatar>
+                <Avatar className="ring-background rounded-full ring-2">
+                  <AvatarImage
+                    src="https://i.pravatar.cc/80?img=3"
+                    alt="User avatar"
+                  />
+                </Avatar>
+                <Avatar className="ring-background rounded-full ring-2">
+                  <AvatarImage
+                    src="https://i.pravatar.cc/80?img=4"
+                    alt="User avatar"
+                  />
+                </Avatar>
+              </span>
+              <div className="space-y-1">
+                <div className="flex items-center gap-1">
+                  <StarIcon className="size-4 fill-yellow-400 text-yellow-400" />
+                  <StarIcon className="size-4 fill-yellow-400 text-yellow-400" />
+                  <StarIcon className="size-4 fill-yellow-400 text-yellow-400" />
+                  <StarIcon className="size-4 fill-yellow-400 text-yellow-400" />
+                  <StarIcon className="size-4 fill-yellow-400 text-yellow-400" />
+                  <span className="text-muted-foreground text-xs">5.0</span>
+                </div>
+                <div className="text-muted-foreground text-left text-xs">
+                  from 200+ reviews
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/hero-section-3/data.js

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

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

@@ -0,0 +1,51 @@
+import { ArrowRightIcon, PlayCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+export default function HeroSection() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-14 sm:px-6 sm:py-20 lg:max-w-7xl lg:px-8">
+      <div className="container">
+        <div className="mx-auto max-w-2xl text-center">
+          <div className="hidden sm:mb-4 sm:flex sm:justify-center">
+            <Link
+              href="#"
+              className="hover:bg-muted/50 flex items-center gap-2 rounded-full border px-2 py-1 text-sm"
+            >
+              <Badge>New</Badge>v2.2 is out now!
+              <Link href="#" className="block">
+                <ArrowRightIcon className="ms-1 size-4" />
+              </Link>
+            </Link>
+          </div>
+          <div className="text-center">
+            <h1 className="text-foreground text-4xl leading-tight font-bold md:text-5xl">
+              Empower Your Creativity with{" "}
+              <span className="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-purple-600">
+                <span className="relative text-white">Innovative</span>
+              </span>{" "}
+              Tools
+            </h1>
+            <p className="text-muted-foreground mt-4 text-lg leading-relaxed">
+              Unlock your potential with a suite of tools designed to transform
+              your ideas into reality. Create, build, and inspire with ease
+              while achieving stunning results that truly stand out.
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-x-3">
+              <Button size="lg" asChild>
+                <Link href="#">Get started</Link>
+              </Button>
+              <Button size="lg" variant="secondary" asChild>
+                <Link href="#">
+                  <PlayCircleIcon /> Watch video
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/hero-section-4/data.js

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

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

@@ -0,0 +1,153 @@
+"use client";
+
+import Link from "next/link";
+import { AlignJustify, Plus, Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import Image from "next/image";
+
+const NAV_LINKS = [
+  { label: "Product", href: "#" },
+  { label: "Use cases", href: "#" },
+  { label: "Pricing", href: "#" },
+  { label: "Templates", href: "#" },
+];
+
+const SUGGESTIONS = [
+  "SaaS finance dashboard layout.",
+  "Marketing site for an AI startup.",
+  "Mobile UI for a fitness app.",
+  "Dark mode landing for an agency.",
+];
+
+export default function HeroSection() {
+  return (
+    <section className="flex min-h-screen flex-col items-center justify-between bg-[radial-gradient(125%_125%_at_50%_90%,#ffffff_40%,var(--color-purple-200)_100%)] bg-cover bg-center text-center text-sm max-md:px-4 dark:bg-[radial-gradient(125%_125%_at_50%_90%,var(--color-background)_40%,var(--color-purple-800)_100%)]">
+      <nav className="flex w-full items-center justify-between py-4 md:px-16 lg:px-24 xl:px-32">
+        <Link href="#" className="shrink-0">
+          <Image
+            src="/logo.svg"
+            alt="shadcn ui kit svg logo"
+            width={40}
+            height={40}
+            className="size-7 rounded-sm"
+          />
+          <span className="sr-only">Shadcn UI Kit</span>
+        </Link>
+
+        <NavigationMenu
+          viewport={false}
+          className="hidden max-w-none flex-1 justify-center md:flex"
+        >
+          <NavigationMenuList className="gap-6 text-sm font-medium">
+            {NAV_LINKS.map(({ label, href }) => (
+              <NavigationMenuItem key={label}>
+                <NavigationMenuLink asChild>
+                  <Link href={href}>{label}</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+
+        <div className="flex items-center gap-2">
+          <Button variant="outline" className="rounded-full" size="lg" asChild>
+            <Link href="#">Get Started</Link>
+          </Button>
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="md:hidden"
+                aria-label="Open menu"
+              >
+                <AlignJustify className="size-6" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right">
+              <div className="flex h-full w-full flex-col justify-center gap-6 p-4 text-left text-lg backdrop-blur md:w-[320px]">
+                {NAV_LINKS.map(({ label, href }) => (
+                  <SheetClose key={label} asChild>
+                    <Link href={href} className="font-medium">
+                      {label}
+                    </Link>
+                  </SheetClose>
+                ))}
+                <Button asChild variant="outline" className="rounded-full">
+                  <Link href="#">Get Started</Link>
+                </Button>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </nav>
+
+      <div className="flex w-full max-w-xl flex-1 flex-col items-center justify-center space-y-4">
+        <header className="space-y-3">
+          <h1 className="text-3xl leading-tight font-bold lg:text-4xl">Design interfaces with AI.</h1>
+          <p className="text-muted-foreground text-base">
+            Turn a short prompt into polished, production-ready layouts in
+            seconds.
+          </p>
+        </header>
+        <div className="bg-muted mt-4 w-full space-y-4 overflow-hidden rounded-xl focus-within:ring-2 focus-within:ring-white/40">
+          <Textarea
+            placeholder="Describe the interface you want to design"
+            rows={3}
+            className="min-h-16 resize-none border-0 bg-transparent! p-4 pb-0 shadow-none focus-visible:ring-0"
+          />
+          <div className="flex items-center justify-between px-3 pb-3">
+            <Button
+              variant="outline"
+              size="icon-sm"
+              aria-label="Add"
+              className="rounded-full"
+            >
+              <Plus />
+            </Button>
+            <Button size="icon-sm" aria-label="Send" className="rounded-full">
+              <Send />
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid w-full gap-2 md:mt-4 md:grid-cols-2 md:gap-3">
+          {SUGGESTIONS.map((text, i) => (
+            <Link
+              key={i}
+              href="#"
+              className="hover:text-primary hover:bg-accent/50 block rounded-full border p-2 text-sm"
+            >
+              {text}
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      <p className="text-muted-foreground pb-3 text-xs">
+        By messaging us, you agree to our{" "}
+        <Link href="#" className="hover:text-primary underline">
+          Terms of Use
+        </Link>{" "}
+        and confirm you&apos;ve read our{" "}
+        <Link href="#" className="hover:text-primary underline">
+          Privacy Policy
+        </Link>
+        .
+      </p>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/hero-section-5/data.js

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