Components
Loading preview...
Pricing Card This component is a flexible pricing card designed to display plan details, features, and a call-to-action. It uses framer-motion for subtle hover animations and is built with shadcn/ui conventions for theming and responsiveness.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/pricing-card-1import { PricingCard } from "@/components/ui/pricing-card-1";
import { Button } from "@/components/ui/button";
export default function PricingDemo() {
const plans = [
{
title: "Web Design",
price: "€1500",
priceDescription: "Starting from",
description:
"If you're looking to build a website that not only looks great but performs flawlessly.",
features: [
"Experienced Designer",
"Fast Delivery",
"Conversion Focused",
"Framer Development (add-on)",
],
buttonText: "Let's Talk",
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-gyoxLFpXzRRzVsgPJOKvB2r4tvzpcy.png&w=320&q=75",
imageAlt: "Pink cherry blossom tree",
},
{
title: "Product Design",
price: "€75",
priceDescription: "Hourly rate",
description:
"Perfect if you're looking to build a dashboard, app, etc... and get it 'done-right' the first time.",
features: [
"Experienced Designer",
"Fast Delivery",
"Conversion Focused",
"Tailored Design System",
],
buttonText: "Let's Talk",
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-v98BP3EQdx0Yd0NkjHPnWx33WvzwGP.png&w=320&q=75",
imageAlt: "Yellow autumn tree",
},
];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background px-4 py-12">
<div className="w-full max-w-5xl space-y-8">
{/* Title Section */}
<div className="text-center">
<p className="text-sm font-semibold uppercase tracking-wider text-primary">
Pricing Plans
</p>
<h1 className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
Transparent Pricing, No Surprises
</h1>
</div>
{/* Pricing Cards Grid */}
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
{plans.map((plan) => (
<PricingCard key={plan.title} {...plan} />
))}
</div>
{/* Unique Request Card */}
<div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
<h3 className="text-xl font-semibold">Unique Request</h3>
<p className="mt-2 text-muted-foreground">Are you looking for something custom? Don't hesitate to contact us, and we'll help brainstorm your product to success.</p>
<div className="mt-6">
<Button className="w-full md:w-auto">Let's Talk</Button>
</div>
</div>
</div>
</div>
);
}