bdc1f299da
- Create highly responsive bento layouts (grid, card, pages) - Integrate Livewire with Alpine and complex GSAP animations. - Implement DevTool Dark theme values across Blade components. - Enhance interactive elements, micro-interactions, API snippets logic natively. - Apply semantic HTML and properly linked responsive Nav\/Footers sections structure
36 lines
1.6 KiB
PHP
36 lines
1.6 KiB
PHP
@props([
|
|
'title',
|
|
'subtitle' => null,
|
|
'breadcrumb' => null,
|
|
])
|
|
|
|
<div class="relative pt-32 pb-8 md:pt-48 md:pb-12 overflow-hidden border-b border-white/5 bg-zinc-950/50">
|
|
<!-- Cinematic Background Glow -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-r from-pink-500/10 via-emerald-500/10 to-pink-500/10 rounded-full blur-[120px] -z-10"></div>
|
|
|
|
<div class="container mx-auto px-4 lg:px-8 max-w-7xl relative z-10"
|
|
x-init="gsap.from($el, { y: 20, opacity: 0, duration: 1, ease: 'power3.out' })">
|
|
|
|
<!-- Breadcrumbs -->
|
|
@if($breadcrumb)
|
|
<nav class="flex items-center gap-2 mb-8" aria-label="Breadcrumb">
|
|
<a href="/" class="text-[10px] font-bold tracking-widest text-zinc-500 uppercase hover:text-pink-500 transition-colors">Home</a>
|
|
<svg class="w-3 h-3 text-zinc-800" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
|
<span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">{{ $breadcrumb }}</span>
|
|
</nav>
|
|
@endif
|
|
|
|
<div class="max-w-3xl">
|
|
<h1 class="text-4xl md:text-6xl lg:text-7xl font-black tracking-tighter text-white mb-6 leading-[0.9]">
|
|
{{ $title }}
|
|
</h1>
|
|
|
|
@if($subtitle)
|
|
<p class="text-zinc-400 text-lg md:text-xl leading-relaxed font-medium">
|
|
{{ $subtitle }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|