make more AI
This commit is contained in:
Norbert Maciaszek
@@ -53,7 +53,10 @@
|
||||
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">NK</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<p class="text-sm font-semibold truncate">Norbert K.</p>
|
||||
<p class="text-xs text-gray-500">Premium</p>
|
||||
<div class="flex items-center gap-1">
|
||||
<i data-lucide="zap" class="w-2.5 h-2.5 text-yellow-500 fill-yellow-500"></i>
|
||||
<p class="text-[10px] font-bold text-gray-500 uppercase">120 Tokenów</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,6 +102,98 @@
|
||||
<button class="bg-indigo-600 text-white px-8 py-3 rounded-2xl font-bold shadow-lg shadow-indigo-100 hover:opacity-90 transition-all">Zapisz zmiany</button>
|
||||
</section>
|
||||
|
||||
<!-- Subscription & Tokens -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-50">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-yellow-50 rounded-2xl flex items-center justify-center text-yellow-600">
|
||||
<i data-lucide="zap" class="fill-yellow-500"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-gray-900">Twoja Subskrypcja i Tokeny</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
|
||||
<div class="p-6 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-3xl border border-indigo-100">
|
||||
<p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">Dostępne Tokeny</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<h4 class="text-4xl font-black text-indigo-900">120</h4>
|
||||
<p class="text-indigo-400 font-bold">/ 200 w tym miesiącu</p>
|
||||
</div>
|
||||
<p class="text-xs text-indigo-600/60 mt-4 leading-relaxed">Limit odnowi się automatycznie <span class="font-bold">1 stycznia 2026</span>.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center">
|
||||
<h4 class="text-sm font-black text-gray-900 mb-2">Potrzebujesz więcej mocy AI?</h4>
|
||||
<p class="text-xs text-gray-400 mb-6">Możesz dokupić pakiety tokenów, które nie wygasają na koniec miesiąca.</p>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 bg-white border border-gray-200 px-4 py-3 rounded-2xl text-xs font-black text-gray-700 hover:bg-gray-50 transition-all shadow-sm">
|
||||
Pakiet 50 <i data-lucide="zap" class="w-3 h-3 inline ml-1 text-yellow-500 fill-yellow-500"></i>
|
||||
</button>
|
||||
<button class="flex-1 gradient-bg text-white px-4 py-3 rounded-2xl text-xs font-black hover:opacity-90 transition-all shadow-lg shadow-indigo-100">
|
||||
Pakiet 200 <i data-lucide="zap" class="w-3 h-3 inline ml-1 fill-white text-white"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bg-gray-50 rounded-2xl border border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center text-indigo-600 shadow-sm font-bold text-xs">P</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-gray-900">Plan Personal (Darmowy)</p>
|
||||
<p class="text-[10px] text-gray-400 font-medium">Standardowe 200 tokenów / msc</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-indigo-600 text-xs font-black hover:underline">Zmień plan</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature Packages -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-50">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600">
|
||||
<i data-lucide="package-plus"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-gray-900">Twoje Pakiety Rozszerzeń</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Package: Oszczędzanie -->
|
||||
<div class="p-6 rounded-3xl border-2 border-emerald-500 bg-emerald-50/20 relative overflow-hidden group">
|
||||
<div class="absolute top-4 right-4 text-emerald-600">
|
||||
<i data-lucide="check-circle-2" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center text-emerald-600 mb-4">
|
||||
<i data-lucide="trending-down"></i>
|
||||
</div>
|
||||
<h4 class="text-lg font-black text-gray-900 mb-1">Pakiet "Oszczędzanie"</h4>
|
||||
<p class="text-[10px] text-emerald-600 font-bold uppercase tracking-widest mb-4">AKTYWNY • 14.99 PLN / msc</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="text-xs text-gray-600 flex items-center gap-2"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Historia cen Ceneo (30 dni)</li>
|
||||
<li class="text-xs text-gray-600 flex items-center gap-2"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Alerty o spadkach cen</li>
|
||||
<li class="text-xs text-gray-600 flex items-center gap-2"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Powiadomienia okazje cenowe</li>
|
||||
</ul>
|
||||
<p class="text-[10px] text-gray-400 font-medium text-center italic">Następna płatność: 12.01.2026</p>
|
||||
</div>
|
||||
|
||||
<!-- Package: Kontrola budżetu -->
|
||||
<div class="p-6 rounded-3xl border-2 border-dashed border-gray-200 hover:border-indigo-500 transition-all group">
|
||||
<div class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center text-gray-400 group-hover:bg-indigo-100 group-hover:text-indigo-600 mb-4 transition-all">
|
||||
<i data-lucide="pie-chart"></i>
|
||||
</div>
|
||||
<h4 class="text-lg font-black text-gray-900 mb-1">Pakiet "Kontrola budżetu"</h4>
|
||||
<p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest mb-4">NIEAKTYWNY • 6.99 PLN / msc</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="text-xs text-gray-500 flex items-center gap-2"><i data-lucide="lock" class="w-3 h-3"></i> Zaawansowane statystyki</li>
|
||||
<li class="text-xs text-gray-500 flex items-center gap-2"><i data-lucide="lock" class="w-3 h-3"></i> Wykresy wydatków rocznych</li>
|
||||
<li class="text-xs text-gray-500 flex items-center gap-2"><i data-lucide="lock" class="w-3 h-3"></i> Prognozowanie budżetu AI</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 gradient-bg text-white rounded-2xl text-xs font-black shadow-lg shadow-indigo-100 hover:scale-[1.02] transition-all">
|
||||
SUBSKRYBUJ ZA 6.99 PLN / MSC
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Notifications -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-50">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
|
||||
Reference in New Issue
Block a user