<!DOCTYPE html>
<html lang="pl" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BiznesoweLove | Jakość Kinowa & ROI</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0a0a0a;
color: #ffffff;
}
.gradient-text {
background: linear-gradient(90deg, #a855f7, #eab308);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.hero-video-container video {
min-width: 100%;
min-height: 100%;
object-fit: cover;
opacity: 0.4;
}
</style>
</head>
<body class="antialiased">
<!-- Navigation -->
<nav class="fixed w-full z-50 glass-card px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-black tracking-tighter gradient-text uppercase">BiznesoweLove</div>
<div class="hidden md:flex space-x-8 text-sm font-medium uppercase tracking-widest">
<a href="#services" class="hover:text-purple-400 transition">Usługi</a>
<a href="#portfolio" class="hover:text-purple-400 transition">Realizacje</a>
<a href="#pricing" class="hover:text-purple-400 transition">Cennik</a>
</div>
<a href="#contact" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-full text-xs font-bold uppercase transition">Konsultacja</a>
</nav>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center px-6 overflow-hidden">
<div class="hero-video-container">
<!-- WPISZ TUTAJ LINK DO TWOJEGO VIDEO B-ROLL -->
<video autoplay muted loop playsinline>
<source src="https://assets.mixkit.co/videos/preview/mixkit-working-late-in-a-dark-office-4351-large.mp4" type="video/mp4">
</video>
</div>
<div class="text-center max-w-5xl">
<h1 class="text-5xl md:text-8xl font-black leading-tight mb-6">
Twoja marka w <span class="gradient-text">jakości kinowej.</span>
</h1>
<p class="text-lg md:text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
Budujemy strony, które sprzedają i produkujemy wideo, które zatrzymuje scrollowanie. Głos lektorski, którego zazdrości konkurencja.
</p>
<div class="flex flex-col md:flex-row gap-4 justify-center">
<a href="#portfolio" class="bg-white text-black px-10 py-4 rounded-full font-bold uppercase hover:bg-gray-200 transition">Zobacz Showreel</a>
<a href="#pricing" class="border border-white px-10 py-4 rounded-full font-bold uppercase hover:bg-white hover:text-black transition text-sm flex items-center justify-center">Sprawdź Terminy</a>
</div>
</div>
</section>
<!-- Model 6w1 Section -->
<section id="services" class="py-24 px-6 max-w-7xl mx-auto">
<div class="mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">Jeden zespół. <span class="text-purple-500">Zero chaosu.</span></h2>
<p class="text-gray-400 max-w-xl">Zamiast 5 freelancerów, dostajesz jeden proces. Skracamy czas wdrożenia o 50%.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="glass-card p-8 rounded-3xl hover:border-purple-500 transition group">
<i data-lucide="layout" class="w-10 h-10 mb-6 text-purple-500"></i>
<h3 class="text-xl font-bold mb-4 tracking-tight">Web & E-commerce</h3>
<p class="text-sm text-gray-400 leading-relaxed">Strony WordPress i sklepy budowane pod konwersję. Czysty kod, brak zbędnych wtyczek.</p>
</div>
<div class="glass-card p-8 rounded-3xl hover:border-purple-500 transition">
<i data-lucide="video" class="w-10 h-10 mb-6 text-purple-500"></i>
<h3 class="text-xl font-bold mb-4 tracking-tight">Video & UGC</h3>
<p class="text-sm text-gray-400 leading-relaxed">Produkcja reklamowa i rolki, które budują zasięg organiczny. Kinowy montaż w Twoim telefonie.</p>
</div>
<div class="glass-card p-8 rounded-3xl hover:border-purple-500 transition">
<i data-lucide="mic-2" class="w-10 h-10 mb-6 text-purple-500"></i>
<h3 class="text-xl font-bold mb-4 tracking-tight">Voice-Over</h3>
<p class="text-sm text-gray-400 leading-relaxed">Twój profesjonalny głos lektorski. Prestiż, który słychać w każdej sekundzie reklamy.</p>
</div>
<div class="glass-card p-8 rounded-3xl hover:border-purple-500 transition">
<i data-lucide="palette" class="w-10 h-10 mb-6 text-purple-500"></i>
<h3 class="text-xl font-bold mb-4 tracking-tight">Identity</h3>
<p class="text-sm text-gray-400 leading-relaxed">Branding, który sprawia, że wyglądasz na lidera rynku, zanim jeszcze nim zostaniesz.</p>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="bg-[#111] py-24 px-6">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-4">
<div>
<h2 class="text-3xl md:text-5xl font-bold">Dowody na <span class="gradient-text">zmysły</span>.</h2>
<p class="text-gray-400 mt-4">Nie opowiadamy o jakości. My ją pokazujemy i emitujemy.</p>
</div>
<div class="text-sm font-bold uppercase tracking-widest text-purple-500">Ostatnie realizacje</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Placeholder for Video -->
<div class="aspect-[9/16] bg-black rounded-3xl overflow-hidden glass-card flex items-center justify-center relative group">
<span class="text-xs uppercase tracking-widest opacity-30 group-hover:opacity-100 transition">Wideo UGC / Reels</span>
<i data-lucide="play-circle" class="absolute w-12 h-12 text-white opacity-50"></i>
</div>
<!-- Placeholder for Website -->
<div class="md:col-span-2 aspect-video bg-gray-900 rounded-3xl overflow-hidden glass-card flex items-center justify-center group">
<span class="text-xs uppercase tracking-widest opacity-30 group-hover:opacity-100 transition">E-commerce / UI Design</span>
</div>
<!-- Audio Player Demo -->
<div class="md:col-span-3 glass-card p-8 rounded-3xl flex flex-col md:flex-row items-center justify-between">
<div class="flex items-center gap-6 mb-4 md:mb-0">
<div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center shadow-lg shadow-purple-500/20">
<i data-lucide="volume-2" class="text-white"></i>
</div>
<div>
<h4 class="font-bold">Demo Głosowe: Biznesowy Premium</h4>
<p class="text-xs text-gray-500 uppercase">Lektor: Dawid / Nela</p>
</div>
</div>
<audio controls class="w-full md:w-1/2 opacity-50 hover:opacity-100 transition">
<source src="#" type="audio/mpeg">
Twoja przeglądarka nie obsługuje audio.
</audio>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-24 px-6 max-w-7xl mx-auto">
<h2 class="text-center text-3xl md:text-5xl font-bold mb-16">Wybierz tempo <span class="text-purple-500">wzrostu.</span></h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Pakiet Start -->
<div class="glass-card p-10 rounded-[3rem] flex flex-col">
<h3 class="text-2xl font-bold mb-2">Start</h3>
<p class="text-gray-500 text-sm mb-8 italic">Fundament Twojej marki.</p>
<ul class="space-y-4 text-sm mb-12 flex-grow">
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-purple-500"></i> Branding (Logo + Fonty)</li>
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-purple-500"></i> Strona typu One-Page</li>
<li class="flex items-center gap-3 text-gray-600"><i data-lucide="x" class="w-4 h-4"></i> Brak Wideo & Audio</li>
</ul>
<button class="w-full border border-gray-700 py-4 rounded-full font-bold uppercase hover:bg-white hover:text-black transition">Wybierz Start</button>
</div>
<!-- Pakiet Growth -->
<div class="glass-card p-10 rounded-[3rem] flex flex-col relative border-purple-500 border-2">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-purple-500 text-white px-6 py-1 rounded-full text-[10px] font-black uppercase tracking-tighter">Najczęściej wybierany</div>
<h3 class="text-2xl font-bold mb-2">Growth</h3>
<p class="text-gray-500 text-sm mb-8 italic">Dla tych, co chcą sprzedawać.</p>
<ul class="space-y-4 text-sm mb-12 flex-grow">
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-purple-500"></i> Strona WWW + Blog</li>
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-purple-500"></i> 10 Rolek / UGC na miesiąc</li>
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-purple-500"></i> Lektor do każdej reklamy</li>
</ul>
<button class="w-full bg-purple-600 py-4 rounded-full font-bold uppercase hover:bg-purple-700 transition shadow-lg shadow-purple-500/20">Wybierz Growth</button>
</div>
<!-- Pakiet Scale -->
<div class="glass-card p-10 rounded-[3rem] flex flex-col">
<h3 class="text-2xl font-bold mb-2">Scale</h3>
<p class="text-gray-500 text-sm mb-8 italic">Dominacja rynkowa.</p>
<ul class="space-y-4 text-sm mb-12 flex-grow">
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-purple-500"></i> Pełny E-commerce</li>
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-purple-500"></i> Full Strategy Video</li>
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-purple-500"></i> Support Techniczny 24/7</li>
</ul>
<button class="w-full border border-gray-700 py-4 rounded-full font-bold uppercase hover:bg-white hover:text-black transition">Wybierz Scale</button>
</div>
</div>
</section>
<!-- Footer / Contact -->
<footer id="contact" class="bg-[#050505] py-24 px-6 border-t border-gray-900">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-24">
<div>
<h2 class="text-5xl font-black mb-8 leading-none">Gotowy na <span class="gradient-text">skok?</span></h2>
<p class="text-gray-400 mb-12">Nie wysyłaj zapytania, jeśli szukasz "taniego wykonawcy". Napisz, jeśli szukasz partnera, który dowiezie wynik.</p>
<div class="space-y-4 text-sm uppercase tracking-widest text-gray-500">
<p>Poznań, Polska</p>
<p>hello@biznesowelove.pl</p>
</div>
</div>
<div class="glass-card p-8 rounded-3xl">
<form class="space-y-6">
<div>
<label class="block text-[10px] uppercase font-bold text-gray-500 mb-2">Twoje Imię</label>
<input type="text" class="w-full bg-transparent border-b border-gray-800 py-2 focus:border-purple-500 outline-none transition">
</div>
<div>
<label class="block text-[10px] uppercase font-bold text-gray-500 mb-2">E-mail</label>
<input type="email" class="w-full bg-transparent border-b border-gray-800 py-2 focus:border-purple-500 outline-none transition">
</div>
<div>
<label class="block text-[10px] uppercase font-bold text-gray-500 mb-2">O czym pogadamy?</label>
<textarea class="w-full bg-transparent border-b border-gray-800 py-2 focus:border-purple-500 outline-none transition h-32"></textarea>
</div>
<button class="w-full bg-white text-black py-4 rounded-full font-black uppercase text-xs tracking-widest hover:bg-purple-500 hover:text-white transition">Wyślij Brief</button>
</form>
</div>
</div>
<div class="max-w-7xl mx-auto mt-24 pt-12 border-t border-gray-900 flex justify-between items-center text-[10px] uppercase tracking-tighter text-gray-600">
<p>© 2026 BiznesoweLove. Wszystkie prawa zastrzeżone.</p>
<p>Made with Love & ROI</p>
</div>
</footer>
<script>
lucide.createIcons();
</script>
</body>
</html>
