jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/line-charts-4/render.jsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid } from "recharts";
+import { useState } from "react";
+
+import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@/components/ui/chart";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ChevronDownIcon } from "lucide-react";
+
+const chartData = [
+  { month: "January", desktop: 4 },
+  { month: "February", desktop: 5 },
+  { month: "March", desktop: 4 },
+  { month: "April", desktop: 6 },
+  { month: "May", desktop: 6 },
+  { month: "June", desktop: 7 },
+  { month: "July", desktop: 8 },
+  { month: "August", desktop: 7 },
+  { month: "September", desktop: 9 },
+  { month: "October", desktop: 8 },
+  { month: "November", desktop: 7 },
+  { month: "December", desktop: 9 }
+];
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)"
+  }
+} satisfies ChartConfig;
+
+export default function Component() {
+  const [open, setOpen] = useState(false);
+  const [date, setDate] = useState<Date | undefined>(undefined);
+
+  return (
+    <Card className="w-full pb-0 lg:w-[600px]">
+      <CardHeader>
+        <CardTitle>Course Progress by Month</CardTitle>
+        <CardDescription className="flex items-center gap-2">
+          Compared to previous month 50.56%
+          <Badge>+2.5%</Badge>
+        </CardDescription>
+        <CardAction>
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button variant="outline" id="date" className="w-48 justify-between font-normal">
+                {date ? date.toLocaleDateString() : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={date}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDate(date);
+                  setOpen(false);
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </CardAction>
+      </CardHeader>
+      <ChartContainer className="w-full lg:h-[200px]" config={chartConfig}>
+        <AreaChart
+          accessibilityLayer
+          data={chartData}
+          margin={{
+            left: 0,
+            right: 0
+          }}>
+          <CartesianGrid vertical={false} />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+          <defs>
+            <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={0.8} />
+              <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.1} />
+            </linearGradient>
+            <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="var(--color-mobile)" stopOpacity={0.8} />
+              <stop offset="95%" stopColor="var(--color-mobile)" stopOpacity={0.1} />
+            </linearGradient>
+          </defs>
+          <Area
+            dataKey="mobile"
+            type="natural"
+            fill="url(#fillMobile)"
+            fillOpacity={0.4}
+            stroke="var(--color-mobile)"
+            stackId="a"
+          />
+          <Area
+            dataKey="desktop"
+            type="natural"
+            fill="url(#fillDesktop)"
+            fillOpacity={0.4}
+            stroke="var(--color-desktop)"
+            stackId="a"
+          />
+        </AreaChart>
+      </ChartContainer>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { ArrowRightIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export default function CTASection() {
+  return (
+    <section className="relative">
+      <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6 sm:py-32 lg:px-8">
+        <div className="relative z-10 flex flex-col justify-between lg:flex-row">
+          <div className="mb-5 space-y-2 text-center lg:mb-0 lg:text-left">
+            <h2 className="text-3xl font-bold lg:text-4xl">Start using our app today.</h2>
+            <p className="text-muted-foreground lg:text-lg">
+              Contact us with any query or any idea.
+            </p>
+          </div>
+          <div className="text-center lg:text-left">
+            <Button size="lg" asChild>
+              <Link href="#">
+                Get Started
+                <ArrowRightIcon />
+              </Link>
+            </Button>
+          </div>
+        </div>
+
+        <div className="absolute inset-0 z-0 [background:radial-gradient(125%_125%_at_50%_10%,#fff_40%,#6366f1_100%)] dark:[background:radial-gradient(125%_125%_at_50%_10%,var(--background)_40%,var(--color-purple-700)_100%)]" />
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,76 @@
+import { Badge } from "@/components/ui/badge";
+import { Building2, Mail, Phone } from "lucide-react";
+
+export default function CTASection() {
+  return (
+    <div className="w-full py-10 lg:py-20">
+      <div className="mx-auto max-w-5xl px-10">
+        <Badge
+          variant="outline"
+          className="text-foreground rounded-full border-gray-300 px-3 py-1 text-xs font-normal hover:bg-transparent"
+        >
+          Reach Out To Us
+        </Badge>
+        <h1 className="text-foreground mt-4 text-left text-4xl font-bold tracking-tight">
+          We'd love to Hear From You.
+        </h1>
+        <p className="text-muted-foreground mt-4 text-left">
+          Or just reach out manually to{" "}
+          <a
+            href="mailto:contact@shadcnuikit.com"
+            className="font-medium text-indigo-600 hover:underline"
+          >
+            contact@shadcnuikit.com
+          </a>
+        </p>
+        <div className="mt-16 grid gap-8 md:grid-cols-3">
+          <div>
+            <div className="flex size-10 items-center justify-center rounded-full bg-indigo-500/20 p-2.5 text-indigo-500">
+              <Mail className="size-5" />
+            </div>
+            <p className="text-foreground mt-4 text-lg font-bold">
+              Email Support
+            </p>
+            <p className="text-muted-foreground mt-1 mb-4">
+              Our team can respond in real time.
+            </p>
+            <a
+              href="mailto:contact@shadcnuikit.com"
+              className="font-semibold text-indigo-600 hover:underline"
+            >
+              contact@shadcnuikit.com
+            </a>
+          </div>
+          <div>
+            <div className="flex size-10 items-center justify-center rounded-full bg-indigo-500/20 p-2.5 text-indigo-500">
+              <Building2 className="size-5" />
+            </div>
+            <p className="text-foreground mt-4 text-lg font-bold">
+              Visit Our Office
+            </p>
+            <p className="text-muted-foreground mt-1 mb-4">
+              Visit our location in real life.
+            </p>
+            <span className="font-semibold text-indigo-600">
+              221b Elementary Avenue, NY
+            </span>
+          </div>
+          <div>
+            <div className="flex size-10 items-center justify-center rounded-full bg-indigo-500/20 p-2.5 text-indigo-500">
+              <Phone className="size-5" />
+            </div>
+            <p className="text-foreground mt-4 text-lg font-bold">
+              Call Us Directly
+            </p>
+            <p className="text-muted-foreground mt-1 mb-4">
+              Available during working hours.
+            </p>
+            <span className="font-semibold text-indigo-600">
+              (+1) 234 - 4567 - 789
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,78 @@
+import Link from "next/link";
+import { ArrowRightIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export default function CTASection() {
+  return (
+    <div className="relative px-4 py-16 sm:px-6 sm:py-32 lg:px-8">
+      <div className="relative z-10 space-y-4 text-center">
+        <h2 className="text-3xl font-bold text-balance lg:text-4xl/tight">
+          Start using our app today.
+        </h2>
+        <p className="text-muted-foreground lg:text-lg">
+          Contact us with any query or any idea.
+        </p>
+        <div className="flex justify-center gap-3">
+          <Button size="lg" asChild>
+            <Link href="#">Get Started</Link>
+          </Button>
+          <Button variant="link" size="lg" asChild>
+            <Link href="#">
+              Learn more
+              <ArrowRightIcon />
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      <div
+        className="absolute inset-0 z-0 dark:opacity-15"
+        style={{
+          backgroundImage: `
+        linear-gradient(to right, #e7e5e4 1px, transparent 1px),
+        linear-gradient(to bottom, #e7e5e4 1px, transparent 1px)
+      `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+        repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)
+      `,
+          WebkitMaskImage: `
+ repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)
+      `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,50 @@
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+
+export default function Component() {
+  return (
+    <section>
+      <div className="mx-auto max-w-6xl px-4 py-10 lg:py-16">
+        <Card className="overflow-hidden p-0 shadow-none">
+          <CardContent className="p-0">
+            <div className="grid gap-4 lg:grid-cols-2 lg:gap-12">
+              <div className="order-last flex flex-col justify-center space-y-4 px-4 py-4 lg:order-first lg:px-6 lg:py-32 lg:ps-16">
+                <div className="space-y-3 text-center lg:text-left">
+                  <h3 className="text-3xl font-bold text-balance lg:text-4xl/tight">
+                    Ready to transform your business?
+                  </h3>
+                  <p className="text-muted-foreground lg:text-lg/relaxed">
+                    Join thousands of companies already using our platform to streamline their
+                    workflow, boost productivity, and drive growth. Start your free trial today.
+                  </p>
+                </div>
+                <div className="mt-4 flex flex-col justify-center gap-3 min-[400px]:flex-row lg:justify-start">
+                  <Button asChild>
+                    <Link href="#">Start Free Trial</Link>
+                  </Button>
+                  <Button variant="secondary" asChild>
+                    <Link href="#">
+                      Learn More <ArrowRight />
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+              <div className="flex justify-center">
+                <Image
+                  src="https://images.unsplash.com/photo-1708559348128-3cde89847e2b?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  alt="..."
+                  width={600}
+                  height={400}
+                  className="mx-auto aspect-video overflow-hidden object-cover sm:w-full lg:order-last"
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { Button } from "@/components/ui/button";
+
+export default function Component() {
+  return (
+    <section className="py-10 md:px-6 lg:py-28">
+      <div className="mx-auto max-w-5xl px-4">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 text-center lg:text-left">
+          <h3 className="text-3xl font-bold text-balance sm:text-4xl">Ready to transform your business?</h3>
+          <div className="flex flex-col gap-2 space-y-4">
+            <p className="text-muted-foreground text-balance md:text-lg">
+              Join thousands of companies already using our platform to streamline their workflow,
+              boost productivity, and drive growth. Start your free trial today.
+            </p>
+            <div className="flex gap-3 justify-center lg:justify-start">
+              <Button> Start Free Trial</Button>
+              <Button variant="outline">Learn More</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+

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

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

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

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

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

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function Component() {
+  const avatars = [
+    "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=100&auto=format&fit=crop&ixlib=rb-4.1.0",
+    "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=100&auto=format&fit=crop&ixlib=rb-4.1.0",
+    "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=100&auto=format&fit=crop&ixlib=rb-4.1.0",
+    "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=100&auto=format&fit=crop&ixlib=rb-4.1.0",
+    "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=100&auto=format&fit=crop&ixlib=rb-4.1.0"
+  ];
+
+  return (
+    <section className="py-10 lg:py-16">
+      <div className="mx-auto max-w-6xl px-4">
+        <div className="grid gap-4 lg:grid-cols-2">
+          <Card className="bg-muted/50 shadow-none py-0">
+            <CardContent className="flex h-full flex-col justify-center space-y-6 p-6 lg:p-12 ">
+              <div className="space-y-4 text-balance">
+                <h3 className="text-3xl font-bold md:text-4xl/tight">
+                  Master new skills & advance your career
+                </h3>
+                <p className="text-muted-foreground text-lg leading-relaxed">
+                  Discover thousands of courses taught by industry experts. Learn at your own pace
+                  and transform your professional journey with practical, hands-on training.
+                </p>
+              </div>
+              <div>
+                <Button size="lg" asChild>
+                  <Link href="#">Start Learning</Link>
+                </Button>
+              </div>
+              <div className="mt-auto space-y-2">
+                <p className="text-muted-foreground text-sm">Join over 2.3M active learners</p>
+                <div className="flex -space-x-3">
+                  {avatars.map((avatar, index) => (
+                    <Avatar key={index} className="border-muted size-10 border-3">
+                      <AvatarImage
+                        src={avatar}
+                        alt={`Learner ${index + 1}`}
+                        className="object-cover"
+                      />
+                    </Avatar>
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <figure className="relative aspect-square overflow-hidden rounded-xl">
+            <Image
+              src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.1.0"
+              alt="Students learning together"
+              fill
+              className="object-cover"
+            />
+          </figure>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,69 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export default function CTASection() {
+  const images = [
+    {
+      src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0",
+      alt: "Developer working on laptop"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0",
+      alt: "Data analytics dashboard"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1551650975-87deedd944c3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0",
+      alt: "Mobile app development"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0",
+      alt: "Team collaboration"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0",
+      alt: "Code review session"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0",
+      alt: "Modern workspace"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0",
+      alt: "Software architecture"
+    }
+  ];
+
+  return (
+    <section>
+      <div className="mx-auto max-w-3xl px-4 py-20 sm:px-6 lg:px-8">
+        <header className="mb-10 space-y-4 text-center text-balance">
+          <h2 className="text-3xl font-bold lg:text-4xl/tight">Great products begin with a vision.</h2>
+          <p className="text-muted-foreground text-lg">
+            Connect with us for web applications, mobile solutions and innovative digital
+            experiences
+          </p>
+          <div className="flex justify-center pt-2">
+            <Button size="lg" asChild>
+              <Link href="#">Get in touch</Link>
+            </Button>
+          </div>
+        </header>
+      </div>
+      <div className="flex justify-center overflow-hidden">
+        {images.map((image, index) => (
+          <figure
+            key={index}
+            className={cn(
+              "relative aspect-3/4 w-32 shrink-0 overflow-hidden",
+              index % 2 === 1 ? "translate-y-10 sm:w-40 lg:w-48" : "sm:w-48 lg:w-60"
+            )}>
+            <Image src={image.src} alt={image.alt} fill className="object-cover" />
+          </figure>
+        ))}
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export default function CTASection() {
+  return (
+    <section className="py-12 lg:py-20">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="bg-muted relative grid grid-cols-1 flex-col justify-between gap-4 overflow-hidden rounded-lg text-center lg:grid-cols-2 lg:flex-row lg:gap-10 lg:text-start">
+          <header className="flex flex-col px-4 py-10 lg:px-10">
+            <div className="mb-4 space-y-4">
+              <h3 className="text-3xl font-bold text-balance md:text-4xl/tight">
+                Ready to Transform Your Website?
+              </h3>
+              <p className="text-muted-foreground md:text-lg">
+                Join thousands of satisfied customers who have optimized their websites and boosted
+                conversions with Metro&#39;s AI-powered platform.
+              </p>
+            </div>
+            <div className="mt-4 flex flex-col justify-center gap-3 sm:flex-row! lg:justify-start">
+              <Button>
+                Start Free Trial
+                <ChevronRight />
+              </Button>
+              <Button variant="outline">Schedule a Demo</Button>
+            </div>
+          </header>
+          <figure className="relative lg:mt-10 lg:self-end">
+            <Image
+              className="lg:rounded-te-none aspect-video w-full rounded-tl-lg rounded-tr-lg object-cover lg:rounded-tr-none"
+              width={300}
+              height={300}
+              src="https://images.unsplash.com/photo-1760346738721-235e811f573d?q=80&w=3864&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="shadcn landing page"
+              unoptimized
+            />
+          </figure>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

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

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