jigsaw_engine 0.4.0

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

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Menu } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <nav className="bg-muted h-full pt-4">
+      <div className="container mx-auto max-w-4xl">
+        <div className="bg-background flex h-16 items-center justify-between rounded-lg border px-4">
+          <div className="flex items-center">
+            <Link href="/" className="text-foreground text-xl font-bold">
+              Logo
+            </Link>
+          </div>
+
+          <div className="hidden items-center space-x-8 md:flex">
+            <Link
+              href="#"
+              className="text-muted-foreground hover:text-foreground text-sm font-medium">
+              Features
+            </Link>
+            <Link
+              href="#"
+              className="text-muted-foreground hover:text-foreground text-sm font-medium">
+              Pricing
+            </Link>
+            <Link
+              href="#"
+              className="text-muted-foreground hover:text-foreground text-sm font-medium">
+              About
+            </Link>
+            <Link
+              href="#"
+              className="text-muted-foreground hover:text-foreground text-sm font-medium">
+              Resources
+            </Link>
+          </div>
+
+          {/* Desktop Buttons */}
+          <div className="hidden items-center space-x-3 md:flex">
+            <Button variant="outline" size="sm">
+              Sign In
+            </Button>
+            <Button size="sm">Get Started</Button>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <Sheet open={isOpen} onOpenChange={setIsOpen}>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon" className="md:hidden">
+                <Menu />
+                <span className="sr-only">Toggle menu</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="p-4">
+              <Link href="/" className="text-foreground block text-xl font-bold">
+                Logo
+              </Link>
+
+              <div className="grow space-y-6 overflow-y-auto">
+                <div className="flex flex-col">
+                  <Link href="#" className="py-2" onClick={() => setIsOpen(false)}>
+                    Features
+                  </Link>
+                  <Link href="#" className="py-2" onClick={() => setIsOpen(false)}>
+                    Pricing
+                  </Link>
+                  <Link href="#" className="py-2" onClick={() => setIsOpen(false)}>
+                    About
+                  </Link>
+                  <Link href="#" className="py-2" onClick={() => setIsOpen(false)}>
+                    Resources
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col space-y-3">
+                <Button variant="outline" onClick={() => setIsOpen(false)}>
+                  Sign In
+                </Button>
+                <Button onClick={() => setIsOpen(false)}>Get Started</Button>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </nav>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,246 @@
+"use client";
+
+import { Menu, ShoppingBasket } from "lucide-react";
+import Link from "next/link";
+import React, { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle
+} from "@/components/ui/navigation-menu";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Badge } from "@/components/ui/badge";
+
+const categories: { title: string; href: string; description: string }[] = [
+  {
+    title: "Men",
+    href: "/category/men",
+    description: "Apparel, shoes, and accessories for men."
+  },
+  {
+    title: "Women",
+    href: "/category/women",
+    description: "Stylish and comfortable fashion for women."
+  },
+  {
+    title: "Kids",
+    href: "/category/kids",
+    description: "Fun and functional outfits for kids of all ages."
+  },
+  {
+    title: "Home & Living",
+    href: "/category/home",
+    description: "Decor, kitchenware, and lifestyle products."
+  },
+  {
+    title: "Beauty",
+    href: "/category/beauty",
+    description: "Skin care, cosmetics, and grooming essentials."
+  },
+  {
+    title: "Electronics",
+    href: "/category/electronics",
+    description: "Gadgets, accessories, and smart devices."
+  }
+];
+
+function ListItem({
+  title,
+  children,
+  href,
+  ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+  return (
+    <li {...props}>
+      <NavigationMenuLink asChild>
+        <Link href={href}>
+          <div className="mb-1 text-sm leading-none font-medium">{title}</div>
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">{children}</p>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  );
+}
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <nav className="flex h-16 w-full items-center justify-between border-b p-4">
+      <div className="flex items-center">
+        <Link href="/" className="text-foreground text-xl font-bold">
+          Logo
+        </Link>
+      </div>
+
+      <div className="hidden md:flex">
+        <NavigationMenu viewport={false}>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Shop</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                  <li className="row-span-3">
+                    <NavigationMenuLink asChild>
+                      <Link
+                        className="flex h-full w-full flex-col justify-end rounded-md bg-[url('/images/products/01.jpeg')] bg-cover p-0! no-underline outline-hidden select-none focus:shadow-md"
+                        href="/">
+                        <div className="bg-foreground/30 space-y-2 p-4 text-white backdrop-blur-md">
+                          <div className="font-medium">New Arrivals</div>
+                          <p className="text-sm leading-tight">
+                            Discover the styles in our latest collection.
+                          </p>
+                        </div>
+                      </Link>
+                    </NavigationMenuLink>
+                  </li>
+                  <ListItem href="#" title="Summer Collection">
+                    Lightweight essentials perfect for the warm season.
+                  </ListItem>
+                  <ListItem href="#" title="Accessories">
+                    Complete your look with our stylish bags, jewelry, and more.
+                  </ListItem>
+                  <ListItem href="#" title="Sale">
+                    Shop discounted items before they&#39;re gone.
+                  </ListItem>
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Categories</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid w-[400px] gap-2 md:grid-cols-2 lg:w-[550px]">
+                  {categories.map((category) => (
+                    <ListItem key={category.title} title={category.title} href={category.href}>
+                      {category.description}
+                    </ListItem>
+                  ))}
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Quick Links</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid w-[300px] gap-4">
+                  <li>
+                    <NavigationMenuLink asChild>
+                      <Link href="#">
+                        <div className="font-medium">All Products</div>
+                        <div className="text-muted-foreground">
+                          Browse our full product catalog.
+                        </div>
+                      </Link>
+                    </NavigationMenuLink>
+                    <NavigationMenuLink asChild>
+                      <Link href="#">
+                        <div className="font-medium">FAQs</div>
+                        <div className="text-muted-foreground">Answers to common questions.</div>
+                      </Link>
+                    </NavigationMenuLink>
+                    <NavigationMenuLink asChild>
+                      <Link href="#">
+                        <div className="font-medium">Blog</div>
+                        <div className="text-muted-foreground">
+                          Get inspired by our latest posts.
+                        </div>
+                      </Link>
+                    </NavigationMenuLink>
+                  </li>
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+                <Link href="#">Support</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      <div className="flex items-center space-x-4">
+        <Button variant="outline" size="icon" className="relative" aria-label="Cart">
+          <ShoppingBasket aria-hidden="true" />
+          <Badge className="absolute -end-2 -top-2.5 size-5 rounded-full">5</Badge>
+        </Button>
+        <div className="hidden items-center space-x-4 md:flex">
+          <Button size="sm">Sign In</Button>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon" className="md:hidden">
+              <Menu />
+              <span className="sr-only">Toggle menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="right" className="p-4">
+            <Link href="/" className="text-foreground block text-xl font-bold">
+              Logo
+            </Link>
+
+            <div className="grow space-y-6 overflow-y-auto">
+              <ul className="grid gap-4">
+                <li className="row-span-3">
+                  <Link
+                    className="flex aspect-square w-full flex-col justify-end rounded-md bg-[url('/images/products/01.jpeg')] bg-cover p-0! no-underline outline-hidden select-none focus:shadow-md"
+                    href="/">
+                    <div className="bg-foreground/30 space-y-2 p-4 text-white backdrop-blur-md">
+                      <div className="font-medium">New Arrivals</div>
+                      <p className="text-sm leading-tight">
+                        Discover the styles in our latest collection.
+                      </p>
+                    </div>
+                  </Link>
+                </li>
+                <Link href="#">
+                  <div className="mb-1 text-sm leading-none font-medium">Summer Collection</div>
+                  <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                    Lightweight essentials perfect for the warm season.
+                  </p>
+                </Link>
+                <Link href="#">
+                  <div className="mb-1 text-sm leading-none font-medium">Accessories</div>
+                  <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                    Complete your look with our stylish bags, jewelry, and more.
+                  </p>
+                </Link>
+                <Link href="#">
+                  <div className="mb-1 text-sm leading-none font-medium">Sale</div>
+                  <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                    {" "}
+                    Shop discounted items before they&#39;re gone.
+                  </p>
+                </Link>
+              </ul>
+
+              <div className="flex flex-col space-y-2">
+                <span className="text-muted-foreground py-2 font-medium">Categories</span>
+                <ul className="grid gap-4 md:grid-cols-2">
+                  {categories.map((category) => (
+                    <Link href={category.href} key={category.title}>
+                      <div className="mb-1 text-sm leading-none font-medium">{category.title}</div>
+                      <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                        {category.description}
+                      </p>
+                    </Link>
+                  ))}
+                </ul>
+              </div>
+            </div>
+            <div className="flex flex-col space-y-3">
+              <Button onClick={() => setIsOpen(false)}>Sign In</Button>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </nav>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/newsletter-sections-1/data.js

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

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

@@ -0,0 +1,45 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function Newsletter1() {
+  return (
+    <section className="w-full bg-linear-to-r py-16 lg:py-24">
+      <div className="container mx-auto flex flex-col items-center justify-center space-y-6 px-4 text-center md:px-6">
+        <div className="max-w-xl">
+          <h2 className="text-3xl font-bold leading-tight md:text-4xl">Join Our Community</h2>
+          <p className="text-muted-foreground mt-4 md:text-lg">
+            Subscribe to our newsletter to get the latest updates, exclusive
+            content, and special offers directly in your inbox.
+          </p>
+        </div>
+        <div className="w-full max-w-md">
+          <Card className="w-full max-w-md">
+            <CardHeader className="space-y-1">
+              <CardTitle className="text-2xl">
+                Subscribe to our Newsletter
+              </CardTitle>
+              <CardDescription>
+                Stay up-to-date with our latest news and exclusive offers.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-4">
+              <Input id="email" type="email" placeholder="you@example.com" />
+            </CardContent>
+            <CardFooter>
+              <Button className="w-full">Subscribe</Button>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/newsletter-sections-2/data.js

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

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

@@ -0,0 +1,55 @@
+iimport { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { CheckCircle } from "lucide-react";
+
+export default function Newsletter4() {
+  return (
+    <section className="px-4 py-20">
+      <Card className="mx-auto max-w-3xl overflow-hidden shadow-none">
+        <div className="grid w-full grid-cols-1 items-center justify-center gap-8 p-6 md:grid-cols-2">
+          <div>
+            <CardHeader className="p-0">
+              <CardTitle className="text-2xl leading-tight font-bold">
+                Unlock exclusive content
+              </CardTitle>
+              <p className="text-muted-foreground text-sm">
+                Sign up and get benefits like:
+              </p>
+            </CardHeader>
+            <CardContent className="mt-4 p-0">
+              <ul className="space-y-2" role="list">
+                {[
+                  "Exclusive tutorials",
+                  "Product news",
+                  "Member-only discounts",
+                ].map((benefit) => (
+                  <li key={benefit} className="flex items-start gap-2 text-sm">
+                    <CheckCircle
+                      className="text-primary size-4 shrink-0"
+                      strokeWidth={2}
+                    />
+                    <span>{benefit}</span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </div>
+          <form className="grid w-full gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="email3">Email</Label>
+              <Input
+                id="email3"
+                type="email"
+                placeholder="Enter your email"
+                required
+              />
+            </div>
+            <Button type="submit">Subscribe</Button>
+          </form>
+        </div>
+      </Card>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export default function NewsletterSection() {
+  return (
+    <footer>
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between space-y-4 px-4 py-10 md:flex-row lg:space-y-8 lg:py-16">
+        <div className="mb-8 lg:mb-0 lg:max-w-md">
+          <h3 className="text-foreground mb-2 text-2xl">Join our newsletter</h3>
+          <p className="text-muted-foreground text-sm text-balance">
+            Stay updated with the latest news, insights, and exclusive offers
+            delivered straight to your inbox.
+          </p>
+        </div>
+
+        <div className="w-full lg:w-auto">
+          <div className="flex gap-2">
+            <Input
+              type="email"
+              placeholder="Enter your email"
+              className="min-w-[280px] flex-1"
+            />
+            <Button className="whitespace-nowrap">Subscribe</Button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/pricing-table-1/data.js

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

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

@@ -0,0 +1,110 @@
+import { CircleCheck } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export default function PricingSection() {
+  const plans = [
+    {
+      id: "starter",
+      name: "Starter",
+      description: "Perfect for startups and small teams",
+      price: "$29",
+      features: [
+        "Up to 10 team members",
+        "Access to all core features",
+        "Email support",
+        "5GB cloud storage",
+      ],
+      button: {
+        text: "Get Started",
+        url: "",
+      },
+    },
+    {
+      id: "growth",
+      name: "Growth",
+      description: "For growing businesses needing more power",
+      price: "$79",
+      features: [
+        "Unlimited team members",
+        "Advanced analytics",
+        "Priority email & chat support",
+        "Unlimited cloud storage",
+      ],
+      button: {
+        text: "Get Started",
+        url: "",
+      },
+    },
+  ];
+
+  return (
+    <section className="py-12 lg:py-20">
+      <div className="container mx-auto px-4">
+        <div className="mx-auto flex max-w-3xl flex-col items-center space-y-6 text-center lg:space-y-8">
+          <header className="mb-10 space-y-4">
+            <h2 className="text-3xl leading-tight font-bold text-balance lg:text-4xl">
+              Flexible Plans for Every Stage
+            </h2>
+            <p className="text-muted-foreground text-balance lg:text-lg">
+              Whether you&#39;re just starting out or scaling fast, we’ve got a
+              plan that fits your needs.
+            </p>
+          </header>
+
+          <div className="flex flex-col items-stretch gap-6 md:flex-row">
+            {plans.map((plan) => (
+              <Card
+                key={plan.id}
+                className="flex w-80 flex-col justify-between text-left shadow-none"
+              >
+                <CardHeader>
+                  <CardTitle>
+                    <p>{plan.name}</p>
+                  </CardTitle>
+                  <p className="text-muted-foreground text-sm">
+                    {plan.description}
+                  </p>
+                  <div className="flex items-end">
+                    <span className="text-3xl font-bold lg:text-4xl">
+                      {plan.price}
+                    </span>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <Separator className="mb-6" />
+                  <ul className="space-y-4">
+                    {plan.features.map((feature, index) => (
+                      <li
+                        key={index}
+                        className="flex items-center gap-2 text-sm"
+                      >
+                        <CircleCheck className="size-4" />
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+                <CardFooter className="mt-auto">
+                  <Button asChild className="w-full">
+                    <a href={plan.button.url} target="_blank">
+                      {plan.button.text}
+                    </a>
+                  </Button>
+                </CardFooter>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/pricing-table-2/data.js

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