230 lines
16 KiB
HTML
230 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blog i Poradniki - Gift Planner</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="main.js" defer></script>
|
|
<meta name="description" content="Szukasz inspiracji? Nasz blog to kopalnia pomysłów na prezenty, poradników i zestawień topowych produktów na każdą okazję.">
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
|
|
<div class="flex h-screen overflow-hidden">
|
|
<!-- Sidebar -->
|
|
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
|
|
<div class="p-6 flex items-center gap-3">
|
|
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200">
|
|
<i data-lucide="gift" class="text-white w-6 h-6"></i>
|
|
</div>
|
|
<span class="text-xl font-black tracking-tighter">GIFT<span class="text-indigo-600">PLANNER</span></span>
|
|
</div>
|
|
|
|
<nav class="flex-1 px-4 py-4 space-y-1">
|
|
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
|
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
|
</a>
|
|
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
|
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
|
</a>
|
|
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
|
<i data-lucide="calendar" class="w-5 h-5"></i> Okazje
|
|
</a>
|
|
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
|
<i data-lucide="users" class="w-5 h-5"></i> Osoby
|
|
</a>
|
|
<a href="notes.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
|
<i data-lucide="pen-tool" class="w-5 h-5"></i> Notatki
|
|
</a>
|
|
<div class="pt-4 pb-2 px-4">
|
|
<span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">AI Assistant</span>
|
|
</div>
|
|
<a href="search.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
|
<i data-lucide="sparkles" class="w-5 h-5"></i> Wyszukiwarka
|
|
</a>
|
|
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
|
<i data-lucide="image" class="w-5 h-5"></i> Inspiracje
|
|
</a>
|
|
<a href="global-holidays.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
|
<i data-lucide="globe" class="w-5 h-5"></i> Święta
|
|
</a>
|
|
<div class="pt-4 pb-2 px-4">
|
|
<span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Wiedza & Finanse</span>
|
|
</div>
|
|
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm group">
|
|
<i data-lucide="book-open" class="w-5 h-5"></i> Poradniki
|
|
</a>
|
|
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm group">
|
|
<i data-lucide="wallet" class="w-5 h-5"></i> Budżet
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="mt-auto p-6">
|
|
<a href="/settings.html">
|
|
<div class="bg-gray-50 rounded-3xl p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xs">A</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs font-bold">Adam Kowalski</span>
|
|
<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>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-8">
|
|
<header class="mb-12">
|
|
<h2 class="text-4xl font-black text-gray-900 leading-tight mb-4">Centrum Poradników</h2>
|
|
<p class="text-lg text-gray-500 font-medium max-w-2xl leading-relaxed">Odkryj sekrety trafionych prezentów. Nasze poradniki pomogą Ci wybrać idealny upominek, niezależnie od budżetu czy okazji.</p>
|
|
</header>
|
|
|
|
<!-- Featured Article -->
|
|
<section class="mb-16">
|
|
<a href="blog-post.html" class="group block relative rounded-[3rem] overflow-hidden bg-indigo-900 shadow-2xl shadow-indigo-200">
|
|
<div class="flex flex-col lg:flex-row min-h-[400px]">
|
|
<div class="lg:w-1/2 relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1541167760496-162955ed8a9f?q=80&w=1200&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-indigo-900/60 to-transparent lg:hidden"></div>
|
|
</div>
|
|
<div class="lg:w-1/2 p-10 lg:p-16 flex flex-col justify-center text-white relative z-10">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="px-4 py-1.5 bg-indigo-500 rounded-full text-[10px] font-black uppercase tracking-widest">Polecane</span>
|
|
<span class="text-indigo-300 text-[10px] font-black uppercase tracking-widest">5 min czytania</span>
|
|
</div>
|
|
<h3 class="text-3xl lg:text-5xl font-black mb-6 leading-tight">5 Prezentów, które zachwycą każdego kawosza</h3>
|
|
<p class="text-indigo-200 text-lg mb-10 font-medium leading-relaxed">Od dizajnerskich akcesoriów po zaawansowane ekspresy. Sprawdź nasze zestawienie TOP 5 przygotowane we współpracy z baristami.</p>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-sm font-black underline underline-offset-8 decoration-2 group-hover:decoration-4 transition-all">Czytaj artykuł</span>
|
|
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-2 transition-transform"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</section>
|
|
|
|
<!-- Blog Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
|
<!-- Article 2 -->
|
|
<article class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
|
<div class="h-64 relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?q=80&w=800&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest text-indigo-600">Poradnik</div>
|
|
</div>
|
|
<div class="p-8">
|
|
<h4 class="text-xl font-black text-gray-900 mb-4 leading-tight group-hover:text-indigo-600 transition-colors">Jak nie spłukać się na Święta? Planowanie budżetu krok po kroku</h4>
|
|
<p class="text-sm text-gray-500 font-medium mb-8 leading-relaxed line-clamp-2">Dowiedz się, jak wykorzystać nasze narzędzia budżetowe, aby zaplanować wymarzone prezenty bez stresu finansowego.</p>
|
|
<a href="#" class="flex items-center justify-between text-indigo-600 font-black text-xs uppercase tracking-widest">
|
|
Czytaj więcej
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article 3 -->
|
|
<article class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
|
<div class="h-64 relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?q=80&w=800&auto=format&fit=crop" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest text-indigo-600">Okazje</div>
|
|
</div>
|
|
<div class="p-8">
|
|
<h4 class="text-xl font-black text-gray-900 mb-4 leading-tight group-hover:text-indigo-600 transition-colors">Dzień Matki 2026: Co kupić kobiecie, która ma wszystko?</h4>
|
|
<p class="text-sm text-gray-500 font-medium mb-8 leading-relaxed line-clamp-2">Ranking najbardziej sentymentalnych i luksusowych prezentów dla mam, które doceniają jakość i emocje.</p>
|
|
<a href="#" class="flex items-center justify-between text-indigo-600 font-black text-xs uppercase tracking-widest">
|
|
Czytaj więcej
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article 4 -->
|
|
<article class="bg-white rounded-[2.5rem] overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all group">
|
|
<div class="h-64 relative overflow-hidden text-center flex items-center justify-center bg-indigo-50">
|
|
<i data-lucide="brain-circuit" class="w-20 h-20 text-indigo-200"></i>
|
|
<div class="absolute top-4 left-4 bg-indigo-600 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest text-white">Technologia</div>
|
|
</div>
|
|
<div class="p-8">
|
|
<h4 class="text-xl font-black text-gray-900 mb-4 leading-tight group-hover:text-indigo-600 transition-colors">Jak działa nasz algorytm sugestii AI? Wgląd w przyszłość zakupów</h4>
|
|
<p class="text-sm text-gray-500 font-medium mb-8 leading-relaxed line-clamp-2">Kulisy powstawania naszej sztucznej inteligencji. Jak wektory i dane profilowe zmieniają sposób, w jaki szukamy prezentów.</p>
|
|
<a href="#" class="flex items-center justify-between text-indigo-600 font-black text-xs uppercase tracking-widest">
|
|
Czytaj więcej
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- SEO Footer / Meta Info -->
|
|
<section class="mt-16 bg-white rounded-[3rem] p-12 border border-gray-100 shadow-sm">
|
|
<h3 class="text-2xl font-black text-gray-900 mb-6">Inspiracje na każdą okazję</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
<div>
|
|
<h5 class="font-black text-xs uppercase tracking-widest text-gray-400 mb-4">Okazje</h5>
|
|
<ul class="space-y-2 text-sm font-bold text-gray-600">
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Boże Narodzenie</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Urodziny</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dzień Kobiet</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Rocznice</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-black text-xs uppercase tracking-widest text-gray-400 mb-4">Dla kogo</h5>
|
|
<ul class="space-y-2 text-sm font-bold text-gray-600">
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dla Mamy</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dla Taty</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dla Dzieci</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dla Niego</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-black text-xs uppercase tracking-widest text-gray-400 mb-4">Popularne</h5>
|
|
<ul class="space-y-2 text-sm font-bold text-gray-600">
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Elektronika</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Wellness</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Dom i Ogród</a></li>
|
|
<li><a href="#" class="hover:text-indigo-600 transition-colors">Przeżycia</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex flex-col justify-end">
|
|
<button class="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black text-xs shadow-xl shadow-indigo-100">
|
|
ZASUBSKRYBUJ NEWSLETTER
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 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="blog.html" class="flex flex-col items-center p-2 text-indigo-600">
|
|
<i data-lucide="book-open" class="w-6 h-6"></i>
|
|
<span class="text-[10px] font-bold mt-1">Blog</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="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>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|