|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WowTV - Premium Entertainment</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #db2777 100%); |
|
|
} |
|
|
|
|
|
.show-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: #60a5fa; |
|
|
} |
|
|
|
|
|
.glow { |
|
|
animation: glow 2s ease-in-out infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes glow { |
|
|
from { |
|
|
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
to { |
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); |
|
|
} |
|
|
} |
|
|
|
|
|
.video-container { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.video-container iframe { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-gray-900 bg-opacity-90 fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-2xl font-bold text-blue-400">Wow<span class="text-white">TV</span></span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white hover:text-blue-300 transition">Home</a> |
|
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-blue-300 transition">Shows</a> |
|
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-blue-300 transition">Movies</a> |
|
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-blue-300 transition">Live TV</a> |
|
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-blue-300 transition">Kids</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="ml-3 relative"> |
|
|
<div> |
|
|
<button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none"> |
|
|
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex md:hidden"> |
|
|
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:hidden" id="mobile-menu"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-blue-300">Home</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-blue-300">Shows</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-blue-300">Movies</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-blue-300">Live TV</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-blue-300">Kids</a> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-gray-700"> |
|
|
<div class="flex items-center px-5"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-base font-medium text-white">John Doe</div> |
|
|
<div class="text-sm font-medium text-gray-400">john@example.com</div> |
|
|
</div> |
|
|
<button class="ml-auto flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-24"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex md:items-center md:justify-between"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">The Best Entertainment Experience</h1> |
|
|
<p class="text-xl text-gray-200 mb-8">Stream thousands of shows, movies, and live TV channels. Anytime, anywhere.</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105 glow"> |
|
|
Start Free Trial |
|
|
</button> |
|
|
<button class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> |
|
|
Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="video-container rounded-xl overflow-hidden shadow-2xl"> |
|
|
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&mute=1&controls=0&modestbranding=1&rel=0" frameborder="0" allowfullscreen></iframe> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center mb-10"> |
|
|
<h2 class="text-3xl font-bold">Featured Shows</h2> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> |
|
|
View All <i class="fas fa-chevron-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> |
|
|
|
|
|
<div class="show-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x450/?drama" alt="Show" class="w-full h-auto"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-0 left-0 p-4"> |
|
|
<span class="bg-blue-500 text-white text-xs font-semibold px-2 py-1 rounded">NEW</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold mb-1">Drama Series</h3> |
|
|
<p class="text-gray-400 text-sm">Season 3 • 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="show-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x450/?comedy" alt="Show" class="w-full h-auto"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold mb-1">Comedy Hour</h3> |
|
|
<p class="text-gray-400 text-sm">Season 5 • 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="show-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x450/?action" alt="Show" class="w-full h-auto"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-0 left-0 p-4"> |
|
|
<span class="bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded">HOT</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold mb-1">Action Packed</h3> |
|
|
<p class="text-gray-400 text-sm">Season 2 • 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="show-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x450/?documentary" alt="Show" class="w-full h-auto"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold mb-1">World Documentaries</h3> |
|
|
<p class="text-gray-400 text-sm">2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="show-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x450/?sci-fi" alt="Show" class="w-full h-auto"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold mb-1">Sci-Fi Adventures</h3> |
|
|
<p class="text-gray-400 text-sm">Season 1 • 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center mb-10"> |
|
|
<h2 class="text-3xl font-bold">Live TV Channels</h2> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> |
|
|
View All <i class="fas fa-chevron-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
|
|
|
<div class="bg-gray-700 rounded-lg overflow-hidden transition duration-300 hover:bg-gray-600 cursor-pointer"> |
|
|
<div class="p-4 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-tv text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-sm font-semibold text-center">News 24</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 rounded-lg overflow-hidden transition duration-300 hover:bg-gray-600 cursor-pointer"> |
|
|
<div class="p-4 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-film text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-sm font-semibold text-center">Movie Channel</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 rounded-lg overflow-hidden transition duration-300 hover:bg-gray-600 cursor-pointer"> |
|
|
<div class="p-4 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-futbol text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-sm font-semibold text-center">Sports HD</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 rounded-lg overflow-hidden transition duration-300 hover:bg-gray-600 cursor-pointer"> |
|
|
<div class="p-4 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-music text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-sm font-semibold text-center">Music TV</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 rounded-lg overflow-hidden transition duration-300 hover:bg-gray-600 cursor-pointer"> |
|
|
<div class="p-4 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-child text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-sm font-semibold text-center">Kids World</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 rounded-lg overflow-hidden transition duration-300 hover:bg-gray-600 cursor-pointer"> |
|
|
<div class="p-4 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-globe text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-sm font-semibold text-center">Discovery</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-4">Choose Your Plan</h2> |
|
|
<p class="text-xl text-gray-400 text-center mb-12">Flexible options for every viewer</p> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 transition duration-300 hover:bg-gray-700"> |
|
|
<h3 class="text-2xl font-bold mb-2">Basic</h3> |
|
|
<p class="text-gray-400 mb-6">Perfect for casual viewers</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">€7.99</span> |
|
|
<span class="text-gray-400">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>HD Available</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>1 Screen at a time</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Unlimited movies and TV shows</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-500"> |
|
|
<i class="fas fa-times text-red-500 mr-2"></i> |
|
|
<span>No Live TV</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-4 rounded-lg transition"> |
|
|
Select Plan |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl p-8 transform hover:scale-105 transition duration-300 relative"> |
|
|
<div class="absolute top-0 right-0 bg-yellow-500 text-black text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg"> |
|
|
POPULAR |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2 text-white">Standard</h3> |
|
|
<p class="text-blue-200 mb-6">Best value for most viewers</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-white">€12.99</span> |
|
|
<span class="text-blue-200">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-white mr-2"></i> |
|
|
<span class="text-white">Full HD Available</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-white mr-2"></i> |
|
|
<span class="text-white">2 Screens at a time</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-white mr-2"></i> |
|
|
<span class="text-white">Unlimited movies and TV shows</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-white mr-2"></i> |
|
|
<span class="text-white">50+ Live TV channels</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-white hover:bg-gray-200 text-blue-800 font-bold py-3 px-4 rounded-lg transition"> |
|
|
Select Plan |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 transition duration-300 hover:bg-gray-700"> |
|
|
<h3 class="text-2xl font-bold mb-2">Premium</h3> |
|
|
<p class="text-gray-400 mb-6">For the ultimate experience</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">€17.99</span> |
|
|
<span class="text-gray-400">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>4K Ultra HD Available</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>4 Screens at a time</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Unlimited movies and TV shows</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>100+ Live TV channels</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition"> |
|
|
Select Plan |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h2 class="text-3xl font-bold mb-4">Watch Anywhere, Anytime</h2> |
|
|
<p class="text-gray-400 mb-6 text-lg">Enjoy WowTV on all your devices. Stream on your phone, tablet, laptop, and TV.</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-tv text-blue-400 text-2xl mr-3"></i> |
|
|
<span>Smart TVs</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-laptop text-blue-400 text-2xl mr-3"></i> |
|
|
<span>Computers</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-tablet-alt text-blue-400 text-2xl mr-3"></i> |
|
|
<span>Tablets</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-mobile-alt text-blue-400 text-2xl mr-3"></i> |
|
|
<span>Phones</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-gamepad text-blue-400 text-2xl mr-3"></i> |
|
|
<span>Gaming Consoles</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-chromecast text-blue-400 text-2xl mr-3"></i> |
|
|
<span>Streaming Devices</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?devices" alt="Devices" class="rounded-lg shadow-2xl w-full"> |
|
|
<div class="absolute -bottom-6 -right-6 bg-gray-900 p-4 rounded-lg shadow-lg hidden md:block"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-download text-blue-400 text-2xl mr-3"></i> |
|
|
<div> |
|
|
<div class="font-bold">Download Now</div> |
|
|
<div class="text-sm text-gray-400">Available on all platforms</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-900"> |
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 transition"> |
|
|
<span class="text-left font-medium">What is WowTV?</span> |
|
|
<i class="fas fa-plus text-blue-400"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-800 border-t border-gray-700"> |
|
|
<p class="text-gray-400">WowTV is a streaming service that offers a wide variety of award-winning TV shows, movies, documentaries, and more on thousands of internet-connected devices. You can watch as much as you want, whenever you want without a single commercial – all for one low monthly price.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 transition"> |
|
|
<span class="text-left font-medium">How much does WowTV cost?</span> |
|
|
<i class="fas fa-plus text-blue-400"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-800 border-t border-gray-700"> |
|
|
<p class="text-gray-400">WowTV offers three plans to fit your needs: Basic at €7.99/month, Standard at €12.99/month, and Premium at €17.99/month. The price difference depends on video quality and the number of screens you can watch on simultaneously.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 transition"> |
|
|
<span class="text-left font-medium">Where can I watch?</span> |
|
|
<i class="fas fa-plus text-blue-400"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-800 border-t border-gray-700"> |
|
|
<p class="text-gray-400">Watch anywhere, anytime. Sign in with your WowTV account to watch instantly on the web at WowTV.com from your personal computer or on any internet-connected device that offers the WowTV app, including smart TVs, smartphones, tablets, streaming media players and game consoles.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 transition"> |
|
|
<span class="text-left font-medium">How do I cancel?</span> |
|
|
<i class="fas fa-plus text-blue-400"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-800 border-t border-gray-700"> |
|
|
<p class="text-gray-400">WowTV is flexible. There are no pesky contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account anytime.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 transition"> |
|
|
<span class="text-left font-medium">What can I watch on WowTV?</span> |
|
|
<i class="fas fa-plus text-blue-400"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-800 border-t border-gray-700"> |
|
|
<p class="text-gray-400">WowTV has an extensive library of feature films, documentaries, TV shows, anime, award-winning WowTV originals, and more. Watch as much as you want, anytime you want.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<p class="text-lg mb-6">Ready to watch? Enter your email to create or restart your membership.</p> |
|
|
<div class="max-w-md mx-auto flex flex-col sm:flex-row gap-2"> |
|
|
<input type="email" placeholder="Email address" class="flex-grow px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition"> |
|
|
Get Started <i class="fas fa-chevron-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 border-t border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Company</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Jobs</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Press</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Help</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Account</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Plans</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Features</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Legal</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Privacy</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Terms</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Cookie Policy</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">GDPR</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Connect</h3> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<a href="#" class="inline-flex items-center text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-globe mr-2"></i> |
|
|
<span>English</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 pt-8 border-t border-gray-800"> |
|
|
<p class="text-gray-400 text-sm">© 2023 WowTV. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const faqToggles = document.querySelectorAll('.faq-toggle'); |
|
|
faqToggles.forEach(toggle => { |
|
|
toggle.addEventListener('click', function() { |
|
|
const content = this.nextElementSibling; |
|
|
const icon = this.querySelector('i'); |
|
|
|
|
|
content.classList.toggle('hidden'); |
|
|
|
|
|
if (content.classList.contains('hidden')) { |
|
|
icon.classList.remove('fa-minus'); |
|
|
icon.classList.add('fa-plus'); |
|
|
} else { |
|
|
icon.classList.remove('fa-plus'); |
|
|
icon.classList.add('fa-minus'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jamesx007/test-tv-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
