Code the referenced systems design to completion.

* Automatically proceed with next steps in order
* Automatically proceed with the plan in order.

# 📚 TV Guide Application
## Systems Design Plan

---

## File Tree

```text
tv-guide-app/
├── .env.local
├── next.config.js
├── tsconfig.json
├── eslint.config.cjs
├── components/
│ ├── auth/
│ │ ├── AuthModal.tsx
│ │ ├── AuthProviderButton.tsx
│ │ ├── SignInButton.tsx
│ │ └── AuthModal.module.css
│ ├── dashboard/
│ │ ├── DashboardCard.tsx
│ │ ├── FavoritesPreview.tsx
│ │ ├── RemindersPreview.tsx
│ │ └── LoadingSkeleton.tsx
│ ├── favorites/
│ │ ├── FavoritesList.tsx
│ │ ├── FavoriteCard.tsx
│ │ ├── FavoriteActionButton.tsx
│ │ └── FavoritesList.module.css
│ ├── history/
│ │ ├── HistoryList.tsx
│ │ ├── HistoryCard.tsx
│ │ └── HistoryList.module.css
│ ├── search/
│ │ ├── SearchBar.tsx
│ │ ├── SearchResults.tsx
│ │ ├── SearchFilters.tsx
│ │ └── SearchResultCard.tsx
│ ├── settings/
│ │ ├── NotificationSettings.tsx
│ │ ├── AccountManagement.tsx
│ │ └── Settings.module.css
│ ├── sidebar/
│ │ ├── Sidebar.tsx
│ │ ├── SidebarContent.tsx
│ │ ├── MobileDrawer.tsx
│ │ └── Sidebar.module.css
│ ├── theme-toggle/
│ │ ├── ThemeToggle.tsx
│ │ └── ThemeToggle.module.css
│ ├── user/
│ │ ├── UserMenu.tsx
│ │ └── UserMenu.module.css
│ └── empty-state/
│ ├── EmptyState.tsx
│ └── EmptyState.module.css
├── actions/
│ ├── favorites.ts
│ ├── history.ts
│ ├── reminders.ts
│ ├── search.ts
│ ├── tv-guide.ts
│ ├── dashboard.ts
│ ├── profile.ts
│ └── settings.ts
├── db/
│ ├── models/
│ │ ├── user.ts
│ │ ├── tv-listing.ts
│ │ ├── favorite.ts
│ │ ├── reminder.ts
│ │ ├── watch-history.ts
│ │ └── index.ts
│ └── index.ts
├── styles/
│ ├── global.css
│ └── variables.css
├── app/
│ ├── dashboard/
│ │ └── page.tsx
│ ├── tv-guide/
│ │ └── page.tsx
│ ├── search/
│ │ └── page.tsx
│ ├── favorites/
│ │ └── page.tsx
│ ├── reminders/
│ │ └── page.tsx
│ ├── history/
│ │ └── page.tsx
│ ├── profile/
│ │ └── page.tsx
│ ├── settings/
│ │ └── page.tsx
│ └── page.tsx
└── package.json
```

---

## 📌 Key Notes

### File Types
- `.tsx`: React components (e.g., `DashboardCard.tsx`)
- `.module.css`: CSS Modules for scoped styles (e.g., `DashboardCard.module.css`)
- `.ts`: Server actions and utilities (e.g., `favorites.ts`)
- `.css`: Global styles (e.g., `global.css`)

### Folder Structure
- `components/`: All UI components, organized by feature
- `actions/`: Server actions for business logic
- `db/`: Database models and migrations
- `styles/`: Global CSS and variables
- `app/`: Next.js App Router routes (e.g., `/dashboard`)

### Environment Variables
- `.env.local` contains API keys and secrets
Examples: `THEMOVIEDB_API_KEY`, `POSTGRES_URL`

### Next.js Configuration
- `next.config.js` enables Turbopack and absolute imports (`@/`)

---

## 📁 1. Core Components

### Authentication
- `components/auth/SignInButton.tsx`, `AuthProviderButton.tsx`, `AuthModal.tsx`
- `actions/profile.ts` handles user profile and account management

