Components
Service Card This component displays a service or feature with a background image, title, description, and a call-to-action button. It supports both light and dark variants to match different sections of your UI and includes subtle hover animations for a modern feel.
Loading preview...
import { ServiceCard } from "@/components/ui/service-card"; // Adjust path as needed
const ServiceSectionDemo = () => {
return (
<div className="w-full bg-background text-foreground p-4 md:p-8">
<div className="mx-auto max-w-6xl">
<h2 className="mb-6 text-3xl font-bold tracking-tight">Service</h2>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
{/* Card 1: Dark Variant */}
<ServiceCard
variant="dark"
title="realme Exchange"
description="Exchange your used smartphone at the best price & Even Higher with Deferred Exchange"
buttonText="Learn More"
imageUrl="https://images.unsplash.com/photo-1582807129843-8a00296ccb37?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fG1vYmlsZXxlbnwwfDB8MHx8fDA%3D?q=80&w=2070&auto=format&fit=crop"
href="#"
/>
{/* Card 2: Light Variant */}
<ServiceCard
variant="light"
title={
// Example of passing a ReactNode for custom styling
<>
realme Care<span className="text-yellow-500">+</span>
</>
}
description="We Care, For Real"
buttonText="Learn More"
imageUrl="https://images.unsplash.com/photo-1695048064952-44b984f2af6d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG1vYmlsZXxlbnwwfDB8MHx8fDA%3D"
href="#"
/>
</div>
</div>
</div>
);
};
export default ServiceSectionDemo;