|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>StreamDream - The Ultimate Entertainment Experience</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
|
|
} |
|
|
.btn-hover { |
|
|
transition: all 0.3s ease; |
|
|
transform: translateY(0); |
|
|
} |
|
|
.btn-hover:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #4f46e5; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
.feature-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.feature-card:hover .feature-icon { |
|
|
transform: scale(1.1); |
|
|
color: #4f46e5; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg text-white font-sans"> |
|
|
|
|
|
<nav class="container mx-auto px-6 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="tv" class="text-indigo-500 w-8 h-8"></i> |
|
|
<span class="text-2xl font-bold">Stream<span class="text-indigo-500">Dream</span></span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="nav-link">Home</a> |
|
|
<a href="#" class="nav-link">Features</a> |
|
|
<a href="#" class="nav-link">Pricing</a> |
|
|
<a href="#" class="nav-link">Support</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative group"> |
|
|
<button class="flex items-center space-x-1 px-3 py-2 rounded-md hover:bg-indigo-700 transition"> |
|
|
<i data-feather="globe" class="w-5 h-5"></i> |
|
|
<span class="hidden sm:inline">English</span> |
|
|
<i data-feather="chevron-down" class="w-4 h-4 hidden sm:block"></i> |
|
|
</button> |
|
|
<div class="absolute right-0 mt-2 w-40 bg-gray-800 rounded-md shadow-lg z-10 hidden group-hover:block"> |
|
|
<a href="#" class="block px-4 py-2 text-white hover:bg-indigo-700 transition">English</a> |
|
|
<a href="#" class="block px-4 py-2 text-white hover:bg-indigo-700 transition">Nederlands</a> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="px-6 py-2 bg-indigo-600 rounded-md btn-hover">Get Started</a> |
|
|
</div> |
|
|
<button class="md:hidden" id="mobile-menu-button"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="container mx-auto px-6 py-20"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> |
|
|
The Future of Entertainment <span class="text-indigo-400">Starts Here</span> |
|
|
</h1> |
|
|
<p class="text-lg text-gray-300 mb-8"> |
|
|
Experience seamless streaming with WatchTiVo. Unlimited shows, movies, and live TV at your fingertips. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#" class="px-8 py-3 bg-indigo-600 rounded-md text-center btn-hover"> |
|
|
Start Free Trial |
|
|
</a> |
|
|
<a href="#" class="px-8 py-3 border border-indigo-500 rounded-md text-center hover:bg-indigo-900 transition"> |
|
|
Learn More |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2" data-aos="fade-left"> |
|
|
<img src="http://static.photos/technology/1024x576/42" alt="StreamDream App" class="rounded-xl shadow-2xl card-hover hovered-element"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Why Choose WatchTiVo?</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Discover the features that make WatchTiVo the best choice for your entertainment needs. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-800 p-8 rounded-xl feature-card" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-16 h-16 bg-indigo-900 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="play" class="feature-icon w-8 h-8 text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Unlimited Streaming</h3> |
|
|
<p class="text-gray-400"> |
|
|
Access thousands of shows and movies with no limits. Watch anytime, anywhere. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-8 rounded-xl feature-card" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-16 h-16 bg-indigo-900 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="download" class="feature-icon w-8 h-8 text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Offline Viewing</h3> |
|
|
<p class="text-gray-400"> |
|
|
Download your favorite content and watch it offline without internet connection. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-8 rounded-xl feature-card" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-16 h-16 bg-indigo-900 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="users" class="feature-icon w-8 h-8 text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Multiple Profiles</h3> |
|
|
<p class="text-gray-400"> |
|
|
Create up to 5 profiles with personalized recommendations for each family member. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Choose the plan that fits your needs. Cancel anytime. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
<div class="bg-gray-800 p-8 rounded-xl card-hover" data-aos="fade-up" data-aos-delay="100"> |
|
|
<h3 class="text-xl font-bold mb-4">Basic</h3> |
|
|
<p class="text-4xl font-bold mb-6">$9.99<span class="text-lg text-gray-400">/month</span></p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>1 Screen at a time</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>HD Available</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i> |
|
|
<span class="text-gray-500">4K Ultra HD</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i> |
|
|
<span class="text-gray-500">Offline Viewing</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full py-3 bg-gray-700 hover:bg-gray-600 text-center rounded-md transition">Select Plan</a> |
|
|
</div> |
|
|
<div class="bg-indigo-900 p-8 rounded-xl relative card-hover" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="absolute top-0 right-0 bg-indigo-700 text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> |
|
|
<h3 class="text-xl font-bold mb-4">Standard</h3> |
|
|
<p class="text-4xl font-bold mb-6">$14.99<span class="text-lg text-indigo-300">/month</span></p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>2 Screens at a time</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>HD Available</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>4K Ultra HD</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i> |
|
|
<span class="text-indigo-300">Offline Viewing</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full py-3 bg-indigo-600 hover:bg-indigo-500 text-center rounded-md transition">Select Plan</a> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-8 rounded-xl card-hover" data-aos="fade-up" data-aos-delay="300"> |
|
|
<h3 class="text-xl font-bold mb-4">Premium</h3> |
|
|
<p class="text-4xl font-bold mb-6">$19.99<span class="text-lg text-gray-400">/month</span></p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>4 Screens at a time</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>HD Available</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>4K Ultra HD</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Offline Viewing</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full py-3 bg-indigo-600 hover:bg-indigo-500 text-center rounded-md transition">Select Plan</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Users Say</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Don't just take our word for it. Here's what our subscribers have to say. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-800 p-8 rounded-xl card-hover" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah Johnson</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
"StreamDream has completely changed how I watch TV. The interface is intuitive and the content selection is amazing!" |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-8 rounded-xl card-hover" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Michael Chen</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
"The offline viewing feature is a game-changer for my commute. I can download shows and watch them on the subway." |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-8 rounded-xl card-hover" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/people/200x200/3" alt="User" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Emma Rodriguez</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
"Love the multiple profiles feature! My kids have their own space with age-appropriate content." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<div class="max-w-3xl mx-auto bg-gray-800 rounded-xl p-12 card-hover" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Free Trial?</h2> |
|
|
<p class="text-gray-400 mb-8"> |
|
|
Join millions of happy subscribers and experience entertainment like never before. |
|
|
</p> |
|
|
<a href="#" class="inline-block px-8 py-3 bg-indigo-600 rounded-md btn-hover"> |
|
|
Get Started - 7 Days Free |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i data-feather="tv" class="text-indigo-500 w-8 h-8"></i> |
|
|
<span class="text-2xl font-bold">Stream<span class="text-indigo-500">Dream</span></span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
The ultimate entertainment experience for your home. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Support</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Legal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">GDPR</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 WatchTiVo. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.querySelector('.md\\:flex.space-x-8'); |
|
|
menu.classList.toggle('hidden'); |
|
|
menu.classList.toggle('flex'); |
|
|
menu.classList.toggle('flex-col'); |
|
|
menu.classList.toggle('absolute'); |
|
|
menu.classList.toggle('top-16'); |
|
|
menu.classList.toggle('right-6'); |
|
|
menu.classList.toggle('bg-gray-800'); |
|
|
menu.classList.toggle('p-4'); |
|
|
menu.classList.toggle('rounded-lg'); |
|
|
menu.classList.toggle('shadow-lg'); |
|
|
menu.classList.toggle('z-10'); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
