Components
Loading preview...
Service Card A visually engaging card component designed to showcase services or features. It includes a title, a call-to-action link, and a decorative image. The card features a subtle, fluid animation on hover to draw user attention.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/service-cardimport { ServiceCard } from "@/components/ui/service-card";
const Demo = () => {
const services = [
{
title: "Gamification Marketing",
href: "/services/gamification",
imgSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-DFiJBJyUFg9QYTZOWEFeeza18HBnty.png&w=320&q=75",
imgAlt: "Bowling pins and ball illustration",
variant: "red",
},
{
title: "Graphic Design",
href: "/services/design",
imgSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-SxvnIpN2RVwLK77XxK3MnVCU6Xgc29.png&w=320&q=75",
imgAlt: "Paint bucket illustration",
variant: "default",
},
{
title: "Analytics and Tracking",
href: "/services/analytics",
imgSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-J7XYh5Cix5CceVeAtkuVXYSGgrhjDL.png&w=320&q=75",
imgAlt: "Megaphone illustration",
variant: "gray",
},
{
title: "Content Creation",
href: "/services/content",
imgSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-nY3Stc1545aP21dAi1IEbYlnc4rovS.png&w=320&q=75",
imgAlt: "Notebook and pen illustration",
variant: "blue",
},
];
return (
<div className="w-full max-w-5xl mx-auto p-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{services.map((service) => (
<ServiceCard
key={service.title}
title={service.title}
href={service.href}
imgSrc={service.imgSrc}
imgAlt={service.imgAlt}
variant={service.variant as "red" | "default" | "gray" | "blue"}
className="min-h-[180px]"
/>
))}
</div>
</div>
);
};
export default Demo;