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

# Hero

> import Hero from @/Components/Hero.vue;

Hero block with title, description, customer rating, and CTA.

<Frame>
  <img src="https://mintcdn.com/larafast/p7p6xbnL6MINm0mR/images/components/hero.avif?fit=max&auto=format&n=p7p6xbnL6MINm0mR&q=85&s=bdb3efe8fdc572d895d6f8cdef137e58" width="768" height="362" data-path="images/components/hero.avif" />
</Frame>

```html resources/js/Components/Hero.vue theme={null}
<div class="hero min-h-screen bg-base-100">
    <div class="hero-content flex-col lg:flex-row">
        <div class="basis-2/3">
            <h1 class="text-5xl sm:text-7xl font-bold">This is Demo App made with <span class="text-secondary">Larafast</span></h1>
            <p class="mt-6">
                In this demo app you will see the components that Larafast contains, access to admin panel,
                you can add your own blog posts, register to see the dashboard, etc.
            </p>
            <a href="/" class="btn btn-secondary btn-widest text-lg text-white mt-4">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/>
                </svg>
                Get Started
            </a>
            <Ratings/>
        </div>
        <div class="basis-1/3">
            <img src="/images/hero.jpg" class="rounded-lg" alt=""/>
        </div>
    </div>
</div>
```

<Tip>
  For more variants check [https://daisyui.com/components/hero/](https://daisyui.com/components/hero/)
</Tip>