# Statistic 2

> Side-by-side layout showcasing company metrics and growth statistics

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

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

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/statistic-2.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`, `card`

## Files

### `storage/app/registry-sources/marketing/statistics/statistic-2/page.tsx`

```tsx
import { Statistic2 } from "@/components/blocks/marketing/statistics/statistic-2/components/statistic-2"

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

### `storage/app/registry-sources/marketing/statistics/statistic-2/statistic-2.tsx`

```tsx
import { Rocket } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { companyMetrics } from "@/components/data/statistic-2-data"

export function Statistic2() {
  return (
    <section className='py-16 md:py-20'>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='flex flex-col gap-16'>
          {/* Header with Side-by-Side Layout */}
          <div className='grid gap-12 lg:grid-cols-2 lg:gap-16'>
            <div className='flex flex-col gap-6'>
              <div className='flex items-center gap-2'>
                <Badge variant='outline' className='h-auto [&>svg]:size-4! rounded-md flex items-center gap-2 px-4 py-2 text-sm font-medium'>
                  <Rocket />
                  Company Growth
                </Badge>
              </div>
              <h2 className='text-4xl font-bold tracking-tight lg:text-5xl'>
                Building the future of{' '}
                <span className='from-primary to-primary/60 bg-linear-to-r bg-clip-text text-transparent'>
                  developer tools
                </span>
              </h2>
              <p className='text-muted-foreground text-lg leading-relaxed'>
                From a small startup to a platform trusted by thousands of developers worldwide. Here's how we're
                scaling our impact and growing our team.
              </p>
            </div>

            {/* Quick Metrics Grid */}
            <div className='grid grid-cols-2 gap-4'>
              {companyMetrics.map(metric => (
                <Card key={metric.label} className='text-center transition-shadow duration-200 hover:shadow-md py-6'>
                  <CardContent className='flex flex-col gap-3'>
                    <div className='bg-primary/10 mx-auto flex size-12 items-center justify-center rounded-xl'>
                      <metric.icon className='text-primary size-6' />
                    </div>
                    <div>
                      <div className='text-2xl font-bold'>{metric.value}</div>
                      <p className='text-muted-foreground text-sm'>{metric.label}</p>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

export default Statistic2
```

### `storage/app/registry-sources/marketing/statistics/statistic-2/statistic-2-data.ts`

```ts
import { Code, Database, Shield, Timer } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'

export interface CompanyMetric {
  value: string
  label: string
  icon: LucideIcon
}

export const companyMetrics: CompanyMetric[] = [
  { value: '500K+', label: 'Lines of Code', icon: Code },
  { value: '99.99%', label: 'Security Score', icon: Shield },
  { value: '<100ms', label: 'Response Time', icon: Timer },
  { value: '50TB', label: 'Data Processed', icon: Database },
]
```