jigsaw_engine 0.4.0

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

@@ -0,0 +1,167 @@
+import Link from "next/link";
+import { Facebook, Instagram, Twitter, Linkedin, Youtube } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+
+export default function Footer() {
+  return (
+    <footer>
+      <div className="mx-auto max-w-7xl space-y-10 px-4 py-10">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[400px_1fr]">
+          <div className="lg:col-span-1">
+            <h2 className="text-foreground mb-2 text-xl">Shadcn UI Kit</h2>
+            <p className="text-muted-foreground mb-6 text-sm">
+              Join our newsletter to stay up to date on features and releases.
+            </p>
+
+            <div className="max-w-2xl space-y-3">
+              <div className="flex flex-col gap-2 sm:flex-row">
+                <Input
+                  type="email"
+                  placeholder="Enter your email"
+                  className="grow"
+                />
+                <Button variant="outline">Subscribe</Button>
+              </div>
+              <p className="text-muted-foreground text-xs">
+                By subscribing you agree to with our{" "}
+                <Link
+                  href="/privacy"
+                  className="hover:text-foreground underline"
+                >
+                  Privacy Policy
+                </Link>{" "}
+                and provide consent to receive updates from our company.
+              </p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-3 lg:ps-20">
+            {/* Column One */}
+            <div>
+              <h5 className="text-foreground mb-4 font-semibold">Company</h5>
+              <ul className="text-muted-foreground [&_a]:hover:text-foreground space-y-1 [&_a]:text-sm [&_a]:hover:underline">
+                <li>
+                  <Link href="/about">About Us</Link>
+                </li>
+                <li>
+                  <Link href="/careers">Careers</Link>
+                </li>
+                <li>
+                  <Link href="/team">Our Team</Link>
+                </li>
+                <li>
+                  <Link href="/investors">Investors</Link>
+                </li>
+                <li>
+                  <Link href="/news">News</Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* Column Two */}
+            <div>
+              <h5 className="text-foreground mb-4 font-semibold">Products</h5>
+              <ul className="text-muted-foreground [&_a]:hover:text-foreground space-y-1 [&_a]:text-sm [&_a]:hover:underline">
+                <li>
+                  <Link href="/platform">Platform</Link>
+                </li>
+                <li>
+                  <Link href="/analytics">Analytics</Link>
+                </li>
+                <li>
+                  <Link href="/automation">Automation</Link>
+                </li>
+                <li>
+                  <Link href="/integrations">Integrations</Link>
+                </li>
+                <li>
+                  <Link href="/api">API</Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* Follow Us Section */}
+            <div>
+              <h5 className="text-foreground mb-4 font-semibold">Follow us</h5>
+              <ul className="text-muted-foreground [&_a]:hover:text-foreground space-y-2 [&_a]:text-sm [&_a]:hover:underline [&_a]:flex [&_a]:items-center [&_a]:gap-2">
+                <li>
+                  <Link href="https://facebook.com">
+                    <span className="bg-primary flex size-6 items-center justify-center rounded-md">
+                      <Facebook className="text-primary-foreground size-3" />
+                    </span>
+                    Facebook
+                  </Link>
+                </li>
+                <li>
+                  <Link href="https://instagram.com">
+                    <span className="bg-primary flex size-6 items-center justify-center rounded-md">
+                      <Instagram className="text-primary-foreground size-3" />
+                    </span>
+                    Instagram
+                  </Link>
+                </li>
+                <li>
+                  <Link href="https://twitter.com">
+                    <span className="bg-primary flex size-6 items-center justify-center rounded-md">
+                      <Twitter className="text-primary-foreground size-3" />
+                    </span>
+                    Twitter
+                  </Link>
+                </li>
+                <li>
+                  <Link href="https://linkedin.com">
+                    <span className="bg-primary flex size-6 items-center justify-center rounded-md">
+                      <Linkedin className="text-primary-foreground size-3" />
+                    </span>
+                    LinkedIn
+                  </Link>
+                </li>
+                <li>
+                  <Link href="https://youtube.com">
+                    <span className="bg-primary flex size-6 items-center justify-center rounded-md">
+                      <Youtube className="text-primary-foreground size-3" />
+                    </span>
+                    Youtube
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0">
+          {/* Copyright */}
+          <p className="text-muted-foreground text-xs">
+            © {new Date().getFullYear()} Shadcn UI Kit. All rights reserved.
+          </p>
+
+          {/* Legal Links */}
+          <div className="flex space-x-3 text-xs">
+            <Link
+              href="/privacy"
+              className="text-muted-foreground hover:text-foreground hover:underline"
+            >
+              Privacy Policy
+            </Link>
+            <Link
+              href="/terms"
+              className="text-muted-foreground hover:text-foreground hover:underline"
+            >
+              Terms of Service
+            </Link>
+            <Link
+              href="/cookies"
+              className="text-muted-foreground hover:text-foreground hover:underline"
+            >
+              Cookies Settings
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,223 @@
+import React from "react";
+
+export default function Footer5() {
+  return (
+    <div className="bg-black px-4 pt-20">
+      <footer className="mx-auto w-full max-w-[1350px] overflow-hidden rounded-tl-3xl rounded-tr-3xl bg-white px-4 pt-8 font-sans text-black sm:px-8 md:px-16 lg:px-28 lg:pt-12">
+        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-8 md:gap-12 lg:grid-cols-6">
+          <div className="space-y-6 lg:col-span-3">
+            <a href="https://shadcnuikit.com" className="block">
+              <svg
+                width="31"
+                height="33"
+                viewBox="0 0 31 33"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m8.349 4.55 7.098 3.884 7.098-3.885M8.35 27.83v-7.755l-7.1-3.886m28.394 0-7.099 3.885v7.754M1.676 8.658l13.771 7.546 13.77-7.546M15.448 31.25V16.189m14.197 5.976V10.212c0-.524-.147-1.039-.424-1.492a3.1 3.1 0 0 0-1.154-1.093L17.024 1.65a3.3 3.3 0 0 0-1.577-.4 3.3 3.3 0 0 0-1.577.4L2.828 7.627A3.07 3.07 0 0 0 1.674 8.72a2.87 2.87 0 0 0-.424 1.492v11.953c0 .524.147 1.04.424 1.493s.675.83 1.154 1.092l11.042 5.977c.48.262 1.023.4 1.577.4a3.3 3.3 0 0 0 1.577-.4l11.042-5.977c.48-.262.877-.639 1.154-1.092s.423-.969.424-1.493"
+                  stroke="#262626"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </a>
+            <p className="max-w-96 text-sm/6 text-neutral-600">
+              Shadcn UI Kit helps you build faster by transforming your design
+              vision into fully functional, production-ready UI components.
+            </p>
+            <div className="order-1 flex gap-5 md:order-2 md:gap-6">
+              {/* X (Twitter) */}
+              <a href="#" className="text-neutral-600 hover:text-neutral-700">
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+                </svg>
+              </a>
+              {/* Github */}
+              <a href="#" className="text-neutral-600 hover:text-neutral-700">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+                  <path d="M9 18c-4.51 2-5-2-7-2" />
+                </svg>
+              </a>
+              {/* Linkedin */}
+              <a href="#" className="text-neutral-600 hover:text-neutral-700">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+                  <rect width="4" height="12" x="2" y="9" />
+                  <circle cx="4" cy="4" r="2" />
+                </svg>
+              </a>
+              {/* Youtube */}
+              <a href="#" className="text-neutral-600 hover:text-neutral-700">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
+                  <path d="m10 15 5-3-5-3z" />
+                </svg>
+              </a>
+              {/* Instagram */}
+              <a href="#" className="text-neutral-600 hover:text-neutral-700">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+                  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 items-start gap-8 md:grid-cols-3 md:gap-12 lg:col-span-3 lg:gap-28">
+            {/* Products */}
+            <div>
+              <h3 className="mb-4 text-sm font-medium">Products</h3>
+              <ul className="space-y-3 text-sm text-neutral-800">
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Components
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Templates
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Icons
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            {/* Resources */}
+            <div>
+              <h3 className="mb-4 text-sm font-medium">Resources</h3>
+              <ul className="space-y-3 text-sm text-neutral-800">
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Shadcn UI Kit
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Templates
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Components
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Blogs
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Store
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            {/* Company */}
+            <div className="col-span-2 md:col-span-1">
+              <h3 className="mb-4 text-sm font-medium">Company</h3>
+              <ul className="space-y-3 text-sm text-neutral-800">
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    About
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Vision
+                  </a>
+                </li>
+                <li className="flex items-center gap-2">
+                  <a href="#" className="hover:text-neutral-700">
+                    Careers
+                  </a>
+                  <span className="rounded-full border border-neutral-400 bg-neutral-50 px-2 py-0.5 text-[11px] text-neutral-700">
+                    HIRING
+                  </span>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Privacy policy
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-neutral-700">
+                    Contact Us
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-auto mt-12 flex max-w-7xl items-center justify-between border-t border-neutral-300 pt-4">
+          <p className="text-sm text-neutral-600">
+            © 2025 Shadcn UI Kit Design
+          </p>
+          <p className="text-sm text-neutral-600">All right reserved.</p>
+        </div>
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 mx-auto h-full max-h-64 w-full max-w-3xl rounded-full bg-slate-100 blur-[100px]" />
+          <h1 className="mt-6 text-center text-[clamp(3rem,15vw,15rem)] leading-[0.7] font-extrabold text-transparent [-webkit-text-stroke:1px_#D4D4D4]">
+            Shadcn UI Kit
+          </h1>
+        </div>
+      </footer>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,49 @@
+import { ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
+
+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">
+            <div className="relative rounded-full border px-3 py-1 text-sm">
+              Announcing our next round of funding.{" "}
+              <Link href="#" className="font-semibold text-indigo-600">
+                <span aria-hidden="true" className="absolute inset-0" />
+                Read more
+              </Link>
+            </div>
+          </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 />
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,147 @@
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenu,
+} from "@/components/ui/navigation-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { ArrowRight, Menu } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+const NAV_ITEMS = [
+  { label: "Product", href: "#" },
+  { label: "Use cases", href: "#" },
+  { label: "Pricing", href: "#" },
+  { label: "Docs", href: "#" },
+  { label: "Customers", href: "#" },
+];
+
+export default function HeroSection() {
+  return (
+    <>
+      <header className="relative z-10">
+        <nav className="container mx-auto flex items-center justify-between px-4 py-6 md:px-6">
+          <Link href="#" className="flex shrink-0 items-center gap-2">
+            <Image
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCIgd2lkdGg9IjMwMC4wMDAwMDBwdCIgaGVpZ2h0PSIzMDAuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAzMDAuMDAwMDAwIDMwMC4wMDAwMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMzAwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTAgMTUwMCBsMCAtMTUwMCAxNTAwIDAgMTUwMCAwIDAgMTUwMCAwIDE1MDAgLTE1MDAgMCAtMTUwMCAwIDAgLTE1MDB6IG02NDcgMTA2MCBjMzEgLTEyIDE4ODIgLTE4NTYgMTkxNCAtMTkwOCA1NCAtODUgMSAtMjA5IC05NyAtMjI4IC05MSAtMTcgLTMwIC03MSAtMTA1NyA5NTQgLTUzNyA1MzcgLTk1NCA5NjIgLTk2MyA5ODEgLTU2IDExNyA3NiAyNDggMjAzIDIwMXogbTg0NSAtMyBjMTUgLTcgMjYzIC0yNDcgNTUyIC01MzQgNDUxIC00NDkgNTI3IC01MjggNTM2IC01NjMgMTYgLTU4IC0xIC0xMTAgLTUwIC0xNTQgLTM1IC0zMSAtNDcgLTM2IC05MSAtMzYgLTI3IDAgLTYyIDYgLTc3IDE0IC0xNSA4IC0yNjMgMjUxIC01NTEgNTQwIGwtNTI1IDUyNSAtNCA1OCBjLTMgNDkgMCA2NCAyMCA5MyA0MSA2MiAxMjQgODYgMTkwIDU3eiBtODU2IC0xIGMxNSAtOCA3MCAtNTkgMTIzIC0xMTMgMTE2IC0xMTggMTMzIC0xNTQgMTA0IC0yMjkgLTMxIC04MCAtMTM2IC0xMjggLTIwMyAtOTEgLTQ5IDI4IC0yMTIgMTkxIC0yMzMgMjMzIC0zNCA3MiAtOCAxNTEgNjUgMTk1IDM3IDIyIDEwNiAyNSAxNDQgNXogbS0xNjgzIC04NTcgYzE3IC0xMCAyNjIgLTI1MSA1NDcgLTUzNiA1NDggLTU1MCA1MzkgLTUzOSA1MjQgLTYxOCAtMTggLTk2IC0xNDEgLTE1NSAtMjIxIC0xMDcgLTE2IDExIC0yNjUgMjUyIC01NTIgNTM4IC00NjUgNDYxIC01MjMgNTIzIC01MjkgNTU3IC0xNCA4MiAyNyAxNTYgMTAxIDE4MiA0NSAxNiA4NiAxMSAxMzAgLTE2eiBtLTI4IC04MzAgYzMyIC0xMiAyMTggLTE5MSAyMzkgLTIzMSAzMSAtNTkgOSAtMTQ2IC00NyAtMTg3IC0zNSAtMjYgLTkzIC0zNyAtMTM2IC0yNiAtMzAgNyAtMjI2IDE5NCAtMjQ5IDIzNyAtNjAgMTE1IDY5IDI1NCAxOTMgMjA3eiIvPgo8L2c+Cjwvc3ZnPg=="
+              alt="Logo"
+              className="rounded-sm"
+              width={28}
+              height={28}
+            />
+            <span className="text-base font-semibold">Shadcnuikit</span>
+          </Link>
+
+          <NavigationMenu
+            viewport={false}
+            className="hidden max-w-none flex-1 justify-center md:flex"
+          >
+            <NavigationMenuList className="gap-3 text-sm font-medium">
+              {NAV_ITEMS.map((item) => (
+                <NavigationMenuItem key={item.label}>
+                  <NavigationMenuLink
+                    asChild
+                    className="text-muted-foreground hover:text-foreground text-sm font-medium"
+                  >
+                    <Link href={item.href}>{item.label}</Link>
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+              ))}
+            </NavigationMenuList>
+          </NavigationMenu>
+
+          <div className="flex items-center gap-2">
+            <Button size="lg" variant="outline" className="rounded-full">
+              Login
+            </Button>
+            <Button size="lg" className="hidden rounded-full md:inline-flex">
+              Sign up
+            </Button>
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="md:hidden">
+                  <Menu />
+                </Button>
+              </SheetTrigger>
+              <SheetContent
+                side="right"
+                className="flex h-full w-3/4 flex-col px-4 py-6 sm:max-w-xs"
+              >
+                <SheetHeader className="p-0">
+                  <SheetTitle className="text-left font-normal">
+                    Menu
+                  </SheetTitle>
+                </SheetHeader>
+                <nav className="mt-6 space-y-2 text-sm font-medium">
+                  {NAV_ITEMS.map((item) => (
+                    <Link
+                      href={item.href}
+                      className="block py-3 text-left text-sm"
+                    >
+                      {item.label}
+                    </Link>
+                  ))}
+                </nav>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </nav>
+      </header>
+
+      {/* Hero Content */}
+      <div className="container mx-auto flex flex-col items-center space-y-14 px-4 pt-16 text-center md:pt-24">
+        <div className="max-w-3xl">
+          <Link
+            href="#"
+            className="mb-4 inline-flex items-center justify-center"
+          >
+            <Badge
+              variant="outline"
+              className="inline-flex items-center gap-2 rounded-full border px-4 py-1.5 font-medium text-indigo-600 dark:text-indigo-400 hover:bg-muted md:text-sm"
+            >
+              New AI powered customer analytics for SaaS teams
+              <ArrowRight className="size-4" />
+            </Badge>
+          </Link>
+
+          <h1 className="mb-3 text-4xl leading-tight font-bold text-balance md:text-5xl">
+            Turn product data into{" "}
+            <span className="bg-linear-to-r from-indigo-600 via-violet-600 to-purple-600 bg-clip-text text-transparent dark:from-indigo-400 dark:via-violet-400 dark:to-purple-400">
+              revenue growing decisions
+            </span>
+          </h1>
+
+          <p className="text-muted-foreground text-lg leading-relaxed text-balance md:text-xl">
+            Connect your SaaS, billing, and marketing tools into a single
+            workspace. Understand trials, churn, and expansion revenue in
+            minutes not days.
+          </p>
+
+          <div className="mt-10">
+            <Button size="lg">
+              Start Free Trial
+              <ArrowRight />
+            </Button>
+          </div>
+        </div>
+
+        <figure className="relative w-full max-w-5xl overflow-hidden rounded-t-xl">
+          <img
+            src="https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=1600&auto=format&fit=crop"
+            alt="SaaS analytics dashboard on laptop"
+            className="aspect-video w-full object-cover"
+          />
+        </figure>
+      </div>
+    </>
+  );
+}

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

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

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

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