# Feature 1

> A four-up feature grid of icon cards under a badge heading, closing on a call to action

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

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

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/feature-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/features/feature-1/page.tsx`

```tsx
import { Feature1 } from "@/components/blocks/marketing/features/feature-1/components/feature-1"

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

### `storage/app/registry-sources/marketing/features/feature-1/feature-1.tsx`

```tsx
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { ArrowRight } from 'lucide-react'
import { features } from "@/components/data/feature-1-data"

export function Feature1() {
  return (
    <section className='mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8'>
      {/* Header Section */}
      <header className='mx-auto mb-12 max-w-2xl text-center'>
        <Badge variant='secondary' className='h-auto mb-4 rounded-full px-4 py-1 font-medium'>
          Why Choose Us
        </Badge>
        <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>Experience the Difference</h2>
        <p className='text-muted-foreground text-pretty'>
          Discover why thousands of customers trust us for their shopping needs. We combine quality, convenience, and
          exceptional service.
        </p>
      </header>

      {/* Features Grid */}
      <div className='grid gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4'>
        {features.map(feature => (
          <article key={feature.id} className='group'>
            <Card className='relative h-full overflow-hidden transition-all hover:shadow-md'>
              <CardContent className='px-6'>
                <div className='bg-secondary text-secondary-foreground mb-4 inline-flex size-12 items-center justify-center rounded-xl'>
                  <feature.icon className='size-5' aria-hidden='true' />
                </div>
                <h3 className='mb-2 text-lg font-semibold'>{feature.title}</h3>
                <p className='text-muted-foreground mb-4 text-sm'>{feature.description}</p>

                <Button
                  variant='link'
                  size='sm'
                  className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground h-auto cursor-pointer !p-0 text-sm"
                >
                  Learn more
                  <ArrowRight />
                </Button>
              </CardContent>
            </Card>
          </article>
        ))}
      </div>

      {/* Bottom CTA */}
      <div className='mt-12 text-center'>
        <Button size='lg' className='h-10 cursor-pointer rounded-lg !px-8'>
          Start Shopping
          <ArrowRight />
        </Button>
      </div>
    </section>
  )
}

export default Feature1
```

### `storage/app/registry-sources/marketing/features/feature-1/feature-1-data.ts`

```ts
import { Clock, Shield, Sparkles, Truck } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'

export interface FeatureItem {
  id: number
  title: string
  description: string
  icon: LucideIcon
}

export const features: FeatureItem[] = [
  {
    id: 1,
    title: 'Premium Quality',
    description: 'Handcrafted with premium materials and meticulous attention to detail.',
    icon: Sparkles,
  },
  {
    id: 2,
    title: 'Secure Shopping',
    description: '100% secure payment processing with end-to-end encryption.',
    icon: Shield,
  },
  {
    id: 3,
    title: 'Fast Delivery',
    description: 'Free worldwide shipping and hassle-free returns within 30 days.',
    icon: Truck,
  },
  {
    id: 4,
    title: '24/7 Support',
    description: 'Round-the-clock customer support to assist you anytime.',
    icon: Clock,
  },
]
```