Service Card

Features 1

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Service Card to your project and fits it to your theme.

Code

How Service Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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://cdn.21st.dev/assets/mirror/d5/d5afd7118906a71251cd9f1174e1582fc179019c53a05c68bd7ddf40c506acb7.jpg"
            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://cdn.21st.dev/assets/mirror/cf/cfa170e6609f88862cbb5026caade412dcbda9043308ac4479f97819c12f418c.jpg"
            href="#"
          />
        </div>
      </div>
    </div>
  );
};

export default ServiceSectionDemo;