Untitled
unknown
plain_text
a month ago
15 kB
5
Indexable
<div class="relative mx-auto mt-12 flex w-full max-w-2xl justify-center lg:mt-0 lg:justify-end">
{{-- glow --}}
<div class="absolute left-10 top-16 h-72 w-72 rounded-full bg-indigo-300/25 blur-3xl"></div>
<div class="absolute right-6 bottom-16 h-80 w-80 rounded-full bg-violet-300/30 blur-3xl"></div>
{{-- floating card: wzrost --}}
<div class="absolute left-0 top-28 z-30 hidden rounded-[2rem] border border-slate-200 bg-white/95 px-6 py-5 shadow-[0_24px_70px_rgba(15,23,42,0.14)] backdrop-blur-xl sm:block lg:left-4">
<p class="text-sm font-semibold text-slate-500">
Potencjalny wzrost
</p>
<p class="mt-1 text-4xl font-black tracking-tight text-slate-950">
+8-15%
</p>
<p class="mt-1 text-sm font-bold text-indigo-600">
przez rekomendacje
</p>
</div>
{{-- floating card: zamówienie --}}
<div class="absolute right-0 bottom-36 z-30 hidden rounded-[2rem] border border-slate-200 bg-white/95 px-6 py-5 shadow-[0_24px_70px_rgba(15,23,42,0.14)] backdrop-blur-xl sm:block">
<p class="text-sm font-semibold text-slate-500">
Zamówienie #184
</p>
<p class="mt-1 text-4xl font-black tracking-tight text-slate-950">
65 zł
</p>
<p class="mt-1 text-sm font-semibold text-slate-600">
burger + frytki + sos + napój
</p>
</div>
{{-- phone wrapper --}}
<div class="relative z-10 rotate-[1deg]">
{{-- right metal edge --}}
<div class="absolute -right-5 top-8 bottom-8 z-0 w-10 rounded-r-[3rem] bg-gradient-to-b from-slate-300 via-slate-500 to-slate-300 shadow-[18px_20px_50px_rgba(15,23,42,0.16)]"></div>
{{-- side buttons on metal edge --}}
<div class="absolute -right-[18px] top-28 z-20 h-24 w-[4px] rounded-full bg-slate-500/80"></div>
<div class="absolute -right-[18px] top-60 z-20 h-28 w-[4px] rounded-full bg-slate-500/80"></div>
{{-- main frame --}}
<div class="relative z-10 rounded-[3.5rem] bg-gradient-to-br from-slate-400 via-slate-950 to-slate-400 p-[4px] shadow-[0_40px_120px_rgba(15,23,42,0.28)]">
<div class="rounded-[3.2rem] bg-slate-950 p-[9px]">
<div class="relative h-[690px] w-[350px] overflow-hidden rounded-[2.8rem] bg-white">
{{-- dynamic island --}}
<div class="absolute left-1/2 top-4 z-30 h-8 w-32 -translate-x-1/2 rounded-full bg-slate-950">
<div class="absolute right-3 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-slate-800 ring-1 ring-slate-700"></div>
</div>
{{-- status bar --}}
<div class="absolute inset-x-0 top-0 z-30 flex items-center justify-between px-8 pt-6 text-xs font-black text-slate-950">
<span>9:41</span>
<div class="flex items-center gap-1.5">
{{-- network --}}
<svg class="h-4 w-4 text-slate-950" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<rect x="3" y="14" width="3" height="6" rx="1" fill="currentColor" />
<rect x="8" y="11" width="3" height="9" rx="1" fill="currentColor" />
<rect x="13" y="8" width="3" height="12" rx="1" fill="currentColor" />
<rect x="18" y="5" width="3" height="15" rx="1" fill="currentColor" />
</svg>
{{-- wifi --}}
<svg class="h-4 w-4 text-slate-950" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M5 10.5C9.2 6.8 14.8 6.8 19 10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M8.5 14C10.6 12.2 13.4 12.2 15.5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M12 18h.01" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
</svg>
{{-- battery --}}
<svg class="h-4 w-6 text-slate-950" viewBox="0 0 32 18" fill="none" aria-hidden="true">
<rect x="1" y="3" width="25" height="12" rx="3" stroke="currentColor" stroke-width="2" />
<rect x="4" y="6" width="17" height="6" rx="1.5" fill="currentColor" />
<path d="M28 7v4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
</svg>
</div>
</div>
{{-- background --}}
<div class="absolute inset-0 bg-[linear-gradient(to_bottom,#ffffff_0%,#ffffff_46%,#f8fafc_72%,#eef2ff_100%)]"></div>
<div class="relative z-10 px-6 pb-6 pt-24">
{{-- top nav --}}
<div class="flex items-center justify-between">
<button
type="button"
class="flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-100 text-slate-950"
>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M5 7h14M5 12h14M5 17h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div class="text-center">
<p class="text-xs font-semibold text-slate-400">
Menu lokalu
</p>
<h3 class="text-[2rem] font-black tracking-tight text-slate-950 leading-none">
Burger House
</h3>
</div>
<button
type="button"
class="relative flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-100 text-slate-950"
>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M6 6h15l-2 8H8L6 6ZM6 6 5 3H3M9 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM18 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-[10px] font-black text-white">
2
</span>
</button>
</div>
<div class="mt-8">
<p class="text-sm font-bold text-slate-500">
Twoje zamówienie
</p>
{{-- product card --}}
<div class="mt-4 rounded-[2rem] border border-slate-100 bg-white p-4 shadow-[0_18px_55px_rgba(15,23,42,0.08)]">
<div class="flex items-center gap-4">
<div class="flex h-24 w-24 shrink-0 items-center justify-center rounded-3xl bg-gradient-to-br from-amber-100 to-orange-100 text-5xl shadow-inner">
🍔
</div>
<div class="min-w-0 flex-1">
<h4 class="text-lg font-black text-slate-950">
Classic Burger
</h4>
<p class="mt-1 text-sm leading-6 text-slate-500">
Wołowina, cheddar,<br>
pikle, sos house
</p>
<div class="mt-3 flex items-center justify-between">
<p class="text-lg font-black text-slate-950">
37 zł
</p>
<div class="flex items-center gap-3 rounded-2xl bg-slate-50 px-3 py-2">
<span class="text-sm font-black text-slate-400">−</span>
<span class="text-sm font-black text-slate-950">1</span>
<span class="text-sm font-black text-slate-400">+</span>
</div>
</div>
</div>
</div>
</div>
{{-- recommendation card --}}
<div class="relative isolate mt-5 overflow-hidden rounded-[2rem] border border-white/10 p-5 shadow-[0_22px_65px_rgba(79,70,229,0.32)]">
<div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_20%_20%,rgba(99,102,241,0.50),transparent_32%),radial-gradient(circle_at_85%_75%,rgba(168,85,247,0.50),transparent_34%),linear-gradient(135deg,#1e1b4b_0%,#312e81_48%,#7c3aed_100%)]"></div>
<div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,rgba(255,255,255,0.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.08)_1px,transparent_1px)] bg-[size:22px_22px] opacity-20"></div>
<div class="absolute -right-8 -top-8 -z-10 h-28 w-28 rounded-full bg-white/20 blur-3xl"></div>
<div class="flex items-start justify-between gap-4">
<div>
<p class="text-[10px] font-black uppercase tracking-[0.18em] text-indigo-100">
Rekomendacja Upselio
</p>
<h4 class="mt-2 text-xl font-black leading-tight text-white">
Dodaj zestaw i zwiększ
wartość koszyka
</h4>
</div>
<span class="text-2xl text-white">✦</span>
</div>
<div class="mt-5 space-y-3">
<div class="flex items-center justify-between rounded-2xl bg-white/95 px-4 py-3">
<div class="flex items-center gap-3">
<span>🍟</span>
<span class="text-sm font-bold text-slate-950">Frytki belgijskie</span>
</div>
<span class="rounded-xl bg-indigo-50 px-3 py-1 text-xs font-black text-indigo-600">
+ 9 zł
</span>
</div>
<div class="flex items-center justify-between rounded-2xl bg-white/95 px-4 py-3">
<div class="flex items-center gap-3">
<span>🥣</span>
<span class="text-sm font-bold text-slate-950">Sos truflowy</span>
</div>
<span class="rounded-xl bg-indigo-50 px-3 py-1 text-xs font-black text-indigo-600">
+ 4 zł
</span>
</div>
<div class="flex items-center justify-between rounded-2xl bg-white/95 px-4 py-3">
<div class="flex items-center gap-3">
<span>🥤</span>
<span class="text-sm font-bold text-slate-950">Lemoniada 0,4 l</span>
</div>
<span class="rounded-xl bg-indigo-50 px-3 py-1 text-xs font-black text-indigo-600">
+ 6 zł
</span>
</div>
</div>
</div>
{{-- checkout --}}
<button
type="button"
class="mt-5 flex w-full items-center justify-between rounded-2xl bg-gradient-to-r from-indigo-700 via-violet-600 to-indigo-600 px-5 py-4 text-sm font-black text-white shadow-[0_18px_50px_rgba(79,70,229,0.28)]"
>
<span>Przejdź do płatności</span>
<span>65 zł</span>
</button>
<p class="mt-5 text-center text-xs font-medium text-slate-400">
Dostarczamy technologię Upselio
</p>
</div>
</div>
{{-- home indicator --}}
<div class="absolute inset-x-16 bottom-3 h-1.5 rounded-full bg-slate-950/20"></div>
</div>
</div>
</div>
</div>
</div>Editor is loading...
Leave a Comment