Skip to content

Commit e5d98fa

Browse files
RabbitVisualRabbitVisual
committed
feat: create new account-card-pro Blade component for displaying interactive account cards with flip animation and actions.
1 parent 2d43e11 commit e5d98fa

1 file changed

Lines changed: 38 additions & 31 deletions

File tree

‎Modules/Core/resources/views/components/account-card-pro.blade.php‎

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,63 +8,70 @@
88
$displayNumber = '•••• •••• •••• ' . str_pad((string) ($account->id % 10000), 4, '0', STR_PAD_LEFT);
99
@endphp
1010

11-
<div class="account-card-pro group relative w-full max-w-[340px] h-[220px] mx-auto" x-data="{ flipped: false }">
12-
<div class="relative w-full h-full cursor-pointer" style="perspective: 2000px;" @click="flipped = !flipped" title="Clique para virar o cartão">
13-
{{-- Front --}}
14-
<div class="absolute inset-0 rounded-2xl overflow-hidden bg-gradient-to-br {{ $gradient }} shadow-xl transition-all duration-700 ease-[cubic-bezier(0.71,0.03,0.56,0.85)]"
15-
style="transform-style: preserve-3d; backface-visibility: hidden;"
11+
{{-- Proporção ~1.586 (cartão físico). Animação: 0.6s, curva suave sem overshoot --}}
12+
<div class="account-card-pro group relative w-full max-w-[352px] h-[222px] mx-auto" x-data="{ flipped: false }">
13+
<div class="relative w-full h-full cursor-pointer select-none" style="perspective: 2200px;" @click="flipped = !flipped" title="Clique para virar o cartão">
14+
{{-- Frente --}}
15+
<div class="absolute inset-0 rounded-[1rem] overflow-hidden bg-gradient-to-br {{ $gradient }} shadow-xl"
16+
style="transform-style: preserve-3d; backface-visibility: hidden; transition: transform 0.55s cubic-bezier(0.45, 0, 0.25, 1);"
1617
:style="flipped ? 'transform: rotateY(-180deg);' : 'transform: rotateY(0deg);'"
1718
x-ref="card">
18-
<div class="absolute inset-0 bg-[rgba(6,2,29,0.35)]"></div>
19+
<div class="absolute inset-0 bg-[rgba(6,2,29,0.32)]"></div>
1920
<div class="relative z-10 h-full flex flex-col justify-between p-5 text-white">
20-
<div class="flex items-start justify-between">
21-
{{-- Chip --}}
22-
<div class="w-12 h-10 rounded-md bg-gradient-to-br from-amber-200 via-amber-100 to-amber-300 shadow-inner flex items-center justify-center border border-amber-400/40">
23-
<div class="grid grid-cols-2 gap-0.5 w-8 h-6">
24-
@for ($i = 0; $i < 8; $i++)
25-
<div class="bg-amber-600/50 rounded-sm"></div>
26-
@endfor
21+
<div class="flex items-start justify-between gap-2">
22+
<div class="flex items-center gap-2 shrink-0">
23+
<img src="{{ asset('storage/logos/icon.svg') }}" alt="" class="w-6 h-6 shrink-0 drop-shadow-md" width="24" height="24" />
24+
<div class="w-11 h-9 rounded-md bg-gradient-to-br from-amber-200 via-amber-100 to-amber-300 shadow-inner flex items-center justify-center border border-amber-400/40">
25+
<div class="grid grid-cols-2 gap-0.5 w-7 h-5">
26+
@for ($i = 0; $i < 8; $i++)
27+
<div class="bg-amber-600/50 rounded-sm"></div>
28+
@endfor
29+
</div>
2730
</div>
2831
</div>
29-
<x-icon name="cc-visa" style="brands" class="w-10 h-10 opacity-95" />
32+
<x-icon name="cc-visa" style="brands" class="w-9 h-9 opacity-95 shrink-0" />
3033
</div>
3134
<div>
32-
<p class="sensitive-value text-lg font-mono font-semibold tracking-[0.2em] tabular-nums mb-4" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3);">{{ $displayNumber }}</p>
33-
<div class="flex items-end justify-between gap-2">
34-
<div class="min-w-0">
35-
<p class="text-[10px] text-white/70 uppercase tracking-widest mb-0.5">Nome no cartão</p>
35+
<p class="sensitive-value text-base font-mono font-semibold tracking-[0.22em] tabular-nums mb-3" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3);">{{ $displayNumber }}</p>
36+
<div class="flex items-end justify-between gap-3">
37+
<div class="min-w-0 flex-1">
38+
<p class="text-[10px] text-white/75 uppercase tracking-widest mb-0.5">Nome no cartão</p>
3639
<p class="font-semibold text-sm uppercase truncate tracking-wide" style="text-shadow: 0 2px 6px rgba(0,0,0,0.4);">{{ Str::upper($account->name) }}</p>
3740
</div>
3841
<div class="text-right shrink-0">
39-
<p class="text-[9px] text-white/70 uppercase tracking-wider">Saldo</p>
40-
<p class="sensitive-value text-base font-mono font-black tabular-nums leading-tight" style="text-shadow: 0 2px 6px rgba(0,0,0,0.4);">R$ {{ number_format($account->balance, 2, ',', '.') }}</p>
42+
<p class="text-[9px] text-white/75 uppercase tracking-wider">Saldo</p>
43+
<p class="sensitive-value text-sm font-mono font-black tabular-nums leading-tight" style="text-shadow: 0 2px 6px rgba(0,0,0,0.4);">R$ {{ number_format($account->balance, 2, ',', '.') }}</p>
4144
</div>
4245
</div>
4346
</div>
4447
</div>
4548
</div>
4649

