Hugging Face's logo

Spaces:
srab1980
/
cinepulse
Running

App Files Community
srab1980 commited on
Commit
25376a6
·
verified ·
1 Parent(s): 78f0a1f

redesign this website https://www.imdb.com/

Browse files
Files changed (4) hide show
  1. components/footer.js +72 -48
  2. components/header.js +65 -66
  3. index.html +467 -233
  4. style.css +37 -39
components/footer.js CHANGED
@@ -1,3 +1,4 @@
 
1
  class CustomFooter extends HTMLElement {
2
  connectedCallback() {
3
  this.attachShadow({ mode: 'open' });
@@ -8,50 +9,60 @@ class CustomFooter extends HTMLElement {
8
  }
9
 
10
  .footer {
11
- background: linear-gradient(to right, #1f2937, #111827);
 
12
  }
13
 
14
- .social-icon {
15
- transition: all 0.3s ease;
16
  }
17
 
18
- .social-icon:hover {
19
- transform: translateY(-5px);
 
 
 
 
20
  color: #f59e0b;
21
  }
22
 
23
- .footer-link {
 
24
  transition: color 0.3s ease;
25
  }
26
 
27
- .footer-link:hover {
28
  color: #f59e0b;
29
  }
 
 
 
 
30
  </style>
31
 
32
- <footer class="footer pt-16 pb-8">
33
  <div class="container mx-auto px-4">
34
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
35
  <!-- Brand Column -->
36
- <div>
37
- <h2 class="text-2xl font-bold mb-4">
38
- <span class="text-amber-500">Cine</span>
39
- <span class="text-purple-500">Pulse</span>
40
  </h2>
41
- <p class="text-gray-400 mb-4">
42
- Discover, watch, and enjoy the best movies and TV shows from around the world.
43
  </p>
44
  <div class="flex space-x-4">
45
- <a href="#" class="social-icon text-gray-400 hover:text-white">
46
  <i data-feather="facebook" class="w-5 h-5"></i>
47
  </a>
48
- <a href="#" class="social-icon text-gray-400 hover:text-white">
49
  <i data-feather="twitter" class="w-5 h-5"></i>
50
  </a>
51
- <a href="#" class="social-icon text-gray-400 hover:text-white">
52
  <i data-feather="instagram" class="w-5 h-5"></i>
53
  </a>
54
- <a href="#" class="social-icon text-gray-400 hover:text-white">
55
  <i data-feather="youtube" class="w-5 h-5"></i>
56
  </a>
57
  </div>
@@ -59,52 +70,65 @@ class CustomFooter extends HTMLElement {
59
 
60
  <!-- Movies Column -->
61
  <div>
62
- <h3 class="text-lg font-semibold mb-4">Movies</h3>
63
  <ul class="space-y-2">
64
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Popular</a></li>
65
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Top Rated</a></li>
66
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Upcoming</a></li>
67
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Now Playing</a></li>
68
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Certified Fresh</a></li>
69
  </ul>
70
  </div>
71
 
72
  <!-- TV Shows Column -->
73
  <div>
74
- <h3 class="text-lg font-semibold mb-4">TV Shows</h3>
75
  <ul class="space-y-2">
76
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Popular</a></li>
77
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Top Rated</a></li>
78
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">On Air</a></li>
79
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Airing Today</a></li>
80
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Streaming</a></li>
81
  </ul>
82
  </div>
83
 
84
- <!-- Support Column -->
85
  <div>
86
- <h3 class="text-lg font-semibold mb-4">Support</h3>
87
  <ul class="space-y-2">
88
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Help Center</a></li>
89
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Contact Us</a></li>
90
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Privacy Policy</a></li>
91
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">Terms of Service</a></li>
92
- <li><a href="#" class="footer-link text-gray-400 hover:text-white">FAQ</a></li>
93
  </ul>
94
  </div>
95
  </div>
96
 
97
- <div class="border-t border-gray-800 pt-8 mt-8">
98
  <div class="flex flex-col md:flex-row justify-between items-center">
99
- <p class="text-gray-500 text-sm mb-4 md:mb-0">
100
- © 2023 CinePulse. All rights reserved.
101
- </p>
102
- <div class="flex space-x-6">
103
- <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Privacy</a>
104
- <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Terms</a>
105
- <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Cookies</a>
106
- <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">About</a>
 
 
 
107
  </div>
 
 
 
 
 
 
 
 
 
 
108
  </div>
109
  </div>
110
  </div>
@@ -118,4 +142,4 @@ class CustomFooter extends HTMLElement {
118
  }
119
  }
120
 
121
- customElements.define('custom-footer', CustomFooter);
 
1
+
2
  class CustomFooter extends HTMLElement {
3
  connectedCallback() {
4
  this.attachShadow({ mode: 'open' });
 
9
  }
10
 
11
  .footer {
12
+ background-color: #f9fafb;
13
+ border-top: 1px solid #e5e7eb;
14
  }
15
 
16
+ .footer-title {
17
+ color: #111827;
18
  }
19
 
20
+ .footer-link {
21
+ color: #6b7280;
22
+ transition: color 0.3s ease;
23
+ }
24
+
25
+ .footer-link:hover {
26
  color: #f59e0b;
27
  }
28
 
29
+ .social-icon {
30
+ color: #6b7280;
31
  transition: color 0.3s ease;
32
  }
33
 
34
+ .social-icon:hover {
35
  color: #f59e0b;
36
  }
37
+
38
+ .footer-bottom {
39
+ border-top: 1px solid #e5e7eb;
40
+ }
41
  </style>
42
 
43
+ <footer class="footer py-12">
44
  <div class="container mx-auto px-4">
45
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-8">
46
  <!-- Brand Column -->
47
+ <div class="lg:col-span-2">
48
+ <h2 class="footer-title text-2xl font-bold mb-4">
49
+ <span class="text-black">Cine</span>
50
+ <span class="text-gray-700">Pulse</span>
51
  </h2>
52
+ <p class="text-gray-600 mb-4 text-sm">
53
+ Get the best entertainment news, reviews, and recommendations for movies and TV shows.
54
  </p>
55
  <div class="flex space-x-4">
56
+ <a href="#" class="social-icon">
57
  <i data-feather="facebook" class="w-5 h-5"></i>
58
  </a>
59
+ <a href="#" class="social-icon">
60
  <i data-feather="twitter" class="w-5 h-5"></i>
61
  </a>
62
+ <a href="#" class="social-icon">
63
  <i data-feather="instagram" class="w-5 h-5"></i>
64
  </a>
65
+ <a href="#" class="social-icon">
66
  <i data-feather="youtube" class="w-5 h-5"></i>
67
  </a>
68
  </div>
 
70
 
71
  <!-- Movies Column -->
72
  <div>
73
+ <h3 class="footer-title text-sm font-semibold mb-4 uppercase tracking-wide">Movies</h3>
74
  <ul class="space-y-2">
75
+ <li><a href="movies.html" class="footer-link text-sm">Popular</a></li>
76
+ <li><a href="#" class="footer-link text-sm">Top Rated</a></li>
77
+ <li><a href="#" class="footer-link text-sm">Coming Soon</a></li>
78
+ <li><a href="#" class="footer-link text-sm">Now Playing</a></li>
79
+ <li><a href="#" class="footer-link text-sm">Box Office</a></li>
80
  </ul>
81
  </div>
82
 
83
  <!-- TV Shows Column -->
84
  <div>
85
+ <h3 class="footer-title text-sm font-semibold mb-4 uppercase tracking-wide">TV Shows</h3>
86
  <ul class="space-y-2">
87
+ <li><a href="#" class="footer-link text-sm">Popular</a></li>
88
+ <li><a href="#" class="footer-link text-sm">Top Rated</a></li>
89
+ <li><a href="#" class="footer-link text-sm">On TV</a></li>
90
+ <li><a href="#" class="footer-link text-sm">Airing Today</a></li>
91
+ <li><a href="#" class="footer-link text-sm">Streaming</a></li>
92
  </ul>
93
  </div>
94
 
95
+ <!-- Company Column -->
96
  <div>
97
+ <h3 class="footer-title text-sm font-semibold mb-4 uppercase tracking-wide">Company</h3>
98
  <ul class="space-y-2">
99
+ <li><a href="#" class="footer-link text-sm">About Us</a></li>
100
+ <li><a href="#" class="footer-link text-sm">Contact</a></li>
101
+ <li><a href="#" class="footer-link text-sm">Careers</a></li>
102
+ <li><a href="#" class="footer-link text-sm">Press</a></li>
103
+ <li><a href="#" class="footer-link text-sm">Advertise</a></li>
104
  </ul>
105
  </div>
106
  </div>
107
 
108
+ <div class="footer-bottom pt-8 mt-8">
109
  <div class="flex flex-col md:flex-row justify-between items-center">
110
+ <div class="flex items-center space-x-4 mb-4 md:mb-0">
111
+ <select class="text-sm text-gray-600 border border-gray-300 rounded px-2 py-1">
112
+ <option>English</option>
113
+ <option>Español</option>
114
+ <option>Français</option>
115
+ </select>
116
+ <select class="text-sm text-gray-600 border border-gray-300 rounded px-2 py-1">
117
+ <option>USD</option>
118
+ <option>EUR</option>
119
+ <option>GBP</option>
120
+ </select>
121
  </div>
122
+ <div class="flex flex-wrap space-x-6">
123
+ <a href="#" class="footer-link text-sm">Terms</a>
124
+ <a href="#" class="footer-link text-sm">Privacy</a>
125
+ <a href="#" class="footer-link text-sm">Cookies</a>
126
+ <a href="#" class="footer-link text-sm">Do Not Sell</a>
127
+ <a href="#" class="footer-link text-sm">Legal</a>
128
+ </div>
129
+ </div>
130
+ <div class="text-center mt-6">
131
+ <p class="text-gray-500 text-xs">© 2023 CinePulse, Inc. All rights reserved.</p>
132
  </div>
133
  </div>
134
  </div>
 
142
  }
143
  }
144
 
145
+ customElements.define('custom-footer', CustomFooter);
components/header.js CHANGED
@@ -1,3 +1,4 @@
 
1
  class CustomHeader extends HTMLElement {
2
  connectedCallback() {
3
  this.attachShadow({ mode: 'open' });
@@ -8,38 +9,33 @@ class CustomHeader extends HTMLElement {
8
  }
9
 
10
  .header {
11
- background-color: rgba(17, 24, 39, 0.8);
12
- backdrop-filter: blur(10px);
13
- position: fixed;
14
  top: 0;
15
  left: 0;
16
  right: 0;
17
  z-index: 1000;
18
- transition: all 0.3s ease;
19
  }
20
 
21
  .nav-link {
22
- position: relative;
23
- padding-bottom: 5px;
24
  }
25
 
26
- .nav-link::after {
27
- content: '';
28
- position: absolute;
29
- bottom: 0;
30
- left: 0;
31
- width: 0;
32
- height: 2px;
33
- background-color: #f59e0b;
34
- transition: width 0.3s ease;
35
  }
36
 
37
- .nav-link:hover::after {
38
- width: 100%;
 
 
39
  }
40
 
41
- .search-bar {
42
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 
 
43
  }
44
 
45
  @media (max-width: 768px) {
@@ -55,72 +51,75 @@ class CustomHeader extends HTMLElement {
55
  }
56
  </style>
57
 
58
- <header class="header py-4">
59
- <div class="container mx-auto px-4">
60
  <div class="flex items-center justify-between">
61
  <!-- Logo -->
62
  <div class="flex items-center">
63
- <h1 class="text-2xl font-bold">
64
- <span class="text-amber-500">Cine</span>
65
- <span class="text-purple-500">Pulse</span>
66
- </h1>
 
 
67
  </div>
68
- <!-- Desktop Navigation -->
69
- <nav class="hidden md:flex space-x-8">
70
- <a href="/" class="nav-link font-medium hover:text-amber-500 transition">Home</a>
71
- <a href="movies.html" class="nav-link font-medium hover:text-amber-500 transition">Movies</a>
72
- <a href="#" class="nav-link font-medium hover:text-amber-500 transition">TV Shows</a>
73
- <a href="#" class="nav-link font-medium hover:text-amber-500 transition">Celebs</a>
74
- <a href="#" class="nav-link font-medium hover:text-amber-500 transition">News</a>
75
- </nav>
76
- <!-- Right side -->
77
- <div class="flex items-center space-x-4">
78
- <!-- Search -->
79
- <div class="hidden md:block relative">
80
  <input
81
  type="text"
82
- placeholder="Search movies, shows..."
83
- class="search-bar bg-gray-800 text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-amber-500 w-64"
84
  >
85
- <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400 w-4 h-4"></i>
 
 
 
 
 
 
 
 
 
86
  </div>
87
 
88
- <!-- Watchlist -->
89
- <button class="p-2 rounded-full hover:bg-gray-800 transition">
90
- <i data-feather="bookmark" class="w-5 h-5"></i>
91
- </button>
92
-
93
- <!-- User Profile -->
94
- <div class="relative">
95
- <button class="flex items-center space-x-2">
96
- <div class="w-8 h-8 rounded-full bg-amber-500 flex items-center justify-center">
97
- <span class="font-bold text-gray-900">U</span>
98
- </div>
 
 
 
 
 
99
  </button>
100
  </div>
101
-
102
- <!-- Mobile menu button -->
103
- <button id="mobile-toggle" class="md:hidden text-gray-300 hover:text-white">
104
- <i data-feather="menu" class="w-6 h-6"></i>
105
- </button>
106
  </div>
107
  </div>
108
- <!-- Mobile Navigation -->
 
109
  <div id="mobile-menu" class="mobile-menu md:hidden mt-4">
110
  <div class="pt-4 pb-2 space-y-3">
111
- <a href="/" class="block py-2 px-4 rounded hover:bg-gray-800">Home</a>
112
- <a href="movies.html" class="block py-2 px-4 rounded hover:bg-gray-800">Movies</a>
113
- <a href="#" class="block py-2 px-4 rounded hover:bg-gray-800">TV Shows</a>
114
- <a href="#" class="block py-2 px-4 rounded hover:bg-gray-800">Celebs</a>
115
- <a href="#" class="block py-2 px-4 rounded hover:bg-gray-800">News</a>
116
- <div class="relative mt-2 px-4">
117
  <input
118
  type="text"
119
  placeholder="Search..."
120
- class="w-full bg-gray-800 text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-amber-500"
121
  >
122
- <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400 w-4 h-4"></i>
123
  </div>
 
 
 
 
124
  </div>
125
  </div>
126
  </div>
@@ -142,4 +141,4 @@ class CustomHeader extends HTMLElement {
142
  }
143
  }
144
 
145
- customElements.define('custom-header', CustomHeader);
 
1
+
2
  class CustomHeader extends HTMLElement {
3
  connectedCallback() {
4
  this.attachShadow({ mode: 'open' });
 
9
  }
10
 
11
  .header {
12
+ background-color: rgba(245, 197, 24, 1);
13
+ position: sticky;
 
14
  top: 0;
15
  left: 0;
16
  right: 0;
17
  z-index: 1000;
18
+ border-bottom: 1px solid #e5e7eb;
19
  }
20
 
21
  .nav-link {
22
+ transition: color 0.3s ease;
 
23
  }
24
 
25
+ .nav-link:hover {
26
+ color: #1f2937;
 
 
 
 
 
 
 
27
  }
28
 
29
+ .search-bar {
30
+ background-color: #f3f4f6;
31
+ border: 1px solid #d1d5db;
32
+ transition: all 0.3s ease;
33
  }
34
 
35
+ .search-bar:focus {
36
+ background-color: white;
37
+ border-color: #1f2937;
38
+ box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
39
  }
40
 
41
  @media (max-width: 768px) {
 
51
  }
52
  </style>
53
 
54
+ <header class="header">
55
+ <div class="container mx-auto px-4 py-3">
56
  <div class="flex items-center justify-between">
57
  <!-- Logo -->
58
  <div class="flex items-center">
59
+ <a href="/" class="flex items-center">
60
+ <h1 class="text-2xl font-bold text-black">
61
+ <span class="text-black">Cine</span>
62
+ <span class="text-gray-700">Pulse</span>
63
+ </h1>
64
+ </a>
65
  </div>
66
+
67
+ <!-- Search Bar -->
68
+ <div class="hidden lg:flex flex-1 max-w-2xl mx-8">
69
+ <div class="relative w-full">
 
 
 
 
 
 
 
 
70
  <input
71
  type="text"
72
+ placeholder="Search movies, TV shows, celebrities..."
73
+ class="search-bar w-full py-2 px-4 pl-10 rounded-full focus:outline-none"
74
  >
75
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500 w-4 h-4"></i>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Right Navigation -->
80
+ <div class="flex items-center space-x-6">
81
+ <div class="hidden md:flex items-center space-x-4">
82
+ <a href="movies.html" class="nav-link font-medium text-black">Movies</a>
83
+ <a href="#" class="nav-link font-medium text-black">TV Shows</a>
84
+ <a href="#" class="nav-link font-medium text-black">Watch List</a>
85
  </div>
86
 
87
+ <!-- User Menu -->
88
+ <div class="flex items-center space-x-3">
89
+ <button class="p-2 hover:bg-yellow-100 rounded-full transition">
90
+ <i data-feather="bell" class="w-5 h-5 text-black"></i>
91
+ </button>
92
+ <div class="relative">
93
+ <button class="flex items-center space-x-2">
94
+ <div class="w-8 h-8 rounded-full bg-black flex items-center justify-center">
95
+ <span class="font-bold text-white text-sm">U</span>
96
+ </div>
97
+ </button>
98
+ </div>
99
+
100
+ <!-- Mobile menu button -->
101
+ <button id="mobile-toggle" class="md:hidden">
102
+ <i data-feather="menu" class="w-6 h-6 text-black"></i>
103
  </button>
104
  </div>
 
 
 
 
 
105
  </div>
106
  </div>
107
+
108
+ <!-- Mobile Navigation -->
109
  <div id="mobile-menu" class="mobile-menu md:hidden mt-4">
110
  <div class="pt-4 pb-2 space-y-3">
111
+ <div class="relative mb-4">
 
 
 
 
 
112
  <input
113
  type="text"
114
  placeholder="Search..."
115
+ class="w-full search-bar py-2 px-4 pl-10 rounded-full focus:outline-none"
116
  >
117
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500 w-4 h-4"></i>
118
  </div>
119
+ <a href="movies.html" class="block py-2 px-4 rounded hover:bg-yellow-100 font-medium">Movies</a>
120
+ <a href="#" class="block py-2 px-4 rounded hover:bg-yellow-100 font-medium">TV Shows</a>
121
+ <a href="#" class="block py-2 px-4 rounded hover:bg-yellow-100 font-medium">Watch List</a>
122
+ <a href="#" class="block py-2 px-4 rounded hover:bg-yellow-100 font-medium">Sign In</a>
123
  </div>
124
  </div>
125
  </div>
 
141
  }
142
  }
143
 
144
+ customElements.define('custom-header', CustomHeader);
index.html CHANGED
@@ -1,369 +1,597 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CinePulse - Discover Movies & TV Shows</title>
7
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
  <link rel="stylesheet" href="style.css">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
- <script src="https://unpkg.com/feather-icons"></script>
12
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
  </head>
14
- <body class="bg-gray-900 text-white font-poppins">
15
  <!-- Header/Web Component -->
16
  <custom-header></custom-header>
17
- <!-- Hero Section -->
18
- <section class="relative h-screen flex items-center justify-center overflow-hidden">
19
- <div class="absolute inset-0 z-0">
20
- <img src="http://static.photos/movie/1200x630/1" alt="Featured Movie" class="w-full h-full object-cover opacity-50">
21
- <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent"></div>
 
 
 
 
 
 
 
 
 
 
 
22
  </div>
23
- <div class="container mx-auto px-4 relative z-10">
24
- <div class="max-w-4xl">
25
- <div class="flex items-center mb-4">
26
- <span class="bg-amber-500 text-black text-sm font-bold px-3 py-1 rounded mr-3">FEATURED</span>
27
- <div class="flex items-center">
28
- <i data-feather="star" class="text-amber-400 w-5 h-5 mr-1"></i>
29
- <span class="text-xl font-bold">8.7</span>
30
- <span class="text-gray-300 ml-2">(125,432 votes)</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </div>
32
  </div>
33
- <h1 class="text-4xl md:text-6xl font-bold mb-4">The Ultimate Adventure</h1>
34
- <div class="flex items-center text-gray-300 mb-4">
35
- <span class="mr-4">2023</span>
36
- <span class="mr-4">PG-13</span>
37
- <span class="mr-4">2h 28min</span>
38
- <span class="mr-4">Action, Adventure</span>
39
- </div>
40
- <p class="text-lg md:text-xl mb-8 max-w-3xl leading-relaxed">A thrilling journey through uncharted territories with stunning visuals and heart-stopping action sequences. Follow the epic adventure of a lifetime as our heroes face impossible odds in their quest to save the world.</p>
41
- <div class="flex flex-col sm:flex-row gap-4">
42
- <button class="bg-amber-500 hover:bg-amber-600 text-black font-bold py-3 px-8 rounded-lg text-lg transition duration-300 flex items-center justify-center">
43
- <i data-feather="play" class="w-5 h-5 mr-2"></i>
44
- Watch Trailer
45
- </button>
46
- <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition duration-300 flex items-center justify-center">
47
- <i data-feather="plus" class="w-5 h-5 mr-2"></i>
48
- Add to Watchlist
49
- </button>
50
- <a href="movie-details.html" class="bg-transparent border-2 border-gray-400 hover:bg-gray-400 hover:text-gray-900 text-white font-bold py-3 px-8 rounded-lg text-lg transition duration-300 flex items-center justify-center">
51
- <i data-feather="info" class="w-5 h-5 mr-2"></i>
52
- More Info
53
- </a>
54
- </div>
55
  </div>
56
  </div>
57
  </section>
58
-
59
- <!-- Charts Section -->
60
- <section class="py-8 bg-gray-800">
61
  <div class="container mx-auto px-4">
62
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
63
- <div class="bg-gray-900 rounded-lg p-6">
64
- <h3 class="text-lg font-semibold mb-2 text-amber-400">Box Office</h3>
65
- <p class="text-2xl font-bold">$847.3M</p>
66
- <p class="text-gray-400">Opening Weekend</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  </div>
68
- <div class="bg-gray-900 rounded-lg p-6">
69
- <h3 class="text-lg font-semibold mb-2 text-amber-400">Audience Score</h3>
70
- <p class="text-2xl font-bold">92%</p>
71
- <p class="text-gray-400">Like Score</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  </div>
73
- <div class="bg-gray-900 rounded-lg p-6">
74
- <h3 class="text-lg font-semibold mb-2 text-amber-400">Critics Score</h3>
75
- <p class="text-2xl font-bold">87%</p>
76
- <p class="text-gray-400">Fresh</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  </div>
78
  </div>
79
  </div>
80
  </section>
81
  <!-- Main Content Grid -->
82
- <section class="py-8">
83
  <div class="container mx-auto px-4">
84
- <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  <!-- Main Content -->
86
- <div class="lg:col-span-3">
87
  <!-- Trending Now -->
88
  <div class="mb-12">
89
  <div class="flex justify-between items-center mb-6">
90
  <h2 class="text-2xl font-bold">Trending Now</h2>
91
- <a href="movies.html" class="bg-amber-500 text-black px-4 py-2 rounded text-sm font-semibold hover:bg-amber-600 transition">Movies</a>
92
- <button class="bg-gray-700 text-white px-4 py-2 rounded text-sm font-semibold hover:bg-gray-600">TV</button>
93
- </div>
94
- <div class="overflow-x-auto">
95
- <div class="flex space-x-4" style="min-width: max-content;">
96
- <!-- Trending Movie Card -->
97
- <div class="flex-shrink-0 w-48 group cursor-pointer">
98
- <div class="relative overflow-hidden rounded-lg">
99
- <img src="http://static.photos/movie/320x480/1" alt="Trending Movie" class="w-full h-72 object-cover transition-transform duration-300 group-hover:scale-105">
100
- <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
101
- #1
102
- </div>
103
- <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
104
- 87%
105
- </div>
106
- <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
107
- <i data-feather="play" class="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
108
- </div>
109
  </div>
110
- <h3 class="font-semibold mt-2 truncate">The Ultimate Adventure</h3>
111
- <div class="flex items-center text-gray-400 text-sm">
112
- <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
113
- <span>8.7</span>
114
  </div>
115
  </div>
116
-
117
- <!-- More trending cards -->
118
- <div class="flex-shrink-0 w-48 group cursor-pointer">
119
- <div class="relative overflow-hidden rounded-lg">
120
- <img src="http://static.photos/movie/320x480/2" alt="Trending Movie" class="w-full h-72 object-cover transition-transform duration-300 group-hover:scale-105">
121
- <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
122
- #2
123
- </div>
124
- <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
125
- 92%
126
- </div>
 
 
127
  </div>
128
- <h3 class="font-semibold mt-2 truncate">Another Film</h3>
129
- <div class="flex items-center text-gray-400 text-sm">
130
- <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
131
- <span>9.1</span>
132
  </div>
133
  </div>
134
-
135
- <div class="flex-shrink-0 w-48 group cursor-pointer">
136
- <div class="relative overflow-hidden rounded-lg">
137
- <img src="http://static.photos/movie/320x480/3" alt="Trending Movie" class="w-full h-72 object-cover transition-transform duration-300 group-hover:scale-105">
138
- <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
139
- #3
140
- </div>
141
- <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
142
- 78%
143
- </div>
 
 
 
 
144
  </div>
145
- <h3 class="font-semibold mt-2 truncate">Action Thriller</h3>
146
- <div class="flex items-center text-gray-400 text-sm">
147
- <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
148
- <span>8.2</span>
149
  </div>
150
  </div>
151
-
152
- <div class="flex-shrink-0 w-48 group cursor-pointer">
153
- <div class="relative overflow-hidden rounded-lg">
154
- <img src="http://static.photos/movie/320x480/4" alt="Trending Movie" class="w-full h-72 object-cover transition-transform duration-300 group-hover:scale-105">
155
- <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
156
- #4
157
- </div>
158
- <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
159
- 85%
160
- </div>
 
 
 
 
 
 
 
161
  </div>
162
- <h3 class="font-semibold mt-2 truncate">Comedy Special</h3>
163
- <div class="flex items-center text-gray-400 text-sm">
164
- <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
165
- <span>7.9</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
166
  </div>
167
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
  </div>
 
170
  </div>
171
-
172
  <!-- Top Rated Movies -->
173
  <div class="mb-12">
174
  <div class="flex justify-between items-center mb-6">
175
  <h2 class="text-2xl font-bold">Top Rated Movies</h2>
176
- <a href="movies.html" class="text-amber-500 hover:text-amber-400 text-sm flex items-center">
177
  All Titles
178
  <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
179
  </a>
180
- </div>
181
  <div class="space-y-4">
182
  <!-- Movie List Item -->
183
- <div class="flex items-center bg-gray-800 rounded-lg p-4 hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
184
- <div class="flex items-center text-2xl font-bold text-amber-400 mr-4">1</div>
185
  <img src="http://static.photos/movie/320x480/1" alt="Movie" class="w-16 h-24 object-cover rounded mr-4">
186
  <div class="flex-1">
187
  <h3 class="font-bold text-lg">The Ultimate Adventure</h3>
188
- <p class="text-gray-400 text-sm mb-1">2023 • Action, Adventure, Sci-Fi</p>
189
- <p class="text-gray-300 text-sm line-clamp-2">A thrilling journey through uncharted territories with stunning visuals and heart-stopping action sequences.</p>
190
  </div>
191
  <div class="text-center ml-4">
192
  <div class="flex items-center justify-center mb-1">
193
  <i data-feather="star" class="text-amber-400 w-4 h-4 mr-1"></i>
194
  <span class="font-bold">8.7</span>
195
  </div>
196
- <div class="text-xs text-gray-400">125.4K</div>
197
  </div>
198
  </div>
199
-
200
- <!-- More movie items -->
201
- <div class="flex items-center bg-gray-800 rounded-lg p-4 hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
202
- <div class="flex items-center text-2xl font-bold text-amber-400 mr-4">2</div>
203
  <img src="http://static.photos/movie/320x480/2" alt="Movie" class="w-16 h-24 object-cover rounded mr-4">
204
  <div class="flex-1">
205
  <h3 class="font-bold text-lg">Another Film</h3>
206
- <p class="text-gray-400 text-sm mb-1">2023 • Drama, Thriller</p>
207
- <p class="text-gray-300 text-sm line-clamp-2">An intense psychological thriller that will keep you on the edge of your seat.</p>
208
  </div>
209
  <div class="text-center ml-4">
210
  <div class="flex items-center justify-center mb-1">
211
  <i data-feather="star" class="text-amber-400 w-4 h-4 mr-1"></i>
212
  <span class="font-bold">9.1</span>
213
  </div>
214
- <div class="text-xs text-gray-400">89.2K</div>
215
  </div>
216
  </div>
217
 
218
- <div class="flex items-center bg-gray-800 rounded-lg p-4 hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
219
- <div class="flex items-center text-2xl font-bold text-amber-400 mr-4">3</div>
220
  <img src="http://static.photos/movie/320x480/3" alt="Movie" class="w-16 h-24 object-cover rounded mr-4">
221
  <div class="flex-1">
222
  <h3 class="font-bold text-lg">Action Thriller</h3>
223
- <p class="text-gray-400 text-sm mb-1">2023 • Action, Thriller</p>
224
- <p class="text-gray-300 text-sm line-clamp-2">High-octane action with plot twists that will leave you guessing.</p>
225
  </div>
226
  <div class="text-center ml-4">
227
  <div class="flex items-center justify-center mb-1">
228
  <i data-feather="star" class="text-amber-400 w-4 h-4 mr-1"></i>
229
  <span class="font-bold">8.2</span>
230
  </div>
231
- <div class="text-xs text-gray-400">67.8K</div>
232
  </div>
233
  </div>
234
- </div>
235
  </div>
236
-
237
  <!-- Coming Soon -->
238
  <div class="mb-12">
239
  <div class="flex justify-between items-center mb-6">
240
  <h2 class="text-2xl font-bold">Coming Soon</h2>
241
- <a href="#" class="text-amber-500 hover:text-amber-400 text-sm flex items-center">
242
- Preview
243
  <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
244
  </a>
245
  </div>
246
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
247
  <!-- Coming Soon Card -->
248
- <div class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
249
  <img src="http://static.photos/movie/320x480/11" alt="Coming Soon" class="w-full h-48 object-cover">
250
  <div class="p-4">
251
  <h3 class="font-bold mb-2">Summer Adventure</h3>
252
- <p class="text-gray-400 text-sm mb-2">Opens Jul 15, 2023</p>
253
  <div class="flex items-center justify-between">
254
  <span class="text-xs bg-amber-500 text-black px-2 py-1 rounded font-semibold">PREVIEW</span>
255
- <button class="text-amber-500 hover:text-amber-400 text-sm">Trailer</button>
256
  </div>
257
  </div>
258
  </div>
259
-
260
- <div class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
261
  <img src="http://static.photos/movie/320x480/12" alt="Coming Soon" class="w-full h-48 object-cover">
262
  <div class="p-4">
263
  <h3 class="font-bold mb-2">Space Odyssey</h3>
264
- <p class="text-gray-400 text-sm mb-2">Opens Aug 3, 2023</p>
265
  <div class="flex items-center justify-between">
266
  <span class="text-xs bg-amber-500 text-black px-2 py-1 rounded font-semibold">PREVIEW</span>
267
- <button class="text-amber-500 hover:text-amber-400 text-sm">Trailer</button>
268
  </div>
269
  </div>
270
  </div>
271
 
272
- <div class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
273
  <img src="http://static.photos/movie/320x480/13" alt="Coming Soon" class="w-full h-48 object-cover">
274
  <div class="p-4">
275
  <h3 class="font-bold mb-2">Mystery Thriller</h3>
276
- <p class="text-gray-400 text-sm mb-2">Opens Sep 22, 2023</p>
277
  <div class="flex items-center justify-between">
278
  <span class="text-xs bg-amber-500 text-black px-2 py-1 rounded font-semibold">PREVIEW</span>
279
- <button class="text-amber-500 hover:text-amber-400 text-sm">Trailer</button>
280
  </div>
281
  </div>
282
  </div>
283
- </div>
284
  </div>
285
  </div>
286
 
287
  <!-- Sidebar -->
288
  <div class="lg:col-span-1">
289
- <!-- Born Today -->
290
- <div class="bg-gray-800 rounded-lg p-6 mb-6">
291
- <h3 class="text-lg font-bold mb-4">Born Today</h3>
292
- <div class="space-y-4">
293
- <div class="flex items-center">
294
- <img src="https://via.placeholder.com/40x40?text=AC" alt="Celebrity" class="w-10 h-10 rounded-full mr-3">
295
- <div>
296
- <p class="font-semibold text-sm">Actor Name</p>
297
- <p class="text-gray-400 text-xs">b. 1985</p>
298
- </div>
299
  </div>
300
- <div class="flex items-center">
301
- <img src="https://via.placeholder.com/40x40?text=AD" alt="Celebrity" class="w-10 h-10 rounded-full mr-3">
302
- <div>
303
- <p class="font-semibold text-sm">Another Actor</p>
304
- <p class="text-gray-400 text-xs">b. 1990</p>
305
- </div>
306
  </div>
307
- <div class="flex items-center">
308
- <img src="https://via.placeholder.com/40x40?text=DI" alt="Celebrity" class="w-10 h-10 rounded-full mr-3">
309
- <div>
310
- <p class="font-semibold text-sm">Director Name</p>
311
- <p class="text-gray-400 text-xs">b. 1975</p>
312
- </div>
313
  </div>
314
  </div>
315
  </div>
316
 
317
- <!-- Top News -->
318
- <div class="bg-gray-800 rounded-lg p-6 mb-6">
319
- <h3 class="text-lg font-bold mb-4">Top News</h3>
320
- <div class="space-y-3">
321
- <div class="border-b border-gray-700 pb-3 last:border-b-0">
322
- <h4 class="font-semibold text-sm mb-1 hover:text-amber-400 cursor-pointer">Exclusive First Look at Upcoming Blockbuster</h4>
323
- <p class="text-gray-400 text-xs">2 hours ago</p>
324
- </div>
325
- <div class="border-b border-gray-700 pb-3 last:border-b-0">
326
- <h4 class="font-semibold text-sm mb-1 hover:text-amber-400 cursor-pointer">Awards Season Predictions Heat Up</h4>
327
- <p class="text-gray-400 text-xs">4 hours ago</p>
328
- </div>
329
- <div class="border-b border-gray-700 pb-3 last:border-b-0">
330
- <h4 class="font-semibold text-sm mb-1 hover:text-amber-400 cursor-pointer">Director Reveals Secrets Behind Latest Film</h4>
331
- <p class="text-gray-400 text-xs">6 hours ago</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
332
  </div>
333
  </div>
334
  </div>
335
 
336
- <!-- Box Office -->
337
- <div class="bg-gray-800 rounded-lg p-6">
338
- <h3 class="text-lg font-bold mb-4">Box Office</h3>
339
- <div class="space-y-4">
340
- <div class="flex items-center justify-between">
341
- <span class="text-sm">1. The Ultimate Adventure</span>
342
- <span class="text-amber-400 font-bold">$847.3M</span>
 
 
 
 
 
 
343
  </div>
344
- <div class="flex items-center justify-between">
345
- <span class="text-sm">2. Another Film</span>
346
- <span class="text-amber-400 font-bold">$234.7M</span>
 
 
 
347
  </div>
348
- <div class="flex items-center justify-between">
349
- <span class="text-sm">3. Action Thriller</span>
350
- <span class="text-amber-400 font-bold">$189.2M</span>
 
 
 
351
  </div>
352
  </div>
353
- <button class="w-full mt-4 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded text-sm font-semibold transition-colors duration-200">
354
- Full Chart
355
- </button>
356
  </div>
357
  </div>
358
- </div>
359
  </div>
360
  </section>
361
  <!-- TV Section -->
362
- <section class="py-12 bg-gray-800">
363
  <div class="container mx-auto px-4">
364
  <div class="flex justify-between items-center mb-8">
365
  <h2 class="text-2xl font-bold">Top Rated TV Shows</h2>
366
- <a href="#" class="text-amber-500 hover:text-amber-400 text-sm flex items-center">
367
  All Series
368
  <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
369
  </a>
@@ -371,101 +599,107 @@
371
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
372
  <!-- TV Show Card -->
373
  <div class="group cursor-pointer">
374
- <div class="relative overflow-hidden rounded-lg">
375
  <img src="http://static.photos/movie/320x480/16" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
376
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
377
  HD
378
  </div>
379
- <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
380
- <i data-feather="play" class="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
381
- </div>
382
  </div>
383
  <h3 class="font-semibold mt-2 text-sm truncate">Drama Series</h3>
384
- <div class="flex items-center text-gray-400 text-xs">
 
385
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
386
  <span>9.2</span>
 
387
  </div>
388
  </div>
389
-
390
  <div class="group cursor-pointer">
391
- <div class="relative overflow-hidden rounded-lg">
392
  <img src="http://static.photos/movie/320x480/17" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
393
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
394
  4K
395
  </div>
396
  </div>
397
  <h3 class="font-semibold mt-2 text-sm truncate">Comedy Show</h3>
398
- <div class="flex items-center text-gray-400 text-xs">
 
399
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
400
  <span>8.8</span>
 
401
  </div>
402
  </div>
403
 
404
  <div class="group cursor-pointer">
405
- <div class="relative overflow-hidden rounded-lg">
406
  <img src="http://static.photos/movie/320x480/18" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
407
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
408
  HD
409
  </div>
410
  </div>
411
  <h3 class="font-semibold mt-2 text-sm truncate">Sci-Fi Series</h3>
412
- <div class="flex items-center text-gray-400 text-xs">
 
413
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
414
  <span>9.0</span>
 
415
  </div>
416
  </div>
417
 
418
  <div class="group cursor-pointer">
419
- <div class="relative overflow-hidden rounded-lg">
420
  <img src="http://static.photos/movie/320x480/19" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
421
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
422
  HD
423
  </div>
424
  </div>
425
  <h3 class="font-semibold mt-2 text-sm truncate">Crime Thriller</h3>
426
- <div class="flex items-center text-gray-400 text-xs">
 
427
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
428
  <span>8.9</span>
 
429
  </div>
430
  </div>
431
 
432
  <div class="group cursor-pointer">
433
- <div class="relative overflow-hidden rounded-lg">
434
  <img src="http://static.photos/movie/320x480/20" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
435
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
436
  4K
437
  </div>
438
  </div>
439
  <h3 class="font-semibold mt-2 text-sm truncate">Fantasy Epic</h3>
440
- <div class="flex items-center text-gray-400 text-xs">
 
441
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
442
  <span>9.1</span>
 
443
  </div>
444
  </div>
445
 
446
  <div class="group cursor-pointer">
447
- <div class="relative overflow-hidden rounded-lg">
448
  <img src="http://static.photos/movie/320x480/21" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
449
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
450
  HD
451
  </div>
452
  </div>
453
  <h3 class="font-semibold mt-2 text-sm truncate">Documentary</h3>
454
- <div class="flex items-center text-gray-400 text-xs">
 
455
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
456
  <span>8.7</span>
 
457
  </div>
458
  </div>
459
- </div>
460
  </div>
461
  </section>
462
  <!-- Footer/Web Component -->
463
  <custom-footer></custom-footer>
464
-
465
  <script src="components/header.js"></script>
466
  <script src="components/footer.js"></script>
467
  <script src="script.js"></script>
468
  <script>feather.replace();</script>
469
- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
470
  </body>
471
- </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>CinePulse - Movies, TV Shows, and Celebrities</title>
8
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
  <link rel="stylesheet" href="style.css">
10
  <script src="https://cdn.tailwindcss.com"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
12
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
  </head>
14
+ <body class="bg-white text-gray-900 font-poppins">
15
  <!-- Header/Web Component -->
16
  <custom-header></custom-header>
17
+
18
+ <!-- Top Navigation Bar -->
19
+ <nav class="bg-black text-white py-2">
20
+ <div class="container mx-auto px-4">
21
+ <div class="flex flex-wrap items-center justify-between text-sm">
22
+ <div class="flex flex-wrap gap-4">
23
+ <a href="movies.html" class="hover:text-amber-400 transition">Movies</a>
24
+ <a href="#" class="hover:text-amber-400 transition">TV Shows</a>
25
+ <a href="#" class="hover:text-amber-400 transition">Watch Free</a>
26
+ <a href="#" class="hover:text-amber-400 transition">Browse</a>
27
+ </div>
28
+ <div class="flex gap-4 mt-2 md:mt-0">
29
+ <a href="#" class="hover:text-amber-400 transition">Oscars</a>
30
+ <a href="#" class="hover:text-amber-400 transition">Super Bowl</a>
31
+ </div>
32
+ </div>
33
  </div>
34
+ </nav>
35
+
36
+ <!-- Featured Carousel -->
37
+ <section class="bg-black">
38
+ <div class="container mx-auto px-4 py-4">
39
+ <div class="relative">
40
+ <div class="flex overflow-x-auto space-x-4 pb-4 scrollbar-hide">
41
+ <div class="flex-shrink-0 w-64 cursor-pointer group">
42
+ <div class="relative">
43
+ <img src="http://static.photos/movie/640x360/101" alt="Featured" class="w-full h-36 object-cover rounded">
44
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent rounded"></div>
45
+ <div class="absolute bottom-2 left-2 text-white">
46
+ <p class="font-bold text-sm">Dune: Part Two</p>
47
+ <p class="text-xs">Now in theaters</p>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ <div class="flex-shrink-0 w-64 cursor-pointer group">
52
+ <div class="relative">
53
+ <img src="http://static.photos/movie/640x360/102" alt="Featured" class="w-full h-36 object-cover rounded">
54
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent rounded"></div>
55
+ <div class="absolute bottom-2 left-2 text-white">
56
+ <p class="font-bold text-sm">Fallout Series</p>
57
+ <p class="text-xs">New episodes</p>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <div class="flex-shrink-0 w-64 cursor-pointer group">
62
+ <div class="relative">
63
+ <img src="http://static.photos/movie/640x360/103" alt="Featured" class="w-full h-36 object-cover rounded">
64
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent rounded"></div>
65
+ <div class="absolute bottom-2 left-2 text-white">
66
+ <p class="font-bold text-sm">Godzilla x Kong</p>
67
+ <p class="text-xs">Streaming now</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ <div class="flex-shrink-0 w-64 cursor-pointer group">
72
+ <div class="relative">
73
+ <img src="http://static.photos/movie/640x360/104" alt="Featured" class="w-full h-36 object-cover rounded">
74
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent rounded"></div>
75
+ <div class="absolute bottom-2 left-2 text-white">
76
+ <p class="font-bold text-sm">Civil War</p>
77
+ <p class="text-xs">Coming soon</p>
78
+ </div>
79
+ </div>
80
  </div>
81
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  </div>
83
  </div>
84
  </section>
85
+ <!-- Box Office and Trending Section -->
86
+ <section class="py-8 bg-gray-100">
 
87
  <div class="container mx-auto px-4">
88
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
89
+ <!-- Box Office -->
90
+ <div class="bg-white rounded-lg shadow-md p-6">
91
+ <div class="flex justify-between items-center mb-4">
92
+ <h3 class="text-lg font-bold">Box Office</h3>
93
+ <span class="text-xs text-gray-500">Weekend of April 12-14</span>
94
+ </div>
95
+ <div class="space-y-3">
96
+ <div class="flex justify-between items-center">
97
+ <div class="flex items-center">
98
+ <span class="font-bold text-xl text-amber-500 mr-3">1</span>
99
+ <div>
100
+ <p class="font-semibold text-sm">Godzilla x Kong</p>
101
+ <p class="text-xs text-gray-500">$8.2M</p>
102
+ </div>
103
+ </div>
104
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">-62%</span>
105
+ </div>
106
+ <div class="flex justify-between items-center">
107
+ <div class="flex items-center">
108
+ <span class="font-bold text-xl text-gray-400 mr-3">2</span>
109
+ <div>
110
+ <p class="font-semibold text-sm">Dune: Part Two</p>
111
+ <p class="text-xs text-gray-500">$5.8M</p>
112
+ </div>
113
+ </div>
114
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">+15%</span>
115
+ </div>
116
+ <div class="flex justify-between items-center">
117
+ <div class="flex items-center">
118
+ <span class="font-bold text-xl text-gray-400 mr-3">3</span>
119
+ <div>
120
+ <p class="font-semibold text-sm">Ghostbusters</p>
121
+ <p class="text-xs text-gray-500">$3.2M</p>
122
+ </div>
123
+ </div>
124
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">+8%</span>
125
+ </div>
126
+ </div>
127
+ <a href="#" class="text-amber-600 text-sm font-semibold mt-4 inline-block hover:text-amber-700">View full chart →</a>
128
  </div>
129
+
130
+ <!-- What to Watch -->
131
+ <div class="bg-white rounded-lg shadow-md p-6">
132
+ <div class="flex justify-between items-center mb-4">
133
+ <h3 class="text-lg font-bold">What to Watch</h3>
134
+ <div class="flex space-x-2">
135
+ <button class="px-2 py-1 bg-amber-500 text-white text-xs rounded">Streaming</button>
136
+ <button class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded hover:bg-gray-300">TV</button>
137
+ </div>
138
+ </div>
139
+ <div class="space-y-3">
140
+ <div class="flex items-center">
141
+ <img src="http://static.photos/movie/80x120/201" alt="Movie" class="w-12 h-16 object-cover rounded mr-3">
142
+ <div class="flex-1">
143
+ <p class="font-semibold text-sm">Fallout: Season 1</p>
144
+ <p class="text-xs text-gray-500">Prime Video • New Episode</p>
145
+ </div>
146
+ </div>
147
+ <div class="flex items-center">
148
+ <img src="http://static.photos/movie/80x120/202" alt="Movie" class="w-12 h-16 object-cover rounded mr-3">
149
+ <div class="flex-1">
150
+ <p class="font-semibold text-sm">Shōgun</p>
151
+ <p class="text-xs text-gray-500">Hulu • Season Finale</p>
152
+ </div>
153
+ </div>
154
+ <div class="flex items-center">
155
+ <img src="http://static.photos/movie/80x120/203" alt="Movie" class="w-12 h-16 object-cover rounded mr-3">
156
+ <div class="flex-1">
157
+ <p class="font-semibold text-sm">Dune: Part Two</p>
158
+ <p class="text-xs text-gray-500">Max • Available Now</p>
159
+ </div>
160
+ </div>
161
+ </div>
162
  </div>
163
+
164
+ <!-- Born Today -->
165
+ <div class="bg-white rounded-lg shadow-md p-6">
166
+ <div class="flex justify-between items-center mb-4">
167
+ <h3 class="text-lg font-bold">Born Today</h3>
168
+ <a href="#" class="text-amber-600 text-sm">See all</a>
169
+ </div>
170
+ <div class="space-y-3">
171
+ <div class="flex items-center">
172
+ <img src="https://via.placeholder.com/40x40?text=JL" alt="Celebrity" class="w-10 h-10 rounded-full mr-3">
173
+ <div class="flex-1">
174
+ <p class="font-semibold text-sm">Jennifer Lawrence</p>
175
+ <p class="text-xs text-gray-500">Actress, The Hunger Games</p>
176
+ </div>
177
+ <span class="text-xs text-gray-500">Age 33</span>
178
+ </div>
179
+ <div class="flex items-center">
180
+ <img src="https://via.placeholder.com/40x40?text=RT" alt="Celebrity" class="w-10 h-10 rounded-full mr-3">
181
+ <div class="flex-1">
182
+ <p class="font-semibold text-sm">Robert Downey Jr.</p>
183
+ <p class="text-xs text-gray-500">Actor, Iron Man</p>
184
+ </div>
185
+ <span class="text-xs text-gray-500">Age 59</span>
186
+ </div>
187
+ <div class="flex items-center">
188
+ <img src="https://via.placeholder.com/40x40?text=EG" alt="Celebrity" class="w-10 h-10 rounded-full mr-3">
189
+ <div class="flex-1">
190
+ <p class="font-semibold text-sm">Emma Stone</p>
191
+ <p class="text-xs text-gray-500">Actress, La La Land</p>
192
+ </div>
193
+ <span class="text-xs text-gray-500">Age 35</span>
194
+ </div>
195
+ </div>
196
  </div>
197
  </div>
198
  </div>
199
  </section>
200
  <!-- Main Content Grid -->
201
+ <section class="py-8 bg-white">
202
  <div class="container mx-auto px-4">
203
+ <!-- More to Explore -->
204
+ <div class="mb-12">
205
+ <h2 class="text-2xl font-bold mb-6">More to Explore</h2>
206
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
207
+ <a href="#" class="text-center group cursor-pointer">
208
+ <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-amber-500 transition">
209
+ <i data-feather="film" class="w-8 h-8 text-gray-600 group-hover:text-white"></i>
210
+ </div>
211
+ <p class="text-xs font-semibold">Movies</p>
212
+ </a>
213
+ <a href="#" class="text-center group cursor-pointer">
214
+ <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-amber-500 transition">
215
+ <i data-feather="tv" class="w-8 h-8 text-gray-600 group-hover:text-white"></i>
216
+ </div>
217
+ <p class="text-xs font-semibold">TV Shows</p>
218
+ </a>
219
+ <a href="#" class="text-center group cursor-pointer">
220
+ <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-amber-500 transition">
221
+ <i data-feather="user" class="w-8 h-8 text-gray-600 group-hover:text-white"></i>
222
+ </div>
223
+ <p class="text-xs font-semibold">Celebs</p>
224
+ </a>
225
+ <a href="#" class="text-center group cursor-pointer">
226
+ <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-amber-500 transition">
227
+ <i data-feather="trending-up" class="w-8 h-8 text-gray-600 group-hover:text-white"></i>
228
+ </div>
229
+ <p class="text-xs font-semibold">Trending</p>
230
+ </a>
231
+ <a href="#" class="text-center group cursor-pointer">
232
+ <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-amber-500 transition">
233
+ <i data-feather="award" class="w-8 h-8 text-gray-600 group-hover:text-white"></i>
234
+ </div>
235
+ <p class="text-xs font-semibold">Awards</p>
236
+ </a>
237
+ <a href="#" class="text-center group cursor-pointer">
238
+ <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-amber-500 transition">
239
+ <i data-feather="play-circle" class="w-8 h-8 text-gray-600 group-hover:text-white"></i>
240
+ </div>
241
+ <p class="text-xs font-semibold">Watch Free</p>
242
+ </a>
243
+ <a href="#" class="text-center group cursor-pointer">
244
+ <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-amber-500 transition">
245
+ <i data-feather="calendar" class="w-8 h-8 text-gray-600 group-hover:text-white"></i>
246
+ </div>
247
+ <p class="text-xs font-semibold">Coming Soon</p>
248
+ </a>
249
+ <a href="#" class="text-center group cursor-pointer">
250
+ <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-amber-500 transition">
251
+ <i data-feather="more-horizontal" class="w-8 h-8 text-gray-600 group-hover:text-white"></i>
252
+ </div>
253
+ <p class="text-xs font-semibold">More</p>
254
+ </a>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
259
  <!-- Main Content -->
260
+ <div class="lg:col-span-2">
261
  <!-- Trending Now -->
262
  <div class="mb-12">
263
  <div class="flex justify-between items-center mb-6">
264
  <h2 class="text-2xl font-bold">Trending Now</h2>
265
+ <div class="flex space-x-2">
266
+ <a href="movies.html" class="px-3 py-1 bg-black text-white rounded text-sm font-semibold">Movies</a>
267
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm font-semibold hover:bg-gray-300">TV</button>
268
+ </div>
269
+ </div>
270
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
271
+ <!-- Trending Movie Card -->
272
+ <div class="group cursor-pointer">
273
+ <div class="relative overflow-hidden rounded-lg">
274
+ <img src="http://static.photos/movie/320x480/1" alt="Trending Movie" class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105">
275
+ <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
276
+ #1
 
 
 
 
 
 
277
  </div>
278
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
279
+ 87%
 
 
280
  </div>
281
  </div>
282
+ <h3 class="font-semibold mt-2 text-sm truncate">The Ultimate Adventure</h3>
283
+ <p class="text-xs text-gray-500">2023 • PG-13 • 2h 28m</p>
284
+ <div class="flex items-center text-xs mt-1">
285
+ <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
286
+ <span>8.7</span>
287
+ <span class="text-gray-500 ml-1">(125K)</span>
288
+ </div>
289
+ </div>
290
+ <div class="group cursor-pointer">
291
+ <div class="relative overflow-hidden rounded-lg">
292
+ <img src="http://static.photos/movie/320x480/2" alt="Trending Movie" class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105">
293
+ <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
294
+ #2
295
  </div>
296
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
297
+ 92%
 
 
298
  </div>
299
  </div>
300
+ <h3 class="font-semibold mt-2 text-sm truncate">Another Film</h3>
301
+ <p class="text-xs text-gray-500">2023 • R • 2h 15m</p>
302
+ <div class="flex items-center text-xs mt-1">
303
+ <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
304
+ <span>9.1</span>
305
+ <span class="text-gray-500 ml-1">(89K)</span>
306
+ </div>
307
+ </div>
308
+
309
+ <div class="group cursor-pointer">
310
+ <div class="relative overflow-hidden rounded-lg">
311
+ <img src="http://static.photos/movie/320x480/3" alt="Trending Movie" class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105">
312
+ <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
313
+ #3
314
  </div>
315
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
316
+ 78%
 
 
317
  </div>
318
  </div>
319
+ <h3 class="font-semibold mt-2 text-sm truncate">Action Thriller</h3>
320
+ <p class="text-xs text-gray-500">2023 • PG-13 • 2h 5m</p>
321
+ <div class="flex items-center text-xs mt-1">
322
+ <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
323
+ <span>8.2</span>
324
+ <span class="text-gray-500 ml-1">(67K)</span>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="group cursor-pointer">
329
+ <div class="relative overflow-hidden rounded-lg">
330
+ <img src="http://static.photos/movie/320x480/4" alt="Trending Movie" class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105">
331
+ <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
332
+ #4
333
+ </div>
334
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
335
+ 85%
336
  </div>
337
+ </div>
338
+ <h3 class="font-semibold mt-2 text-sm truncate">Comedy Special</h3>
339
+ <p class="text-xs text-gray-500">2023 • R • 1h 38m</p>
340
+ <div class="flex items-center text-xs mt-1">
341
+ <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
342
+ <span>7.9</span>
343
+ <span class="text-gray-500 ml-1">(45K)</span>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="group cursor-pointer">
348
+ <div class="relative overflow-hidden rounded-lg">
349
+ <img src="http://static.photos/movie/320x480/5" alt="Trending Movie" class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105">
350
+ <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
351
+ #5
352
+ </div>
353
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
354
+ 88%
355
  </div>
356
  </div>
357
+ <h3 class="font-semibold mt-2 text-sm truncate">Drama Masterpiece</h3>
358
+ <p class="text-xs text-gray-500">2023 • PG • 2h 20m</p>
359
+ <div class="flex items-center text-xs mt-1">
360
+ <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
361
+ <span>8.8</span>
362
+ <span class="text-gray-500 ml-1">(102K)</span>
363
+ </div>
364
+ </div>
365
+
366
+ <div class="group cursor-pointer">
367
+ <div class="relative overflow-hidden rounded-lg">
368
+ <img src="http://static.photos/movie/320x480/6" alt="Trending Movie" class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105">
369
+ <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
370
+ #6
371
+ </div>
372
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
373
+ 82%
374
+ </div>
375
+ </div>
376
+ <h3 class="font-semibold mt-2 text-sm truncate">Sci-Fi Adventure</h3>
377
+ <p class="text-xs text-gray-500">2023 • PG-13 • 2h 35m</p>
378
+ <div class="flex items-center text-xs mt-1">
379
+ <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
380
+ <span>8.4</span>
381
+ <span class="text-gray-500 ml-1">(78K)</span>
382
+ </div>
383
  </div>
384
  </div>
385
+ </div>
386
  </div>
 
387
  <!-- Top Rated Movies -->
388
  <div class="mb-12">
389
  <div class="flex justify-between items-center mb-6">
390
  <h2 class="text-2xl font-bold">Top Rated Movies</h2>
391
+ <a href="movies.html" class="text-black hover:text-amber-600 text-sm flex items-center font-semibold">
392
  All Titles
393
  <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
394
  </a>
395
+ </div>
396
  <div class="space-y-4">
397
  <!-- Movie List Item -->
398
+ <div class="flex items-center bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors duration-200 cursor-pointer">
399
+ <div class="flex items-center text-2xl font-bold text-amber-500 mr-4">1</div>
400
  <img src="http://static.photos/movie/320x480/1" alt="Movie" class="w-16 h-24 object-cover rounded mr-4">
401
  <div class="flex-1">
402
  <h3 class="font-bold text-lg">The Ultimate Adventure</h3>
403
+ <p class="text-gray-600 text-sm mb-1">2023 • Action, Adventure, Sci-Fi • 2h 28m</p>
404
+ <p class="text-gray-700 text-sm line-clamp-2">A thrilling journey through uncharted territories with stunning visuals and heart-stopping action sequences.</p>
405
  </div>
406
  <div class="text-center ml-4">
407
  <div class="flex items-center justify-center mb-1">
408
  <i data-feather="star" class="text-amber-400 w-4 h-4 mr-1"></i>
409
  <span class="font-bold">8.7</span>
410
  </div>
411
+ <div class="text-xs text-gray-500">125.4K</div>
412
  </div>
413
  </div>
414
+ <div class="flex items-center bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors duration-200 cursor-pointer">
415
+ <div class="flex items-center text-2xl font-bold text-amber-500 mr-4">2</div>
 
 
416
  <img src="http://static.photos/movie/320x480/2" alt="Movie" class="w-16 h-24 object-cover rounded mr-4">
417
  <div class="flex-1">
418
  <h3 class="font-bold text-lg">Another Film</h3>
419
+ <p class="text-gray-600 text-sm mb-1">2023 • Drama, Thriller • 2h 15m</p>
420
+ <p class="text-gray-700 text-sm line-clamp-2">An intense psychological thriller that will keep you on the edge of your seat.</p>
421
  </div>
422
  <div class="text-center ml-4">
423
  <div class="flex items-center justify-center mb-1">
424
  <i data-feather="star" class="text-amber-400 w-4 h-4 mr-1"></i>
425
  <span class="font-bold">9.1</span>
426
  </div>
427
+ <div class="text-xs text-gray-500">89.2K</div>
428
  </div>
429
  </div>
430
 
431
+ <div class="flex items-center bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors duration-200 cursor-pointer">
432
+ <div class="flex items-center text-2xl font-bold text-amber-500 mr-4">3</div>
433
  <img src="http://static.photos/movie/320x480/3" alt="Movie" class="w-16 h-24 object-cover rounded mr-4">
434
  <div class="flex-1">
435
  <h3 class="font-bold text-lg">Action Thriller</h3>
436
+ <p class="text-gray-600 text-sm mb-1">2023 • Action, Thriller • 2h 5m</p>
437
+ <p class="text-gray-700 text-sm line-clamp-2">High-octane action with plot twists that will leave you guessing.</p>
438
  </div>
439
  <div class="text-center ml-4">
440
  <div class="flex items-center justify-center mb-1">
441
  <i data-feather="star" class="text-amber-400 w-4 h-4 mr-1"></i>
442
  <span class="font-bold">8.2</span>
443
  </div>
444
+ <div class="text-xs text-gray-500">67.8K</div>
445
  </div>
446
  </div>
447
+ </div>
448
  </div>
 
449
  <!-- Coming Soon -->
450
  <div class="mb-12">
451
  <div class="flex justify-between items-center mb-6">
452
  <h2 class="text-2xl font-bold">Coming Soon</h2>
453
+ <a href="#" class="text-black hover:text-amber-600 text-sm flex items-center font-semibold">
454
+ Preview All
455
  <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
456
  </a>
457
  </div>
458
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
459
  <!-- Coming Soon Card -->
460
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer">
461
  <img src="http://static.photos/movie/320x480/11" alt="Coming Soon" class="w-full h-48 object-cover">
462
  <div class="p-4">
463
  <h3 class="font-bold mb-2">Summer Adventure</h3>
464
+ <p class="text-gray-600 text-sm mb-2">Opens Jul 15, 2023</p>
465
  <div class="flex items-center justify-between">
466
  <span class="text-xs bg-amber-500 text-black px-2 py-1 rounded font-semibold">PREVIEW</span>
467
+ <button class="text-amber-600 hover:text-amber-700 text-sm font-semibold">Trailer</button>
468
  </div>
469
  </div>
470
  </div>
471
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer">
 
472
  <img src="http://static.photos/movie/320x480/12" alt="Coming Soon" class="w-full h-48 object-cover">
473
  <div class="p-4">
474
  <h3 class="font-bold mb-2">Space Odyssey</h3>
475
+ <p class="text-gray-600 text-sm mb-2">Opens Aug 3, 2023</p>
476
  <div class="flex items-center justify-between">
477
  <span class="text-xs bg-amber-500 text-black px-2 py-1 rounded font-semibold">PREVIEW</span>
478
+ <button class="text-amber-600 hover:text-amber-700 text-sm font-semibold">Trailer</button>
479
  </div>
480
  </div>
481
  </div>
482
 
483
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer">
484
  <img src="http://static.photos/movie/320x480/13" alt="Coming Soon" class="w-full h-48 object-cover">
485
  <div class="p-4">
486
  <h3 class="font-bold mb-2">Mystery Thriller</h3>
487
+ <p class="text-gray-600 text-sm mb-2">Opens Sep 22, 2023</p>
488
  <div class="flex items-center justify-between">
489
  <span class="text-xs bg-amber-500 text-black px-2 py-1 rounded font-semibold">PREVIEW</span>
490
+ <button class="text-amber-600 hover:text-amber-700 text-sm font-semibold">Trailer</button>
491
  </div>
492
  </div>
493
  </div>
494
+ </div>
495
  </div>
496
  </div>
497
 
498
  <!-- Sidebar -->
499
  <div class="lg:col-span-1">
500
+ <!-- Top News -->
501
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
502
+ <div class="flex justify-between items-center mb-4">
503
+ <h3 class="text-lg font-bold">Top News</h3>
504
+ <a href="#" class="text-amber-600 text-sm font-semibold">More</a>
505
+ </div>
506
+ <div class="space-y-3">
507
+ <div class="border-b border-gray-200 pb-3 last:border-b-0">
508
+ <h4 class="font-semibold text-sm mb-1 hover:text-amber-600 cursor-pointer">Exclusive First Look at Upcoming Blockbuster</h4>
509
+ <p class="text-gray-500 text-xs">2 hours ago</p>
510
  </div>
511
+ <div class="border-b border-gray-200 pb-3 last:border-b-0">
512
+ <h4 class="font-semibold text-sm mb-1 hover:text-amber-600 cursor-pointer">Awards Season Predictions Heat Up</h4>
513
+ <p class="text-gray-500 text-xs">4 hours ago</p>
 
 
 
514
  </div>
515
+ <div class="border-b border-gray-200 pb-3 last:border-b-0">
516
+ <h4 class="font-semibold text-sm mb-1 hover:text-amber-600 cursor-pointer">Director Reveals Secrets Behind Latest Film</h4>
517
+ <p class="text-gray-500 text-xs">6 hours ago</p>
 
 
 
518
  </div>
519
  </div>
520
  </div>
521
 
522
+ <!-- Polls -->
523
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
524
+ <div class="flex justify-between items-center mb-4">
525
+ <h3 class="text-lg font-bold">Polls</h3>
526
+ <a href="#" class="text-amber-600 text-sm font-semibold">All</a>
527
+ </div>
528
+ <div class="space-y-4">
529
+ <div>
530
+ <p class="font-semibold text-sm mb-2">Which movie are you most excited for?</p>
531
+ <div class="space-y-2">
532
+ <div class="relative">
533
+ <div class="bg-gray-200 rounded-full h-6">
534
+ <div class="bg-amber-500 h-6 rounded-full" style="width: 45%"></div>
535
+ </div>
536
+ <span class="text-xs text-gray-600">Dune: Part Two (45%)</span>
537
+ </div>
538
+ <div class="relative">
539
+ <div class="bg-gray-200 rounded-full h-6">
540
+ <div class="bg-amber-500 h-6 rounded-full" style="width: 30%"></div>
541
+ </div>
542
+ <span class="text-xs text-gray-600">Deadpool 3 (30%)</span>
543
+ </div>
544
+ <div class="relative">
545
+ <div class="bg-gray-200 rounded-full h-6">
546
+ <div class="bg-amber-500 h-6 rounded-full" style="width: 25%"></div>
547
+ </div>
548
+ <span class="text-xs text-gray-600">Joker 2 (25%)</span>
549
+ </div>
550
+ </div>
551
  </div>
552
  </div>
553
  </div>
554
 
555
+ <!-- Contributors -->
556
+ <div class="bg-white rounded-lg shadow-md p-6">
557
+ <div class="flex justify-between items-center mb-4">
558
+ <h3 class="text-lg font-bold">Contributors</h3>
559
+ <a href="#" class="text-amber-600 text-sm font-semibold">All</a>
560
+ </div>
561
+ <div class="space-y-3">
562
+ <div class="flex items-center">
563
+ <img src="https://via.placeholder.com/40x40?text=U1" alt="User" class="w-10 h-10 rounded-full mr-3">
564
+ <div>
565
+ <p class="font-semibold text-sm">JohnReviewer</p>
566
+ <p class="text-gray-500 text-xs">2,847 reviews</p>
567
+ </div>
568
  </div>
569
+ <div class="flex items-center">
570
+ <img src="https://via.placeholder.com/40x40?text=U2" alt="User" class="w-10 h-10 rounded-full mr-3">
571
+ <div>
572
+ <p class="font-semibold text-sm">MovieBuff</p>
573
+ <p class="text-gray-500 text-xs">1,923 reviews</p>
574
+ </div>
575
  </div>
576
+ <div class="flex items-center">
577
+ <img src="https://via.placeholder.com/40x40?text=U3" alt="User" class="w-10 h-10 rounded-full mr-3">
578
+ <div>
579
+ <p class="font-semibold text-sm">CinemaLover</p>
580
+ <p class="text-gray-500 text-xs">1,456 reviews</p>
581
+ </div>
582
  </div>
583
  </div>
 
 
 
584
  </div>
585
  </div>
586
+ </div>
587
  </div>
588
  </section>
589
  <!-- TV Section -->
590
+ <section class="py-12 bg-gray-100">
591
  <div class="container mx-auto px-4">
592
  <div class="flex justify-between items-center mb-8">
593
  <h2 class="text-2xl font-bold">Top Rated TV Shows</h2>
594
+ <a href="#" class="text-black hover:text-amber-600 text-sm flex items-center font-semibold">
595
  All Series
596
  <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
597
  </a>
 
599
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
600
  <!-- TV Show Card -->
601
  <div class="group cursor-pointer">
602
+ <div class="relative overflow-hidden rounded-lg bg-white shadow-md">
603
  <img src="http://static.photos/movie/320x480/16" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
604
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
605
  HD
606
  </div>
 
 
 
607
  </div>
608
  <h3 class="font-semibold mt-2 text-sm truncate">Drama Series</h3>
609
+ <p class="text-xs text-gray-600">S1 • E10</p>
610
+ <div class="flex items-center text-xs mt-1">
611
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
612
  <span>9.2</span>
613
+ <span class="text-gray-500 ml-1">(45K)</span>
614
  </div>
615
  </div>
 
616
  <div class="group cursor-pointer">
617
+ <div class="relative overflow-hidden rounded-lg bg-white shadow-md">
618
  <img src="http://static.photos/movie/320x480/17" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
619
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
620
  4K
621
  </div>
622
  </div>
623
  <h3 class="font-semibold mt-2 text-sm truncate">Comedy Show</h3>
624
+ <p class="text-xs text-gray-600">S3 • E8</p>
625
+ <div class="flex items-center text-xs mt-1">
626
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
627
  <span>8.8</span>
628
+ <span class="text-gray-500 ml-1">(32K)</span>
629
  </div>
630
  </div>
631
 
632
  <div class="group cursor-pointer">
633
+ <div class="relative overflow-hidden rounded-lg bg-white shadow-md">
634
  <img src="http://static.photos/movie/320x480/18" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
635
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
636
  HD
637
  </div>
638
  </div>
639
  <h3 class="font-semibold mt-2 text-sm truncate">Sci-Fi Series</h3>
640
+ <p class="text-xs text-gray-600">S2 • E12</p>
641
+ <div class="flex items-center text-xs mt-1">
642
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
643
  <span>9.0</span>
644
+ <span class="text-gray-500 ml-1">(67K)</span>
645
  </div>
646
  </div>
647
 
648
  <div class="group cursor-pointer">
649
+ <div class="relative overflow-hidden rounded-lg bg-white shadow-md">
650
  <img src="http://static.photos/movie/320x480/19" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
651
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
652
  HD
653
  </div>
654
  </div>
655
  <h3 class="font-semibold mt-2 text-sm truncate">Crime Thriller</h3>
656
+ <p class="text-xs text-gray-600">S4 • E5</p>
657
+ <div class="flex items-center text-xs mt-1">
658
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
659
  <span>8.9</span>
660
+ <span class="text-gray-500 ml-1">(54K)</span>
661
  </div>
662
  </div>
663
 
664
  <div class="group cursor-pointer">
665
+ <div class="relative overflow-hidden rounded-lg bg-white shadow-md">
666
  <img src="http://static.photos/movie/320x480/20" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
667
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
668
  4K
669
  </div>
670
  </div>
671
  <h3 class="font-semibold mt-2 text-sm truncate">Fantasy Epic</h3>
672
+ <p class="text-xs text-gray-600">S1 • E7</p>
673
+ <div class="flex items-center text-xs mt-1">
674
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
675
  <span>9.1</span>
676
+ <span class="text-gray-500 ml-1">(89K)</span>
677
  </div>
678
  </div>
679
 
680
  <div class="group cursor-pointer">
681
+ <div class="relative overflow-hidden rounded-lg bg-white shadow-md">
682
  <img src="http://static.photos/movie/320x480/21" alt="TV Show" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
683
  <div class="absolute top-2 right-2 bg-amber-500 text-black text-xs font-bold px-2 py-1 rounded">
684
  HD
685
  </div>
686
  </div>
687
  <h3 class="font-semibold mt-2 text-sm truncate">Documentary</h3>
688
+ <p class="text-xs text-gray-600">S2 • E3</p>
689
+ <div class="flex items-center text-xs mt-1">
690
  <i data-feather="star" class="text-amber-400 w-3 h-3 mr-1"></i>
691
  <span>8.7</span>
692
+ <span class="text-gray-500 ml-1">(28K)</span>
693
  </div>
694
  </div>
695
+ </div>
696
  </div>
697
  </section>
698
  <!-- Footer/Web Component -->
699
  <custom-footer></custom-footer>
 
700
  <script src="components/header.js"></script>
701
  <script src="components/footer.js"></script>
702
  <script src="script.js"></script>
703
  <script>feather.replace();</script>
 
704
  </body>
705
+ </html>
style.css CHANGED
@@ -1,16 +1,17 @@
 
1
  @tailwind base;
2
  @tailwind components;
3
  @tailwind utilities;
4
 
5
  :root {
6
  --primary-color: #f59e0b;
7
- --secondary-color: #8b5cf6;
8
  }
9
 
10
  body {
11
  font-family: 'Poppins', sans-serif;
12
- background-color: #111827;
13
- color: #f9fafb;
14
  }
15
 
16
  .scrollbar-hide::-webkit-scrollbar {
@@ -30,54 +31,51 @@ body {
30
  transform: translateY(-10px);
31
  }
32
 
33
- .hero-section {
34
- height: 100vh;
35
- position: relative;
36
- display: flex;
37
- align-items: center;
38
- justify-content: center;
 
 
 
 
39
  overflow: hidden;
40
  }
41
 
42
- .hero-overlay {
43
- position: absolute;
44
- inset: 0;
45
- background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
 
46
  }
47
 
48
- .gradient-text {
49
- background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
50
- -webkit-background-clip: text;
51
- -webkit-text-fill-color: transparent;
52
  }
53
 
54
- .search-bar {
55
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
56
  }
57
 
58
- .nav-link {
59
- position: relative;
60
- padding-bottom: 5px;
61
  }
62
 
63
- .nav-link::after {
64
- content: '';
65
- position: absolute;
66
- bottom: 0;
67
- left: 0;
68
- width: 0;
69
- height: 2px;
70
- background-color: var(--primary-color);
71
- transition: width 0.3s ease;
72
  }
73
 
74
- .nav-link:hover::after {
75
- width: 100%;
 
76
  }
77
 
78
- .line-clamp-2 {
79
- display: -webkit-box;
80
- -webkit-line-clamp: 2;
81
- -webkit-box-orient: vertical;
82
- overflow: hidden;
83
- }
 
1
+
2
  @tailwind base;
3
  @tailwind components;
4
  @tailwind utilities;
5
 
6
  :root {
7
  --primary-color: #f59e0b;
8
+ --secondary-color: #fbbf24;
9
  }
10
 
11
  body {
12
  font-family: 'Poppins', sans-serif;
13
+ background-color: #ffffff;
14
+ color: #111827;
15
  }
16
 
17
  .scrollbar-hide::-webkit-scrollbar {
 
31
  transform: translateY(-10px);
32
  }
33
 
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ }
39
+
40
+ .line-clamp-2 {
41
+ display: -webkit-box;
42
+ -webkit-line-clamp: 2;
43
+ -webkit-box-orient: vertical;
44
  overflow: hidden;
45
  }
46
 
47
+ /* IMDB-style ratings */
48
+ .rating-badge {
49
+ background-color: #f5c518;
50
+ color: #000000;
51
+ font-weight: bold;
52
  }
53
 
54
+ /* Custom scrollbars */
55
+ ::-webkit-scrollbar {
56
+ width: 8px;
57
+ height: 8px;
58
  }
59
 
60
+ ::-webkit-scrollbar-track {
61
+ background: #f1f1f1;
62
  }
63
 
64
+ ::-webkit-scrollbar-thumb {
65
+ background: #888;
66
+ border-radius: 4px;
67
  }
68
 
69
+ ::-webkit-scrollbar-thumb:hover {
70
+ background: #555;
 
 
 
 
 
 
 
71
  }
72
 
73
+ /* Hover effects */
74
+ .hover-lift {
75
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
76
  }
77
 
78
+ .hover-lift:hover {
79
+ transform: translateY(-2px);
80
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
81
+ }