Everything looks so outdated, which isn't good for reassuring customer satisfaction, I wish everything looked better and more modern.

index.html

@@ -7,6 +7,7 @@
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
         tailwind.config = {
             darkMode: 'class',
@@ -14,16 +15,22 @@
                 extend: {
                     colors: {
                         primary: {
-                            50: '#eef2ff',
-                            100: '#e0e7ff',
-                            200: '#c7d2fe',
-                            300: '#a5b4fc',
-                            400: '#818cf8',
-                            500: '#6366f1',
-                            600: '#4f46e5',
-                            700: '#4338ca',
-                            800: '#3730a3',
-                            900: '#312e81',
+                            50: '#eff6ff',
+                            100: '#dbeafe',
+                            200: '#bfdbfe',
+                            300: '#93c5fd',
+                            400: '#60a5fa',
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                            700: '#1d4ed8',
+                            800: '#1e40af',
+                            900: '#1e3a8a',
+                        },
+                        dark: {
+                            900: '#0f172a',
+                            800: '#1e293b',
+                            700: '#334155',
+                            600: '#475569',
                         }
                     }
                 }
@@ -31,27 +38,46 @@
         }
     </script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
         body {
-            font-family: 'Inter', sans-serif;
-            background-color: #0f172a;
-            color: #e2e8f0;
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            color: #f1f5f9;
+            min-height: 100vh;
+        }
+        .glass-card {
+            background: rgba(30, 41, 59, 0.6);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
         }
         .channel-card {
-            transition: all 0.3s ease;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            border-radius: 16px;
+            overflow: hidden;
         }
         .channel-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+            transform: translateY(-8px);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
         }
         .time-slot {
             min-width: 150px;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+        }
+        .time-slot:hover {
+            transform: scale(1.05);
+            background: rgba(56, 73, 104, 0.7) !important;
         }
         .program-card {
-            transition: all 0.2s ease;
+            transition: all 0.3s ease;
+            border-radius: 12px;
+            margin-bottom: 12px;
         }
         .program-card:hover {
-            background-color: #1e293b;
+            background: rgba(71, 85, 105, 0.5);
+            transform: translateX(5px);
         }
         .scrollbar-hide::-webkit-scrollbar {
             display: none;
@@ -60,311 +86,379 @@
             -ms-overflow-style: none;
             scrollbar-width: none;
         }
