jigsaw_engine 0.4.0

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

@@ -0,0 +1,338 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { BarChart3, Users, TrendingUp } from "lucide-react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import Autoplay from "embla-carousel-autoplay";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+
+type FeatureItem = {
+  icon: React.ElementType;
+  title: string;
+  description: string;
+};
+
+const features: FeatureItem[] = [
+  {
+    icon: BarChart3,
+    title: "Task Tracking",
+    description:
+      "Monitor your project tasks and milestones across multiple projects — all updated in real-time.",
+  },
+  {
+    icon: Users,
+    title: "Team Collaboration",
+    description:
+      "Manage team members, assign tasks, and coordinate workflows seamlessly from a single, unified dashboard.",
+  },
+  {
+    icon: TrendingUp,
+    title: "Performance Analytics",
+    description:
+      "Visualize real-time progress and performance of your projects with clear metrics and easy-to-read insights.",
+  },
+];
+
+const images = [
+  "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.1.0",
+  "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.1.0",
+  "https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.1.0",
+];
+
+export default function FeatureSectionEleven() {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const progressNodes = useRef<(HTMLDivElement | null)[]>([]);
+  const autoplay = React.useRef(Autoplay({ delay: 8000 }));
+
+  // Initialize progress nodes array
+  useEffect(() => {
+    progressNodes.current = progressNodes.current.slice(0, features.length);
+  }, []);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCurrent(api.selectedScrollSnap());
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  // Use autoplay progress for each pagination card
+  const { showAutoplayProgress, resetProgress, restartProgress } =
+    useAutoplayProgress(api, progressNodes, current);
+
+  const scrollTo = (index: number) => {
+    if (!api) return;
+
+    // Reset progress bar before scrolling
+    resetProgress();
+
+    // Scroll to the selected index
+    api.scrollTo(index);
+
+    // Restart progress after a short delay to ensure the slide has changed
+    setTimeout(() => {
+      const autoplay = api.plugins()?.autoplay;
+      if (autoplay) {
+        // Reset autoplay timer
+        autoplay.reset();
+        const timeUntilNext = autoplay.timeUntilNext();
+        if (timeUntilNext !== null && timeUntilNext > 0) {
+          restartProgress(timeUntilNext, index);
+        }
+      }
+    }, 100);
+  };
+
+  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-8 space-y-4">
+          <Badge variant="outline" className="gap-2">
+            <span className="block size-2 rounded-full bg-green-500"></span>{" "}
+            Real-Time Project Overview
+          </Badge>
+          <h3 className="text-3xl leading-tight font-bold md:text-4xl">
+            Stay in control of Your Projects
+          </h3>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          <div className="relative lg:col-span-2">
+            <Carousel
+              setApi={setApi}
+              plugins={[autoplay.current]}
+              className="w-full"
+              opts={{
+                align: "start",
+                loop: true,
+              }}
+            >
+              <CarouselContent>
+                {images.map((image, index) => (
+                  <CarouselItem key={index} className="basis-full p-0">
+                    <div className="bg-muted relative aspect-video w-full overflow-hidden">
+                      <Image
+                        src={image}
+                        alt={`Project dashboard ${index + 1}`}
+                        fill
+                        className="object-cover"
+                      />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+
+          {/* Right Panel - Features List */}
+          <div className="flex flex-col divide-y lg:col-span-1">
+            {features.map((feature, index) => {
+              const Icon = feature.icon;
+              const isActive = current === index;
+
+              return (
+                <React.Fragment key={index}>
+                  <div
+                    className="relative cursor-pointer p-4 py-6"
+                    onClick={() => scrollTo(index)}
+                  >
+                    <div className="relative z-10 flex items-start gap-4">
+                      <div className="mt-1 flex size-10 shrink-0 items-center justify-center rounded-full border">
+                        <Icon className="size-4" />
+                      </div>
+                      <div className="flex-1 space-y-1.5">
+                        <h4 className="text-foreground text-lg font-medium">
+                          {feature.title}
+                        </h4>
+                        <p className="text-muted-foreground text-sm/relaxed">
+                          {feature.description}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="absolute inset-0 w-full overflow-hidden">
+                      <div
+                        ref={(el) => {
+                          progressNodes.current[index] = el;
+                        }}
+                        className={cn(
+                          "embla__progress__bar bg-muted z-0 h-full",
+                          !(isActive && showAutoplayProgress) && "opacity-0",
+                        )}
+                      />
+                    </div>
+                  </div>
+                </React.Fragment>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function useAutoplayProgress(
+  emblaApi: CarouselApi | undefined,
+  progressNodes: React.MutableRefObject<(HTMLDivElement | null)[]>,
+  current: number,
+) {
+  const [showAutoplayProgress, setShowAutoplayProgress] = useState(false);
+  const animationName = useRef("");
+  const timeoutId = useRef<NodeJS.Timeout | undefined>(undefined);
+  const rafId = useRef<number | undefined>(undefined);
+  const currentRef = useRef(current);
+
+  // Update current ref when current changes
+  useEffect(() => {
+    currentRef.current = current;
+  }, [current]);
+
+  // Reset all progress bars
+  const resetAllProgress = useCallback(() => {
+    progressNodes.current.forEach((node) => {
+      if (node) {
+        node.style.animationName = "none";
+        node.style.transform = "translate3d(0,0,0)";
+      }
+    });
+  }, [progressNodes]);
+
+  const startProgress = useCallback(
+    (timeUntilNext: number | null, targetIndex?: number) => {
+      const index =
+        targetIndex !== undefined ? targetIndex : currentRef.current;
+      const node = progressNodes.current[index];
+      if (!node) return;
+      if (timeUntilNext === null || timeUntilNext <= 0) return;
+
+      if (!animationName.current) {
+        const style = window.getComputedStyle(node);
+        animationName.current = style.animationName;
+      }
+
+      // Clear any existing timeouts and animations
+      if (timeoutId.current) clearTimeout(timeoutId.current);
+      if (rafId.current) cancelAnimationFrame(rafId.current);
+
+      // Reset the node first
+      node.style.animationName = "none";
+      node.style.transform = "translate3d(0,0,0)";
+
+      // Force reflow
+      void node.offsetHeight;
+
+      // Start animation in next frame
+      rafId.current = window.requestAnimationFrame(() => {
+        timeoutId.current = setTimeout(() => {
+          const currentNode = progressNodes.current[index];
+          if (currentNode && index === currentRef.current) {
+            currentNode.style.animationName = animationName.current;
+            currentNode.style.animationDuration = `${timeUntilNext}ms`;
+            setShowAutoplayProgress(true);
+          }
+        }, 0);
+      });
+    },
+    [progressNodes],
+  );
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    const autoplay = emblaApi.plugins()?.autoplay;
+    if (!autoplay) return;
+
+    const handleTimerset = () => {
+      const timeUntilNext = autoplay.timeUntilNext();
+      const selectedIndex = emblaApi.selectedScrollSnap();
+      startProgress(timeUntilNext, selectedIndex);
+    };
+
+    const handleTimerStopped = () => {
+      setShowAutoplayProgress(false);
+      resetAllProgress();
+    };
+
+    const handlePlay = () => {
+      const timeUntilNext = autoplay.timeUntilNext();
+      const selectedIndex = emblaApi.selectedScrollSnap();
+      startProgress(timeUntilNext, selectedIndex);
+    };
+
+    const handleSelect = () => {
+      // Reset all progress bars when slide changes
+      resetAllProgress();
+      setShowAutoplayProgress(false);
+
+      // Start progress for new slide
+      const timeUntilNext = autoplay.timeUntilNext();
+      const selectedIndex = emblaApi.selectedScrollSnap();
+      if (timeUntilNext !== null && timeUntilNext > 0) {
+        setTimeout(() => {
+          startProgress(timeUntilNext, selectedIndex);
+        }, 50);
+      }
+    };
+
+    emblaApi.on("autoplay:timerset", handleTimerset);
+    emblaApi.on("autoplay:timerstopped", handleTimerStopped);
+    emblaApi.on("autoplay:play", handlePlay);
+    emblaApi.on("select", handleSelect);
+
+    // Initialize progress on mount
+    const timeUntilNext = autoplay.timeUntilNext();
+    const selectedIndex = emblaApi.selectedScrollSnap();
+    if (timeUntilNext !== null && timeUntilNext > 0) {
+      setTimeout(() => {
+        startProgress(timeUntilNext, selectedIndex);
+      }, 100);
+    }
+
+    return () => {
+      emblaApi.off("autoplay:timerset", handleTimerset);
+      emblaApi.off("autoplay:timerstopped", handleTimerStopped);
+      emblaApi.off("autoplay:play", handlePlay);
+      emblaApi.off("select", handleSelect);
+    };
+  }, [emblaApi, startProgress, resetAllProgress]);
+
+  useEffect(() => {
+    return () => {
+      if (rafId.current) cancelAnimationFrame(rafId.current);
+      if (timeoutId.current) clearTimeout(timeoutId.current);
+    };
+  }, []);
+
+  const resetProgress = useCallback(() => {
+    resetAllProgress();
+    setShowAutoplayProgress(false);
+    if (timeoutId.current) clearTimeout(timeoutId.current);
+    if (rafId.current) cancelAnimationFrame(rafId.current);
+  }, [resetAllProgress]);
+
+  const restartProgress = useCallback(
+    (timeUntilNext: number | null, targetIndex: number) => {
+      startProgress(timeUntilNext, targetIndex);
+    },
+    [startProgress],
+  );
+
+  return {
+    showAutoplayProgress,
+    resetProgress,
+    restartProgress,
+  };
+}

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

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

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

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

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

@@ -0,0 +1,96 @@
+import {
+  ArrowUp10Icon,
+  CloudyIcon,
+  FingerprintIcon,
+  LockOpenIcon,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+export default function FeatureSection() {
+  return (
+    <section className="py-12 lg:py-20">
+      <div className="mx-auto max-w-7xl px-4">
+        <header className="mx-auto max-w-2xl lg:text-center">
+          <Badge variant="outline" className="text-indigo-600">
+            Features
+          </Badge>
+          <h3 className="mt-4 text-3xl leading-tight font-bold text-balance lg:text-4xl">
+            Powerful tools to grow your business
+          </h3>
+          <p className="text-muted-foreground mt-6 text-lg">
+            Build faster with our comprehensive suite of features designed to
+            help you scale and succeed in today&rsquo;s competitive market.
+          </p>
+        </header>
+        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+            <div className="relative pl-16">
+              <dt className="text-base font-medium">
+                <div className="bg-primary absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg">
+                  <CloudyIcon
+                    aria-hidden="true"
+                    className="text-primary-foreground size-6"
+                  />
+                </div>
+                Instant deployment
+              </dt>
+              <dd className="text-muted-foreground mt-2 text-base/7">
+                Deploy your applications with a single click. Automated
+                workflows ensure your updates go live seamlessly and securely.
+              </dd>
+            </div>
+
+            <div className="relative pl-16">
+              <dt className="text-base font-medium">
+                <div className="bg-primary absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg">
+                  <LockOpenIcon
+                    aria-hidden="true"
+                    className="text-primary-foreground size-6"
+                  />
+                </div>
+                Secure connections
+              </dt>
+              <dd className="text-muted-foreground mt-2 text-base/7">
+                Enterprise-grade SSL certificates included with every plan. Keep
+                your data and users safe with encrypted connections.
+              </dd>
+            </div>
+
+            <div className="relative pl-16">
+              <dt className="text-base font-medium">
+                <div className="bg-primary absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg">
+                  <ArrowUp10Icon
+                    aria-hidden="true"
+                    className="text-primary-foreground size-6"
+                  />
+                </div>
+                Smart queuing
+              </dt>
+              <dd className="text-muted-foreground mt-2 text-base/7">
+                Efficient task management with intelligent queuing systems.
+                Process requests faster and handle peak loads effortlessly.
+              </dd>
+            </div>
+
+            <div className="relative pl-16">
+              <dt className="text-base font-medium">
+                <div className="bg-primary absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg">
+                  <FingerprintIcon
+                    aria-hidden="true"
+                    className="text-primary-foreground size-6"
+                  />
+                </div>
+                Enhanced protection
+              </dt>
+              <dd className="text-muted-foreground mt-2 text-base/7">
+                Multi-layered security with advanced threat detection and
+                protection. Your infrastructure stays protected around the
+                clock.
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,77 @@
+import { Badge } from "@/components/ui/badge";
+
+const FEATURES = [
+  {
+    step: "01",
+    title: "Intuitive interface",
+    description:
+      "Clean and straightforward design that anyone can master in minutes, not hours or days.",
+  },
+  {
+    step: "02",
+    title: "Lightning speed",
+    description:
+      "Optimized performance with smart caching and CDN delivery for seamless user experience.",
+  },
+  {
+    step: "03",
+    title: "Bank-level security",
+    description:
+      "Industry-standard encryption, regular security audits, and compliance certifications you can trust.",
+  },
+  {
+    step: "04",
+    title: "Fair pricing",
+    description:
+      "Simple, transparent pricing with no surprises. Choose the plan that fits your needs.",
+  },
+  {
+    step: "05",
+    title: "Dedicated support",
+    description:
+      "Expert support team ready to help whenever you need assistance. We're here for you.",
+  },
+  {
+    step: "06",
+    title: "Flexible integrations",
+    description:
+      "Connect with your favorite tools through robust APIs and seamless third-party integrations.",
+  },
+] as const;
+
+export default function FeatureSection() {
+  return (
+    <section className="py-20">
+      <div className="mx-auto max-w-5xl px-4 md:px-6">
+        <header className="mx-auto mb-12 max-w-2xl text-center sm:mb-16">
+          <div className="mb-2 flex justify-center">
+            <Badge variant="outline">Features</Badge>
+          </div>
+          <h2 className="text-3xl leading-tight font-bold text-balance md:text-4xl">
+            Everything you need to succeed
+          </h2>
+          <p className="text-muted-foreground mt-4 text-base text-balance md:text-lg">
+            Powerful features designed to help your team work smarter and
+            deliver results faster.
+          </p>
+        </header>
+
+        <div className="grid md:grid-cols-2 lg:gap-10">
+          {FEATURES.map((feature) => (
+            <div key={feature.step} className="flex gap-3 sm:gap-4">
+              <div className="text-primary flex size-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium sm:size-12 sm:text-lg">
+                {feature.step}
+              </div>
+              <div className="space-y-1.5">
+                <h3 className="font-medium md:text-lg">{feature.title}</h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,117 @@
+import {
+  Maximize2,
+  RectangleVertical,
+  Layers,
+  FileCheck,
+  Grid3x3,
+  Target,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    icon: RectangleVertical,
+    title: "Theme Customization",
+    description:
+      "Choose from preset themes or design your own color palette and typography system.",
+    color: "red",
+  },
+  {
+    icon: Layers,
+    title: "Component Library",
+    description:
+      "Extensive collection of pre-built components ready to use in your projects.",
+    color: "green",
+  },
+  {
+    icon: FileCheck,
+    title: "Unified Workspace",
+    description:
+      "Access all design resources and tools within a single integrated environment.",
+    color: "blue",
+  },
+  {
+    icon: Grid3x3,
+    title: "Complete Design System",
+    description:
+      "Utilize comprehensive design elements for websites, applications, and presentations.",
+    color: "orange",
+  },
+];
+
+const colorClasses = {
+  purple: {
+    bg: "bg-purple-100 dark:bg-purple-950/30",
+    icon: "text-purple-600 dark:text-purple-400",
+  },
+  "light-purple": {
+    bg: "bg-purple-50 dark:bg-purple-950/20",
+    icon: "text-purple-700 dark:text-purple-300",
+  },
+  red: {
+    bg: "bg-red-100 dark:bg-red-950/30",
+    icon: "text-red-600 dark:text-red-400",
+  },
+  green: {
+    bg: "bg-green-100 dark:bg-green-950/30",
+    icon: "text-green-600 dark:text-green-400",
+  },
+  blue: {
+    bg: "bg-blue-100 dark:bg-blue-950/30",
+    icon: "text-blue-600 dark:text-blue-400",
+  },
+  orange: {
+    bg: "bg-orange-100 dark:bg-orange-950/30",
+    icon: "text-orange-600 dark:text-orange-400",
+  },
+};
+
+export default function FeatureSectionTwo() {
+  return (
+    <section className="py-14 sm:py-20">
+      <div className="mx-auto grid max-w-7xl items-center gap-12 px-4 lg:grid-cols-2 lg:gap-16">
+        <header className="max-w-3xl space-y-4">
+          <div className="text-muted-foreground inline-flex font-medium items-center gap-2 text-xs tracking-wider uppercase">
+            <span className="size-2 rounded-full bg-primary/50"></span>
+            COMPLETE SOLUTION
+          </div>
+          <h2 className="text-3xl text-balance md:text-4xl leading-tight font-bold">
+            The comprehensive design platform and component library
+          </h2>
+          <p className="text-muted-foreground text-base text-balance md:text-lg">
+            Advanced platform for building landing pages, web applications and
+            admin panels. Includes Component Library (Web), Data Visualization
+            Tools, Icon Collection.
+          </p>
+          <Button size="lg">Get Started</Button>
+        </header>
+
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            const colors =
+              colorClasses[feature.color as keyof typeof colorClasses];
+
+            return (
+              <div key={feature.title} className="space-y-3">
+                <div
+                  className={cn(
+                    "inline-flex size-12 items-center justify-center rounded-lg",
+                    colors.bg,
+                  )}
+                >
+                  <Icon className={cn("size-5", colors.icon)} />
+                </div>
+                <h4 className="text-foreground md:text-lg font-medium">{feature.title}</h4>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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