51 lines
2.7 KiB
PHP
51 lines
2.7 KiB
PHP
@props([
|
|
'size' => 'md', // sm, md, lg
|
|
'withText' => true,
|
|
'class' => ''
|
|
])
|
|
|
|
@php
|
|
$dimensions = match($size) {
|
|
'sm' => ['box' => 'w-8 h-8', 'icon' => 'w-4 h-4', 'text' => 'text-base'],
|
|
'md' => ['box' => 'w-10 h-10', 'icon' => 'w-5 h-5', 'text' => 'text-xl'],
|
|
'lg' => ['box' => 'w-12 h-12', 'icon' => 'w-6 h-6', 'text' => 'text-2xl'],
|
|
default => ['box' => 'w-10 h-10', 'icon' => 'w-5 h-5', 'text' => 'text-xl'],
|
|
};
|
|
@endphp
|
|
|
|
<div x-data="{ showText: {{ $withText ? 'true' : 'false' }} }" {{ $attributes }} class="flex items-center gap-3 {{ $class }}">
|
|
<!-- Logo Symbol -->
|
|
<div class="relative group">
|
|
<!-- Outer Glow -->
|
|
<div class="absolute -inset-2 bg-gradient-to-tr from-pink-500/20 to-emerald-500/20 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
|
<!-- Icon Container -->
|
|
<div class="{{ $dimensions['box'] }} bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center relative overflow-hidden shadow-xl">
|
|
<!-- Subtle Mesh Background -->
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(236,72,153,0.1),transparent)]"></div>
|
|
|
|
<!-- Stylized "Z" / Envelope Fold -->
|
|
<svg class="{{ $dimensions['icon'] }} text-transparent" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ec4899" />
|
|
<stop offset="100%" style="stop-color:#be185d" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M4 19L20 5M4 19H14M20 5H10" stroke="url(#logo-gradient)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M4 5L20 19" stroke="white" stroke-opacity="0.1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
<!-- Activity Pulsar (Top Right) -->
|
|
<div class="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]">
|
|
<div class="absolute inset-0 bg-emerald-500 rounded-full animate-ping opacity-75"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center" x-show="showText" x-transition:opacity>
|
|
<span class="{{ $dimensions['text'] }} font-black tracking-tighter text-white italic uppercase">zemail</span>
|
|
<span class="{{ $dimensions['text'] }} font-black tracking-tighter text-pink-500 leading-none italic uppercase">.me</span>
|
|
</div>
|
|
</div>
|