This example serves as a boilerplate for a Hero component, which you typically see on the top of pages, containing a fullscreen image, title, text and optionally a button.
You can get the contents from anywhere, but here we assume you created 3 extra fields on the page table: hero_image, hero_title and hero_text. We also assume you have the Container component in your project.
Put the following code in a components/hero.blade.php file:
@props([
'image' => page()->hero_image,
'title' => page()->hero_title,
'text' => page()->hero_text,
])
<div {{ $attributes->merge(['class' => 'aspect-w-9 aspect-h-12 xs:aspect-w-16 xs:aspect-h-14 sm:aspect-h-9 md:aspect-h-6 lg:aspect-h-4 xl:aspect-h-4']) }}>
<x-img :src="$image" class="object-cover" />
<div class="bg-black bg-opacity-50"></div>
<x-container class="flex flex-col justify-center">
<h1 class="text-4xl xs:text-5xl sm:text-6xl xl:text-7xl text-white font-serif mb-6">{{ $title }}</h1>
<div class="max-w-xl text-white sm:text-lg leading-relaxed">{{ $text }}</div>
</x-container>
</div>{{-- With the default page fields --}}
<x-hero />
{{-- With custom data, for example from a product --}}
<x-hero :image="$product->image" :title="$product->title" :text="$product->description" />Previous topic
← Language Navigation
Next topic
Breadcrumbs →