# Listing 1

> A three-up service listing with category badges and a get-started action

A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/listing-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnstore/listing-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/listing-1-light-9d8a8772dd931523.png
- Registry item: https://shadcnstore.com/r/listing-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/listing-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `badge`, `button`, `card`

## Files

### `storage/app/registry-sources/marketing/listings/listing-1/page.tsx`

```tsx
import { Listing1 } from "@/components/blocks/marketing/listings/listing-1/components/listing-1"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <Listing1 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/marketing/listings/listing-1/listing-1.tsx`

```tsx
import { Star, ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { cn } from '@/lib/utils'

interface Service {
  id: number
  title: string
  price: number
  duration: string
  rating: number
  image: string
  category: string
  description: string
}

const services: Service[] = [
  {
    id: 1,
    title: 'Web Development',
    price: 2999,
    duration: '2-4 weeks',
    rating: 4.9,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/fashion-template-preview.500w.76ef52.avif',
    category: 'Development',
    description:
      'Professional development services tailored to your business needs. Scalable solutions that drive results.',
  },
  {
    id: 2,
    title: 'Mobile App Development',
    price: 4999,
    duration: '4-8 weeks',
    rating: 4.8,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/customer-testimonial-video-thumbnail.600w.9b1f27.avif',
    category: 'Development',
    description:
      'Native mobile applications for both iOS and Android platforms. Built with the latest technologies for optimal performance.',
  },
  {
    id: 3,
    title: 'UI/UX Design',
    price: 1999,
    duration: '2-3 weeks',
    rating: 4.7,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/uiux-design.500w.b4c8f3.avif',
    category: 'Design',
    description:
      'Transform your brand with our creative design solutions. Visually stunning interfaces that captivate your audience.',
  },
  {
    id: 4,
    title: 'Digital Marketing',
    price: 1499,
    duration: 'Ongoing',
    rating: 4.6,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/digital-marketing.500w.241875.avif',
    category: 'Marketing',
    description:
      'Boost your online presence with our digital marketing strategies. Reach and engage your target audience effectively.',
  },
  {
    id: 5,
    title: 'Brand Identity',
    price: 1299,
    duration: '3-4 weeks',
    rating: 4.8,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/brand-identity.500w.df8c41.avif',
    category: 'Design',
    description:
      'Create a strong brand identity with our design expertise. Consistent branding across all platforms and materials.',
  },
  {
    id: 6,
    title: 'Cloud Solutions',
    price: 3999,
    duration: '4-6 weeks',
    rating: 4.9,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/cloud-solutions.500w.b0daeb.avif',
    category: 'IT Services',
    description:
      'Reliable IT solutions to keep your business running smoothly. Expert support and innovative technology services.',
  },
]

interface Listing1Props {
  className?: string
}

export function Listing1({ className }: Listing1Props) {
  return (
    <section className={cn('py-16', className)}>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        <header className='mb-12 text-center'>
          <h2 className='text-3xl font-bold tracking-tight text-balance md:text-4xl'>Our Professional Services</h2>
          <p className='text-muted-foreground mt-4'>Expert solutions tailored to your business needs</p>
        </header>

        <div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
          {services.map(service => (
            <Card key={service.id} className='group relative flex flex-col gap-2 overflow-hidden pt-0'>
              <div className='aspect-video overflow-hidden'>
                <img
                  src={service.image}
                  alt={`${service.title} - ${service.category}`}
                  className='size-full object-cover grayscale transition-all duration-500 group-hover:scale-105'
                  width={600}
                  height={338}
                />
              </div>
              <CardHeader className='flex-1 pt-4'>
                <div className='mb-3 flex items-center justify-between'>
                  <Badge variant='secondary' className="h-auto px-2.5 py-0.5 font-semibold rounded-md">{service.category}</Badge>
                  <div className='flex items-center gap-1'>
                    <Star className='fill-foreground size-4' />
                    <span className='text-sm font-medium'>{service.rating}</span>
                  </div>
                </div>
                <CardTitle className='text-xl font-semibold text-balance'>{service.title}</CardTitle>
              </CardHeader>

              <CardContent>
                <p className='text-muted-foreground line-clamp-2 text-sm'>{service.description}</p>
              </CardContent>

              <CardFooter className='flex flex-col items-start gap-4 pt-4 bg-transparent border-t-0'>
                <div className='flex w-full items-baseline justify-between'>
                  <div>
                    <span className='text-foreground text-2xl font-bold'>${service.price}</span>
                    <span className='text-muted-foreground text-sm'> / project</span>
                  </div>
                  <span className='text-muted-foreground text-sm'>{service.duration}</span>
                </div>
                <Button className="h-9 px-4 py-2 group-hover:bg-primary group-hover:text-primary-foreground w-full cursor-pointer">
                  Get Started
                  <ArrowRight />
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Listing1
```