jigsaw_engine 0.4.0

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

@@ -0,0 +1,405 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Star, Minus, Plus, ShieldCheckIcon, Heart } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Progress } from "@/components/ui/progress";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldTitle,
+} from "@/components/ui/field";
+import { cn } from "@/lib/utils";
+import { ButtonGroup } from "@/components/ui/button-group";
+
+const product = {
+  name: "Bio-Active Ceramide Moisturizer",
+  slogan: "Visibly firms and smooths skin to reduce early signs of aging",
+  rating: 4.7,
+  reviewCount: 1634,
+  price: 19,
+  oldPrice: 29,
+  description:
+    "Formulated with bio-active ceramides, this moisturizer helps strengthen the skin barrier, improve elasticity, and deliver long-lasting hydration. Designed for daily use, it supports smoother, healthier-looking skin without feeling heavy or greasy.",
+  keyBenefits:
+    "Strengthens skin barrier, improves elasticity, long-lasting hydration, smooths skin texture, reduces early signs of aging.",
+  keyIngredients:
+    "Bio-active ceramides, hyaluronic acid, niacinamide, peptides, and nourishing botanical extracts.",
+  howToUse:
+    "Apply to clean skin morning and evening. Take a small amount and massage gently into face and neck until absorbed. Follow with SPF during the day.",
+  images: [
+    "https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80",
+    "https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?w=800&q=80",
+    "https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=800&q=80",
+    "https://images.unsplash.com/photo-1612817159949-195b6eb9e31a?w=800&q=80",
+    "https://images.unsplash.com/photo-1571781926291-c477ebfd024b?w=800&q=80",
+  ],
+  seeItInAction: [
+    "https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?w=400&q=80",
+    "https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?w=400&q=80",
+    "https://images.unsplash.com/photo-1516975080664-ed2fc6a32937?w=400&q=80",
+  ],
+  youMightAlsoLike: [
+    "https://images.unsplash.com/photo-1594035910387-fea47794261f?w=400&q=80&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1541643600914-78b084683601?w=400&q=80&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1587017539504-67cfbddac569?w=400&q=80&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=400&q=80&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1604654894610-df63bc536371?w=400&q=80&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1610701596007-11502861dcfa?w=400&q=80&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1580480055273-228ff5388ef8?w=400&q=80&auto=format&fit=crop",
+  ],
+  bundles: [
+    { label: "Single Product", price: 19, save: null },
+    { label: "Buy 2", price: 34.2, save: "Save 10%" },
+    { label: "Buy 3", price: 45.6, save: "Save 20%" },
+  ],
+};
+
+const ratingDistribution = [
+  { stars: 5, percent: 65 },
+  { stars: 4, percent: 15 },
+  { stars: 3, percent: 7 },
+  { stars: 2, percent: 8 },
+  { stars: 1, percent: 5 },
+];
+
+export default function ProductDetail() {
+  const [selectedBundle, setSelectedBundle] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+
+  const incrementQuantity = () => setQuantity((prev) => prev + 1);
+  const decrementQuantity = () =>
+    setQuantity((prev) => (prev > 1 ? prev - 1 : 1));
+
+  return (
+    <div className="bg-background min-h-screen">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-10 lg:px-8">
+        <Breadcrumb className="mb-6">
+          <BreadcrumbList className="text-sm">
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="#">Home</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+              <span className="text-muted-foreground">&gt;</span>
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="#">Product</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+              <span className="text-muted-foreground">&gt;</span>
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Product Details</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
+          <div className="space-y-4">
+            <div className="bg-muted relative aspect-4/3 w-full overflow-hidden rounded-lg">
+              <img
+                src={product.images[0]}
+                alt={product.name}
+                className="h-full w-full object-cover"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              {product.images.slice(1, 5).map((src, i) => (
+                <div
+                  key={i}
+                  className="relative aspect-square overflow-hidden rounded-md border border-transparent"
+                >
+                  <img
+                    src={src}
+                    alt=""
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex flex-col space-y-4">
+            <div className="flex items-center gap-2">
+              <div className="flex gap-1">
+                {[1, 2, 3, 4, 5].map((i) => (
+                  <Star
+                    key={i}
+                    className={cn(
+                      "size-4",
+                      i <= Math.floor(product.rating)
+                        ? "fill-amber-400 text-amber-500"
+                        : "text-muted-foreground",
+                    )}
+                  />
+                ))}
+              </div>
+              <span className="text-muted-foreground text-sm">
+                {product.rating} ({product.reviewCount.toLocaleString()}{" "}
+                Reviews)
+              </span>
+            </div>
+            <h1 className="text-2xl font-bold md:text-3xl">{product.name}</h1>
+            <p className="text-muted-foreground mt-1 text-sm">
+              {product.slogan}
+            </p>
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl font-bold">
+                ${product.price.toFixed(2)}
+              </span>
+              <span className="text-muted-foreground text-sm line-through">
+                ${product.oldPrice.toFixed(2)}
+              </span>
+            </div>
+
+            <RadioGroup
+              value={String(selectedBundle)}
+              onValueChange={(v) => setSelectedBundle(Number(v))}
+            >
+              {product.bundles.map((bundle, i) => (
+                <FieldLabel
+                  key={i}
+                  htmlFor={`bundle-${i}`}
+                  className="border-input cursor-pointer"
+                >
+                  <Field orientation="horizontal">
+                    <RadioGroupItem
+                      id={`bundle-${i}`}
+                      value={String(i)}
+                      className="size-4 shrink-0"
+                    />
+                    <FieldContent className="flex-row justify-between gap-2">
+                      <FieldTitle>{bundle.label}</FieldTitle>
+                      <FieldDescription className="flex items-center justify-between gap-2">
+                        {bundle.save && (
+                          <span className="text-destructive font-medium">
+                            {bundle.save}
+                          </span>
+                        )}
+                        <span>${bundle.price.toFixed(2)}</span>
+                      </FieldDescription>
+                    </FieldContent>
+                  </Field>
+                </FieldLabel>
+              ))}
+            </RadioGroup>
+
+            <div className="mt-6 flex items-center gap-2">
+              <ButtonGroup>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={decrementQuantity}
+                  disabled={quantity <= 1}
+                  className="rounded-r-none border-r"
+                >
+                  <Minus />
+                </Button>
+                <Input
+                  type="text"
+                  readOnly
+                  value={quantity}
+                  className="w-12 text-center"
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={incrementQuantity}
+                  className="rounded-l-none border-l"
+                >
+                  <Plus />
+                </Button>
+              </ButtonGroup>
+
+              <div className="flex grow gap-2">
+                <Button className="grow">Add to Cart</Button>
+                <Button variant="outline" className="flex-1">
+                  <Heart />
+                  Add to Favorites
+                </Button>
+              </div>
+            </div>
+
+            <div className="mt-4">
+              <Carousel
+                opts={{ align: "start", containScroll: "trimSnaps" }}
+                className="w-full"
+              >
+                <div className="flex items-center justify-between">
+                  <p className="text-foreground text-sm font-medium">
+                    You might also like these
+                  </p>
+                  <div className="flex gap-1">
+                    <CarouselPrevious className="border-input bg-background hover:bg-muted/80 static size-8 translate-y-0 border" />
+                    <CarouselNext className="border-input bg-background hover:bg-muted/80 static size-8 translate-y-0 border" />
+                  </div>
+                </div>
+                <CarouselContent className="mt-2 ml-0 gap-2">
+                  {product.youMightAlsoLike.map((src, i) => (
+                    <CarouselItem key={i} className="basis-[120px] pl-0">
+                      <div className="bg-muted relative aspect-square overflow-hidden rounded-md">
+                        <img
+                          src={src}
+                          alt=""
+                          className="h-full w-full object-cover"
+                        />
+                      </div>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+            </div>
+
+            <Accordion
+              type="single"
+              collapsible
+              defaultValue="description"
+              className="mt-8 border-t pt-6"
+            >
+              <AccordionItem value="description" className="border-b">
+                <AccordionTrigger className="py-4 text-sm font-medium hover:no-underline">
+                  Product Description
+                </AccordionTrigger>
+                <AccordionContent className="text-muted-foreground pb-4 text-sm leading-relaxed">
+                  {product.description}
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="benefits" className="border-b">
+                <AccordionTrigger className="py-4 text-sm font-medium hover:no-underline">
+                  KEY Benefits
+                </AccordionTrigger>
+                <AccordionContent className="text-muted-foreground pb-4 text-sm leading-relaxed">
+                  {product.keyBenefits}
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="ingredients" className="border-b">
+                <AccordionTrigger className="py-4 text-sm font-medium hover:no-underline">
+                  KEY Ingredients
+                </AccordionTrigger>
+                <AccordionContent className="text-muted-foreground pb-4 text-sm leading-relaxed">
+                  {product.keyIngredients}
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="howToUse" className="border-b-0">
+                <AccordionTrigger className="py-4 text-sm font-medium hover:no-underline">
+                  How to Use
+                </AccordionTrigger>
+                <AccordionContent className="text-muted-foreground pb-4 text-sm leading-relaxed">
+                  {product.howToUse}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+        </div>
+
+        <Tabs defaultValue="reviews" className="mt-12 border-t pt-8">
+          <TabsList className="h-auto w-auto gap-0 rounded-none border-0 border-b bg-transparent p-0 *:rounded-none *:border-transparent! *:bg-transparent! *:data-[state=active]:shadow-none!">
+            <TabsTrigger
+              value="reviews"
+              className="data-[state=active]:border-b-foreground! px-0 pt-0 pb-3 data-[state=active]:bg-transparent"
+            >
+              Reviews
+            </TabsTrigger>
+            <TabsTrigger
+              value="qa"
+              className="data-[state=active]:border-b-foreground! px-0 pt-0 pb-3 data-[state=active]:bg-transparent"
+            >
+              Questions and Answer
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="reviews" className="mt-8">
+            <div className="grid gap-10 lg:grid-cols-2 lg:gap-12">
+              <div>
+                <h2 className="text-lg">More reviews by people like you</h2>
+                <div className="mt-4 flex items-center gap-2">
+                  <span className="text-sm font-medium">Excellent</span>
+                  <div className="flex gap-0.5">
+                    {[1, 2, 3, 4, 5].map((i) => (
+                      <Star
+                        key={i}
+                        className="size-4 fill-amber-500 text-amber-500"
+                      />
+                    ))}
+                  </div>
+                </div>
+                <p className="text-muted-foreground mt-2 flex items-center gap-1.5 text-sm">
+                  Based on 531 verified reviews on Trustpilot
+                  <ShieldCheckIcon className="size-4 text-green-600" />
+                </p>
+              </div>
+
+              <div>
+                <p className="text-muted-foreground text-sm">
+                  Select a row below to filter reviews.
+                </p>
+                <div className="mt-4 space-y-3">
+                  {ratingDistribution.map((row) => (
+                    <div
+                      key={row.stars}
+                      className="flex cursor-pointer items-center gap-4 text-sm"
+                    >
+                      <span className="w-14">{row.stars} Star</span>
+                      <Progress
+                        value={row.percent}
+                        className="*:data-[slot=progress-indicator]:bg-primary h-2 flex-1"
+                      />
+                      <span className="w-10 text-right">{row.percent}%</span>
+                    </div>
+                  ))}
+                </div>
+                <div className="mt-8 flex flex-col items-start gap-1">
+                  <span className="text-muted-foreground text-sm">
+                    Overall Rating
+                  </span>
+                  <span className="text-3xl font-bold">4.5</span>
+                  <span className="text-muted-foreground text-sm">
+                    860 Reviews
+                  </span>
+                </div>
+                <Button className="mt-6">Write a review</Button>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="qa" className="mt-8">
+            <p className="text-muted-foreground text-sm">
+              Questions and answers about this product will appear here.
+            </p>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,71 @@
+import Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+
+export default function ProductFeatures() {
+  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 lg:grid-cols-2">
+        <figure className="relative h-full">
+          <Image
+            src="/images/products/01.jpeg"
+            width={800}
+            height={800}
+            className="h-full w-full rounded-lg object-cover"
+            unoptimized
+            alt="..."
+          />
+        </figure>
+
+        <div className="flex w-full flex-col justify-center px-0 py-4 md:py-8 lg:px-16 lg:py-16">
+          <div className="max-w-lg">
+            <Badge variant="outline" className="text-muted-foreground mb-2">
+              Perfect Match with Your Skin
+            </Badge>
+
+            <h2 className="mb-4 text-3xl font-bold md:text-4xl lg:mb-6">Crafted with Care</h2>
+
+            <p className="text-muted-foreground mb-6 lg:mb-10">
+              Every element of this artisan notebook has been carefully considered to deliver
+              exceptional quality for everyday writing.
+            </p>
+
+            <div className="grid grid-cols-1 gap-x-8 gap-y-6 md:grid-cols-2 lg:gap-y-10">
+              <div>
+                <h6 className="mb-3 font-semibold">Long-lasting</h6>
+                <p className="text-sm text-[#5c7c6f]">
+                  Premium materials and precision-engineered binding ensure this notebook withstands
+                  years of daily use.
+                </p>
+              </div>
+
+              <div>
+                <h6 className="mb-3 font-semibold">Customizable</h6>
+                <p className="text-muted-foreground text-sm">
+                  Purchase once and customize as needed. Save with our subscription service for
+                  regular paper refills.
+                </p>
+              </div>
+
+              <div>
+                <h6 className="mb-3 font-semibold">Intelligently designed</h6>
+                <p className="text-muted-foreground text-sm">
+                  The innovative disc system lets you easily reorganize or mix different paper
+                  styles including dotted, ruled, and plain sheets.
+                </p>
+              </div>
+
+              <div>
+                <h6 className="mb-3 font-semibold">Ethically crafted</h6>
+                <p className="text-muted-foreground text-sm">
+                  Produced with sustainable practices and materials from local sources, reducing
+                  environmental impact.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

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

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

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

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

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

@@ -0,0 +1,135 @@
+import Image from "next/image";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function ProductFeatures() {
+  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="mb-6 max-w-3xl">
+        <h1 className="mb-4 text-3xl font-bold md:text-4xl">Technical Specifications</h1>
+        <p className="text-muted-foreground text-balance lg:text-lg">
+          The Organize modular system offers endless options for arranging your favorite and most
+          used items. Keep everything at reach and in its place, while dressing up your workspace.
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        <Tabs defaultValue="design" className="w-full">
+          <TabsList className="w-full justify-start border">
+            <TabsTrigger value="design">Design</TabsTrigger>
+            <TabsTrigger value="material">Material</TabsTrigger>
+            <TabsTrigger value="considerations">Considerations</TabsTrigger>
+            <TabsTrigger value="included">Included</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="design">
+            <div className="grid items-start gap-4 pt-4 md:grid-cols-2 lg:gap-8">
+              <div className="space-y-4">
+                <h3 className="text-2xl">Adaptive and modular</h3>
+                <p className="text-muted-foreground">
+                  The Organize base set allows you to configure and evolve your setup as your items
+                  and habits change. The included trays and optional add-ons are easily rearranged
+                  to achieve that perfect setup.
+                </p>
+              </div>
+              <figure>
+                <Image
+                  src="/images/products/02.jpeg"
+                  alt="Organize modular system on a wooden desk with keyboard and accessories"
+                  width={600}
+                  height={400}
+                  className="h-auto w-full rounded-lg object-cover"
+                  unoptimized
+                />
+              </figure>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="material">
+            <div className="grid items-start gap-4 pt-4 md:grid-cols-2 lg:gap-8">
+              <div className="space-y-4">
+                <h3 className="text-2xl">Premium materials</h3>
+                <p className="text-muted-foreground">
+                  Crafted from high-quality materials designed to last. The Organize system features
+                  durable aluminum trays with a matte finish that resists fingerprints and
+                  scratches. The wooden base is made from sustainably sourced oak with a natural oil
+                  finish.
+                </p>
+              </div>
+              <figure>
+                <Image
+                  src="/images/products/03.jpeg"
+                  alt="Organize modular system on a wooden desk with keyboard and accessories"
+                  width={600}
+                  height={400}
+                  className="h-auto w-full rounded-lg object-cover"
+                  unoptimized
+                />
+              </figure>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="considerations">
+            <div className="grid items-start gap-4 pt-4 md:grid-cols-2 lg:gap-8">
+              <div className="space-y-4">
+                <h3 className="text-2xl">Design considerations</h3>
+                <p className="text-muted-foreground">
+                  Each component of the Organize system is designed with both form and function in
+                  mind. The trays are sized to accommodate common desk items while maintaining a
+                  minimal footprint. The modular design allows for expansion as your needs grow.
+                </p>
+                <ul className="text-muted-foreground list-disc space-y-2 pl-5">
+                  <li>Stackable components save desk space</li>
+                  <li>Non-slip base keeps everything in place</li>
+                  <li>Rounded edges for safety and aesthetics</li>
+                  <li>Compatible with all Organize expansion packs</li>
+                </ul>
+              </div>
+              <figure>
+                <Image
+                  src="/images/products/04.jpeg"
+                  alt="Organize modular system on a wooden desk with keyboard and accessories"
+                  width={600}
+                  height={400}
+                  className="h-auto w-full rounded-lg object-cover"
+                  unoptimized
+                />
+              </figure>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="included">
+            <div className="grid items-start gap-4 pt-4 md:grid-cols-2 lg:gap-8">
+              <div className="space-y-4">
+                <h3 className="text-2xl">What&#39;s included</h3>
+                <p className="text-muted-foreground">
+                  The Organize base set comes with everything you need to get started with your
+                  modular organization system.
+                </p>
+                <ul className="text-muted-foreground list-disc space-y-2 pl-5">
+                  <li>1 × Base tray (30cm × 20cm)</li>
+                  <li>2 × Small compartment trays (10cm × 10cm)</li>
+                  <li>1 × Medium compartment tray (20cm × 10cm)</li>
+                  <li>1 × Pen holder attachment</li>
+                  <li>1 × Cable management clip</li>
+                  <li>Assembly and configuration guide</li>
+                </ul>
+              </div>
+              <figure>
+                <Image
+                  src="/images/products/05.jpeg"
+                  alt="Organize modular system on a wooden desk with keyboard and accessories"
+                  width={600}
+                  height={400}
+                  className="h-auto w-full rounded-lg object-cover"
+                  unoptimized
+                />
+              </figure>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
+

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

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

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

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