### Layout & Navigation
- `components/sidebar/Sidebar.tsx`, `SidebarContent.tsx`, `MobileDrawer.tsx`
- `components/header/Header.tsx`, `SearchBar.tsx`, `NotificationBell.tsx`
- `components/theme-toggle/ThemeToggle.tsx`

### User Interaction
- `components/user/UserMenu.tsx`

### UI Elements
- `components/empty-state/EmptyState.tsx`
- `components/loader/Loader.tsx`, `Toast.tsx`, `ModalDialog.tsx`

---

## 📁 2. Data & Business Logic

### Database Models
- `db/models/user.ts`, `tv-listing.ts`, `favorite.ts`, `reminder.ts`, `watch-history.ts`

### Server Actions
- `actions/favorites.ts`, `history.ts`, `reminders.ts`, `search.ts`, `tv-guide.ts`, `dashboard.ts`, `profile.ts`, `settings.ts`

### API Integration
- `actions/tv-guide.ts` fetches TV listings from TheMovieDB
- `actions/search.ts` provides unified search logic

---

## 📁 3. Routing & Pages

### App Routes
- `app/dashboard/page.tsx`, `app/tv-guide/page.tsx`, `app/search/page.tsx`, etc.

### Default Route
- `app/page.tsx` (fallback for unhandled routes)

---

## 📁 4. Styles & Configuration

- **Global Styles:** `styles/global.css`, `styles/variables.css`
- **Next.js Config:** `next.config.js` (Turbopack, absolute imports, theme support)
- **ESLint:** `eslint.config.cjs`
- **Environment Variables:** `.env.local` (API keys, database URLs)

---

## 🔍 1. Overview

Full-stack TV guide app to discover, track, and manage TV shows, movies, and streaming content.

**Key features**
- Personalized Dashboard with trending, upcoming, and favorite content
- Unified TV Guide with filters and search
- Favorites and Reminders
- Watch History and Profile Management
- Authentication via GitHub/Google/Facebook
- Dark/Light Mode Toggle and Responsive Design

---

## 🧱 2. System Architecture

### 📌 Tech Stack
- **Frontend:** Next.js (App Router), TypeScript, CSS Modules, shadcn-ui
- **Backend:** Node.js, TypeScript, drizzle-orm (PostgreSQL), Auth.js
- **Database:** PostgreSQL (drizzle-orm/pg-core)
- **APIs:** TheMovieDB, Auth.js (OAuth), Environment Variables
- **Build Tools:** pnpm, Turbopack, ESLint
- **Styling:** CSS Modules (no Tailwind), shadcn-ui components

### 📌 Architecture Diagram

```mermaid
flowchart LR
U[User] <--> FE[Frontend (Next.js)]
FE <--> BE[Backend (Node.js)]
BE <--> DB[(PostgreSQL)]
FE -->|Auth.js| AUTH[Auth.js]
FE -->|Server Actions| BE
BE -->|drizzle-orm| DB
BE --> TMDB[TheMovieDB API]
```

---

## 🧩 3. Core Components

### 📌 Frontend Components

| Folder | Components | Description |
|------------------------|--------------------------------------------|----------------------------------------------|
| `components/auth/` | `SignInButton`, `AuthProviderButton`, `AuthModal` | Authentication UI |
| `components/sidebar/` | `Sidebar`, `SidebarContent`, `MobileDrawer`| Navigation layout |
| `components/header/` | `Header`, `SearchBar`, `NotificationBell` | Header with search and notifications |
| `components/theme-toggle/` | `ThemeToggle` | Dark/Light mode switch |
| `components/user/` | `UserMenu` | User profile and settings |
| `components/empty-state/` | `EmptyState` | Empty states (e.g., "No favorites") |
| `components/loader/` | `Loader` | Loading skeleton |
| `components/toast/` | `Toast` | Toast notifications |
| `components/modal-dialog/` | `ModalDialog` | Modal dialogs for forms/confirmations |

### 📌 Backend Components

