VILT Components
Hero
import Hero from @/Components/Hero.vue;
Hero block with title, description, customer rating, and CTA.
resources/js/Components/Hero.vue
<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>
For more variants check https://daisyui.com/components/hero/