Now let me check the existing UI components and set up the tasks for this complex multi-section landing page.

Great, I have tabs, badge, card, carousel, and other components available. Let me start building. First, I'll update the theme, layout, and globals.css to match the sporty neon green + black design.

Now let me set up the theme and start building. I'll update globals.css with the neon green + black theme, update layout.tsx, and start creating components.

Now update the layout with Vietnamese locale and Inter font:

Now let me also update the tailwind config to add the heading font:

Now let me move to task 2 and start building the components. Let me create all the component files:

Now let me build the court booking and skill matching sections:

Now let me build the Coach, B2B, and Chatbot sections:

Now let me create the main page that assembles everything, and generate the images:

Now let me add the scrollbar-hiding utility and also add a custom style for no-scrollbar:

Now let me mark all tasks as done:

Landing page SportSync da hoan thanh! Trang bao gom tat ca cac section theo yeu cau: Header voi sticky navigation va responsive mobile menu, Hero Section voi tabbed search box (Dat san / Ghep nguoi choi / Thue HLV), Section Dat San voi 3 cards hien thi thong tin san (hinh anh, rating, gia, badge trang thai), Section Ghep Cap voi Radar Chart canvas animation mo phong AI matching giua 2 nguoi choi, Section HLV dang carousel cuon ngang voi profile cards, Section B2B voi 3 cot loi ich cho doi tac, Floating Chatbot co phan hoi tu dong va quick replies, va Footer day du.

Giao dien su dung tong mau xanh la neon (#4ade80 style) tren nen den nham tao cam giac nang dong, the thao. Tat ca noi dung hien thi 100% tieng Viet voi du lieu gia dinh thuc te. Cac hieu ung hover, glow shadow, va animation (radar chart, match progress bar, chatbot typing indicator) giup trang tro nen song dong va chuyen nghiep cho bai demo.

I have all the context. Now let me update the components with the required interactivity:

1. Header: Add smooth scrolling navigation
2. Booking Section: Add booking modal with date/time picker and Van Westendorp pricing
3. Matching Section: Add "Bat dau ghep" button with loading skeleton

Now let me update the components with all the interactive features:

Now let me update the booking section with the booking modal:

Now let me update the matching section with the "Bat dau ghep" button and loading skeleton:

Now let me read the file to find the correct location to add the button and loading skeleton:

Now let me also update the Player 2 display to show a skeleton/placeholder when matching hasn't started yet:

Now I've added all the required interactivity:

1. Smooth Scrolling Navigation: Header links now smoothly scroll to corresponding sections with an 80px offset for the fixed header
2. Booking Modal: Clicking any "Dat ngay" button opens a sleek modal with court summary, date/time pickers, Van Westendorp optimal pricing calculation, and confirmation flow with loading state
3. Dynamic Tabs: The Hero section tabs were already functional - they switch between booking, matching, and coaching forms
4. Matching Interaction: Added "Bat dau ghep (Premium)" button that triggers a 2-second loading skeleton animation before revealing the matched player result

The landing page is now fully interactive for demo purposes - navigation smoothly scrolls between sections, booking cards open a complete reservation modal with dynamic pricing, and the skill-matching section simulates AI processing with loading states before showing results.