jigsaw_engine 0.4.0

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

@@ -0,0 +1,306 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "motion/react";
+import { AlignJustify, ArrowRight, Star } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuLink,
+} from "@/components/ui/navigation-menu";
+import Image from "next/image";
+
+const TypescriptIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+    <path fill="#fff" d="M22.67 47h99.67v73.67H22.67z" />
+    <path
+      data-name="original"
+      fill="#007acc"
+      d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z"
+    />
+  </svg>
+);
+
+const ReactIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+    <g fill="#61DAFB">
+      <circle cx="64" cy="64" r="11.4" />
+      <path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z" />
+    </g>
+  </svg>
+);
+
+const TailwindIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+    <path
+      d="M64.004 25.602c-17.067 0-27.73 8.53-32 25.597 6.398-8.531 13.867-11.73 22.398-9.597 4.871 1.214 8.352 4.746 12.207 8.66C72.883 56.629 80.145 64 96.004 64c17.066 0 27.73-8.531 32-25.602-6.399 8.536-13.867 11.735-22.399 9.602-4.87-1.215-8.347-4.746-12.207-8.66-6.27-6.367-13.53-13.738-29.394-13.738zM32.004 64c-17.066 0-27.73 8.531-32 25.602C6.402 81.066 13.87 77.867 22.402 80c4.871 1.215 8.352 4.746 12.207 8.66 6.274 6.367 13.536 13.738 29.395 13.738 17.066 0 27.73-8.53 32-25.597-6.399 8.531-13.867 11.73-22.399 9.597-4.87-1.214-8.347-4.746-12.207-8.66C55.128 71.371 47.868 64 32.004 64zm0 0"
+      fill="#38bdf8"
+    />
+  </svg>
+);
+
+const NextjsIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="dark:invert"
+    viewBox="0 0 128 128"
+  >
+    <path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64c11.2 0 21.7-2.9 30.8-7.9L48.4 55.3v36.6h-6.8V41.8h6.8l50.5 75.8C116.4 106.2 128 86.5 128 64c0-35.3-28.7-64-64-64zm22.1 84.6l-7.5-11.3V41.8h7.5v42.8z" />
+  </svg>
+);
+
+const VitejsIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+    <defs>
+      <linearGradient
+        id="a"
+        x1="6"
+        x2="235"
+        y1="33"
+        y2="344"
+        gradientTransform="translate(0 .937) scale(.3122)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stop-color="#41d1ff" />
+        <stop offset="1" stop-color="#bd34fe" />
+      </linearGradient>
+      <linearGradient
+        id="b"
+        x1="194.651"
+        x2="236.076"
+        y1="8.818"
+        y2="292.989"
+        gradientTransform="translate(0 .937) scale(.3122)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stop-color="#ffea83" />
+        <stop offset=".083" stop-color="#ffdd35" />
+        <stop offset="1" stop-color="#ffa800" />
+      </linearGradient>
+    </defs>
+    <path
+      fill="url(#a)"
+      d="M124.766 19.52 67.324 122.238c-1.187 2.121-4.234 2.133-5.437.024L3.305 19.532c-1.313-2.302.652-5.087 3.261-4.622L64.07 25.187a3.09 3.09 0 0 0 1.11 0l56.3-10.261c2.598-.473 4.575 2.289 3.286 4.594Zm0 0"
+    />
+    <path
+      fill="url(#b)"
+      d="M91.46 1.43 48.954 9.758a1.56 1.56 0 0 0-1.258 1.437l-2.617 44.168a1.563 1.563 0 0 0 1.91 1.614l11.836-2.735a1.562 1.562 0 0 1 1.88 1.836l-3.517 17.219a1.562 1.562 0 0 0 1.985 1.805l7.308-2.223c1.133-.344 2.223.652 1.985 1.812l-5.59 27.047c-.348 1.692 1.902 2.614 2.84 1.164l.625-.968 34.64-69.13c.582-1.16-.421-2.48-1.69-2.234l-12.185 2.352a1.558 1.558 0 0 1-1.793-1.965l7.95-27.562A1.56 1.56 0 0 0 91.46 1.43Zm0 0"
+    />
+  </svg>
+);
+
+const NAV_LINKS = [
+  { label: "Home", href: "#" },
+  { label: "How it works", href: "#" },
+  { label: "Features", href: "#" },
+  { label: "Integrations", href: "#" },
+];
+
+export default function HeroSection() {
+  return (
+    <>
+      <header className="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-4 pt-4">
+        <nav className="bg-accent dark:bg-accent/50 flex w-full items-center justify-between rounded-full px-6 py-3">
+          <Link href="#" className="shrink-0">
+            <Image
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCIgd2lkdGg9IjMwMC4wMDAwMDBwdCIgaGVpZ2h0PSIzMDAuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAzMDAuMDAwMDAwIDMwMC4wMDAwMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMzAwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTAgMTUwMCBsMCAtMTUwMCAxNTAwIDAgMTUwMCAwIDAgMTUwMCAwIDE1MDAgLTE1MDAgMCAtMTUwMCAwIDAgLTE1MDB6IG02NDcgMTA2MCBjMzEgLTEyIDE4ODIgLTE4NTYgMTkxNCAtMTkwOCA1NCAtODUgMSAtMjA5IC05NyAtMjI4IC05MSAtMTcgLTMwIC03MSAtMTA1NyA5NTQgLTUzNyA1MzcgLTk1NCA5NjIgLTk2MyA5ODEgLTU2IDExNyA3NiAyNDggMjAzIDIwMXogbTg0NSAtMyBjMTUgLTcgMjYzIC0yNDcgNTUyIC01MzQgNDUxIC00NDkgNTI3IC01MjggNTM2IC01NjMgMTYgLTU4IC0xIC0xMTAgLTUwIC0xNTQgLTM1IC0zMSAtNDcgLTM2IC05MSAtMzYgLTI3IDAgLTYyIDYgLTc3IDE0IC0xNSA4IC0yNjMgMjUxIC01NTEgNTQwIGwtNTI1IDUyNSAtNCA1OCBjLTMgNDkgMCA2NCAyMCA5MyA0MSA2MiAxMjQgODYgMTkwIDU3eiBtODU2IC0xIGMxNSAtOCA3MCAtNTkgMTIzIC0xMTMgMTE2IC0xMTggMTMzIC0xNTQgMTA0IC0yMjkgLTMxIC04MCAtMTM2IC0xMjggLTIwMyAtOTEgLTQ5IDI4IC0yMTIgMTkxIC0yMzMgMjMzIC0zNCA3MiAtOCAxNTEgNjUgMTk1IDM3IDIyIDEwNiAyNSAxNDQgNXogbS0xNjgzIC04NTcgYzE3IC0xMCAyNjIgLTI1MSA1NDcgLTUzNiA1NDggLTU1MCA1MzkgLTUzOSA1MjQgLTYxOCAtMTggLTk2IC0xNDEgLTE1NSAtMjIxIC0xMDcgLTE2IDExIC0yNjUgMjUyIC01NTIgNTM4IC00NjUgNDYxIC01MjMgNTIzIC01MjkgNTU3IC0xNCA4MiAyNyAxNTYgMTAxIDE4MiA0NSAxNiA4NiAxMSAxMzAgLTE2eiBtLTI4IC04MzAgYzMyIC0xMiAyMTggLTE5MSAyMzkgLTIzMSAzMSAtNTkgOSAtMTQ2IC00NyAtMTg3IC0zNSAtMjYgLTkzIC0zNyAtMTM2IC0yNiAtMzAgNyAtMjI2IDE5NCAtMjQ5IDIzNyAtNjAgMTE1IDY5IDI1NCAxOTMgMjA3eiIvPgo8L2c+Cjwvc3ZnPg=="
+              alt="Logo"
+              className="rounded-md"
+              width={32}
+              height={32}
+            />
+            <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-4 text-sm font-medium">
+              {NAV_LINKS.map(({ label, href }) => (
+                <NavigationMenuItem key={label}>
+                  <NavigationMenuLink className="hover:underline" asChild>
+                    <Link href={href}>{label}</Link>
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+              ))}
+            </NavigationMenuList>
+          </NavigationMenu>
+
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" className="rounded-full" asChild>
+              <Link href="#">Login</Link>
+            </Button>
+            <Button className="rounded-full" asChild>
+              <Link href="#">Start Free Trial</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="#">Start Free Trial</Link>
+                  </Button>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </nav>
+      </header>
+
+      <section className="mx-auto grid max-w-7xl gap-12 px-6 py-14 lg:grid-cols-2 lg:items-center lg:py-32">
+        <div className="flex flex-col items-center gap-4 text-center lg:items-start lg:text-start">
+          <Link href="#">
+            <Badge
+              variant="secondary"
+              className="rounded-full bg-indigo-50 px-2 py-1 font-normal text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950 dark:text-indigo-200"
+            >
+              <span className="mr-2 rounded-full bg-indigo-600 px-2 py-0.5 text-[10px] font-bold tracking-wider text-white uppercase">
+                New
+              </span>
+              Try 30 days free trial option{" "}
+              <ArrowRight className="ml-1 size-3" />
+            </Badge>
+          </Link>
+
+          <h1 className="text-4xl leading-tight font-bold lg:text-5xl text-balance">
+            Automation that delivers real results
+          </h1>
+
+          <p className="text-lg text-balance">
+            No complexity. No noise. Just clean, reliable automation to boost
+            your team&apos;s efficiency.
+          </p>
+
+          <div className="mt-4 flex w-full max-w-md items-center gap-2 rounded-full border p-1">
+            <Input
+              type="email"
+              placeholder="Enter your email"
+              className="border-0 bg-transparent! shadow-none placeholder:text-neutral-700 focus-visible:ring-0"
+            />
+            <Button className="rounded-full">Subscribe now</Button>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <div className="flex -space-x-2">
+              {[1, 2, 3].map((i) => (
+                <Avatar key={i} className="border-background border-2">
+                  <AvatarImage
+                    src={`https://i.pravatar.cc/100?img=${i + 10}`}
+                  />
+                  <AvatarFallback>U{i}</AvatarFallback>
+                </Avatar>
+              ))}
+            </div>
+            <div className="flex flex-col space-y-1 text-sm">
+              <div className="flex text-amber-500">
+                {[1, 2, 3, 4, 5].map((i) => (
+                  <Star key={i} className="size-3.5 fill-current" />
+                ))}
+              </div>
+              <span className="text-muted-foreground text-xs">
+                Used by 10,000+ users
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative flex min-h-[500px] items-center justify-center">
+          {/* Guidelines */}
+          <div className="absolute size-[200px] rounded-full border opacity-75" />
+          <div className="absolute size-[400px] rounded-full border opacity-75" />
+
+          {/* Center Logo */}
+          <div className="relative z-10 flex size-16 items-center justify-center rounded-full border">
+            <Image
+              src="/logo.svg"
+              alt="logo"
+              width={40}
+              height={40}
+              className="rounded-full"
+            />
+          </div>
+
+          {/* Inner Orbit */}
+          <motion.div
+            className="absolute flex size-[200px] items-center justify-center rounded-full"
+            animate={{ rotate: 360 }}
+            transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
+          >
+            <motion.div
+              className="bg-background absolute top-0 left-1/2 flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border p-3"
+              animate={{ rotate: -360 }}
+              transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
+            >
+              <ReactIcon />
+            </motion.div>
+            <motion.div
+              className="bg-background absolute bottom-0 left-1/2 flex size-16 -translate-x-1/2 translate-y-1/2 items-center justify-center rounded-full border p-2"
+              animate={{ rotate: -360 }}
+              transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
+            >
+              <TailwindIcon />
+            </motion.div>
+          </motion.div>
+
+          {/* Outer Orbit */}
+          <motion.div
+            className="absolute flex size-[400px] items-center justify-center rounded-full"
+            animate={{ rotate: -360 }}
+            transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
+          >
+            <motion.div
+              className="bg-background absolute top-0 left-1/2 flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border p-3.5"
+              animate={{ rotate: 360 }}
+              transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
+            >
+              <TypescriptIcon />
+            </motion.div>
+            <motion.div
+              className="bg-background absolute top-[75%] left-[93.3%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border p-3"
+              animate={{ rotate: 360 }}
+              transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
+            >
+              <VitejsIcon />
+            </motion.div>
+            <motion.div
+              className="bg-background absolute top-[75%] left-[6.7%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border p-2"
+              animate={{ rotate: 360 }}
+              transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
+            >
+              <NextjsIcon />
+            </motion.div>
+          </motion.div>
+        </div>
+      </section>
+    </>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,103 @@
+import { Menu } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+export default function HeroSection() {
+  return (
+    <section className="bg-muted dark:bg-muted/20">
+      <header className="mx-auto max-w-5xl lg:px-4 lg:pt-6">
+        <nav className="bg-background flex items-center justify-between px-6 py-3 backdrop-blur-md lg:rounded-full">
+          <Link href="/">
+            <Image
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCIgd2lkdGg9IjMwMC4wMDAwMDBwdCIgaGVpZ2h0PSIzMDAuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAzMDAuMDAwMDAwIDMwMC4wMDAwMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMzAwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTAgMTUwMCBsMCAtMTUwMCAxNTAwIDAgMTUwMCAwIDAgMTUwMCAwIDE1MDAgLTE1MDAgMCAtMTUwMCAwIDAgLTE1MDB6IG02NDcgMTA2MCBjMzEgLTEyIDE4ODIgLTE4NTYgMTkxNCAtMTkwOCA1NCAtODUgMSAtMjA5IC05NyAtMjI4IC05MSAtMTcgLTMwIC03MSAtMTA1NyA5NTQgLTUzNyA1MzcgLTk1NCA5NjIgLTk2MyA5ODEgLTU2IDExNyA3NiAyNDggMjAzIDIwMXogbTg0NSAtMyBjMTUgLTcgMjYzIC0yNDcgNTUyIC01MzQgNDUxIC00NDkgNTI3IC01MjggNTM2IC01NjMgMTYgLTU4IC0xIC0xMTAgLTUwIC0xNTQgLTM1IC0zMSAtNDcgLTM2IC05MSAtMzYgLTI3IDAgLTYyIDYgLTc3IDE0IC0xNSA4IC0yNjMgMjUxIC01NTEgNTQwIGwtNTI1IDUyNSAtNCA1OCBjLTMgNDkgMCA2NCAyMCA5MyA0MSA2MiAxMjQgODYgMTkwIDU3eiBtODU2IC0xIGMxNSAtOCA3MCAtNTkgMTIzIC0xMTMgMTE2IC0xMTggMTMzIC0xNTQgMTA0IC0yMjkgLTMxIC04MCAtMTM2IC0xMjggLTIwMyAtOTEgLTQ5IDI4IC0yMTIgMTkxIC0yMzMgMjMzIC0zNCA3MiAtOCAxNTEgNjUgMTk1IDM3IDIyIDEwNiAyNSAxNDQgNXogbS0xNjgzIC04NTcgYzE3IC0xMCAyNjIgLTI1MSA1NDcgLTUzNiA1NDggLTU1MCA1MzkgLTUzOSA1MjQgLTYxOCAtMTggLTk2IC0xNDEgLTE1NSAtMjIxIC0xMDcgLTE2IDExIC0yNjUgMjUyIC01NTIgNTM4IC00NjUgNDYxIC01MjMgNTIzIC01MjkgNTU3IC0xNCA4MiAyNyAxNTYgMTAxIDE4MiA0NSAxNiA4NiAxMSAxMzAgLTE2eiBtLTI4IC04MzAgYzMyIC0xMiAyMTggLTE5MSAyMzkgLTIzMSAzMSAtNTkgOSAtMTQ2IC00NyAtMTg3IC0zNSAtMjYgLTkzIC0zNyAtMTM2IC0yNiAtMzAgNyAtMjI2IDE5NCAtMjQ5IDIzNyAtNjAgMTE1IDY5IDI1NCAxOTMgMjA3eiIvPgo8L2c+Cjwvc3ZnPg=="
+              alt="Logo"
+              className="rounded-md"
+              width={32}
+              height={32}
+            />
+          </Link>
+
+          <div className="hidden items-center gap-8 md:flex">
+            {["Services", "Reviews", "Pricing", "Projects", "Contact Us"].map(
+              (item) => (
+                <Link
+                  key={item}
+                  href="#"
+                  className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
+                >
+                  {item}
+                </Link>
+              ),
+            )}
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Button className="rounded-full" size="lg">
+              Get Started
+            </Button>
+            <Button variant="ghost" className="md:hidden">
+              <Menu />
+            </Button>
+          </div>
+        </nav>
+      </header>
+
+      {/* Hero Content */}
+      <div className="container mx-auto flex flex-col items-center justify-center space-y-8 px-4 py-20 text-center md:py-32 lg:space-y-16">
+        <div className="mx-auto max-w-3xl space-y-4">
+          <Badge
+            variant="outline"
+            className="bg-background inline-flex gap-2 px-3 py-1"
+          >
+            <span className="inline-flex size-2 animate-pulse rounded-full bg-green-600"></span>
+            <span className="text-muted-foreground text-sm">
+              Join 12,450+ brands growing with us
+            </span>
+          </Badge>
+
+          <h1 className="text-4xl leading-tight font-bold text-balance lg:text-5xl">
+            Websites built to perform beautifully.
+          </h1>
+          <p className="text-muted-foreground text-balance md:text-lg">
+            We design high-impact websites that convert and scale. From sleek
+            interfaces to full stack experiences, we bring your brand to life
+            online.
+          </p>
+
+          <div className="mt-6 flex justify-center gap-3 lg:mt-8">
+            <Button size="lg">Get Started </Button>
+            <Button size="lg" variant="outline">
+              Book a demo
+            </Button>
+          </div>
+        </div>
+
+        {/* Gradient Line */}
+        <div className="via-primary/30 dark:via-primary/30 h-px w-full max-w-3xl bg-linear-to-r from-transparent to-transparent"></div>
+
+        {/* Stats */}
+        <div className="grid w-full max-w-4xl grid-cols-2 gap-4 md:grid-cols-4 lg:gap-6">
+          {[
+            { value: "20+", label: "Years Experience" },
+            { value: "12k+", label: "Projects Completed" },
+            { value: "5k+", label: "Happy Customers" },
+            { value: "5+", label: "Countries" },
+          ].map((stat, index) => (
+            <div
+              key={index}
+              className="bg-background flex flex-col items-center gap-2 rounded-lg py-8"
+            >
+              <span className="text-3xl font-bold">{stat.value}</span>
+              <span className="text-muted-foreground text-sm">
+                {stat.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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