Goal:

Build a modern, mobile-responsive landing page and working demo experience for an AI agent that gives interactive product demos.

🧠 Project Overview

Create a two-part experience:

1. Landing Page — showcases the product, DemoFlo. Includes:

   • Clean hero section with a CTA button “🎥 View Live Demo”
   • Brief product explainer with icons (🤖, 🖥️, 📅)
   • Animated testimonials or metrics
   • Sleek gradient background similar to the provided image (peach–coral tone)
   • Responsive navbar and smooth scroll transitions

2. Demo Interface — triggered after clicking “View Demo.”

   This mimics a real-time AI-led call and product walkthrough, inspired by your screenshot.

💻 Demo Page Layout

Left Section (Product Interface Mock):

• A simulated SaaS dashboard with sidebar:
  • Sections: Dashboard, International, Recruitment, Schedule, Employee, Benefits, Support, Settings
  • Highlight “International” in red (#FF6F61 or similar)
• Main content:
  • “Global Employee Distribution” title
  • Interactive world map with colored dots per region
  • Small legend at bottom (North America, Europe, etc.)

Right Section (AI Agent Video Call):

• Rectangle video tile (like a Zoom window) with placeholder video feed of “AI Agent” (use stock video or looping animation)
• Name tag: “JOHN SHOKEE — CEO”
• Below the video: a glowing AI Agent card with logo
• Bottom-right button: “On-demand Product” (with gradient glow)

Chat Bubble (Bottom Bar):

• Floating text bubble from “AI Agent”:

  “Yes, it handles compliance for 50+ countries automatically, including tax forms and visa documentation.”