| Folder / File | Components / Files | Description |
|--------------------|-------------------------------------------------------------------------------------|------------------------------------------|
| `actions/` | `favorites.ts`, `history.ts`, `reminders.ts`, `search.ts`, `tv-guide.ts`, `dashboard.ts`, `profile.ts`, `settings.ts` | Server actions for business logic |
| `db/models/` | `User`, `TVListing`, `Favorite`, `Reminder`, `WatchHistory` | Database schema definitions |
| `db/index.ts` | — | Database connection and migrations |

---

## 🔄 4. Data Flow

### 📌 User Interaction Flow
1. **Authentication:**
User signs in via GitHub/Google/Facebook → Auth.js handles OAuth → redirect to `/dashboard` with session token.
2. **TV Guide:**
Fetch live and upcoming listings via `fetchLiveListings()` and `fetchUpcomingListings()` → store in `TVListing` table via drizzle-orm.
3. **Favorites & Reminders:**
Add/remove favorites with `addFavorite()`/`removeFavorite()` → set reminders with `addReminder()`/`updateReminder()`.
4. **Search:**
User searches via `searchListings()` → filters TV shows/movies/channels → results cached and shown in `SearchResults`.

### 📌 Database Operations
- **User:** CRUD via `User` model
- **TV Listings:** Fetch/Store via `TVListing` model
- **Favorites/Reminders/History:** CRUD via respective models
- **Authentication:** User persistence on first sign-in

---

## 📡 5. APIs & Integrations

| Service | Description |
|-------------------------------------|-----------------------------------------------------------------|
| TheMovieDB API | Fetch trending, popular, and airing TV shows |
| Auth.js (GitHub/Google/Facebook) | User authentication and session management |
| PostgreSQL (drizzle-orm) | Centralized storage for users, listings, and metadata |
| Environment Variables | Secure storage of API keys (e.g., `THEMOVIEDB_API_KEY`, `POSTGRES_URL`) |
| Icons (`react-icons`)

README.md

@@ -1,10 +1,13 @@
 ---
