I can see the Bokamoso 97.4 FM logo - a circular design with a red outer ring, black inner circle, featuring "97.4 fm" in yellow with "bokamoso" text below. The brand colors are red, yellow, and black.

Let me first explore the current codebase structure to understand all pages:

Now let me read the full attachment to understand all the pages to build:

Now I have a complete picture. This is a comprehensive radio station website with multiple pages:

• Home, About, Presenters, Shows, Schedule, Frequencies, Advertise, Rates, Services, Campaigns, Contact

I'll create a modern glassmorphic version with:

1. Mobile-first responsive design
2. CSS Grid + Flexbox layouts
3. Dark/Light theme with yellow accent in light mode (matching logo)
4. Glassmorphic cards/components
5. Smooth transitions & animations
6. Lazy loading for images
7. Dynamic schedule data

Let me set up the todo list and start building:

I've built a complete glassmorphic Bokamoso 97.4 FM website with all the features you requested. Here's what was implemented:

Glassmorphic Design System:

• Frosted glass effects with backdrop-filter: blur() on cards, navbar, and sheets
• Custom CSS properties for theming with dark/light mode support
• Yellow accent in light mode (matching your logo colors: red, yellow, black)
• Smooth transitions, keyframe animations (pulse, wave bars, ticker scroll)

Mobile-First Responsive Design:

• All layouts use CSS Grid + Flexbox (Grid for complex 2D layouts, Flex for most components)
• Mobile-first breakpoints with responsive typography and spacing
• Touch-friendly navigation with slide-out drawer

Dark/Light Theme:

• Full theme toggle with next-themes
• Dark mode uses deep blue-black with red accent
• Light mode uses warm off-white with yellow accent (from your logo)

Dynamic Features:

• Real-time "On Air" display that updates based on current schedule
• Animated ticker with live show information
• Interactive schedule page with day tabs
• Lazy-loading images with intersection observer

All Pages Built:

• Home (hero, on-air strip, news, advertise CTA)
• About, Shows, Presenters, Schedule, Frequencies
• Advertise, Rates, Services, Campaigns, Contact

Your logo has been saved and integrated into the navbar, footer, and metadata.

Now I'll update the hero section to add the YouTube live stream and remove the lazy loading from the files that use it:

I've made the following updates:

1. Added YouTube Live Stream - The hero section now features a two-column layout on larger screens with the YouTube live stream embedded in a glassmorphic card on the right. The stream has a "LIVE" badge header and uses the YouTube embed URL with proper settings for a clean viewing experience.
2. Removed Lazy Loading - Deleted the lazy-image.tsx component and replaced all LazyImage usages in the news section and presenters page with standard Next.js Image components, which provide built-in optimization without the custom lazy loading behavior.

These are warnings, not crashes, but I'll fix them for better code quality:

Fixed the two warnings: Added data-scroll-behavior="smooth" to the HTML element in layout.tsx to handle Next.js route transitions properly, and added aria-describedby={undefined} to the SheetContent component to suppress the Radix UI accessibility warning since we're using a visually hidden title instead of a description.