281 lines
18 KiB
HTML
281 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gift Planner - Zaplanuj Perfekcyjne Prezenty z AI</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
.hero-gradient {
|
|
background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent),
|
|
radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.15), transparent);
|
|
}
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease-out;
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white overflow-x-hidden">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-100">
|
|
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-200">
|
|
<i data-lucide="gift"></i>
|
|
</div>
|
|
<span class="text-xl font-black bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</span>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center gap-10">
|
|
<a href="#funkcje" class="text-sm font-bold text-gray-500 hover:text-indigo-600 transition-colors">Funkcje</a>
|
|
<a href="#jak-to-dziala" class="text-sm font-bold text-gray-500 hover:text-indigo-600 transition-colors">Jak to działa</a>
|
|
<a href="#ai" class="text-sm font-bold text-gray-500 hover:text-indigo-600 transition-colors flex items-center gap-2">
|
|
Sugestie AI <span class="bg-indigo-100 text-indigo-600 text-[10px] px-2 py-0.5 rounded-full">NOWOŚĆ</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<a href="login.html" class="text-sm font-bold text-gray-700 hover:text-indigo-600 transition-colors">Zaloguj się</a>
|
|
<a href="register.html" class="gradient-bg text-white px-6 py-3 rounded-2xl text-sm font-bold shadow-xl shadow-indigo-100 hover:opacity-90 transition-all">Rozpocznij za darmo</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="pt-40 pb-24 hero-gradient overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
|
|
<div class="reveal">
|
|
<div class="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 px-4 py-2 rounded-full text-xs font-black tracking-widest uppercase mb-6">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i> Twój osobisty asystent prezentowy
|
|
</div>
|
|
<h1 class="text-6xl md:text-7xl font-black text-gray-900 leading-[1.1] mb-8">
|
|
Koniec z nietrafionymi <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">prezentami.</span>
|
|
</h1>
|
|
<p class="text-xl text-gray-500 leading-relaxed mb-10 max-w-lg">
|
|
Gift Planner to inteligentna platforma, która pomaga Ci wybierać, śledzić i organizować prezenty na każdą okazję. Zbudowana z myślą o radości dawania.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="register.html" class="gradient-bg text-white px-10 py-5 rounded-[2rem] font-black text-lg shadow-2xl shadow-indigo-200 hover:scale-105 transition-all text-center flex items-center justify-center gap-3">
|
|
Zacznij planować <i data-lucide="arrow-right"></i>
|
|
</a>
|
|
<div class="flex items-center gap-4 px-6">
|
|
<div class="flex -space-x-3">
|
|
<img class="w-10 h-10 rounded-full border-2 border-white ring-2 ring-gray-50" src="https://ui-avatars.com/api/?name=A&background=random" alt="">
|
|
<img class="w-10 h-10 rounded-full border-2 border-white ring-2 ring-gray-50" src="https://ui-avatars.com/api/?name=B&background=random" alt="">
|
|
<img class="w-10 h-10 rounded-full border-2 border-white ring-2 ring-gray-50" src="https://ui-avatars.com/api/?name=C&background=random" alt="">
|
|
</div>
|
|
<div class="text-xs font-bold text-gray-400">
|
|
<span class="text-gray-900 font-black">2 000+</span> użytkowników już dba o bliskich
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative reveal" style="transition-delay: 200ms;">
|
|
<div class="bg-white rounded-[3rem] shadow-2xl p-4 md:rotate-3 hover:rotate-0 transition-transform duration-700 relative z-10 overflow-hidden border border-gray-100">
|
|
<img src="assets/logo_hero.png" class="w-full h-auto rounded-[2.5rem]">
|
|
<!-- Floating Stat UI -->
|
|
<div class="absolute bottom-10 left-10 right-10 glass-card p-6 rounded-3xl animate-float border border-white/50 shadow-2xl">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center text-green-600">
|
|
<i data-lucide="trending-down"></i>
|
|
</div>
|
|
<p class="text-xs font-black text-gray-900 leading-none">Cena spadła!<br><span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1 inline-block">Sage Barista Express</span></p>
|
|
</div>
|
|
<span class="text-lg font-black text-green-600">-200 PLN</span>
|
|
</div>
|
|
<div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden">
|
|
<div class="h-full bg-green-500" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Background Blurs -->
|
|
<div class="absolute -top-10 -right-10 w-64 h-64 bg-indigo-500/20 rounded-full blur-3xl -z-10"></div>
|
|
<div class="absolute -bottom-10 -left-10 w-64 h-64 bg-purple-500/20 rounded-full blur-3xl -z-10"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Brands/Social Proof -->
|
|
<div class="py-12 border-y border-gray-50 bg-gray-50/30">
|
|
<div class="max-w-7xl mx-auto px-6 h-20 flex flex-wrap items-center justify-around gap-8 grayscale opacity-40">
|
|
<span class="text-2xl font-black tracking-tighter uppercase tracking-widest text-gray-300">Sklepy PL</span>
|
|
<span class="text-2xl font-black tracking-tighter">APPLE</span>
|
|
<span class="text-2xl font-black tracking-tighter">AMAZON</span>
|
|
<span class="text-2xl font-black tracking-tighter">OPENAI</span>
|
|
<span class="text-2xl font-black tracking-tighter">STRIPE</span>
|
|
<span class="text-2xl font-black tracking-tighter">ALLEGRO</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Section -->
|
|
<section id="funkcje" class="py-32">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto mb-24 reveal">
|
|
<h2 class="text-4xl md:text-5xl font-black text-gray-900 mb-6 leading-tight">Wszystko, czego potrzebujesz do planowania radości.</h2>
|
|
<p class="text-lg text-gray-500 font-medium leading-relaxed">System, który dba o Twój budżet, pilnuje terminów i podpowiada, czego naprawdę chcą Twoi bliscy.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<!-- Feature 1 -->
|
|
<div class="group p-10 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 reveal" style="transition-delay: 100ms;">
|
|
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 mb-8 group-hover:scale-110 transition-transform">
|
|
<i data-lucide="brain" class="w-8 h-8"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Sugestie AI</h3>
|
|
<p class="text-gray-500 leading-relaxed font-medium">Nasz algorytm analizuje wiek, zainteresowania i okazje, by podsunąć Ci listę idealnie dopasowanych propozycji.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="group p-10 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 reveal" style="transition-delay: 200ms;">
|
|
<div class="w-16 h-16 bg-purple-50 rounded-2xl flex items-center justify-center text-purple-600 mb-8 group-hover:scale-110 transition-transform">
|
|
<i data-lucide="line-chart" class="w-8 h-8"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Tracker Cen</h3>
|
|
<p class="text-gray-500 leading-relaxed font-medium">Dodaj link do produktu, a my będziemy śledzić cenę dla Ciebie. Powiadomimy Cię, gdy nadarzy się okazja na zakup.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="group p-10 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 reveal" style="transition-delay: 300ms;">
|
|
<div class="w-16 h-16 bg-pink-50 rounded-2xl flex items-center justify-center text-pink-600 mb-8 group-hover:scale-110 transition-transform">
|
|
<i data-lucide="pie-chart" class="w-8 h-8"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Budżet pod kontrolą</h3>
|
|
<p class="text-gray-500 leading-relaxed font-medium">Ustaw limity na osobę lub okazję. System automatycznie przeliczy wydatki i pokaże postęp w czasie rzeczywistym.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- AI Feature Detail -->
|
|
<section id="ai" class="py-24 bg-indigo-900 overflow-hidden relative">
|
|
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-20 items-center reveal">
|
|
<div>
|
|
<span class="inline-block px-4 py-2 bg-indigo-800 text-indigo-100 rounded-full text-[10px] font-black tracking-widest uppercase mb-8">AI-Powered Planning</span>
|
|
<h2 class="text-5xl font-black text-white mb-8 leading-tight">Nie wiesz co kupić? Zapytaj naszą Sztuczną Inteligencję.</h2>
|
|
<div class="space-y-6">
|
|
<div class="flex gap-4">
|
|
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white shrink-0 mt-1">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
</div>
|
|
<p class="text-indigo-200 text-lg">Analiza zainteresowań i relacji z osobą.</p>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white shrink-0 mt-1">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
</div>
|
|
<p class="text-indigo-200 text-lg">Weryfikacja dostępności i cen rynkowych.</p>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white shrink-0 mt-1">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
</div>
|
|
<p class="text-indigo-200 text-lg">Unikalne pomysły, których nie znajdziesz na Google.</p>
|
|
</div>
|
|
</div>
|
|
<button class="mt-12 bg-white text-indigo-900 px-10 py-5 rounded-3xl font-black text-lg hover:bg-indigo-50 transition-all shadow-2xl">Wypróbuj AI za darmo</button>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="bg-indigo-800/50 backdrop-blur-2xl p-8 rounded-[3rem] border border-indigo-700/50 relative z-10 shadow-3xl">
|
|
<div class="flex items-center gap-4 mb-10">
|
|
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 font-black">AI</div>
|
|
<p class="text-white font-bold">Nasze propozycje dla: <span class="text-indigo-300">Tata</span></p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="bg-indigo-900 p-4 rounded-2xl border border-indigo-700 flex items-center justify-between">
|
|
<p class="text-sm text-white font-bold">Zestaw do pielęgnacji brody Premium</p>
|
|
<span class="text-xs text-indigo-400 font-bold">95% Match</span>
|
|
</div>
|
|
<div class="bg-indigo-900 p-4 rounded-2xl border border-indigo-700 flex items-center justify-between opacity-60">
|
|
<p class="text-sm text-white font-bold">Kurs warzenia piwa rzemieślniczego</p>
|
|
<span class="text-xs text-indigo-400 font-bold">88% Match</span>
|
|
</div>
|
|
<div class="bg-indigo-900 p-4 rounded-2xl border border-indigo-700 flex items-center justify-between opacity-30">
|
|
<p class="text-sm text-white font-bold">Album: Historia motoryzacji XX wieku</p>
|
|
<span class="text-xs text-indigo-400 font-bold">75% Match</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -right-20 -bottom-20 w-80 h-80 bg-indigo-400/20 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Final CTA -->
|
|
<section class="py-32 bg-gray-50 flex flex-col items-center text-center px-6">
|
|
<div class="max-w-3xl reveal">
|
|
<h2 class="text-5xl font-black text-gray-900 mb-8 leading-tight">Zacznij planować prezenty z wyprzedzeniem i bez stresu.</h2>
|
|
<p class="text-xl text-gray-500 font-medium mb-12">Dołącz do Gift Planner dzisiaj. To nic nie kosztuje, a zmieni Twoje podejście do świąt i okazji.</p>
|
|
<a href="register.html" class="gradient-bg text-white px-12 py-6 rounded-[2.5rem] font-black text-xl shadow-2xl shadow-indigo-200 hover:scale-110 transition-all inline-block">
|
|
Załóż darmowe konto
|
|
</a>
|
|
<p class="text-gray-400 text-sm mt-8 font-bold">Brak ukrytych kosztów. Brak spamu.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white py-20 border-t border-gray-100">
|
|
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-12">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
|
|
<i data-lucide="gift"></i>
|
|
</div>
|
|
<span class="text-xl font-black bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Gift Planner</span>
|
|
</div>
|
|
|
|
<div class="flex gap-12">
|
|
<div class="flex flex-col gap-4">
|
|
<p class="text-xs font-black text-gray-400 uppercase tracking-widest">Platforma</p>
|
|
<a href="#" class="text-sm font-bold text-gray-600 hover:text-indigo-600 transition-colors">Mobilne App</a>
|
|
<a href="#" class="text-sm font-bold text-gray-600 hover:text-indigo-600 transition-colors">Wtyczka Chrome</a>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<p class="text-xs font-black text-gray-400 uppercase tracking-widest">Wsparcie</p>
|
|
<a href="#" class="text-sm font-bold text-gray-600 hover:text-indigo-600 transition-colors">Centrum pomocy</a>
|
|
<a href="#" class="text-sm font-bold text-gray-600 hover:text-indigo-600 transition-colors">API</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-6">
|
|
<a href="#" class="w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all"><i data-lucide="instagram" class="w-5 h-5"></i></a>
|
|
<a href="#" class="w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all"><i data-lucide="twitter" class="w-5 h-5"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-7xl mx-auto px-6 mt-20 text-center border-t border-gray-50 pt-10">
|
|
<p class="text-xs font-bold text-gray-400">© 2025 Gift Planner. Wszelkie prawa zastrzeżone.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
// Reveal animation on scroll
|
|
const reveal = () => {
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
reveals.forEach(el => {
|
|
const windowHeight = window.innerHeight;
|
|
const elementTop = el.getBoundingClientRect().top;
|
|
const elementVisible = 150;
|
|
if (elementTop < windowHeight - elementVisible) {
|
|
el.classList.add('active');
|
|
}
|
|
});
|
|
};
|
|
|
|
window.addEventListener('scroll', reveal);
|
|
window.addEventListener('load', reveal);
|
|
</script>
|
|
</body>
|
|
</html>
|