Service Suggestion Grid

Features 1

About

Service Suggestion Grid This component displays a responsive grid of service cards. It takes an array of items as a prop, making it highly reusable for any list of suggestions. The animations are handled by framer-motion to provide a smooth, staggered loading effect.

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

Code

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

Usage.tsx

import { ServiceSuggestionGrid } from "@/components/ui/service-suggestion-grid";

// Demo component to showcase the ServiceSuggestionGrid
const ServiceSuggestionGridDemo = () => {
  const services = [
    {
      title: "Ride",
      description: "Go anywhere with Uber. Request a ride, hop in, and go.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-iMa1InVGtssLycAQNqMjjPs8GkWMHd.png&w=1000&q=75",
      imageAlt: "3D illustration of a white car",
      ctaText: "Details",
      href: "#ride",
    },
    {
      title: "Reserve",
      description: "Reserve your ride in advance so you can relax on the day of your trip.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ij7GEZhfmzLNlLgDJVhkST8FIm5rJV.png&w=1000&q=75",
      imageAlt: "3D illustration of a calendar and clock",
      ctaText: "Details",
      href: "#reserve",
    },
    {
      title: "Intercity",
      description: "Get convenient, affordable outstation cabs anytime at your doorstep.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-jUUd9iY5M09GRL9rsdfb188bh2kEwX.png&w=1000&q=75",
      imageAlt: "3D illustration of a car with luggage",
      ctaText: "Details",
      href: "#intercity",
    },
    {
      title: "Courier",
      description: "Uber makes same-day item delivery easier than ever.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-HNciDluT0NAzIwovOE2g7EpZORt7CQ.png&w=1000&q=75",
      imageAlt: "3D illustration of a person carrying a box",
      ctaText: "Details",
      href: "#courier",
    },
    {
      title: "Rentals",
      description: "Request a trip for a block of time and make multiple stops.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ZY8MgKs5A5Kh8GgGf4F23WojfxaeAQ.png&w=1000&q=75",
      imageAlt: "3D illustration of a car and a clock",
      ctaText: "Details",
      href: "#rentals",
    },
    {
      title: "Bike",
      description: "Get affordable motorbike rides in minutes at your doorstep.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-14CWzVxggDq97J5rWOEHyLU4embdRr.png&w=1000&q=75",
      imageAlt: "3D illustration of a motorcycle",
      ctaText: "Details",
      href: "#bike",
    },
  ];

  return (
    <div className="w-full bg-background flex items-center justify-center p-4">
      <ServiceSuggestionGrid items={services} />
    </div>
  );
};

export default ServiceSuggestionGridDemo;