jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/marketing/pricing-table-6/render.jsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Slider } from "@/components/ui/slider";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+const pricingPlans = [
+  {
+    id: "starter",
+    name: "Starter",
+    baseMonthlyPrice: 9,
+    baseYearlyPrice: 7,
+    description: "Perfect for individuals who need secure cloud storage",
+    features: [
+      "100GB storage space",
+      "Automatic file backup",
+      "Mobile app access",
+      "Basic file sharing",
+      "Email support",
+    ],
+  },
+  {
+    id: "professional",
+    name: "Professional",
+    baseMonthlyPrice: 29,
+    baseYearlyPrice: 23,
+    description: "Ideal for small teams and growing businesses",
+    features: [
+      "500GB storage space",
+      "Advanced backup features",
+      "Team collaboration tools",
+      "Priority email support",
+      "Version history (30 days)",
+    ],
+  },
+  {
+    id: "business",
+    name: "Business",
+    baseMonthlyPrice: 79,
+    baseYearlyPrice: 63,
+    description: "Best for companies that need enterprise-grade solutions",
+    features: [
+      "2TB storage space",
+      "Unlimited backup automation",
+      "Advanced security features",
+      "24/7 priority support",
+      "Extended version history (1 year)",
+    ],
+    popular: true,
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    baseMonthlyPrice: 199,
+    baseYearlyPrice: 159,
+    description: "For large organizations with custom requirements",
+    features: [
+      "Unlimited storage space",
+      "Custom backup solutions",
+      "Dedicated account manager",
+      "SLA guarantees",
+      "On-premise deployment options",
+    ],
+  },
+];
+
+function calculatePrice(basePrice: number, userCount: number): number {
+  const multiplier = 1 + ((userCount - 5) / 5) * 0.2;
+  return Math.round(basePrice * multiplier);
+}
+
+function formatPrice(price: number): string {
+  return `$${price}`;
+}
+
+export default function PricingTable() {
+  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
+    "monthly",
+  );
+  const [userCount, setUserCount] = useState([10]);
+
+  return (
+    <section className="mx-auto w-full max-w-7xl space-y-10 px-4 py-16">
+      <header className="flex items-start justify-between space-y-4">
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold leading-tight text-balance lg:text-4xl">
+            Transparent, flexible plans for every team
+          </h1>
+          <p className="text-muted-foreground text-lg">
+            No hidden fees, no contracts—just simple and transparent pricing for
+            every business.
+          </p>
+        </div>
+        <div className="inline-flex items-center gap-1 rounded-lg border p-1">
+          <Button
+            variant={billingCycle === "monthly" ? "default" : "ghost"}
+            size="sm"
+            onClick={() => setBillingCycle("monthly")}
+          >
+            Monthly
+          </Button>
+          <Button
+            variant={billingCycle === "yearly" ? "default" : "ghost"}
+            size="sm"
+            onClick={() => setBillingCycle("yearly")}
+          >
+            Yearly
+          </Button>
+        </div>
+      </header>
+
+      <div className="flex flex-col items-center gap-8 lg:flex-row lg:justify-between">
+        <div className="w-full">
+          <div className="relative flex items-center gap-4">
+            <Slider
+              value={userCount}
+              onValueChange={setUserCount}
+              min={5}
+              max={30}
+              step={5}
+              className="w-full"
+              aria-label="Number of users"
+            />
+            <Badge variant="outline">{userCount[0]} Users</Badge>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {pricingPlans.map((plan) => {
+          const basePrice =
+            billingCycle === "monthly"
+              ? plan.baseMonthlyPrice
+              : plan.baseYearlyPrice;
+          const calculatedPrice = calculatePrice(basePrice, userCount[0]);
+          const price = formatPrice(calculatedPrice);
+          const isPopular = plan.popular;
+
+          return (
+            <Card
+              key={plan.id}
+              className={cn(
+                "flex flex-col shadow-none",
+                isPopular && "bg-muted ring ring-green-600 dark:ring-green-600",
+                !isPopular && "lg:mt-4",
+              )}
+            >
+              <CardHeader>
+                <CardTitle>{plan.name}</CardTitle>
+                <div className="flex items-end gap-1">
+                  <div className="font-bold text-3xl">{price}</div>
+                  <div className="text-muted-foreground mb-1 text-sm">
+                    / {billingCycle === "monthly" ? "month" : "year"}
+                  </div>
+                </div>
+                <CardDescription className="mt-2">
+                  {plan.description}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex-1 space-y-3">
+                {plan.features.map((feature, index) => (
+                  <div key={index} className="flex items-start gap-2">
+                    <Check className="text-muted-foreground mt-0.5 size-4 shrink-0" />
+                    <span className="text-sm">{feature}</span>
+                  </div>
+                ))}
+              </CardContent>
+              <CardFooter>
+                <Button
+                  variant={isPopular ? "default" : "outline"}
+                  className="w-full"
+                  size="lg"
+                >
+                  Choose Plan
+                </Button>
+              </CardFooter>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/pricing-table-7/config.json

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

data/app/javascript/seeds/blocks/marketing/pricing-table-7/data.js

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

data/app/javascript/seeds/blocks/marketing/pricing-table-7/render.jsx

@@ -0,0 +1,351 @@
+"use client";
+
+import { useState } from "react";
+import { Check, X, Info } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const features = [
+  {
+    name: "Component Library",
+    info: "Access to our comprehensive UI component collection",
+    basic: { included: true, value: "Single user access" },
+    plus: { included: true, value: "Single user access" },
+    premium: { included: true, value: "Single user access" },
+  },
+  {
+    name: "Documentation",
+    info: "Comprehensive guides and tutorials",
+    basic: { included: true, value: "Free access" },
+    plus: { included: true, value: "Free access" },
+    premium: { included: true, value: "Free access" },
+  },
+  {
+    name: "Premium Components",
+    info: "Advanced and specialized component sets",
+    basic: { included: false, value: "Not included" },
+    plus: { included: true, value: "Design only" },
+    premium: { included: true, value: "Design + Code" },
+  },
+  {
+    name: "Templates",
+    info: "Ready-to-use page templates and layouts",
+    basic: { included: false, value: "Not included" },
+    plus: { included: true, value: "Design only" },
+    premium: { included: true, value: "Design + Code" },
+  },
+  {
+    name: "Design Tool Plugin",
+    info: "Native plugin for design software integration",
+    basic: { included: false, value: "Not included" },
+    plus: { included: false, value: "Not included" },
+    premium: { included: true, value: "Single user access" },
+  },
+  {
+    name: "Free Updates",
+    info: "Lifetime access to all future updates",
+    basic: { included: true, value: "Lifetime access" },
+    plus: { included: true, value: "Lifetime access" },
+    premium: { included: true, value: "Lifetime access" },
+  },
+  {
+    name: "Commercial Usage",
+    info: "Use components in commercial projects",
+    basic: { included: true, value: "Use on unlimited projects" },
+    plus: { included: true, value: "Use on unlimited projects" },
+    premium: { included: true, value: "Use on unlimited projects" },
+  },
+  {
+    name: "Support Response",
+    info: "Average response time for support requests",
+    basic: { included: true, value: "48 hours" },
+    plus: { included: true, value: "24 hours" },
+    premium: { included: true, value: "24 hours" },
+  },
+];
+
+const licenseTypes = [
+  {
+    value: "personal",
+    label: "Personal",
+    description: "Dedicated to solo designers, developers or freelancers",
+    licenseInfo: "Component library license for one user",
+    prices: {
+      basic: { current: 119, original: 149 },
+      plus: { current: 299, original: 399 },
+      premium: { current: 559, original: 699 },
+    },
+  },
+  {
+    value: "team",
+    label: "Team",
+    description: "Perfect for small teams and agencies",
+    licenseInfo: "Component library license for up to 5 users",
+    prices: {
+      basic: { current: 179, original: 199 },
+      plus: { current: 449, original: 599 },
+      premium: { current: 839, original: 1049 },
+    },
+  },
+  {
+    value: "enterprise",
+    label: "Enterprise",
+    description: "Ideal for large organizations",
+    licenseInfo: "Component library license for unlimited users",
+    prices: {
+      basic: { current: 239, original: 299 },
+      plus: { current: 599, original: 799 },
+      premium: { current: 1119, original: 1399 },
+    },
+  },
+];
+
+export default function PricingTable() {
+  const [licenseType, setLicenseType] = useState("personal");
+  const currentLicense =
+    licenseTypes.find((l) => l.value === licenseType) || licenseTypes[0];
+
+  return (
+    <section className="mx-auto w-full max-w-7xl space-y-6 px-4 py-16">
+      <header className="mb-10 space-y-4 text-center">
+        <Badge variant="secondary">Pricing</Badge>
+        <h1 className="text-4xl leading-tight font-bold text-balance lg:text-4xl">
+          Get access and start building faster
+        </h1>
+        <p className="text-muted-foreground text-lg text-balance">
+          Purchase with a single payment and join over{" "}
+          <strong>6,300+ creators and teams</strong> who trusted us.
+        </p>
+      </header>
+
+      <div className="grid gap-4 lg:grid-cols-[300px_1fr]">
+        <Card className="bg-muted shadow-none">
+          <CardContent className="flex flex-col space-y-4">
+            <div>
+              <div className="mb-4 font-semibold">Select your license</div>
+              <Select value={licenseType} onValueChange={setLicenseType}>
+                <SelectTrigger className="bg-background w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {licenseTypes.map((license) => (
+                    <SelectItem key={license.value} value={license.value}>
+                      {license.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-3">
+              {licenseTypes
+                .find((l) => l.value === licenseType)
+                ?.description.split(". ")
+                .map((desc, idx) => (
+                  <div key={idx} className="flex items-start gap-2">
+                    <Check className="text-primary mt-0.5 size-4 shrink-0" />
+                    <p className="text-muted-foreground text-sm">{desc}</p>
+                  </div>
+                ))}
+              <div className="flex items-start gap-2">
+                <Check className="text-primary mt-0.5 size-4 shrink-0" />
+                <p className="text-muted-foreground text-sm">
+                  {
+                    licenseTypes.find((l) => l.value === licenseType)
+                      ?.licenseInfo
+                  }
+                </p>
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter className="mt-auto">
+            <a href="#" className="text-primary text-xs hover:underline">
+              Need help choosing the right license?
+            </a>
+          </CardFooter>
+        </Card>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          <Card className="shadow-none">
+            <CardHeader>
+              <CardTitle>Basic Package</CardTitle>
+              <CardDescription>
+                For creators needing lifetime access to the basic component
+                library.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <div className="flex items-baseline gap-2">
+                  <span className="text-4xl font-bold">
+                    ${currentLicense.prices.basic.current}
+                  </span>
+                  {currentLicense.prices.basic.original && (
+                    <span className="text-muted-foreground text-sm line-through">
+                      ${currentLicense.prices.basic.original}
+                    </span>
+                  )}
+                </div>
+                <p className="text-muted-foreground mt-2 text-xs">
+                  One-time payment · Plus local taxes
+                </p>
+              </div>
+              <Button className="w-full">Get Started</Button>
+            </CardContent>
+          </Card>
+
+          <Card className="shadow-none">
+            <CardHeader>
+              <CardTitle>Plus Package</CardTitle>
+              <CardDescription>
+                Includes Premium Components, Templates, and free lifetime
+                updates.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <div className="flex items-baseline gap-2">
+                  <span className="text-4xl font-bold">
+                    ${currentLicense.prices.plus.current}
+                  </span>
+                  {currentLicense.prices.plus.original && (
+                    <span className="text-muted-foreground text-lg line-through">
+                      ${currentLicense.prices.plus.original}
+                    </span>
+                  )}
+                </div>
+                <p className="text-muted-foreground mt-2 text-xs">
+                  One-time payment · Plus local taxes
+                </p>
+              </div>
+              <Button className="w-full" variant="default">
+                Get Started
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="shadow-none">
+            <CardHeader>
+              <CardTitle>Premium Package</CardTitle>
+              <CardDescription>
+                All design and code resources for creators.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <div className="flex items-baseline gap-2">
+                  <span className="text-4xl font-bold">
+                    ${currentLicense.prices.premium.current}
+                  </span>
+                  {currentLicense.prices.premium.original && (
+                    <span className="text-muted-foreground text-lg line-through">
+                      ${currentLicense.prices.premium.original}
+                    </span>
+                  )}
+                </div>
+                <p className="text-muted-foreground mt-2 text-xs">
+                  One-time payment · Plus local taxes
+                </p>
+              </div>
+              <Button className="w-full" variant="default">
+                Get Started
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto rounded-lg border">
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="border-b">
+              <th className="p-4 text-left font-medium">Feature</th>
+              <th className="p-4 text-start font-medium">Basic Package</th>
+              <th className="p-4 text-start font-medium">Plus Package</th>
+              <th className="p-4 text-start font-medium">Premium Package</th>
+            </tr>
+          </thead>
+          <tbody>
+            {features.map((feature, index) => (
+              <tr
+                key={index}
+                className={`border-b ${index % 2 === 1 ? "bg-muted" : ""}`}
+              >
+                <td className="p-4">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{feature.name}</span>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Info className="text-muted-foreground size-3.5 cursor-help" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{feature.info}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                </td>
+                <td className="p-4">
+                  {feature.basic.included ? (
+                    <div className="flex items-center gap-1">
+                      <Check className="size-5 text-green-600" />
+                      <span className="text-muted-foreground text-sm">
+                        {feature.basic.value}
+                      </span>
+                    </div>
+                  ) : (
+                    <X className="text-destructive size-4" />
+                  )}
+                </td>
+                <td className="p-4">
+                  {feature.plus.included ? (
+                    <div className="flex items-center gap-1">
+                      <Check className="size-5 text-green-600" />
+                      <span className="text-muted-foreground text-sm">
+                        {feature.plus.value}
+                      </span>
+                    </div>
+                  ) : (
+                    <X className="text-destructive size-4" />
+                  )}
+                </td>
+                <td className="p-4">
+                  {feature.premium.included ? (
+                    <div className="flex items-center gap-1">
+                      <Check className="size-5 text-green-600" />
+                      <span className="text-muted-foreground text-sm">
+                        {feature.premium.value}
+                      </span>
+                    </div>
+                  ) : (
+                    <X className="text-destructive size-4" />
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/team-sections-1/data.js

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

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

@@ -0,0 +1,71 @@
+import Image from "next/image";
+
+export default function Component() {
+  const teamMembers = [
+    {
+      name: "Michael Scott",
+      title: "Co-Founder, Chief Architect",
+      image:
+        "https://plus.unsplash.com/premium_photo-1754211654507-e0a561f6b9c4?q=80&w=721&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    },
+    {
+      name: "Chandler Rigs",
+      title: "Co-Founder, Architect",
+      image:
+        "https://images.unsplash.com/photo-1754051486494-cfdbf29a589c?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    },
+    {
+      name: "Isabella Rodriguez",
+      title: "Architect",
+      image:
+        "https://images.unsplash.com/photo-1754006320747-a90ba54b93cd?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    },
+    {
+      name: "Ava Wilson",
+      title: "3D Artist",
+      image:
+        "https://images.unsplash.com/photo-1753828335589-8fee07cb4cec?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    },
+  ];
+
+  return (
+    <section className="py-16 lg:py-28">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="grid gap-6 lg:grid-cols-[1fr_200px] lg:gap-12 xl:grid-cols-[1fr_240px]">
+          <div className="flex flex-col justify-center space-y-4">
+            <div className="max-w-2xl space-y-2">
+              <h2 className="text-3xl leading-tight font-bold lg:text-4xl/none">
+                Our Team
+              </h2>
+              <p className="text-muted-foreground lg:text-lg">
+                We craft solutions that amplify key characteristics, achieving a
+                harmonious balance of function and intent. Through careful
+                analysis and collaborative engagement, our spaces transcend the
+                conventional.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {teamMembers.map((member, index) => (
+            <div key={index} className="bg-card rounded-lg border">
+              <div className="relative h-64 w-full overflow-hidden rounded-t-lg">
+                <Image
+                  src={member.image}
+                  alt={`Picture of ${member.name}`}
+                  layout="fill"
+                  objectFit="cover"
+                  className="rounded-t-lg"
+                />
+              </div>
+              <div className="p-4">
+                <h3 className="text-lg font-medium">{member.name}</h3>
+                <p className="text-muted-foreground text-sm">{member.title}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

data/app/javascript/seeds/blocks/marketing/team-sections-2/data.js

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