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
46 lines
1.8 KiB
PHP
46 lines
1.8 KiB
PHP
@props(['span' => 'col-span-1', 'rowSpan' => 'row-span-1', 'title', 'subtitle' => null])
|
|
<div
|
|
class="relative group rounded-3xl bg-app-surface border border-app-border p-8 lg:p-10 transition-all {{ $span }} {{ $rowSpan }} opacity-0 translate-y-10"
|
|
x-data="{ x: 0, y: 0 }"
|
|
x-on:mousemove="
|
|
const rect = $el.getBoundingClientRect();
|
|
x = $event.clientX - rect.left;
|
|
y = $event.clientY - rect.top;
|
|
"
|
|
x-init="gsap.to($el, {
|
|
scrollTrigger: { trigger: $el, start: 'top 85%' },
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.8,
|
|
ease: 'power3.out'
|
|
})"
|
|
>
|
|
<!-- Hover Spotlight -->
|
|
<div class="pointer-events-none absolute -inset-px rounded-3xl opacity-0 transition duration-300 group-hover:opacity-100 mix-blend-screen"
|
|
x-bind:style="`background: radial-gradient(600px circle at ${x}px ${y}px, rgba(236,72,153,0.1), transparent 40%);`">
|
|
</div>
|
|
|
|
<!-- Active Spotlight Glow inside border -->
|
|
<div class="pointer-events-none absolute inset-0 rounded-3xl opacity-0 transition duration-300 group-hover:opacity-100"
|
|
x-bind:style="`background: radial-gradient(400px circle at ${x}px ${y}px, rgba(255,255,255,0.06), transparent 40%);`">
|
|
</div>
|
|
|
|
<div class="relative z-10 flex flex-col h-full">
|
|
@if(isset($icon))
|
|
<div class="mb-4 text-pink-500 w-8 h-8">
|
|
{{ $icon }}
|
|
</div>
|
|
@endif
|
|
|
|
<h3 class="text-xl font-semibold text-white mb-2">{{ $title }}</h3>
|
|
|
|
@if($subtitle)
|
|
<p class="text-zinc-400 text-sm leading-relaxed mb-6">{{ $subtitle }}</p>
|
|
@endif
|
|
|
|
<div class="mt-auto relative w-full flex-grow flex flex-col justify-end">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
</div>
|