+        .nav-link {
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: #3b82f6;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .category-card {
+            transition: all 0.3s ease;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .category-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+        }
+        .live-badge {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
     </style>
 </head>
-<body class="bg-slate-900 text-slate-100">
+<body class="dark-900 text-slate-100">
     <!-- Header -->
-    <header class="bg-slate-800 border-b border-slate-700 sticky top-0 z-50">
-        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
-            <div class="flex items-center space-x-2">
-                <div class="w-10 h-10 rounded-full bg-primary-600 flex items-center justify-center">
+    <header class="glass-card sticky top-0 z-50 backdrop-blur-md">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-3">
+                <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center shadow-lg">
                     <i data-feather="tv" class="text-white"></i>
                 </div>
-                <h1 class="text-2xl font-bold">Dish<span class="text-primary-400">Vision</span></h1>
+                <h1 class="text-3xl font-bold">Dish<span class="gradient-text">Vision</span></h1>
             </div>
             
-            <div class="hidden md:flex space-x-6">
-                <a href="#" class="hover:text-primary-400 transition-colors">Guide</a>
-                <a href="#" class="hover:text-primary-400 transition-colors">Movies</a>
-                <a href="#" class="hover:text-primary-400 transition-colors">Sports</a>
-                <a href="#" class="hover:text-primary-400 transition-colors">Series</a>
-                <a href="#" class="hover:text-primary-400 transition-colors">Recordings</a>
+            <div class="hidden md:flex space-x-8">
+                <a href="#" class="nav-link font-medium">Guide</a>
+                <a href="#" class="nav-link font-medium">Movies</a>
+                <a href="#" class="nav-link font-medium">Sports</a>
+                <a href="#" class="nav-link font-medium">Series</a>
+                <a href="#" class="nav-link font-medium">Recordings</a>
             </div>
             
             <div class="flex items-center space-x-4">
                 <div class="relative">
-                    <input type="text" placeholder="Search channels..." class="bg-slate-700 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-primary-500 w-40 md:w-64">
-                    <i data-feather="search" class="absolute left-3 top-2.5 text-slate-400"></i>
+                    <input type="text" placeholder="Search channels..." class="bg-dark-800 rounded-full py-2.5 px-5 pl-12 focus:outline-none focus:ring-2 focus:ring-primary-500 w-48 md:w-72 transition-all duration-300">
+                    <i data-feather="search" class="absolute left-4 top-3 text-slate-400"></i>
                 </div>
-                <button class="bg-primary-600 hover:bg-primary-700 text-white rounded-full p-2 transition-colors">
+                <button class="bg-gradient-to-r from-primary-600 to-primary-800 hover:from-primary-700 hover:to-primary-900 text-white rounded-full p-3 transition-all duration-300 shadow-lg">
                     <i data-feather="settings"></i>
                 </button>
             </div>
         </div>
     </header>
-
     <!-- Main Content -->
-    <main class="container mx-auto px-4 py-6 hovered-element">
+    <main class="container mx-auto px-4 py-8">
         <!-- Date Navigation -->
-        <div class="flex justify-between items-center mb-6 hovered-element">
-            <h2 class="text-2xl font-bold hovered-element">TV Guide</h2>
-            <div class="flex items-center space-x-4">
-                <button class="p-2 rounded-full bg-slate-800 hover:bg-slate-700">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left hovered-element"><polyline points="15 18 9 12 15 6"></polyline></svg>
+        <div class="flex justify-between items-center mb-8">
+            <h2 class="text-3xl font-bold gradient-text">TV Guide</h2>
+            <div class="flex items-center space-x-6">
+                <button class="p-3 rounded-full bg-dark-800 hover:bg-dark-700 transition-all duration-300 shadow-md">
+                    <i data-feather="chevron-left" class="w-6 h-6"></i>
                 </button>
-                <div class="text-center">
-                    <p class="font-semibold hovered-element">Today</p>
-                    <p class="text-sm text-slate-400 hovered-element">June 15, 2023</p>
+                <div class="text-center px-6 py-3 bg-gradient-to-r from-primary-700 to-primary-900 rounded-xl shadow-lg">
+                    <p class="font-bold text-lg">Today</p>
+                    <p class="text-sm opacity-80">June 15, 2023</p>
                 </div>
-                <button class="p-2 rounded-full bg-slate-800 hover:bg-slate-700">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                <button class="p-3 rounded-full bg-dark-800 hover:bg-dark-700 transition-all duration-300 shadow-md">
+                    <i data-feather="chevron-right" class="w-6 h-6"></i>
                 </button>
             </div>
         </div>
-
         <!-- Time Slots -->
-        <div class="mb-4 overflow-x-auto scrollbar-hide">
-            <div class="flex space-x-4 min-w-max">
-                <div class="time-slot text-center py-2 px-4 bg-slate-800 rounded-lg">
-                    <p class="font-semibold">Now</p>
+        <div class="mb-8 overflow-x-auto scrollbar-hide py-4">
+            <div class="flex space-x-6 min-w-max">
+                <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md">
+                    <p class="font-bold text-lg">Now</p>
                     <p class="text-sm text-slate-400">3:45 PM</p>
                 </div>
-                <div class="time-slot text-center py-2 px-4 bg-slate-800 rounded-lg">
-                    <p class="font-semibold">4:00 PM</p>
+                <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md">
+                    <p class="font-bold text-lg">4:00 PM</p>
                     <p class="text-sm text-slate-400">2 hrs</p>
                 </div>
-                <div class="time-slot text-center py-2 px-4 bg-slate-800 rounded-lg">
-                    <p class="font-semibold">6:00 PM</p>
+                <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md">
+                    <p class="font-bold text-lg">6:00 PM</p>
                     <p class="text-sm text-slate-400">2 hrs</p>
                 </div>
-                <div class="time-slot text-center py-2 px-4 bg-slate-800 rounded-lg">
-                    <p class="font-semibold">8:00 PM</p>
+                <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md">
+                    <p class="font-bold text-lg">8:00 PM</p>
                     <p class="text-sm text-slate-400">1 hr</p>
                 </div>
-                <div class="time-slot text-center py-2 px-4 bg-slate-800 rounded-lg">
-                    <p class="font-semibold">9:00 PM</p>
+                <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md">
+                    <p class="font-bold text-lg">9:00 PM</p>
                     <p class="text-sm text-slate-400">2 hrs</p>
                 </div>
-                <div class="time-slot text-center py-2 px-4 bg-slate-800 rounded-lg">
-                    <p class="font-semibold">11:00 PM</p>
+                <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md">
+                    <p class="font-bold text-lg">11:00 PM</p>
                     <p class="text-sm text-slate-400">1 hr</p>
                 </div>
-                <div class="time-slot text-center py-2 px-4 bg-slate-800 rounded-lg">
-                    <p class="font-semibold">12:00 AM</p>
+                <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md">
+                    <p class="font-bold text-lg">12:00 AM</p>
                     <p class="text-sm text-slate-400">2 hrs</p>
                 </div>
             </div>
         </div>
-
         <!-- Channel Grid -->
-        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
             <!-- Channel Card 1 -->
-            <div class="channel-card bg-slate-800 rounded-xl overflow-hidden shadow-lg">
-                <div class="bg-slate-700 p-4 flex items-center">
-                    <div class="w-12 h-12 rounded-md bg-primary-600 flex items-center justify-center mr-3">
-                        <span class="font-bold">CNN</span>
+            <div class="channel-card glass-card shadow-xl">
+                <div class="bg-gradient-to-r from-dark-800 to-dark-700 p-5 flex items-center">
+                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mr-4 shadow-lg">
+                        <span class="font-bold text-lg">CNN</span>
                     </div>
                     <div>
-                        <h3 class="font-bold">CNN</h3>
+                        <h3 class="font-bold text-xl">CNN</h3>
                         <p class="text-sm text-slate-400">Channel 202</p>
                     </div>
                 </div>
-                <div class="p-4">
-                    <div class="program-card bg-slate-700 rounded-lg p-3 mb-3">
-                        <div class="flex justify-between">
-                            <span class="text-sm font-semibold">Newsroom</span>
-                            <span class="text-xs bg-red-500 px-2 py-1 rounded">LIVE</span>
+                <div class="p-5">
+                    <div class="program-card bg-dark-800 p-4">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <span class="font-semibold text-lg">Newsroom</span>
+                                <p class="text-xs text-slate-400 mt-1">Breaking news coverage</p>
+                            </div>
+                            <span class="text-xs bg-red-600 px-3 py-1 rounded-full live-badge font-bold">LIVE</span>
+                        </div>
+                        <div class="mt-3 flex items-center text-sm text-slate-400">
+                            <i data-feather="clock" class="w-4 h-4 mr-2"></i>
+                            <span>3:45 PM - 5:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Breaking news coverage</p>
                     </div>
-                    <div class="program-card bg-slate-700 rounded-lg p-3 mb-3">
+                    <div class="program-card bg-dark-800 p-4 mt-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">Anderson Cooper 360</span>
-                            <span class="text-xs">6:00 PM</span>
+                            <div>
+                                <span class="font-semibold">Anderson Cooper 360</span>
+                                <p class="text-xs text-slate-400 mt-1">In-depth news analysis</p>
+                            </div>
+                            <span class="text-sm font-medium">6:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">In-depth news analysis</p>
                     </div>
-                    <div class="program-card bg-slate-700 rounded-lg p-3">
+                    <div class="program-card bg-dark-800 p-4 mt-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">Cuomo Prime Time</span>
-                            <span class="text-xs">8:00 PM</span>
+                            <div>
+                                <span class="font-semibold">Cuomo Prime Time</span>
+                                <p class="text-xs text-slate-400 mt-1">Political commentary show</p>
+                            </div>
+                            <span class="text-sm font-medium">8:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Political commentary show</p>
                     </div>
                 </div>
             </div>
 
             <!-- Channel Card 2 -->
-            <div class="channel-card bg-slate-800 rounded-xl overflow-hidden shadow-lg">
-                <div class="bg-slate-700 p-4 flex items-center">
-                    <div class="w-12 h-12 rounded-md bg-primary-600 flex items-center justify-center mr-3">
-                        <span class="font-bold">ESPN</span>
+            <div class="channel-card glass-card shadow-xl">
+                <div class="bg-gradient-to-r from-dark-800 to-dark-700 p-5 flex items-center">
+                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mr-4 shadow-lg">
+                        <span class="font-bold text-lg">ESPN</span>
                     </div>
                     <div>
-                        <h3 class="font-bold">ESPN</h3>
+                        <h3 class="font-bold text-xl">ESPN</h3>
                         <p class="text-sm text-slate-400">Channel 142</p>
                     </div>
                 </div>
-                <div class="p-4">
-                    <div class="program-card bg-slate-700 rounded-lg p-3 mb-3">
-                        <div class="flex justify-between">
-                            <span class="text-sm font-semibold">SportsCenter</span>
-                            <span class="text-xs bg-red-500 px-2 py-1 rounded">LIVE</span>
+                <div class="p-5">
+                    <div class="program-card bg-dark-800 p-4">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <span class="font-semibold text-lg">SportsCenter</span>
+                                <p class="text-xs text-slate-400 mt-1">Top sports headlines</p>
+                            </div>
+                            <span class="text-xs bg-red-600 px-3 py-1 rounded-full live-badge font-bold">LIVE</span>
+                        </div>
+                        <div class="mt-3 flex items-center text-sm text-slate-400">
+                            <i data-feather="clock" class="w-4 h-4 mr-2"></i>
+                            <span>3:30 PM - 6:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Top sports headlines</p>
                     </div>
-                    <div class="program-card bg-slate-700 rounded-lg p-3 mb-3">
+                    <div class="program-card bg-dark-800 p-4 mt-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">NBA Tonight</span>
-                            <span class="text-xs">6:00 PM</span>
+                            <div>
+                                <span class="font-semibold">NBA Tonight</span>
+                                <p class="text-xs text-slate-400 mt-1">NBA highlights and analysis</p>
+                            </div>
+                            <span class="text-sm font-medium">6:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">NBA highlights and analysis</p>
                     </div>
-                    <div class="program-card bg-slate-700 rounded-lg p-3">
+                    <div class="program-card bg-dark-800 p-4 mt-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">Monday Night Football</span>
-                            <span class="text-xs">8:15 PM</span>
+                            <div>
+                                <span class="font-semibold">Monday Night Football</span>
+                                <p class="text-xs text-slate-400 mt-1">Football game coverage</p>
+                            </div>
+                            <span class="text-sm font-medium">8:15 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Football game coverage</p>
                     </div>
                 </div>
             </div>
 
             <!-- Channel Card 3 -->
-            <div class="channel-card bg-slate-800 rounded-xl overflow-hidden shadow-lg">
-                <div class="bg-slate-700 p-4 flex items-center">
-                    <div class="w-12 h-12 rounded-md bg-primary-600 flex items-center justify-center mr-3">
-                        <span class="font-bold">HBO</span>
+            <div class="channel-card glass-card shadow-xl">
+                <div class="bg-gradient-to-r from-dark-800 to-dark-700 p-5 flex items-center">
+                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mr-4 shadow-lg">
+                        <span class="font-bold text-lg">HBO</span>
                     </div>
                     <div>
-                        <h3 class="font-bold">HBO</h3>
+                        <h3 class="font-bold text-xl">HBO</h3>
                         <p class="text-sm text-slate-400">Channel 501</p>
                     </div>
                 </div>
-                <div class="p-4">
-                    <div class="program-card bg-slate-700 rounded-lg p-3 mb-3">
+                <div class="p-5">
+                    <div class="program-card bg-dark-800 p-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">Last Week Tonight</span>
-                            <span class="text-xs">4:00 PM</span>
+                            <div>
+                                <span class="font-semibold text-lg">Last Week Tonight</span>
+                                <p class="text-xs text-slate-400 mt-1">Comedy news program</p>
+                            </div>
+                            <span class="text-sm font-medium">4:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Comedy news program</p>
                     </div>
-                    <div class="program-card bg-slate-700 rounded-lg p-3 mb-3">
+                    <div class="program-card bg-dark-800 p-4 mt-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">Game of Thrones</span>
-                            <span class="text-xs">6:00 PM</span>
+                            <div>
+                                <span class="font-semibold">Game of Thrones</span>
+                                <p class="text-xs text-slate-400 mt-1">Fantasy drama series</p>
+                            </div>
+                            <span class="text-sm font-medium">6:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Fantasy drama series</p>
                     </div>
-                    <div class="program-card bg-slate-700 rounded-lg p-3">
+                    <div class="program-card bg-dark-800 p-4 mt-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">Westworld</span>
-                            <span class="text-xs">9:00 PM</span>
+                            <div>
+                                <span class="font-semibold">Westworld</span>
+                                <p class="text-xs text-slate-400 mt-1">Sci-fi thriller series</p>
+                            </div>
+                            <span class="text-sm font-medium">9:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Sci-fi thriller series</p>
                     </div>
                 </div>
             </div>
 
             <!-- Channel Card 4 -->
-            <div class="channel-card bg-slate-800 rounded-xl overflow-hidden shadow-lg">
-                <div class="bg-slate-700 p-4 flex items-center">
-                    <div class="w-12 h-12 rounded-md bg-primary-600 flex items-center justify-center mr-3">
-                        <span class="font-bold">NBC</span>
+            <div class="channel-card glass-card shadow-xl">
+                <div class="bg-gradient-to-r from-dark-800 to-dark-700 p-5 flex items-center">
+                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mr-4 shadow-lg">
+                        <span class="font-bold text-lg">NBC</span>
                     </div>
                     <div>
-                        <h3 class="font-bold">NBC</h3>
+                        <h3 class="font-bold text-xl">NBC</h3>
                         <p class="text-sm text-slate-400">Channel 101</p>
                     </div>
                 </div>
-                <div class="p-4">
-                    <div class="program-card bg-slate-700 rounded-lg p-3 mb-3">
+                <div class="p-5">
+                    <div class="program-card bg-dark-800 p-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">The Today Show</span>
-                            <span class="text-xs">4:00 PM</span>
+                            <div>
+                                <span class="font-semibold text-lg">The Today Show</span>
+                                <p class="text-xs text-slate-400 mt-1">Morning news and talk show</p>
+                            </div>
+                            <span class="text-sm font-medium">4:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Morning news and talk show</p>
                     </div>
-                    <div class="program-card bg-slate-700 rounded-lg p-3 mb-3">
+                    <div class="program-card bg-dark-800 p-4 mt-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">The Voice</span>
-                            <span class="text-xs">7:00 PM</span>
+                            <div>
+                                <span class="font-semibold">The Voice</span>
+                                <p class="text-xs text-slate-400 mt-1">Singing competition show</p>
+                            </div>
+                            <span class="text-sm font-medium">7:00 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Singing competition show</p>
                     </div>
-                    <div class="program-card bg-slate-700 rounded-lg p-3">
+                    <div class="program-card bg-dark-800 p-4 mt-4">
                         <div class="flex justify-between">
-                            <span class="text-sm font-semibold">Saturday Night Live</span>
-                            <span class="text-xs">11:30 PM</span>
+                            <div>
+                                <span class="font-semibold">Saturday Night Live</span>
+                                <p class="text-xs text-slate-400 mt-1">Late-night sketch comedy</p>
+                            </div>
+                            <span class="text-sm font-medium">11:30 PM</span>
                         </div>
-                        <p class="text-xs text-slate-400 mt-1">Late-night sketch comedy</p>
                     </div>
                 </div>
             </div>
         </div>
-
         <!-- Categories Section -->
-        <div class="mt-12">
-            <h2 class="text-2xl font-bold mb-6">Browse by Category</h2>
-            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                <div class="bg-slate-800 rounded-xl p-6 text-center hover:bg-slate-700 transition-colors cursor-pointer">
-                    <div class="w-16 h-16 rounded-full bg-primary-600 flex items-center justify-center mx-auto mb-3">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-film text-white"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line><line x1="2" y1="7" x2="7" y2="7"></line><line x1="2" y1="17" x2="7" y2="17"></line><line x1="17" y1="17" x2="22" y2="17"></line><line x1="17" y1="7" x2="22" y2="7"></line></svg>
+        <div class="mt-16">
+            <h2 class="text-3xl font-bold mb-8 text-center gradient-text">Browse by Category</h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+                <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg">
+                    <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg">
+                        <i class="fas fa-film text-2xl text-white"></i>
                     </div>
-                    <h3 class="font-semibold">Movies</h3>
+                    <h3 class="font-bold text-lg">Movies</h3>
                 </div>
-                <div class="bg-slate-800 rounded-xl p-6 text-center hover:bg-slate-700 transition-colors cursor-pointer">
-                    <div class="w-16 h-16 rounded-full bg-primary-600 flex items-center justify-center mx-auto mb-3">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity text-white"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
+                <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg">
+                    <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg">
+                        <i class="fas fa-baseball-ball text-2xl text-white"></i>
                     </div>
-                    <h3 class="font-semibold">Sports</h3>
+                    <h3 class="font-bold text-lg">Sports</h3>
                 </div>
-                <div class="bg-slate-800 rounded-xl p-6 text-center hover:bg-slate-700 transition-colors cursor-pointer">
-                    <div class="w-16 h-16 rounded-full bg-primary-600 flex items-center justify-center mx-auto mb-3">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tv text-white"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect><polyline points="17 2 12 7 7 2"></polyline></svg>
+                <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg">
+                    <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg">
+                        <i class="fas fa-tv text-2xl text-white"></i>
                     </div>
-                    <h3 class="font-semibold">Series</h3>
+                    <h3 class="font-bold text-lg">Series</h3>
                 </div>
-                <div class="bg-slate-800 rounded-xl p-6 text-center hover:bg-slate-700 transition-colors cursor-pointer">
-                    <div class="w-16 h-16 rounded-full bg-primary-600 flex items-center justify-center mx-auto mb-3">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music text-white"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
+                <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg">
+                    <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg">
+                        <i class="fas fa-music text-2xl text-white"></i>
                     </div>
-                    <h3 class="font-semibold">Music</h3>
+                    <h3 class="font-bold text-lg">Music</h3>
                 </div>
-                <div class="bg-slate-800 rounded-xl p-6 text-center hover:bg-slate-700 transition-colors cursor-pointer">
-                    <div class="w-16 h-16 rounded-full bg-primary-600 flex items-center justify-center mx-auto mb-3">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open text-white"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
+                <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg">
+                    <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg">
+                        <i class="fas fa-book-open text-2xl text-white"></i>
                     </div>
-                    <h3 class="font-semibold">Documentaries</h3>
+                    <h3 class="font-bold text-lg">Documentaries</h3>
                 </div>
-                <div class="bg-slate-800 rounded-xl p-6 text-center hover:bg-slate-700 transition-colors cursor-pointer">
-                    <div class="w-16 h-16 rounded-full bg-primary-600 flex items-center justify-center mx-auto mb-3">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile text-white"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+                <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg">
+                    <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg">
+                        <i class="fas fa-child text-2xl text-white"></i>
                     </div>
-                    <h3 class="font-semibold">Kids</h3>
+                    <h3 class="font-bold text-lg">Kids</h3>
                 </div>
             </div>
         </div>
     </main>
 <!-- Footer -->
-    <footer class="bg-slate-800 border-t border-slate-700 mt-12 py-8">
+    <footer class="glass-card mt-16 py-10 border-t border-dark-700">
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="mb-4 md:mb-0">
-                    <div class="flex items-center space-x-2">
-                        <div class="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center">
-                            <i data-feather="tv" class="text-white text-sm"></i>
+                <div class="mb-6 md:mb-0">
+                    <div class="flex items-center space-x-3">
+                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center">
+                            <i data-feather="tv" class="text-white"></i>
                         </div>
-                        <h2 class="text-xl font-bold">Dish<span class="text-primary-400">Vision</span></h2>
+                        <h2 class="text-2xl font-bold">Dish<span class="gradient-text">Vision</span></h2>
                     </div>
-                    <p class="text-slate-400 text-sm mt-2">Your ultimate TV guide experience</p>
+                    <p class="text-slate-400 text-sm mt-3 max-w-md">Your ultimate TV guide experience with personalized recommendations and seamless navigation.</p>
                 </div>
                 <div class="flex space-x-6">
-                    <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors">
-                        <i data-feather="facebook"></i>
+                    <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors text-2xl">
+                        <i class="fab fa-facebook"></i>
                     </a>
-                    <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors">
-                        <i data-feather="twitter"></i>
+                    <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors text-2xl">
+                        <i class="fab fa-twitter"></i>
                     </a>
-                    <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors">
-                        <i data-feather="instagram"></i>
+                    <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors text-2xl">
+                        <i class="fab fa-instagram"></i>
                     </a>
-                    <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors">
-                        <i data-feather="youtube"></i>
+                    <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors text-2xl">
+                        <i class="fab fa-youtube"></i>
                     </a>
                 </div>
             </div>
-            <div class="border-t border-slate-700 mt-6 pt-6 text-center text-slate-500 text-sm">
+            <div class="border-t border-dark-700 mt-8 pt-8 text-center text-slate-500 text-sm">
                 <p>© 2023 DishVision. All rights reserved. This is a demo interface.</p>
             </div>
         </div>
@@ -372,17 +466,5 @@
     <script>
         feather.replace();
     </script>
-    <script>
-        // Add hover effect to elements with 'hovered-element' class
-        document.querySelectorAll('.hovered-element').forEach(el => {
-            el.addEventListener('mouseenter', () => {
-                el.style.transform = 'scale(1.02)';
-                el.style.transition = 'transform 0.2s ease';
-            });
-            el.addEventListener('mouseleave', () => {
-                el.style.transform = 'scale(1)';
-            });
-        });
-    </script>
 </body>
 </html>