jigsaw_engine 0.4.0

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import { Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+import { plans } from "./data";
+
+export default function PricingTable() {
+  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly");
+
+  return (
+    <section className="mx-auto w-full max-w-5xl space-y-4 px-4 py-12 lg:space-y-8">
+      <div className="space-y-2 text-center">
+        <h1 className="text-3xl font-bold leading-tight lg:text-4xl">Choose a Subscription</h1> 
+        <p className="text-muted-foreground text-lg">Choose a plan tailored to your needs</p>
+      </div>
+
+      <div className="flex justify-center">
+        <div className="bg-muted inline-flex items-center gap-1 rounded-full border p-1">
+          <Button
+            variant={billingCycle === "monthly" ? "default" : "ghost"}
+            className="rounded-full"
+            onClick={() => setBillingCycle("monthly")}>
+            Monthly
+          </Button>
+          <Button
+            variant={billingCycle === "yearly" ? "default" : "ghost"}
+            className="rounded-full"
+            onClick={() => setBillingCycle("yearly")}>
+            Yearly
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {plans.map((plan) => (
+          <Card key={plan.name} className="shadow-none">
+            <CardHeader>
+              <CardTitle>{plan.name}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <span className="text-3xl font-bold">{plan.price[billingCycle]}</span>
+                <span className="text-muted-foreground text-sm">
+                  {" "}
+                  / {billingCycle === "monthly" ? "month" : "year"}
+                </span>
+              </div>
+              <hr />
+              <ul className="space-y-3">
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex items-center gap-2">
+                    <Check className="text-muted-foreground/50 size-4 shrink-0" />
+                    <span className="text-sm">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+            <CardFooter>
+              <Button className="w-full">Get Started</Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}
+

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

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

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

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

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

@@ -0,0 +1,124 @@
+import { Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { allFeatures, plans } from "./data";
+
+export default function PricingTable() {
+  return (
+    <div className="mx-auto px-4 py-16 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-5xl space-y-10">
+        <header className="space-y-2">
+          <Badge variant="outline">Plans</Badge>
+          <h1 className="text-4xl font-bold leading-tight lg:text-4xl">Simple, Transparent Pricing</h1>
+          <p className="text-muted-foreground text-lg text-balance">
+            Choose the perfect plan for your business needs. Upgrade or
+            downgrade at any time.
+          </p>
+        </header>
+
+        <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-3">
+          {plans.map((plan, index) => (
+            <Card
+              key={index}
+              className="bg-muted space-y-2 border-none shadow-none"
+            >
+              <CardContent>
+                <div className="flex items-start justify-between">
+                  <div className="space-y-2">
+                    <div className="font-semibold">{plan.name}</div>
+                    <p className="text-muted-foreground mb-4 text-sm text-balance">
+                      {plan.description}
+                    </p>
+                  </div>
+                  <div className="flex items-end gap-2">
+                    <span className="text-4xl font-bold">
+                      ${plan.monthlyPrice}
+                    </span>
+                    <span className="text-muted-foreground mb-0.5">/mo</span>
+                  </div>
+                </div>
+
+                <Button className="w-full">Get started</Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <Card className="py-2 shadow-none">
+          <CardContent className="px-0">
+            <div className="hidden md:block">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b">
+                    <th className="px-6 py-4 text-start">Features</th>
+                    {plans.map((plan, index) => (
+                      <th
+                        key={index}
+                        className="px-6 py-4 text-center font-medium"
+                      >
+                        {plan.name}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="[&_tr:nth-child(odd)]:bg-muted">
+                  {allFeatures.map((feature, featureIndex) => (
+                    <tr key={featureIndex} className="border-b last:border-b-0">
+                      <td className="px-6 py-4">{feature}</td>
+                      {plans.map((plan, planIndex) => (
+                        <td key={planIndex} className="px-6 py-4 text-center">
+                          {typeof plan.features[feature] === "boolean" ? (
+                            plan.features[feature] ? (
+                              <Check className="mx-auto size-5 text-green-600" />
+                            ) : (
+                              <span>—</span>
+                            )
+                          ) : (
+                            <span>{plan.features[feature]}</span>
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Mobile Cards */}
+            <div className="md:hidden">
+              {plans.map((plan, planIndex) => (
+                <div key={planIndex} className="border-b last:border-b-0">
+                  <div className="px-6 py-3">
+                    <h4 className="font-semibold">{plan.name}</h4>
+                  </div>
+                  <div className="space-y-3 px-6 py-4">
+                    {allFeatures.map((feature, featureIndex) => (
+                      <div
+                        key={featureIndex}
+                        className="flex items-center justify-between"
+                      >
+                        <span className="text-muted-foreground">{feature}</span>
+                        <div>
+                          {typeof plan.features[feature] === "boolean" ? (
+                            plan.features[feature] ? (
+                              <Check className="size-5 text-green-600" />
+                            ) : (
+                              <span>—</span>
+                            )
+                          ) : (
+                            <span>{plan.features[feature]}</span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,205 @@
+"use client";
+
+import { useState } from "react";
+import { Check } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+
+const pricingPlans = [
+  {
+    id: "basic",
+    name: "Starter",
+    monthlyPrice: "$29",
+    yearlyPrice: "$23",
+    discount: "Save 20%",
+    features: [
+      "10 number of users",
+      "Email support",
+      "Basic storage (10GB)",
+      "Core features access",
+      "Basic reporting",
+      "Standard templates",
+      "Basic security features",
+    ],
+  },
+  {
+    id: "standard",
+    name: "Professional",
+    monthlyPrice: "$49",
+    yearlyPrice: "$39",
+    discount: "Save 20%",
+    features: [
+      "50 number of users",
+      "Priority support",
+      "Expanded storage (100GB)",
+      "Access to all advanced features",
+      "Comprehensive reporting and analytics",
+      "Full customization",
+      "Advanced security features",
+      "Access to premium templates and exclusive design assets",
+      "Deep integrations with business platforms",
+      "Advanced mobile app features",
+    ],
+  },
+  {
+    id: "premium",
+    name: "Business",
+    monthlyPrice: "$79",
+    yearlyPrice: "$63",
+    discount: "Save 20%",
+    features: [
+      "200 number of users",
+      "24/7 priority support",
+      "Unlimited storage",
+      "Access to all advanced features",
+      "Advanced reporting and analytics with AI insights",
+      "Full customization and white-labeling",
+      "Enterprise-grade security features",
+      "Dedicated account manager",
+      "Custom training sessions",
+    ],
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    monthlyPrice: "Custom",
+    yearlyPrice: "Custom",
+    discount: "Save 20%",
+    features: [
+      "Unlimited number of users",
+      "24/7 dedicated support with SLA",
+      "Unlimited storage with custom infrastructure",
+      "Access to all features including beta releases",
+      "Enterprise-grade security with compliance certifications",
+      "Access to all premium templates, exclusive assets, and custom designs",
+      "Unlimited integrations with custom API development",
+      "SLA guarantees and custom contracts",
+      "On-premise deployment options",
+    ],
+  },
+];
+
+export default function PricingTable() {
+  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
+    "monthly",
+  );
+  const [selectedPlan, setSelectedPlan] = useState("standard");
+
+  return (
+    <section className="mx-auto w-full max-w-5xl space-y-8 px-4 py-16">
+      <header className="mx-auto max-w-3xl space-y-4 text-center text-balance">
+        <div className="flex justify-center">
+          <Badge variant="outline">Pricing</Badge>
+        </div>
+        <h1 className="text-4xl font-bold leading-tight lg:text-4xl">
+          Flexible Pricing for Every Business
+        </h1>
+        <p className="text-muted-foreground md:text-lg">
+          Discover a range of pricing plans designed to meet diverse customer
+          requirements, from individuals and small teams to large enterprises.
+        </p>
+        <div className="flex justify-center">
+          <div className="bg-muted inline-flex items-center gap-1 rounded-md border p-1">
+            <Button
+              variant={billingCycle === "yearly" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setBillingCycle("yearly")}
+            >
+              Yearly
+            </Button>
+            <Button
+              variant={billingCycle === "monthly" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setBillingCycle("monthly")}
+            >
+              Monthly
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <div className="grid items-start gap-4 md:grid-cols-5">
+        <RadioGroup
+          value={selectedPlan}
+          onValueChange={setSelectedPlan}
+          className="md:col-span-2 space-y-1"
+        >
+          {pricingPlans.map((plan) => {
+            const isSelected = selectedPlan === plan.id;
+            const price =
+              billingCycle === "monthly" ? plan.monthlyPrice : plan.yearlyPrice;
+
+            return (
+              <div
+                key={plan.id}
+                className="has-data-[state=checked]:border-primary has-data-[state=checked]:bg-muted relative rounded-lg border p-4 transition-all"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-start gap-3">
+                    <RadioGroupItem
+                      value={plan.id}
+                      id={`plan-${plan.id}`}
+                      aria-describedby={`plan-${plan.id}-description`}
+                      className="mt-1 size-4 after:absolute after:inset-0 [&_svg]:size-2"
+                    />
+                    <div className="relative z-10 space-y-1">
+                      <Label
+                        htmlFor={`plan-${plan.id}`}
+                        className="cursor-pointer"
+                      >
+                        <CardTitle>{plan.name}</CardTitle>
+                      </Label>
+                      <Badge
+                        variant={isSelected ? "secondary" : "secondary"}
+                        className="text-xs"
+                      >
+                        {plan.discount}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div className="relative z-10 text-right">
+                    <div className="text-xl font-bold">{price}</div>
+                    {price !== "Custom" && (
+                      <CardDescription className="text-xs">
+                        /month
+                      </CardDescription>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </RadioGroup>
+
+        <Card className="md:col-span-3 shadow-none">
+          <CardHeader>
+            <CardTitle>Includes:</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {pricingPlans
+              .find((plan) => plan.id === selectedPlan)
+              ?.features.map((feature, index) => (
+                <div key={index} className="flex items-start gap-2">
+                  <Check className="text-green-600 mt-0.5 size-4 shrink-0" />
+                  <span className="text-sm">{feature}</span>
+                </div>
+              ))}
+            <Button className="mt-4 w-full" size="lg">
+              Choose Plan
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,143 @@
+"use client";
+
+import { ArrowRight, CheckIcon } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function PricingTable() {
+  return (
+    <section className="mx-auto w-full max-w-6xl space-y-6 px-4 py-16 lg:space-y-12">
+      <div className="grid gap-4 lg:grid-cols-2 lg:items-start lg:gap-8">
+        <h1 className="text-3xl leading-tight font-bold text-balance lg:text-4xl">
+          Creative services with transparent subscription pricing.
+        </h1>
+        <div className="space-y-4">
+          <p className="text-muted-foreground leading-relaxed text-balance md:text-lg">
+            Rapidly scale creative output for content, brand, social media and
+            campaigns. Each plan includes a dedicated design team to deliver
+            beautiful designs, on-time and at the scale you need.
+          </p>
+          <Button variant="secondary">
+            Book a demo
+            <ArrowRight />
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card className="shadow-none">
+          <CardHeader>
+            <CardTitle className="text-xl">Professional</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">All Basic Services</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Unlimited Requests</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Unlimited Revisions</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Cancel Anytime</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">A-Sync Collaboration</span>
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter className="mt-auto items-start justify-between gap-4">
+            <div className="flex items-end gap-2">
+              <span className="text-2xl font-semibold">$3.990</span>
+              <span className="text-muted-foreground mb-1 text-xs">/month</span>
+            </div>
+            <Button size="lg">
+              Get Started
+              <ArrowRight />
+            </Button>
+          </CardFooter>
+        </Card>
+
+        <Card className="border-foreground bg-foreground text-background shadow-none">
+          <CardHeader>
+            <CardTitle className="text-xl">Unlimited</CardTitle>
+            <CardAction>
+              <Badge
+                variant="secondary"
+                className="dark bg-green-700 text-[10px] uppercase"
+              >
+                Most Popular
+              </Badge>
+            </CardAction>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">All Basic Services</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Unlimited Requests</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">All Advanced Services</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Unlimited Revisions</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Cancel anytime</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">A-Sync Collaboration</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Art Direction</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Weekly Updates</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckIcon className="size-4 shrink-0 text-green-600" />
+                <span className="text-sm">Concept and Ideation</span>
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter className="mt-auto items-start justify-between gap-4">
+            <div className="flex items-end gap-2">
+              <span className="text-2xl font-semibold">$5.990</span>
+              <span className="text-muted-foreground mb-1 text-xs">/month</span>
+            </div>
+            <Button variant="secondary" size="lg">
+              Get Started
+              <ArrowRight />
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </section>
+  );
+}

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

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

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

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