jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/ecommerce/product-category-2/render.jsx

@@ -0,0 +1,126 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Card } from "@/components/ui/card";
+
+const categories = [
+  {
+    name: "Cosmetic",
+    count: 9,
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1604654894610-df63bc536371?w=200&q=80",
+    imageAlt: "Cosmetic category",
+  },
+  {
+    name: "Ceramic",
+    count: 7,
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1610701596007-11502861dcfa?w=200&q=80",
+    imageAlt: "Ceramic category",
+  },
+  {
+    name: "Fashion",
+    count: 11,
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=200&q=80",
+    imageAlt: "Fashion category",
+  },
+  {
+    name: "Jewellery",
+    count: 8,
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=200&q=80",
+    imageAlt: "Jewellery category",
+  },
+  {
+    name: "Kitchen",
+    count: 3,
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=200&q=80",
+    imageAlt: "Kitchen category",
+  },
+  {
+    name: "Grocery",
+    count: 8,
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1542838132-92c53300491e?w=200&q=80",
+    imageAlt: "Grocery category",
+  },
+] as const;
+
+export default function ProductCategoryFeatured() {
+  return (
+    <section className="py-14 md:py-16">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mb-8 flex items-center justify-between">
+          <h2 className="text-2xl font-bold md:text-3xl">Featured Categories</h2>
+          <Link
+            href="#"
+            className="text-muted-foreground text-sm underline-offset-4 hover:underline"
+          >
+            View All Collection
+          </Link>
+        </div>
+
+        <Carousel
+          opts={{
+            align: "start",
+            dragFree: true,
+            containScroll: "trimSnaps",
+          }}
+        >
+          <CarouselContent className="-ml-4">
+            {categories.map((category) => (
+              <CarouselItem
+                key={category.name}
+                className="min-w-0 basis-2/4 lg:basis-1/4"
+              >
+                <Card className="hover:border-primary/30 overflow-hidden py-0 shadow-none transition-colors">
+                  <Link href={category.href} className="block">
+                    <div className="flex items-center gap-4 p-4">
+                      <div className="flex flex-1 flex-col">
+                        <span className="font-semibold">{category.name}</span>
+                        <span className="text-muted-foreground text-sm">
+                          {category.count} items
+                        </span>
+                      </div>
+                      <div className="relative h-16 w-20 shrink-0 overflow-hidden rounded-md md:h-20 md:w-24">
+                        <Image
+                          src={category.imageSrc}
+                          alt={category.imageAlt}
+                          width={96}
+                          height={80}
+                          className="h-full w-full object-cover"
+                          unoptimized
+                        />
+                      </div>
+                    </div>
+                  </Link>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="mt-6 flex justify-center gap-2">
+            <CarouselPrevious className="relative top-0 left-0 translate-x-0 translate-y-0" />
+            <CarouselNext className="relative top-0 right-0 translate-x-0 translate-y-0" />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-category-3/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-category-3/data.js

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

data/app/javascript/seeds/blocks/ecommerce/product-category-3/render.jsx

@@ -0,0 +1,81 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const categories = [
+  {
+    name: "Hair Care",
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=600&q=80",
+    imageAlt: "Hair Care category",
+  },
+  {
+    name: "Skin Care",
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=600&q=80",
+    imageAlt: "Skin Care category",
+  },
+  {
+    name: "IPL Care",
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=600&q=80",
+    imageAlt: "IPL Care category",
+  },
+  {
+    name: "Body Care",
+    href: "#",
+    imageSrc:
+      "https://images.unsplash.com/photo-1556228720-195a672e8a03?w=600&q=80",
+    imageAlt: "Body Care category",
+  },
+] as const;
+
+export default function ProductCategoryShopByCategory() {
+  return (
+    <section className="py-14 md:py-16">
+      <div className="mx-auto max-w-7xl space-y-6 px-4">
+        <header>
+          <h2 className="text-3xl font-bold md:text-3xl">
+            Discover the Best in Skin Care
+          </h2>
+          <p className="text-muted-foreground mt-1">Shop by Category</p>
+        </header>
+
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {categories.map((category) => (
+            <Link
+              key={category.name}
+              href={category.href}
+              className="group relative block overflow-hidden rounded-xl transition-shadow"
+            >
+              <div className="aspect-4/5 overflow-hidden">
+                <Image
+                  src={category.imageSrc}
+                  alt={category.imageAlt}
+                  width={600}
+                  height={750}
+                  className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  unoptimized
+                />
+                <div
+                  className="absolute inset-x-0 bottom-0 h-1/2 bg-linear-to-t from-black/80 to-transparent"
+                  aria-hidden
+                />
+              </div>
+              <div className="absolute right-0 bottom-0 left-0 p-6">
+                <h3 className="text-xl text-white/90 md:text-2xl">
+                  {category.name}
+                </h3>
+                <span className="mt-1 inline-block text-xs font-medium tracking-wider text-white/80 uppercase group-hover:text-white">
+                  Explore now
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-category-4/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-category-4/data.js

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

data/app/javascript/seeds/blocks/ecommerce/product-category-4/render.jsx

@@ -0,0 +1,85 @@
+import { ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+const categories = [
+  {
+    title: "Portrait Photography",
+    description: "Great image quality and autofocus for portraits and bokeh.",
+    image:
+      "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0",
+  },
+  {
+    title: "Landscape Photography",
+    description: "High resolution, weather-sealed, for any light.",
+    image:
+      "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0",
+  },
+  {
+    title: "Sports & Action",
+    description: "Fast autofocus and burst for action shots.",
+    image:
+      "https://images.unsplash.com/photo-1606983340126-99ab4feaa64a?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0",
+  },
+  {
+    title: "Wildlife Photography",
+    description: "Powerful zoom and silent shooting.",
+    image:
+      "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0",
+  },
+];
+
+export default function FeatureSectionTen() {
+  return (
+    <section className="py-12 sm:py-16 lg:py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 flex flex-col items-end justify-between gap-4 sm:flex-row">
+          <div className="space-y-3">
+            <h2 className="text-3xl font-bold lg:text-4xl">
+              Shop By Categories
+            </h2>
+            <p className="text-muted-foreground max-w-2xl lg:text-lg">
+              Find the perfect camera tailored to your photography style. We
+              offer solutions designed to meet the specific needs of every
+              photographer.
+            </p>
+          </div>
+          <Button className="w-full sm:w-auto">
+            Explore More
+            <ArrowRight />
+          </Button>
+        </div>
+
+        <div className="grid overflow-hidden rounded-xl sm:grid-cols-2">
+          {categories.map((category) => (
+            <div
+              key={category.title}
+              className="group relative aspect-4/3 w-full overflow-hidden"
+            >
+              <Image
+                src={category.image}
+                alt={category.title}
+                fill
+                className="object-cover transition-transform duration-300 group-hover:scale-105"
+              />
+              <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/40 to-transparent" />
+              <div className="absolute inset-0 flex flex-col justify-end p-4 lg:p-6">
+                <div className="flex justify-between">
+                  <h3 className="truncate text-lg font-medium text-white sm:text-xl">
+                    {category.title}
+                  </h3>
+                  <Button className="w-fit rounded-none border-b bg-transparent px-0 text-xs text-white uppercase hover:bg-transparent">
+                    Explore Now
+                  </Button>
+                </div>
+                <p className="truncate text-sm leading-relaxed text-white/70">
+                  {category.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-detail-1/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-detail-1/data.js

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

data/app/javascript/seeds/blocks/ecommerce/product-detail-1/render.jsx

@@ -0,0 +1,80 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Star, HeartIcon, ShoppingCartIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export default function ProductDetail() {
+  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="grid gap-4 lg:grid-cols-2 lg:gap-8">
+        <figure className="mx-auto shrink-0">
+          <Image
+            src="/images/products/01.jpeg"
+            alt="..."
+            width={800}
+            height={600}
+            className="w-full rounded-lg"
+            unoptimized
+          />
+        </figure>
+
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <h1 className="text-2xl leading-tight font-bold md:text-3xl">
+              BreezyMove Comfortable & Stylish Sweetsh
+            </h1>
+
+            <div className="sm:flex sm:items-center sm:gap-4">
+              <p className="text-xl font-medium sm:text-2xl">$249.99</p>
+              <div className="mt-2 flex items-center gap-2 sm:mt-0">
+                <div className="flex items-center gap-0.5">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className="size-5 fill-yellow-400 text-yellow-400"
+                    />
+                  ))}
+                </div>
+                <p className="text-muted-foreground text-sm">(5.0)</p>
+                <Link href="#" className="text-sm hover:underline">
+                  345 Reviews
+                </Link>
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <Button>
+                <ShoppingCartIcon />
+                Add to Cart
+              </Button>
+              <Button variant="outline" size="icon">
+                <HeartIcon />
+              </Button>
+            </div>
+          </div>
+
+          <div className="prose dark:prose-invert space-y-4">
+            <p>
+              Experience ultimate comfort and style with the ComfortFit Unisex
+              Sweetshort! Crafted from 100% breathable cotton, this lightweight
+              design keeps you feeling fresh all day long. The adjustable
+              elastic waistband and sleek fit make it perfect for both active
+              days and laid-back lounging. Whether you`re hitting the gym or
+              enjoying a casual outing, ComfortFit Sweetshort is your go-to
+              choice for effortless style and comfort!
+            </p>
+            <h4>Key Features</h4>
+            <ul>
+              <li>Made from 100% breathable cotton</li>
+              <li>Adjustable elastic waistband for a perfect fit</li>
+              <li>Spacious side pockets</li>
+              <li>Unisex design suitable for everyone</li>
+              <li>Ideal for daily wear and athletic activities</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-detail-2/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-detail-2/data.js

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

data/app/javascript/seeds/blocks/ecommerce/product-detail-2/render.jsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { useState } from "react";
+import { ShoppingCartIcon, Star } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+const product = {
+  name: "Basic Tee 6-Pack",
+  price: "$192",
+  href: "#",
+  breadcrumbs: [
+    { id: 1, name: "Men", href: "#" },
+    { id: 2, name: "Clothing", href: "#" },
+  ],
+  images: [
+    {
+      src: "/images/products/01.jpeg",
+      alt: "Two each of gray, white, and black shirts laying flat.",
+    },
+    {
+      src: "/images/products/02.jpeg",
+      alt: "Model wearing plain black basic tee.",
+    },
+    {
+      src: "/images/products/03.jpeg",
+      alt: "Model wearing plain gray basic tee.",
+    },
+    {
+      src: "/images/products/04.jpeg",
+      alt: "Model wearing plain white basic tee.",
+    },
+  ],
+  colors: [
+    { name: "White", class: "bg-white", selectedClass: "ring-gray-400" },
+    { name: "Gray", class: "bg-gray-200", selectedClass: "ring-gray-400" },
+    { name: "Black", class: "bg-gray-900", selectedClass: "ring-gray-900" },
+  ],
+  sizes: [
+    { name: "XXS", inStock: false },
+    { name: "XS", inStock: true },
+    { name: "M", inStock: true },
+    { name: "L", inStock: true },
+  ],
+  description:
+    'The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.',
+  highlights: [
+    "Hand cut and sewn locally",
+    "Dyed with our proprietary colors",
+    "Pre-washed & pre-shrunk",
+    "Ultra-soft 100% cotton",
+  ],
+  details:
+    'The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.',
+};
+
+const reviews = { href: "#", average: 4, totalCount: 117 };
+
+export default function ProductDetail() {
+  const [selectedColor, setSelectedColor] = useState(product.colors[0].name);
+  const [selectedSize, setSelectedSize] = useState(product.sizes[2].name);
+
+  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="mx-auto max-w-2xl lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8">
+        <Image
+          alt={product.images[0].alt}
+          src={product.images[0].src}
+          width={300}
+          height={300}
+          className="hidden aspect-3/4 size-full rounded-lg object-cover lg:block"
+          unoptimized
+        />
+        <div className="hidden lg:grid lg:grid-cols-1 lg:gap-y-8">
+          <Image
+            alt={product.images[1].alt}
+            src={product.images[1].src}
+            width={300}
+            height={300}
+            className="aspect-3/2 w-full rounded-lg object-cover"
+            unoptimized
+          />
+          <Image
+            alt={product.images[2].alt}
+            src={product.images[2].src}
+            width={300}
+            height={300}
+            className="aspect-3/2 w-full rounded-lg object-cover"
+            unoptimized
+          />
+        </div>
+        <Image
+          alt={product.images[3].alt}
+          src={product.images[3].src}
+          width={300}
+          height={300}
+          className="aspect-4/5 size-full rounded-lg object-cover sm:rounded-lg lg:aspect-3/4"
+          unoptimized
+        />
+      </div>
+
+      {/* Product info */}
+      <div className="pt-8 lg:grid lg:grid-cols-3 lg:grid-rows-[auto_auto_1fr] lg:gap-x-8">
+        <div className="lg:border-border lg:col-span-2 lg:border-r lg:pr-8">
+          <h1 className="text-foreground text-2xl font-bold sm:text-3xl">
+            {product.name}
+          </h1>
+        </div>
+
+        <div className="mt-4 lg:row-span-3 lg:mt-0">
+          <h2 className="sr-only">Product information</h2>
+          <p className="text-foreground text-3xl font-semibold tracking-tight">
+            {product.price}
+          </p>
+
+          <div className="mt-6">
+            <h3 className="sr-only">Reviews</h3>
+            <div className="flex items-center">
+              <div className="flex items-center gap-1">
+                {[0, 1, 2, 3, 4].map((rating) => (
+                  <Star
+                    key={rating}
+                    className={cn(
+                      "size-5",
+                      reviews.average > rating
+                        ? "fill-yellow-400 text-yellow-400"
+                        : "fill-muted text-muted",
+                    )}
+                  />
+                ))}
+              </div>
+              <p className="sr-only">{reviews.average} out of 5 stars</p>
+              <a
+                href={reviews.href}
+                className="text-primary hover:text-primary/90 ml-3 text-sm font-medium"
+              >
+                {reviews.totalCount} reviews
+              </a>
+            </div>
+          </div>
+
+          <form className="mt-8">
+            <div>
+              <h3 className="text-foreground text-sm font-medium">Color</h3>
+              <RadioGroup
+                defaultValue={selectedColor}
+                onValueChange={setSelectedColor}
+                className="mt-2 flex items-center gap-3"
+              >
+                {product.colors.map((color) => (
+                  <div key={color.name} className="relative">
+                    <RadioGroupItem
+                      value={color.name}
+                      id={`color-${color.name}`}
+                      className="sr-only"
+                    />
+                    <label
+                      htmlFor={`color-${color.name}`}
+                      className={cn(
+                        "border-border block size-6 rounded-full border",
+                        color.class,
+                        selectedColor === color.name && "ring-primary ring-2",
+                      )}
+                    >
+                      <span className="sr-only">{color.name}</span>
+                    </label>
+                  </div>
+                ))}
+              </RadioGroup>
+            </div>
+
+            <div className="mt-8">
+              <div className="flex items-center justify-between">
+                <h3 className="text-foreground text-sm font-medium">Size</h3>
+              </div>
+
+              <RadioGroup
+                defaultValue={selectedSize}
+                onValueChange={setSelectedSize}
+                className="mt-2 grid grid-cols-4 gap-3 sm:grid-cols-8 lg:grid-cols-4"
+              >
+                {product.sizes.map((size) => (
+                  <div key={size.name}>
+                    <RadioGroupItem
+                      value={size.name}
+                      id={`size-${size.name}`}
+                      className="peer sr-only"
+                      disabled={!size.inStock}
+                    />
+                    <label
+                      htmlFor={`size-${size.name}`}
+                      className={cn(
+                        "border-border bg-background hover:bg-accent hover:peer-disabled:bg-background [&:has([data-state=checked])]:border-primary [&:has([data-state=checked])]:bg-primary/10 flex cursor-pointer items-center justify-center rounded-md border px-3 py-3 text-sm font-medium uppercase peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+                        "sm:flex-1",
+                      )}
+                    >
+                      {size.name}
+                    </label>
+                  </div>
+                ))}
+              </RadioGroup>
+            </div>
+
+            <Button className="mt-6 w-full" size="lg">
+              <ShoppingCartIcon />
+              Add to Cart
+            </Button>
+          </form>
+        </div>
+
+        <div className="lg:border-border prose dark:prose-invert max-w-full space-y-6 py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:pt-6 lg:pr-8 lg:pb-16">
+          <h4 className="sr-only">Description</h4>
+          <p>{product.description}</p>
+          <h4>Highlights</h4>
+          <ul>
+            {product.highlights.map((highlight) => (
+              <li key={highlight}>{highlight}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-detail-3/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-detail-3/data.js

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