-title: Bingebuddy Tv Guide Wizard
-emoji: 🏢
-colorFrom: yellow
-colorTo: red
+title: BingeBuddy TV Guide Wizard
+colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,300 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BingeBuddy | Your Personal TV Guide</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, rgba(26,26,46,0.9) 0%, rgba(22,33,62,0.9) 100%);
+        }
+        .show-card {
+            transition: all 0.3s ease;
+        }
+        .show-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .channel-logo {
+            filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
+        }
+    </style>
+</head>
+<body class="min-h-full text-white">
+    <!-- Vanta.js Background -->
+    <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
+
+    <!-- Navigation -->
+    <nav class="border-b border-gray-700 bg-opacity-80 backdrop-blur-md">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <i data-feather="tv" class="w-8 h-8 text-purple-400"></i>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-purple-600 text-white">Home</a>
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">TV Guide</a>
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Favorites</a>
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Reminders</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="relative">
+                        <input type="text" placeholder="Search shows..." class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 w-64">
+                        <button class="absolute right-3 top-2 text-gray-400">
+                            <i data-feather="search"></i>
+                        </button>
+                    </div>
+                    <button class="p-2 rounded-full bg-gray-800 text-gray-400 hover:text-white focus:outline-none">
+                        <i data-feather="bell"></i>
+                    </button>
+                    <button class="p-2 rounded-full bg-gray-800 text-gray-400 hover:text-white focus:outline-none">
+                        <i data-feather="user"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <div class="hero-gradient py-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
+                <div class="mb-12 lg:mb-0">
+                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
+                        Never Miss Your <span class="text-purple-400">Favorite Shows</span> Again
+                    </h1>
+                    <p class="text-lg text-gray-300 mb-8 max-w-lg">
+                        BingeBuddy helps you track all your favorite TV shows, movies, and streaming content in one place. Get personalized recommendations and never forget when your shows air.
+                    </p>
+                    <div class="flex space-x-4">
+                        <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
+                            <i data-feather="play" class="mr-2"></i> Get Started
+                        </button>
+                        <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
+                            <i data-feather="info" class="mr-2"></i> Learn More
+                        </button>
+                    </div>
+                </div>
+                <div class="relative">
+                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 backdrop-blur-md border border-gray-700">
+                        <div class="flex justify-between items-center mb-4">
+                            <h3 class="text-xl font-semibold">Today's Highlights</h3>
+                            <span class="text-sm text-purple-400">See All</span>
+                        </div>
+                        <div class="grid grid-cols-3 gap-4">
+                            <div class="show-card bg-gray-700 rounded-lg overflow-hidden">
+                                <img src="http://static.photos/technology/320x240/1" alt="Show" class="w-full h-32 object-cover">
+                                <div class="p-3">
+                                    <h4 class="text-sm font-medium truncate">Tech Today</h4>
+                                    <p class="text-xs text-gray-400">8:00 PM</p>
+                                </div>
+                            </div>
+                            <div class="show-card bg-gray-700 rounded-lg overflow-hidden">
+                                <img src="http://static.photos/nature/320x240/2" alt="Show" class="w-full h-32 object-cover">
+                                <div class="p-3">
+                                    <h4 class="text-sm font-medium truncate">Wild Planet</h4>
+                                    <p class="text-xs text-gray-400">9:30 PM</p>
+                                </div>
+                            </div>
+                            <div class="show-card bg-gray-700 rounded-lg overflow-hidden">
+                                <img src="http://static.photos/food/320x240/3" alt="Show" class="w-full h-32 object-cover">
+                                <div class="p-3">
+                                    <h4 class="text-sm font-medium truncate">Cooking Masters</h4>
+                                    <p class="text-xs text-gray-400">7:00 PM</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Trending Now Section -->
+    <section class="py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-2xl font-bold">Trending Now</h2>
+                <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center">
+                    View All <i data-feather="chevron-right" class="ml-1"></i>
+                </a>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+                <!-- Show Cards -->
+                <div class="show-card bg-gray-800 rounded-lg overflow-hidden">
+                    <div class="relative">
+                        <img src="http://static.photos/technology/320x240/4" alt="Show" class="w-full h-40 object-cover">
+                        <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full p-1">
+                            <i data-feather="heart" class="w-4 h-4 text-white"></i>
+                        </div>
+                    </div>
+                    <div class="p-3">
+                        <h3 class="font-medium truncate">Cyber Frontier</h3>
+                        <p class="text-xs text-gray-400">Sci-Fi • New Episode</p>
+                        <div class="flex justify-between items-center mt-2">
+                            <span class="text-xs text-purple-400">9.2/10</span>
+                            <span class="text-xs text-gray-500">8:00 PM</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Repeat similar cards for other shows -->
+                <div class="show-card bg-gray-800 rounded-lg overflow-hidden">
+                    <div class="relative">
+                        <img src="http://static.photos/education/320x240/5" alt="Show" class="w-full h-40 object-cover">
+                        <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full p-1">
+                            <i data-feather="heart" class="w-4 h-4 text-gray-400"></i>
+                        </div>
+                    </div>
+                    <div class="p-3">
+                        <h3 class="font-medium truncate">History Uncovered</h3>
+                        <p class="text-xs text-gray-400">Documentary</p>
+                        <div class="flex justify-between items-center mt-2">
+                            <span class="text-xs text-purple-400">8.7/10</span>
+                            <span class="text-xs text-gray-500">7:30 PM</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="show-card bg-gray-800 rounded-lg overflow-hidden">
+                    <div class="relative">
+                        <img src="http://static.photos/travel/320x240/6" alt="Show" class="w-full h-40 object-cover">
+                        <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full p-1">
+                            <i data-feather="heart" class="w-4 h-4 text-white"></i>
+                        </div>
+                    </div>
+                    <div class="p-3">
+                        <h3 class="font-medium truncate">Global Explorer</h3>
+                        <p class="text-xs text-gray-400">Travel • New Season</p>
+                        <div class="flex justify-between items-center mt-2">
+                            <span class="text-xs text-purple-400">9.0/10</span>
+                            <span class="text-xs text-gray-500">10:00 PM</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="show-card bg-gray-800 rounded-lg overflow-hidden">
+                    <div class="relative">
+                        <img src="http://static.photos/sport/320x240/7" alt="Show" class="w-full h-40 object-cover">
+                        <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full p-1">
+                            <i data-feather="heart" class="w-4 h-4 text-gray-400"></i>
+                        </div>
+                    </div>
+                    <div class="p-3">
+                        <h3 class="font-medium truncate">Sports Night</h3>
+                        <p class="text-xs text-gray-400">Live • Football</p>
+                        <div class="flex justify-between items-center mt-2">
+                            <span class="text-xs text-purple-400">Live</span>
+                            <span class="text-xs text-gray-500">Now</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="show-card bg-gray-800 rounded-lg overflow-hidden">
+                    <div class="relative">
+                        <img src="http://static.photos/science/320x240/8" alt="Show" class="w-full h-40 object-cover">
+                        <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full p-1">
+                            <i data-feather="heart" class="w-4 h-4 text-white"></i>
+                        </div>
+                    </div>
+                    <div class="p-3">
+                        <h3 class="font-medium truncate">Science Today</h3>
+                        <p class="text-xs text-gray-400">Educational</p>
+                        <div class="flex justify-between items-center mt-2">
+                            <span class="text-xs text-purple-400">8.5/10</span>
+                            <span class="text-xs text-gray-500">6:00 PM</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="show-card bg-gray-800 rounded-lg overflow-hidden">
+                    <div class="relative">
+                        <img src="http://static.photos/medical/320x240/9" alt="Show" class="w-full h-40 object-cover">
+                        <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full p-1">
+                            <i data-feather="heart" class="w-4 h-4 text-gray-400"></i>
+                        </div>
+                    </div>
+                    <div class="p-3">
+                        <h3 class="font-medium truncate">Medical Files</h3>
+                        <p class="text-xs text-gray-400">Drama • Season Finale</p>
+                        <div class="flex justify-between items-center mt-2">
+                            <span class="text-xs text-purple-400">9.1/10</span>
+                            <span class="text-xs text-gray-500">9:00 PM</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Channels Section -->
+    <section class="py-16 bg-gray-900 bg-opacity-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-2xl font-bold mb-8">Popular Channels</h2>
+            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
+                <div class="flex flex-col items-center">
+                    <div class="channel-logo bg-gray-800 rounded-full p-3 mb-2">
+                        <i data-feather="tv" class="w-6 h-6 text-purple-400"></i>
+                    </div>
+                    <span class="text-xs text-center">HBO</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <div class="channel-logo bg-gray-800 rounded-full p-3 mb-2">
+                        <i data-feather="tv" class="w-6 h-6 text-red-400"></i>
+                    </div>
+                    <span class="text-xs text-center">Netflix</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <div class="channel-logo bg-gray-800 rounded-full p-3 mb-2">
+                        <i data-feather="tv" class="w-6 h-6 text-blue-400"></i>
+                    </div>
+                    <span class="text-xs text-center">Disney+</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <div class="channel-logo bg-gray-800 rounded-full p-3 mb-2">
+                        <i data-feather="tv" class="w-6 h-6 text-yellow-400"></i>
+                    </div>
+                    <span class="text-xs text-center">Prime</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <div class="channel-logo bg-gray-800 rounded-full p-3 mb-2">
+                        <i data-feather="tv" class="w-6 h-6 text-green-400"></i>
+                    </div>
+                    <span class="text-xs text-center">Hulu</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <div class="channel-logo bg-gray-800 rounded-full p-3 mb-2">
+                        <i data-feather="tv" class="w-6 h-6 text-pink-400"></i>
+                    </div>
+                    <span class="text-xs text-center">Apple TV</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <div class="channel-logo bg-gray-800 rounded-full p-3 mb-2">
+                        <i data-feather="tv" class="w-6 h-6 text-orange-400"></i>
+                    </div>
+                    <span class="text-xs text-center">Discovery</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <div class="channel-logo bg-gray-800 rounded-full p-3 mb-2">
+                        <i data-feather="tv" class="w-6 h-6 text-indigo-400"></i>
+                    </div>
+                    <span class="text-xs text-center">Nat Geo</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-2xl font-bold mb-12 text
+</body>
+</html>