47-
{{-- Back --}}
48-
<div class="absolute inset-0 rounded-2xl overflow-hidden bg-gradient-to-br {{ $gradient }} shadow-xl transition-all duration-700 ease-[cubic-bezier(0.71,0.03,0.56,0.85)]"
49-
style="transform-style: preserve-3d; backface-visibility: hidden; transform: rotateY(180deg);"
50+
{{-- Verso --}}
51+
<div class="absolute inset-0 rounded-[1rem] overflow-hidden bg-gradient-to-br {{ $gradient }} shadow-xl"
52+
style="transform-style: preserve-3d; backface-visibility: hidden; transform: rotateY(180deg); transition: transform 0.55s cubic-bezier(0.45, 0, 0.25, 1);"
5053
:style="flipped ? 'transform: rotateY(0deg);' : 'transform: rotateY(180deg);'">
51-
<div class="absolute inset-0 bg-[rgba(6,2,29,0.35)]"></div>
54+
<div class="absolute inset-0 bg-[rgba(6,2,29,0.32)]"></div>
5255
<div class="relative z-10 h-full flex flex-col">
53-
<div class="w-full h-12 mt-6 bg-black/70 shrink-0"></div>
54-
<div class="flex-1 px-4 py-3 flex flex-col justify-end items-end">
55-
<div class="w-full max-w-[90%] h-10 bg-white/95 rounded flex items-center justify-end px-3 text-slate-800 font-mono text-sm font-semibold">
56-
<span class="text-amber-600 dark:text-amber-600 font-bold">Vertex Pro</span>
56+
<div class="w-full h-11 mt-5 bg-black/75 shrink-0" aria-hidden="true"></div>
57+
<div class="flex-1 px-4 py-3 flex flex-col justify-end items-end gap-2">
58+
<div class="w-full max-w-[92%] h-9 bg-white/95 rounded-md flex items-center justify-end gap-2 px-3 text-slate-800">
59+
<img src="{{ asset('storage/logos/icon.svg') }}" alt="" class="w-5 h-5 shrink-0" width="20" height="20" />
60+
<span class="text-xs font-bold text-emerald-700">Vertex Contas</span>
61+
<span class="text-slate-400">•</span>
62+
<span class="text-xs font-bold text-amber-600">Pro</span>
5763
</div>
58-
<div class="mt-3 flex justify-end">
59-
<x-icon name="cc-visa" style="brands" class="w-9 h-9 text-white/90" />
64+
<p class="text-[10px] text-white/60 uppercase tracking-wider">Assinante</p>
65+
<div class="flex justify-end">
66+
<x-icon name="cc-visa" style="brands" class="w-8 h-8 text-white/90" />
6067
</div>
6168
</div>
6269
</div>
6370
</div>
6471
</div>
6572

6673
@if($showActions)
67-
<div class="absolute inset-0 rounded-2xl bg-black/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3 z-20 pointer-events-none group-hover:pointer-events-auto">
74+
<div class="absolute inset-0 rounded-[1rem] bg-black/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-3 z-20 pointer-events-none group-hover:pointer-events-auto">
6875
<span class="pointer-events-auto">
6976
<a href="{{ route('core.accounts.show', $account) }}" class="p-3 bg-white/25 hover:bg-white/35 rounded-xl text-white transition-colors inline-flex" title="Ver">
7077
<x-icon name="eye" style="solid" class="w-5 h-5" />

0 commit comments

Comments
 (0)