extend design
This commit is contained in:
Norbert Maciaszek
125
gift.html
125
gift.html
@@ -25,6 +25,18 @@
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="layout-dashboard"></i> Dashboard
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="bell"></i> Aktualizacje
|
||||
</a>
|
||||
<a href="global-holidays.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="globe"></i> Święta
|
||||
</a>
|
||||
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="sparkles"></i> Inspiracje
|
||||
</a>
|
||||
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="book-open"></i> Poradniki
|
||||
</a>
|
||||
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="calendar"></i> Okazje
|
||||
</a>
|
||||
@@ -130,31 +142,18 @@
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Link Preview / Action Section -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
|
||||
<h3 class="text-xl font-black text-gray-900 mb-6 flex items-center gap-2">
|
||||
<i data-lucide="external-link" class="text-indigo-600"></i> Informacje o produkcie
|
||||
</h3>
|
||||
<div class="border border-gray-100 rounded-3xl p-6 flex flex-col md:flex-row items-center gap-6 hover:bg-gray-50 transition-colors cursor-pointer mb-8">
|
||||
<div class="w-20 h-20 bg-indigo-50 rounded-2xl flex items-center justify-center shrink-0">
|
||||
<span class="text-xl font-black text-indigo-600 uppercase">C</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold text-gray-900">Sage Barista Express BES875 - Ceneo.pl</h4>
|
||||
<p class="text-xs text-gray-400 line-clamp-1">https://www.ceneo.pl/31894721#crid=123456&pid=12345</p>
|
||||
</div>
|
||||
<button class="bg-indigo-600 text-white px-6 py-3 rounded-2xl font-bold shadow-lg shadow-indigo-100 whitespace-nowrap">Otwórz sklep</button>
|
||||
<!-- Link Preview / Action Section -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
|
||||
<div class="bg-indigo-50 border border-indigo-100 rounded-3xl p-8 flex flex-col items-center text-center">
|
||||
<div class="w-14 h-14 bg-white rounded-full flex items-center justify-center text-indigo-600 shadow-sm mb-4">
|
||||
<i data-lucide="sparkles" class="w-6 h-6 animate-pulse"></i>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-50 border border-indigo-100 rounded-3xl p-8 flex flex-col items-center text-center">
|
||||
<div class="w-14 h-14 bg-white rounded-full flex items-center justify-center text-indigo-600 shadow-sm mb-4">
|
||||
<i data-lucide="sparkles" class="w-6 h-6 animate-pulse"></i>
|
||||
</div>
|
||||
<h4 class="text-lg font-black text-indigo-900 mb-2">Potrzebujesz kartki lub życzeń?</h4>
|
||||
<p class="text-sm text-indigo-600 mb-6 max-w-sm">AI może wygenerować personalizowane życzenia bożonarodzeniowe, które idealnie pasują do tego prezentu.</p>
|
||||
<button class="bg-indigo-600 text-white px-8 py-3 rounded-2xl font-bold shadow-xl">Generuj życzenia</button>
|
||||
</div>
|
||||
</section>
|
||||
<h4 class="text-lg font-black text-indigo-900 mb-2">Potrzebujesz kartki lub życzeń?</h4>
|
||||
<p class="text-sm text-indigo-600 mb-6 max-w-sm">AI może wygenerować personalizowane życzenia bożonarodzeniowe, które idealnie pasują do tego prezentu.</p>
|
||||
<button class="bg-indigo-600 text-white px-8 py-3 rounded-2xl font-bold shadow-xl">Generuj życzenia</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Price Analysis -->
|
||||
@@ -189,6 +188,58 @@
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- AI Similar Products Section -->
|
||||
<section class="mt-12 bg-white rounded-[3.5rem] p-10 lg:p-12 shadow-sm border border-gray-100 mb-12">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 bg-indigo-900 rounded-2xl flex items-center justify-center text-white shadow-xl shadow-indigo-100">
|
||||
<i data-lucide="brain-circuit" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-black text-gray-900">Pasujące do tego prezentu</h3>
|
||||
<p class="text-gray-500 font-medium">Biorąc pod uwagę ten prezent, AI sugeruje dodatki, które dopełnią Twój plan.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="inspirations.html" class="flex items-center gap-2 text-indigo-600 font-black text-sm uppercase tracking-widest hover:gap-3 transition-all">
|
||||
Szukaj więcej <i data-lucide="chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Similar Item 1 -->
|
||||
<div class="bg-gray-50 rounded-[2.5rem] p-6 border border-gray-100 hover:border-indigo-200 hover:bg-white transition-all group relative">
|
||||
<div class="absolute top-4 left-4 bg-indigo-600 text-white text-[10px] font-black px-3 py-1 rounded-full z-10 shadow-lg">SUGESTIA AI</div>
|
||||
<div class="aspect-square bg-white rounded-3xl overflow-hidden mb-6 shadow-sm border border-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1559056191-4917a3bc9404?auto=format&fit=crop&q=80&w=400" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 mb-1 leading-tight">Kawa Specialty Ethiopia 250g</h4>
|
||||
<p class="text-xs text-gray-400 font-bold uppercase tracking-widest mb-4">Zestaw idealny</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-lg font-black text-indigo-600">59 PLN</span>
|
||||
<button class="w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center hover:scale-110 transition-all">
|
||||
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Similar Item 2 -->
|
||||
<div class="bg-gray-50 rounded-[2.5rem] p-6 border border-gray-100 hover:border-indigo-200 hover:bg-white transition-all group relative">
|
||||
<div class="absolute top-4 left-4 bg-indigo-600 text-white text-[10px] font-black px-3 py-1 rounded-full z-10 shadow-lg">UZUPEŁNIENIE</div>
|
||||
<div class="aspect-square bg-white rounded-3xl overflow-hidden mb-6 shadow-sm border border-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1579227114347-15d08fc37cae?auto=format&fit=crop&q=80&w=400" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h4 class="font-black text-gray-900 mb-1 leading-tight">Dzbanek do mleka Rhino</h4>
|
||||
<p class="text-xs text-gray-400 font-bold uppercase tracking-widest mb-4">Akcesorium</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-lg font-black text-indigo-600">120 PLN</span>
|
||||
<button class="w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center hover:scale-110 transition-all">
|
||||
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Status History -->
|
||||
<section class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100">
|
||||
<h4 class="text-sm font-black text-gray-900 mb-6">Historia Statusu</h4>
|
||||
@@ -214,8 +265,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -285,5 +334,29 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex justify-around items-center z-50">
|
||||
<a href="dashboard.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Home</span>
|
||||
</a>
|
||||
<a href="updates.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="bell" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Status</span>
|
||||
</a>
|
||||
<a href="inspirations.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Pomysły</span>
|
||||
</a>
|
||||
<a href="blog.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="book-open" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Blog</span>
|
||||
</a>
|
||||
<a href="settings.html" class="flex flex-col items-center p-2 text-gray-400">
|
||||
<i data-lucide="settings" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-bold mt-1">Opcje</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user