jigsaw_engine 0.4.0

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

@@ -0,0 +1,199 @@
+import {
+  Search,
+  Bell,
+  Frown,
+  Meh,
+  Smile,
+  Zap,
+  Clock10Icon,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+
+const changelogData = [
+  {
+    id: 1,
+    type: "New Feature",
+    date: "Dec 30, 2026",
+    title: "Introducing In-App Announcements 🎉",
+    description:
+      "We're excited to introduce In-App Announcements — now your users see new changelogs instantly, without needing extra clicks!",
+    highlights: [
+      "Instant Visibility: Updates appear the moment you publish.",
+      "Engaging Design: A clean, eye-catching popup.",
+    ],
+  },
+  {
+    id: 2,
+    type: "Improvement",
+    date: "Nov 25, 2026",
+    title: "Introducing new Analytics 📊",
+    description:
+      "We're thrilled to announce the arrival of our brand new Analytics feature! Now you can gain deeper insights into your feedback's and changelogs performance, also the user engagement with real-time data and visualizations. 🚀",
+    highlights: [
+      "Track views, votes, reactions, sources, and comments on each post",
+      "Track user devices, browsers, os, referrers and countries",
+    ],
+  },
+];
+
+const labels = [
+  { name: "All labels", count: 69, active: true },
+  { name: "New Feature", count: 80, color: "bg-green-500" },
+  { name: "Improvement", count: 36, color: "bg-blue-500" },
+  { name: "Fix", count: 16, color: "bg-red-500" },
+  { name: "Beta", count: 4, color: "bg-gray-500" },
+];
+
+const badgeColor = (type: string) => {
+  switch (type) {
+    case "New Feature":
+      return "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400";
+    case "Improvement":
+      return "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400";
+    case "Fix":
+      return "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400";
+    case "Beta":
+      return "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400";
+    default:
+      return "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400";
+  }
+};
+
+export default function Changelog() {
+  return (
+    <div className="py-10">
+      <div className="mx-auto w-full max-w-5xl px-4 md:px-6">
+        <header className="mb-8 lg:mb-4">
+          <h1 className="text-3xl font-semibold">Changelog</h1>
+        </header>
+        <div className="grid gap-4 lg:grid-cols-[1fr_300px] lg:gap-6">
+          <div className="space-y-4">
+            {changelogData.map((item) => (
+              <Card key={item.id} className="overflow-hidden shadow-none">
+                <CardContent>
+                  <Badge
+                    variant="secondary"
+                    className={`mb-4 ${badgeColor(item.type)} hover:${badgeColor(item.type)}`}
+                  >
+                    {item.type}
+                  </Badge>
+
+                  <h2 className="mb-2 text-2xl font-medium">{item.title}</h2>
+                  <p className="text-muted-foreground mb-6 flex items-center gap-1.5 text-xs">
+                    <Clock10Icon className="size-3" />
+                    {item.date}
+                  </p>
+
+                  <div className="prose prose-h4:font-normal prose-ul:text-sm dark:prose-invert max-w-full">
+                    <p>{item.description}</p>
+                    {item.highlights && (
+                      <>
+                        <h4>Highlights</h4>
+                        <ul>
+                          {item.highlights.map((highlight, idx) => (
+                            <li key={idx}>{highlight}</li>
+                          ))}
+                        </ul>
+                      </>
+                    )}
+                  </div>
+
+                  <div className="mt-8 flex items-center justify-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-red-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                    >
+                      <Frown />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-yellow-500 hover:bg-yellow-50 hover:text-yellow-600 dark:hover:bg-yellow-900/20"
+                    >
+                      <Meh />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-green-500 hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20"
+                    >
+                      <Smile />
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Sidebar */}
+          <aside className="space-y-4">
+            <InputGroup className="border-gray-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
+              <InputGroupAddon>
+                <Search />
+              </InputGroupAddon>
+              <InputGroupInput placeholder="Search..." />
+            </InputGroup>
+
+            <Card className="overflow-hidden shadow-none">
+              <CardContent className="space-y-4">
+                <h3>Labels</h3>
+                <div className="space-y-1">
+                  {labels.map((label, idx) => (
+                    <Button
+                      key={idx}
+                      variant={label.active ? "secondary" : "ghost"}
+                      className="flex w-full items-center justify-between"
+                    >
+                      <div className="flex items-center gap-2">
+                        {label.color ? (
+                          <span
+                            className={`size-2 rounded-full ${label.color}`}
+                          />
+                        ) : (
+                          <span className="size-2 rounded-full bg-gray-400" />
+                        )}
+                        <span>{label.name}</span>
+                      </div>
+                      <Badge variant="outline">{label.count}</Badge>
+                    </Button>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Button className="w-full">
+              <Bell />
+              Subscribe to updates
+            </Button>
+
+            <div>
+              <div className="text-muted-foreground mb-3 flex flex-wrap justify-center gap-x-3 gap-y-2 text-xs">
+                <a href="#" className="hover:underline">
+                  Licenses
+                </a>
+                <a href="#" className="hover:underline">
+                  Privacy Policy
+                </a>
+                <a href="#" className="hover:underline">
+                  Terms of Service
+                </a>
+              </div>
+              <div className="text-muted-foreground flex items-center justify-center gap-1 text-xs">
+                <Zap className="h-3 w-3 fill-yellow-500 text-yellow-500" />
+                <span>Powered by Shadcn UI Kit</span>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,155 @@
+import {
+  Layout,
+  FolderOpen,
+  History,
+  Send,
+  Palette,
+  MessageCircle,
+  Plug,
+  Monitor,
+  Star,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    icon: Layout,
+    title: "Flexible Layouts",
+    description:
+      "Build pages with drag-and-drop sections and adaptive grids that look great on any device.",
+    color: "red",
+  },
+  {
+    icon: FolderOpen,
+    title: "Asset Library",
+    description:
+      "Store and organize images, fonts, and media in one place with smart search and tags.",
+    color: "blue",
+  },
+  {
+    icon: History,
+    title: "Version History",
+    description: "Revert to any previous version with one click. Every change is saved automatically.",
+    color: "green",
+  },
+  {
+    icon: Send,
+    title: "One-Click Publish",
+    description: "Push updates live instantly. No build step, no deployment pipeline to configure.",
+    color: "yellow",
+  },
+  {
+    icon: Palette,
+    title: "Custom Branding",
+    description:
+      "Apply your colors, logos, and typography across the whole site from a single style guide.",
+    color: "purple",
+  },
+  {
+    icon: MessageCircle,
+    title: "Comments & Review",
+    description: "Leave feedback directly on the canvas. Resolve threads and keep stakeholders in sync.",
+    color: "orange",
+  },
+  {
+    icon: Plug,
+    title: "Integrations",
+    description: "Connect to your CRM, analytics, and tools with ready-made plugins and webhooks.",
+    color: "pink",
+  },
+  {
+    icon: Monitor,
+    title: "Live Preview",
+    description: "See desktop, tablet, and mobile views side by side as you design and edit.",
+    color: "gray",
+  },
+];
+
+const colorClasses = {
+  red: {
+    bg: "bg-red-50 dark:bg-red-950/20",
+    icon: "text-red-600 dark:text-red-400",
+  },
+  blue: {
+    bg: "bg-blue-50 dark:bg-blue-950/20",
+    icon: "text-blue-600 dark:text-blue-400",
+  },
+  green: {
+    bg: "bg-green-50 dark:bg-green-950/20",
+    icon: "text-green-600 dark:text-green-400",
+  },
+  yellow: {
+    bg: "bg-yellow-50 dark:bg-yellow-950/20",
+    icon: "text-yellow-600 dark:text-yellow-400",
+  },
+  purple: {
+    bg: "bg-purple-50 dark:bg-purple-950/20",
+    icon: "text-purple-600 dark:text-purple-400",
+  },
+  orange: {
+    bg: "bg-orange-50 dark:bg-orange-950/20",
+    icon: "text-orange-600 dark:text-orange-400",
+  },
+  pink: {
+    bg: "bg-pink-50 dark:bg-pink-950/20",
+    icon: "text-pink-600 dark:text-pink-400",
+  },
+  gray: {
+    bg: "bg-gray-50 dark:bg-gray-950/20",
+    icon: "text-gray-600 dark:text-gray-400",
+  },
+};
+
+export default function FeatureSection() {
+  return (
+    <section className="px-4 py-14 sm:py-20">
+      <header className="mx-auto mb-12 max-w-3xl space-y-4 text-center">
+        <Badge variant="outline">
+          <Star />
+          Our Features
+        </Badge>
+
+        <h2 className="text-3xl md:text-4xl font-bold">
+          Everything you need to ship faster.
+        </h2>
+
+        <p className="text-muted-foreground text-base text-balance md:text-lg">
+          From layout and branding to review and publish—all in one place.
+        </p>
+      </header>
+
+      <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {features.map((feature) => {
+          const Icon = feature.icon;
+          const colors =
+            colorClasses[feature.color as keyof typeof colorClasses];
+
+          return (
+            <Card key={feature.title} className="shadow-none">
+              <CardContent>
+                <div className="mb-4">
+                  <div
+                    className={cn(
+                      "inline-flex size-12 items-center justify-center rounded-lg",
+                      colors.bg,
+                    )}
+                  >
+                    <Icon className={cn("size-5", colors.icon)} />
+                  </div>
+                </div>
+                <h4 className="text-foreground mb-2 md:text-lg font-medium">
+                  {feature.title}
+                </h4>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  {feature.description}
+                </p>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,83 @@
+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 leading-tight 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="mb-2 text-2xl font-medium text-white sm:text-2xl truncate">
+                    {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="text-sm leading-relaxed text-white/80 truncate">
+                  {category.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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