# 1. ROLE & EXPERTISE
Act as a Senior Full Stack Web Developer and UI/UX Designer specializing in EdTech and Corporate Consulting platforms.
Your design aesthetic should be "Corporate Professional yet Modern" (think McKinsey meets Linear) to build trust with B2B clients.
You are expert in React, Supabase, Tailwind CSS, and Shadcn UI.

# 2. CONTEXT & OBJECTIVE [Explain Situation & Be Clear]
We are building "Manajemen Pro", a comprehensive platform for education, consulting, and coaching.
Target Audience: Companies and Professionals.
Core Niche: Advanced Excel Training and AI Implementation for Business.

My goal is to build a high-converting MVP (Minimum Viable Product) that serves two purposes:
1. Marketing: Showcase services to corporate clients.
2. Platform: Provide a dashboard for students to access video courses and schedule coaching.

# 3. TECHNICAL CONSTRAINTS [Name Your Tools & Versions]
You must strictly adhere to this stack (optimized for Bolt.new):
- Environment: Node.js, Vite.
- Framework: React 18 with TypeScript (Strict Mode).
- Styling: Tailwind CSS + Shadcn UI (for consistent components).
- Icons: Lucide-React.
- Database & Auth: Supabase (PostgreSQL).
- State Management: TanStack Query (React Query).
- Animation: Framer Motion (use sparingly for professional feel).

# 4. DETAILED REQUIREMENTS [Show What You're Looking For]
The application must have the following structure:

A. Public Landing Page:
- Hero Section: High impact, clear value proposition about Excel & AI mastery.
- Services Section: Cards detailing "Corporate Training", "One-on-One Coaching", and "Online Courses".
- Trust/Social Proof: Section for client logos and testimonials.
- Call to Action: Clear buttons to "Book Consultation" or "Browse Courses".

B. User Platform (Protected Route):
- Dashboard: Overview of active courses and upcoming coaching sessions.
- Course Player: Sidebar with lesson list, main video area, and text content/resources.
- Booking System: A UI to select available time slots for coaching.

C. Admin Dashboard:
- Content Management: Ability to add/edit course modules.
- User Management: See list of registered students.

# 5. EDGE CASES & ERROR HANDLING [Plan for Wrong/Weird Situations]
- Protected Routes: If a non-logged-in user tries to access `/dashboard`, redirect to login.
- Empty States: If a user has no courses, show a "Browse Courses" button instead of a blank page.
- Loading States: Use Skeleton loaders while fetching data from Supabase.
- Mobile Responsiveness: The Navbar must collapse into a hamburger menu on mobile devices perfectly.

# 6. PROCESS & FORMAT [Step-by-Step & How You Want Answer]
Please follow this "Chain of Thought" process:
1.  **Schema First**: Propose the Supabase Database Schema (Tables for Users, Courses, Lessons, Bookings).
2.  **Structure**: Outline the folder structure and routing logic.
3.  **Components**: List the key reusable components we will need.
4.  **Execute**: Wait for my approval on the schema before generating the UI code.

# 7. INTERACTION PROTOCOL [Let the AI Ask Questions]
Before starting the code generation:
- Do we need a payment gateway integration now, or should we use a "Contact for Price" model for the MVP?
- Do you have specific brand colors, or should I propose a professional "Excel Green" and "Tech Blue" palette?

Review the requirements and present the Database Schema first.