> ## Documentation Index
> Fetch the complete documentation index at: https://shipfast.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Hero

> First thing visitors see. Make them understand your value in 3 seconds.

## Two Layouts

<CardGroup cols={2}>
  <Card title="Side-by-side" img="https://mintcdn.com/shipfastso/-9P87iaUtQEkQp6B/images/hero-preview.png?fit=max&auto=format&n=-9P87iaUtQEkQp6B&q=85&s=76bc8fa5bc328b4afc0455780fd7ce50" width="2596" height="1168" data-path="images/hero-preview.png">
    Text left, image right. Use when your product is visual.
  </Card>

  <Card title="Centered" horizontal img="https://mintcdn.com/shipfastso/-9P87iaUtQEkQp6B/images/hero-centered-preview.png?fit=max&auto=format&n=-9P87iaUtQEkQp6B&q=85&s=75356e98d50a18d1255715f2111ef27d" width="2568" height="1510" data-path="images/hero-centered-preview.png">
    Everything centered. Use when your headline is strong.
  </Card>
</CardGroup>

***

## Setup

<Steps>
  <Step title="Choose your layout">
    Open `/app/(public)/page.tsx`

    ```tsx theme={null}
    import Hero from '@/components/Hero'              // Side-by-side
    // OR
    import HeroCentered from '@/components/HeroCentered'  // Centered
    ```
  </Step>

  <Step title="Replace the image">
    Add your screenshot to `/public/hero-image.jpg`
  </Step>

  <Step title="Update the text">
    Open your chosen component and change:

    * Headline
    * Description
    * Social proof numbers (or remove if you don't have real data)
  </Step>
</Steps>

***

## Remove Social Proof

If you don't have real numbers yet, delete this block:

```tsx theme={null}
// In Hero.tsx - delete this entire section
<div className="flex flex-col sm:flex-row items-center...">
  {/* Avatars and stats */}
</div>
```

***

## Remove Rating Badge

```tsx theme={null}
// Comment out or delete
<RatingBadge />
```

***

<Tip>
  Test: Show your hero to someone for 3 seconds. Can they explain what you do? If not, simplify.
</Tip>

<Warning>
  Set up Stripe first: Add your price ID to `config.stripe.plans[0].priceId` in `/config.ts`
</Warning>