jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/marketing/call-to-action-8/render.jsx

@@ -0,0 +1,63 @@
+import Image from "next/image";
+import { SendIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+export default function CTASection() {
+  return (
+    <section className="py-10 lg:py-16">
+      <div className="mx-auto max-w-5xl px-4">
+        <div className="mb-4 flex justify-center">
+          <Badge variant="secondary">Get Started</Badge>
+        </div>
+
+        <div className="mx-auto mb-8 max-w-3xl text-center">
+          <h2 className="mb-6 text-4xl font-bold text-balance lg:text-5xl lg:leading-14">
+            Your Vistaing journey starts{" "}
+            <span className="font-serif font-normal italic">right now</span>
+          </h2>
+          <p className="text-muted-foreground mx-auto max-w-xl text-balance">
+            Book a free 30 min call and see how we turn property views into
+            serious buyers
+          </p>
+        </div>
+
+        <div className="mb-16 flex justify-center">
+          <Button size="lg" className="rounded-full">
+            <SendIcon />
+            Get Started
+          </Button>
+        </div>
+
+        {/* Property Images Grid */}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          <div className="relative aspect-3/4 overflow-hidden rounded-2xl">
+            <Image
+              src="https://images.unsplash.com/photo-1444084316824-dc26d6657664?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="Modern mountain house with stone and glass exterior"
+              fill
+              className="object-cover"
+            />
+          </div>
+          <div className="relative aspect-3/4 overflow-hidden rounded-2xl">
+            <Image
+              src="https://images.unsplash.com/photo-1543872084-c7bd3822856f?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="Dubai skyline at sunset with luxury properties"
+              fill
+              className="object-cover"
+            />
+          </div>
+          <div className="relative aspect-3/4 overflow-hidden rounded-2xl">
+            <Image
+              src="https://images.unsplash.com/photo-1667718297886-64ed2c454bcd?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="Modern waterfront property with palm trees"
+              fill
+              className="object-cover"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/call-to-action-9/config.json

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

data/app/javascript/seeds/blocks/marketing/call-to-action-9/data.js

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

data/app/javascript/seeds/blocks/marketing/call-to-action-9/render.jsx

@@ -0,0 +1,27 @@
+import { Button } from "@/components/ui/button";
+
+export default function CTASection() {
+  return (
+    <section className="py-10 lg:py-16">
+      <div className="mx-auto max-w-5xl px-4">
+        <div className="rounded-2xl bg-linear-to-r bg-[url('https://images.unsplash.com/photo-1739785890803-7a2191a37ef5?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-bottom px-8 py-10 md:px-16 md:py-20">
+          <header className="mb-8 max-w-2xl space-y-4">
+            <h2 className="text-4xl leading-10 font-bold text-black lg:text-4xl">
+              Benefit up to 33% when connecting to Sentium for 4 months or more
+            </h2>
+            <p className="text-lg text-black/60">
+              Register and start using our cloud solutions today
+            </p>
+          </header>
+
+          <div className="flex flex-wrap gap-4">
+            <Button size="lg">Get Started</Button>
+            <Button size="lg" variant="secondary">
+              Contact
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/changelog-1/data.js

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

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

@@ -0,0 +1,106 @@
+import { Search, Mail, X, ArrowRight, TwitterIcon } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+const changelogData = [
+  {
+    date: "Aug 15, 2025",
+    title: "Introducing Real-time Collaboration",
+    description:
+      "Experience seamless teamwork with our new real-time collaboration features. Edit documents, leave comments, and see changes happen live, empowering your team to work faster and more efficiently together.",
+    author: "Sarah Chen",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    readMoreLink: "#",
+  },
+  {
+    date: "Jul 22, 2025",
+    title: "Enhanced Analytics Dashboard",
+    description:
+      "Gain deeper insights into your performance with our redesigned analytics dashboard. We've added custom reports, data visualization tools, and export options to help you make data-driven decisions.",
+    author: "Alex Morgan",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    readMoreLink: "#",
+  },
+  {
+    date: "Jun 10, 2025",
+    title: "Mobile App 2.0 Released",
+    description:
+      "Our mobile app has been completely rebuilt from the ground up. Enjoy a faster, smoother experience with a modern UI, dark mode support, and offline capabilities for when you're on the go.",
+    author: "David Kim",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026302d",
+    readMoreLink: "#",
+  },
+];
+
+export default function Changelog() {
+  return (
+    <div className="mx-auto w-full max-w-5xl px-4 py-12 md:px-6">
+      <div className="grid gap-10 md:grid-cols-[300px_1fr] lg:gap-20">
+        {/* Sidebar */}
+        <div className="flex flex-col gap-6 md:sticky md:top-8 md:h-fit">
+          <h1 className="text-4xl font-semibold">Changelog</h1>
+          <div className="relative">
+            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+            <Input
+              placeholder="Search"
+              className="bg-secondary/50 focus:border-input rounded-full border-transparent pl-9 transition-colors"
+            />
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-muted-foreground/20 h-8 gap-1.5 rounded-full px-3 text-xs font-medium"
+            >
+              <TwitterIcon /> Follow
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-muted-foreground/20 h-8 gap-1.5 rounded-full px-3 text-xs font-medium"
+            >
+              <Mail /> Subscribe
+            </Button>
+          </div>
+        </div>
+
+        {/* Timeline Content */}
+        <div className="border-border relative space-y-10 border-l pb-10">
+          {changelogData.map((item, index) => (
+            <div key={index} className="relative pl-6 md:pl-10">
+              <div className="ring-background bg-primary absolute top-1 -left-[5px] h-2.5 w-2.5 rounded-full ring-4" />
+
+              <div className="flex flex-col gap-4">
+                <div className="text-muted-foreground flex items-center gap-2 text-xs">
+                  <span>{item.date}</span>
+                </div>
+                <h2 className="text-2xl leading-tight font-medium">{item.title}</h2>
+                <p className="text-muted-foreground leading-relaxed">
+                  {item.description}
+                </p>
+                <a
+                  href={item.readMoreLink ?? ""}
+                  className="flex items-center gap-1 text-xs text-blue-500 transition-colors hover:text-blue-600"
+                >
+                  Read More <ArrowRight className="h-3 w-3" />
+                </a>
+                <div className="flex items-center gap-3 pt-2">
+                  <Avatar>
+                    <AvatarImage src={item.avatar} alt={item.author} />
+                    <AvatarFallback>
+                      {item.author.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <span className="text-foreground text-sm font-medium">
+                    {item.author}
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/changelog-2/data.js

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

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

@@ -0,0 +1,157 @@
+import { Mail, Rss, X, TwitterIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface ChangelogEntry {
+  date: string;
+  title: string;
+  sections?: {
+    title?: string;
+    items: string[];
+  }[];
+  image?: string;
+}
+
+const changelogData: ChangelogEntry[] = [
+  {
+    date: "24 Aug 2025",
+    title: "Analytics 2.0",
+    sections: [
+      {
+        title: "New Features:",
+        items: ["Real-time data streaming", "Customizable report widgets"],
+      },
+    ],
+  },
+  {
+    date: "12 Aug 2025",
+    title: "Team Collaboration",
+    image:
+      "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80",
+    sections: [
+      {
+        title: "Updates:",
+        items: [
+          "Multi-user editing",
+          "Comment threads on components",
+          "Role-based access control",
+          "Real-time notifications",
+          "Team activity log",
+        ],
+      },
+    ],
+  },
+  {
+    date: "28 Jul 2025",
+    title: "Performance Boost",
+    sections: [
+      {
+        title: "Improvements:",
+        items: [
+          "Reduced bundle size by 40%",
+          "Optimized image loading",
+          "Faster initial render",
+        ],
+      },
+    ],
+  },
+];
+
+export default function Changelog() {
+  return (
+    <div className="bg-background relative min-h-screen w-full p-6 md:p-12">
+      <div className="mx-auto max-w-4xl">
+        <header className="mb-16 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+          <div className="space-y-4">
+            <h1 className="text-3xl md:text-4xl font-semibold">Changelog</h1>
+            <p className="text-muted-foreground">
+              We update this page as new updates, improvements, and bug fixes
+              become available on shadcnuikit.com.
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground hover:text-foreground rounded-full"
+            >
+              <TwitterIcon className="h-5 w-5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground hover:text-foreground rounded-full"
+            >
+              <Rss className="h-5 w-5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground hover:text-foreground rounded-full"
+            >
+              <Mail className="h-5 w-5" />
+            </Button>
+          </div>
+        </header>
+
+        {/* Timeline */}
+        <div className="relative space-y-12">
+          {/* Vertical Line */}
+          <div className="bg-border absolute top-2 bottom-0 left-[7px] w-px md:left-[120px]" />
+
+          {changelogData.map((entry, index) => (
+            <div
+              key={index}
+              className="grid gap-8 md:grid-cols-[120px_1fr] md:gap-0"
+            >
+              {/* Date Column (Desktop) */}
+              <div className="text-muted-foreground hidden pt-1 pr-8 text-right text-sm md:block">
+                {entry.date}
+              </div>
+
+              {/* Content Column */}
+              <div className="relative pl-8 md:pl-12">
+                {/* Timeline Dot */}
+                <div
+                  className={`bg-primary absolute top-2 left-[3px] h-2.5 w-2.5 rounded-full ring-4 ring-white md:left-[-5px] dark:ring-black`}
+                />
+
+                {/* Mobile Date */}
+                <div className="text-muted-foreground mb-2 text-sm md:hidden">
+                  {entry.date}
+                </div>
+
+                <div className="space-y-6">
+                  <h2 className="text-xl font-medium">{entry.title}</h2>
+
+                  {entry.image && (
+                    <div className="overflow-hidden rounded-lg border bg-gray-50 dark:bg-gray-900">
+                      <img
+                        src={entry.image}
+                        alt={entry.title}
+                        className="w-full object-cover"
+                      />
+                    </div>
+                  )}
+
+                  {entry.sections?.map((section, sIndex) => (
+                    <div key={sIndex} className="space-y-3">
+                      {section.title && <h3>{section.title}</h3>}
+                      <ul className="text-muted-foreground space-y-2 text-sm">
+                        {section.items.map((item, iIndex) => (
+                          <li key={iIndex} className="flex items-start gap-2">
+                            <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-current" />
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,204 @@
+import { Bug, Sparkles, AlertCircle } from "lucide-react";
+import Link from "next/link";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+
+interface ChangeItem {
+  hash: string;
+  message: string;
+  issue?: number;
+  author?: string;
+}
+
+interface ChangeSection {
+  type: "bug" | "feature" | "breaking";
+  title: string;
+  items: ChangeItem[];
+}
+
+interface Release {
+  version: string;
+  date: string;
+  sections: ChangeSection[];
+}
+
+const changelogData: Release[] = [
+  {
+    version: "2.4.0",
+    date: "March 15, 2026",
+    sections: [
+      {
+        type: "feature",
+        title: "New Features",
+        items: [
+          {
+            hash: "a1b2c3d",
+            message: "Added dark mode support for all dashboard components",
+            issue: 420,
+          },
+          {
+            hash: "e5f6g7h",
+            message: "Introduced new API endpoints for user analytics",
+            issue: 425,
+          },
+        ],
+      },
+      {
+        type: "bug",
+        title: "Bug Fixes / Improvements",
+        items: [
+          {
+            hash: "i8j9k0l",
+            message: "Fixed layout shift on mobile devices when loading charts",
+            issue: 418,
+          },
+          {
+            hash: "m1n2o3p",
+            message: "Optimized database queries for faster search results",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    version: "2.3.5",
+    date: "February 28, 2026",
+    sections: [
+      {
+        type: "bug",
+        title: "Bug Fixes / Improvements",
+        items: [
+          {
+            hash: "q4r5s6t",
+            message:
+              "Resolved an issue with authentication tokens expiring prematurely",
+            issue: 410,
+          },
+          {
+            hash: "u7v8w9x",
+            message:
+              "Updated dependency versions to patch security vulnerabilities",
+          },
+        ],
+      },
+      {
+        type: "breaking",
+        title: "Breaking Changes",
+        items: [
+          {
+            hash: "y0z1a2b",
+            message:
+              "Deprecated legacy authentication method in favor of OAuth 2.0",
+            issue: 405,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const getIcon = (type: ChangeSection["type"]) => {
+  switch (type) {
+    case "bug":
+      return <Bug className="size-4 text-white" />;
+    case "feature":
+      return <Sparkles className="size-4 text-white" />;
+    case "breaking":
+      return <AlertCircle className="size-4 text-white" />;
+  }
+};
+
+const getIconBg = (type: ChangeSection["type"]) => {
+  switch (type) {
+    case "bug":
+      return "bg-blue-500";
+    case "feature":
+      return "bg-indigo-500";
+    case "breaking":
+      return "bg-red-500";
+  }
+};
+
+export default function Changelog() {
+  return (
+    <section className="mx-auto w-full max-w-4xl px-4 py-12 md:px-6">
+      <div className="flex flex-col gap-4 lg:gap-8">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Changelog</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        <h1 className="text-3xl font-semibold md:text-4xl">Changelog</h1>
+
+        <div className="mt-4 space-y-8 lg:space-y-12">
+          {changelogData.map((release, index) => (
+            <div key={index}>
+              <h4 className="text-foreground mb-10">
+                {release.version}{" "}
+                <span className="text-muted-foreground"> - {release.date}</span>
+              </h4>
+
+              {release.sections.map((section, sectionIndex) => (
+                <div
+                  className="group relative flex gap-4 not-last:pb-10 md:gap-6"
+                  key={sectionIndex}
+                >
+                  <Separator
+                    className="absolute top-0 bottom-0 left-4 z-0 [.group:last-child_&]:hidden"
+                    orientation="vertical"
+                  />
+                  <div
+                    className={`z-10 flex size-8 shrink-0 items-center justify-center rounded-full ${getIconBg(section.type)} `}
+                  >
+                    {getIcon(section.type)}
+                  </div>
+                  <div className="space-y-4">
+                    <h3 className="text-lg font-medium">{section.title}</h3>
+                    <ul className="text-muted-foreground space-y-3">
+                      {section.items.map((item, itemIndex) => (
+                        <li key={itemIndex} className="text-sm leading-relaxed">
+                          <Link
+                            href="#"
+                            className="text-primary mr-2 font-mono text-sm hover:underline"
+                          >
+                            [{item.hash}]
+                          </Link>
+                          <span className="text-muted-foreground">
+                            - {item.message}
+                          </span>
+                          {item.issue && (
+                            <Link
+                              href="#"
+                              className="ml-1 text-blue-500 hover:underline"
+                            >
+                              (see also: #{item.issue})
+                            </Link>
+                          )}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/changelog-4/config.json

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

data/app/javascript/seeds/blocks/marketing/changelog-4/data.js

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