Hugging Face's logo

Spaces:
mohas8
/
englishmate
Running

App Files Community
englishmate / index.html
mohas8's picture
mohas8
Add 3 files
349d392 verified
raw
history blame contribute delete
61.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>EnglishMate AI - Your Personalized English Coach</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#10B981',
 accent: '#F87171',
 dark: '#1E293B',
 darklight: '#334155',
 light: '#F8FAFC',
 slate: '#E2E8F0'
 },
 fontFamily: {
 'sans': ['Poppins', 'sans-serif']
 }
 }
 }
 }
 </script>
 <style>
 @keyframes typing {
 0% { width: 0; }
 100% { width: 100%; }
 }
@keyframes blink {
 0%, 100% { border-color: transparent; }
 50% { border-color: #10B981; }
 }
.typing-animation {
 overflow: hidden;
 white-space: nowrap;
 border-right: 3px solid #10B981;
 animation:
typing 3s steps(40, end) infinite,
 blink .75s step-end infinite;
 }
.loading-dot {
 animation: dot-pulse 1.5s infinite;
 opacity: 0;
 }
.loading-dot:nth-child(2) { animation-delay: 0.5s; }
 .loading-dot:nth-child(3) { animation-delay: 1s; }
@keyframes dot-pulse {
 0% { opacity: 0; }
 50% { opacity: 1; }
 100% { opacity: 0; }
 }
.chat-bubble {
 transition: transform 0.2s, box-shadow 0.2s;
 }
.chat-bubble:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
 }
.card-hover {
 transition: all 0.3s ease;
 }
.card-hover:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
 }
.toggle-checkbox:checked {
 background-color: #10B981;
 border-color: #10B981;
 }
.toggle-checkbox:checked + .toggle-label {
 background-color: #10B981;
 }
.progress-ring {
 transform: rotate(-90deg);
 }
.flag-icon {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 object-fit: cover;
 }
body {
 font-family: 'Poppins', sans-serif;
 background-color: #F8FAFC;
 transition: background-color 0.3s;
 }
body.dark {
 background-color: #0F172A;
 }
.slide {
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
 }
.slide.active {
 opacity: 1;
 }
.badge-animate {
 animation: float 3s ease-in-out infinite;
 }
@keyframes float {
 0% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0); }
 }
.speech-bubble::after {
 content: "";
 position: absolute;
 bottom: -10px;
 left: 20px;
 border-width: 10px 10px 0;
 border-style: solid;
 border-color: #10B981 transparent;
 }
.dark .speech-bubble::after {
 border-color: #334155 transparent;
 }
 </style>
</head>
<body class="text-gray-700 dark:text-slate-200">
 <!-- Navigation -->
 <nav class="bg-white dark:bg-darklight shadow-md fixed w-full z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0 flex items-center">
 <div class="bg-primary p-2 rounded-full w-12 h-12 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
 </svg>
 </div>
 <span class="ml-2 text-xl font-bold dark:text-white">EnglishMate<span class="text-primary">AI</span></span>
 </div>
 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
 <a href="#features" class="border-primary text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
 <a href="#how-it-works" class="border-transparent hover:border-gray-300 hover:text-gray-700 dark:hover:text-slate-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a>
 <a href="#testimonials" class="border-transparent hover:border-gray-300 hover:text-gray-700 dark:hover:text-slate-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Testimonials</a>
 <a href="#pricing" class="border-transparent hover:border-gray-300 hover:text-gray-700 dark:hover:text-slate-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
 </div>
 </div>
 <div class="flex items-center">
 <div class="flex items-center mr-4">
 <button class="bg-slate-100 dark:bg-slate-700 p-1 rounded-full">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.017 9l.463-.001C13.965 9 15.74 10.35 16.714 12" />
 </svg>
 </button>
 <span class="mx-1">|</span>
 <span class="mr-2">EN</span>
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
 </svg>
 </div>
 <button id="dark-mode-toggle" class="bg-slate-200 dark:bg-dark rounded-full p-2">
 <svg id="dark-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-800 dark:text-primary hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
 </svg>
 <svg id="light-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
 </svg>
 </button>
 <button id="chat-cta" class="ml-4 bg-primary hover:bg-emerald-600 text-white font-medium py-2 px-6 rounded-full shadow-md transition duration-300">
 Start Learning
 </button>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="pt-24 pb-16 overflow-hidden">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 <div class="space-y-6">
 <div class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900 text-emerald-800 dark:text-emerald-200 text-sm">
 <span class="font-medium">NEW</span>
 <span class="ml-2">AI-Powered English Coach</span>
 </div>
 <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white tracking-tight">
 Your Personalized AI English Coach<br>
 <span class="bg-gradient-to-r from-primary to-emerald-400 bg-clip-text text-transparent">Anytime, Anywhere</span>
 </h1>
 <p class="text-lg text-gray-600 dark:text-slate-400 max-w-lg">
 Transform your English skills with our AI-powered platform designed for learners at all levels.
 Practice conversation, get instant feedback, and achieve fluency faster.
 </p>
 <div class="flex flex-wrap gap-4">
 <button id="start-chat" class="bg-primary hover:bg-emerald-600 text-white font-medium py-3 px-8 rounded-full shadow-md transition duration-300 transform hover:scale-105">
 Chat with EnglishMate Now
 </button>
 <button class="bg-white dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600 text-gray-800 dark:text-white font-medium py-3 px-8 rounded-full shadow-md border border-gray-200 dark:border-slate-600 transition duration-300">
 Take Free Assessment
 </button>
 </div>
 </div>
 <div class="relative">
 <div class="absolute inset-0 rounded-3xl bg-gradient-to-r from-primary to-emerald-300 blur-3xl opacity-30 dark:opacity-20"></div>
 <div class="relative bg-white dark:bg-dark rounded-3xl shadow-xl p-6">
 <div class="p-1 rounded-2xl bg-gradient-to-r from-primary to-emerald-300">
 <div class="bg-white dark:bg-dark rounded-2xl p-5 space-y-4">
 <div class="flex items-center space-x-3">
 <div class="bg-gradient-to-r from-primary to-emerald-400 w-10 h-10 rounded-full flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
 </svg>
 </div>
 <div>
 <h3 class="font-semibold text-gray-900 dark:text-white">EnglishMate AI</h3>
 <p class="text-xs text-gray-500 dark:text-slate-400">Online now • Always ready to help</p>
 </div>
 </div>
 <div class="space-y-4">
 <div class="bg-slate-100 dark:bg-darklight p-4 rounded-2xl max-w-xs">
 <p class="text-gray-700 dark:text-slate-300">👋 Hello! I'm your AI English coach. How can I help you improve your English today?</p>
 </div>
 <div id="user-typing" class="flex justify-end">
 <div class="bg-primary text-white p-4 rounded-2xl max-w-xs rounded-br-none">
 <span id="typing-text">How can you help me with my pronunciation?</span>
 </div>
 </div>
 <div class="flex items-center">
 <div class="flex space-x-1">
 <div class="w-2 h-2 bg-gray-400 rounded-full loading-dot"></div>
 <div class="w-2 h-2 bg-gray-400 rounded-full loading-dot"></div>
 <div class="w-2 h-2 bg-gray-400 rounded-full loading-dot"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section id="features" class="py-16 bg-slate-50 dark:bg-slate-900">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center">
 <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Transform Your English Learning Journey</h2>
 <p class="mt-4 text-lg max-w-3xl mx-auto text-gray-600 dark:text-slate-400">
 Our AI-powered features help you master every aspect of English with personalized, real-time feedback
 </p>
 </div>
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Feature Card 1: AI Chat -->
 <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg card-hover">
 <div class="p-6">
 <div class="bg-primary bg-opacity-10 dark:bg-opacity-20 rounded-lg w-14 h-14 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold mt-4 mb-2 text-gray-900 dark:text-white">AI Conversation Partner</h3>
 <p class="text-gray-600 dark:text-slate-400">
 Practice conversations 24/7 with our advanced AI that adjusts to your level and interests
 </p>
 </div>
 </div>
<!-- Feature Card 2: Grammar -->
 <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg card-hover">
 <div class="p-6">
 <div class="bg-emerald-400 bg-opacity-10 dark:bg-opacity-20 rounded-lg w-14 h-14 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 8h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold mt-4 mb-2 text-gray-900 dark:text-white">Grammar Feedback</h3>
 <p class="text-gray-600 dark:text-slate-400">
 Instantly correct your grammar mistakes with clear explanations and improvement suggestions
 </p>
 </div>
 </div>
<!-- Feature Card 3: Pronunciation -->
 <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg card-hover">
 <div class="p-6">
 <div class="bg-cyan-400 bg-opacity-10 dark:bg-opacity-20 rounded-lg w-14 h-14 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold mt-4 mb-2 text-gray-900 dark:text-white">Pronunciation Correction</h3>
 <p class="text-gray-600 dark:text-slate-400">
 Perfect your accent with real-time analysis and targeted pronunciation exercises
 </p>
 </div>
 </div>
<!-- Feature Card 4: Writing -->
 <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg card-hover">
 <div class="p-6">
 <div class="bg-yellow-400 bg-opacity-10 dark:bg-opacity-20 rounded-lg w-14 h-14 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold mt-4 mb-2 text-gray-900 dark:text-white">Writing Assistant</h3>
 <p class="text-gray-600 dark:text-slate-400">
 Improve your writing with style suggestions, vocabulary enhancement, and structural feedback
 </p>
 </div>
 </div>
<!-- Feature Card 5: Speaking -->
 <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg card-hover">
 <div class="p-6">
 <div class="bg-pink-400 bg-opacity-10 dark:bg-opacity-20 rounded-lg w-14 h-14 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold mt-4 mb-2 text-gray-900 dark:text-white">Speaking Coach</h3>
 <p class="text-gray-600 dark:text-slate-400">
 Master fluency and confidence with personalized speaking challenges and interview preparation
 </p>
 </div>
 </div>
<!-- Feature Card 6: Live Quizzes -->
 <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg card-hover">
 <div class="p-6">
 <div class="bg-purple-400 bg-opacity-10 dark:bg-opacity-20 rounded-lg w-14 h-14 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold mt-4 mb-2 text-gray-900 dark:text-white">Live Quiz Games</h3>
 <p class="text-gray-600 dark:text-slate-400">
 Test your knowledge in real-time competitions with learners worldwide
 </p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- AI Chat Interface -->
 <section id="chat-interface" class="py-16 hidden">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
 <!-- Left Sidebar -->
 <div class="lg:col-span-3 bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
 <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Learning Hub</h2>
<div class="space-y-6">
 <div>
 <h3 class="text-sm font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-3">Lessons</h3>
 <div class="space-y-2">
 <a href="#" class="flex items-center p-3 rounded-lg bg-slate-100 dark:bg-slate-700 text-primary font-medium">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
 </svg>
 Daily Conversation
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
 </svg>
 Business English
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
 </svg>
 Interview Prep
 </a>
 </div>
 </div>
<div>
 <h3 class="text-sm font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-3">Progress</h3>
 <div class="bg-slate-100 dark:bg-slate-700 rounded-lg p-4">
 <div class="flex justify-between items-center mb-2">
 <span class="text-sm font-medium text-gray-700 dark:text-slate-300">Level 4 • Intermediate</span>
 <span class="text-sm text-primary">75%</span>
 </div>
 <div class="w-full bg-gray-200 dark:bg-slate-600 rounded-full h-2">
 <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
 </div>
 </div>
 </div>
<div>
 <h3 class="text-sm font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-3">Recent Chats</h3>
 <div class="space-y-2">
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300">
 <div class="bg-emerald-100 dark:bg-emerald-900 rounded-lg w-8 h-8 flex items-center justify-center mr-3">
 <span class="text-xs font-bold text-emerald-800 dark:text-emerald-200">JP</span>
 </div>
 Job Interview Practice
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300">
 <div class="bg-purple-100 dark:bg-purple-900 rounded-lg w-8 h-8 flex items-center justify-center mr-3">
 <span class="text-xs font-bold text-purple-800 dark:text-purple-200">TV</span>
 </div>
 TV Shows Discussion
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300">
 <div class="bg-amber-100 dark:bg-amber-900 rounded-lg w-8 h-8 flex items-center justify-center mr-3">
 <span class="text-xs font-bold text-amber-800 dark:text-amber-200">GF</span>
 </div>
 Grammar Fundamentals
 </a>
 </div>
 </div>
 </div>
 </div>
<!-- Main Chat Area -->
 <div class="lg:col-span-6 bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
 <div class="flex items-center mb-6">
 <div class="bg-gradient-to-r from-primary to-emerald-400 w-10 h-10 rounded-full flex items-center justify-center mr-3">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
 </svg>
 </div>
 <div>
 <h2 class="font-bold text-gray-900 dark:text-white">EnglishMate AI</h2>
 <p class="text-xs text-gray-500 dark:text-slate-400">Online • Always ready to help</p>
 </div>
 </div>
<div class="space-y-6 mb-6">
 <div class="bg-slate-100 dark:bg-slate-700 p-4 rounded-2xl max-w-xs rounded-tl-none">
 <p class="text-gray-700 dark:text-slate-300">👋 Hello! I'm your AI English coach. Would you like to practice conversation, work on grammar, or improve your pronunciation?</p>
 </div>
<div class="flex justify-end">
 <div class="bg-primary text-white p-4 rounded-2xl max-w-xs">
 <p>I'd like to practice pronunciation. How can you help me with that?</p>
 </div>
 </div>
<div class="bg-slate-100 dark:bg-slate-700 p-4 rounded-2xl max-w-xs rounded-tl-none">
 <p class="text-gray-700 dark:text-slate-300">Great choice! We'll work on difficult English sounds. Try saying this sentence:
<span class="font-medium">"She sells seashells by the seashore."</span>
I'll analyze your speech and give feedback.
 </p>
 </div>
 </div>
<div class="border-t border-gray-200 dark:border-slate-700 pt-6">
 <div class="flex space-x-4 mb-4">
 <div class="inline-flex items-center rounded-full bg-primary bg-opacity-10 dark:bg-opacity-20 px-4 py-2 text-sm font-medium text-primary">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 Pronunciation Practice
 </div>
 <div class="inline-flex items-center rounded-full bg-emerald-400 bg-opacity-10 dark:bg-opacity-20 px-4 py-2 text-sm font-medium text-emerald-400">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
 </svg>
 Grammar Focus
 </div>
 <div class="inline-flex items-center rounded-full bg-cyan-400 bg-opacity-10 dark:bg-opacity-20 px-4 py-2 text-sm font-medium text-cyan-400">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
 </svg>
 Real Conversations
 </div>
 </div>
<div class="flex">
 <div class="relative flex-1">
 <input type="text" placeholder="Type your message..." class="w-full bg-slate-100 dark:bg-slate-700 rounded-2xl py-4 px-5 focus:outline-none focus:ring-2 focus:ring-primary">
 <button class="absolute right-3 top-3 text-gray-500 hover:text-primary">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
 </svg>
 </button>
 </div>
 <button class="ml-3 bg-primary hover:bg-emerald-600 text-white font-medium py-3 px-5 rounded-full">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
 </svg>
 </button>
 </div>
 </div>
 </div>
<!-- Right Panel -->
 <div class="lg:col-span-3 bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-bold text-gray-900 dark:text-white">Learning Insights</h2>
 <button class="text-gray-500 hover:text-primary">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 </svg>
 </button>
 </div>
<div class="space-y-6">
 <div>
 <h3 class="text-sm font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-3">Vocabulary Builder</h3>
 <div class="bg-gradient-to-r from-blue-500 to-indigo-500 rounded-xl p-4 text-white">
 <p class="font-bold text-lg mb-2">Today's Word:</p>
 <p class="text-2xl font-bold mb-1">Elaborate</p>
 <p class="text-sm opacity-90 mb-3">/ɪˈlæb.ə.reɪt/</p>
 <p class="text-sm mb-1">Adjective: Involving many carefully arranged details.</p>
 <p class="text-sm">Verb: To add details to something.</p>
 </div>
 </div>
<div>
 <h3 class="text-sm font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-3">Personal Feedback</h3>
 <div class="bg-slate-100 dark:bg-slate-700 rounded-xl p-4">
 <div class="flex items-start mb-3">
 <div class="bg-primary rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-3">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
 </svg>
 </div>
 <div>
 <p class="text-sm text-gray-800 dark:text-slate-300">Your pronunciation is improving! Focus on differentiating "she" and "see".</p>
 <p class="text-xs text-gray-500 dark:text-slate-400 mt-1">Based on your recent practice</p>
 </div>
 </div>
 <div class="pl-11">
 <div class="bg-white dark:bg-dark rounded-lg p-3">
 <p class="text-xs text-gray-500 dark:text-slate-400">Strength:</p>
 <p class="text-sm font-medium text-gray-800 dark:text-slate-300 mb-2">Consistent verb tenses</p>
<p class="text-xs text-gray-500 dark:text-slate-400">To Improve:</p>
 <p class="text-sm font-medium text-gray-800 dark:text-slate-300">Using articles (a, an, the)</p>
 </div>
 </div>
 </div>
 </div>
<div class="text-center">
 <button class="w-full bg-primary hover:bg-emerald-600 text-white font-medium py-3 px-6 rounded-xl shadow-md transition duration-300">
 Continue Daily Lesson
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Lesson Dashboard -->
 <section id="dashboard" class="py-16 hidden bg-slate-50 dark:bg-slate-900">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Your English Learning Dashboard</h2>
 <p class="mt-4 text-lg max-w-3xl mx-auto text-gray-600 dark:text-slate-400">
 Track your progress, access personalized lessons, and see how your English improves over time
 </p>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
 <!-- Left Column - Stats & Progress -->
 <div class="lg:col-span-1">
 <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6 mb-8">
 <div class="flex items-center justify-between mb-6">
 <h3 class="text-xl font-bold text-gray-900 dark:text-white">Streaks & Achievements</h3>
 <button class="text-gray-500 hover:text-primary">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 </button>
 </div>
<div class="flex justify-between items-center mb-6">
 <div class="text-center">
 <div class="text-3xl font-bold text-primary">18</div>
 <div class="text-sm text-gray-600 dark:text-slate-400">Day Streak</div>
 </div>
 <div class="text-center">
 <div class="text-3xl font-bold text-emerald-500">24</div>
 <div class="text-sm text-gray-600 dark:text-slate-400">Lessons</div>
 </div>
 <div class="text-center">
 <div class="text-3xl font-bold text-amber-500">86%</div>
 <div class="text-sm text-gray-600 dark:text-slate-400">Completion</div>
 </div>
 </div>
<div class="flex items-center">
 <div class="flex-shrink-0 w-16 h-16 flex items-center justify-center">
 <div class="relative">
 <svg class="w-16 h-16" viewBox="0 0 100 100">
 <circle class="stroke-gray-200 dark:stroke-slate-600" stroke-width="10" cx="50" cy="50" r="40" fill="none"/>
 <circle class="stroke-primary" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="40" fill="none" stroke-dasharray="251.2" stroke-dashoffset="100" style="transform: rotate(-90deg); transform-origin: 50% 50%;">
 <animate attributeName="stroke-dashoffset" from="251.2" to="100" dur="1.5s" fill="freeze"/>
 </circle>
 </svg>
 <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm font-bold">75%</span>
 </div>
 </div>
 <div class="ml-4">
 <p class="font-medium text-gray-900 dark:text-white">Level 4 Progress</p>
 <p class="text-sm text-gray-600 dark:text-slate-400">Reach Level 5 by completing 10 more lessons</p>
 </div>
 </div>
<div class="mt-6 grid grid-cols-3 gap-2">
 <div class="bg-amber-100 dark:bg-amber-900 bg-opacity-60 dark:bg-opacity-20 rounded-lg p-3 text-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
 </svg>
 <p class="text-xs mt-1">Fluency</p>
 </div>
 <div class="bg-purple-100 dark:bg-purple-900 bg-opacity-60 dark:bg-opacity-20 rounded-lg p-3 text-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
 </svg>
 <p class="text-xs mt-1">Grammar</p>
 </div>
 <div class="bg-emerald-100 dark:bg-emerald-900 bg-opacity-60 dark:bg-opacity-20 rounded-lg p-3 text-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
 </svg>
 <p class="text-xs mt-1">Vocabulary</p>
 </div>
 </div>
 </div>
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6">
 <div class="flex items-center justify-between mb-6">
 <h3 class="text-xl font-bold text-gray-900 dark:text-white">AI Recommendations</h3>
 </div>
<div class="space-y-4">
 <div class="flex items-start">
 <div class="flex-shrink-0 mr-3">
 <div class="bg-blue-100 dark:bg-blue-900 bg-opacity-60 dark:bg-opacity-20 w-10 h-10 rounded-lg flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-900 dark:text-white">Pronunciation Practice</h4>
 <p class="text-sm text-gray-600 dark:text-slate-400">Focus on the 'th' sounds in English</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 mr-3">
 <div class="bg-emerald-100 dark:bg-emerald-900 bg-opacity-60 dark:bg-opacity-20 w-10 h-10 rounded-lg flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-900 dark:text-white">Grammar Challenge</h4>
 <p class="text-sm text-gray-600 dark:text-slate-400">Master perfect tenses</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 mr-3">
 <div class="bg-amber-100 dark:bg-amber-900 bg-opacity-60 dark:bg-opacity-20 w-10 h-10 rounded-lg flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
 </svg>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-900 dark:text-white">Live Group Session</h4>
 <p class="text-sm text-gray-600 dark:text-slate-400">Business English at 15:00 GMT</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Right Column - Lesson Content -->
 <div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-900 dark:text-white">Daily Lessons</h3>
 <div class="flex">
 <button class="bg-primary hover:bg-emerald-600 text-white px-4 py-2 rounded-l-lg font-medium">
 Today
 </button>
 <button class="bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-gray-700 dark:text-white px-4 py-2 font-medium">
 Upcoming
 </button>
 <button class="bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-gray-700 dark:text-white px-4 py-2 rounded-r-lg font-medium">
 Completed
 </button>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
 <div class="border-l-4 border-primary pl-4 py-3">
 <h4 class="font-bold text-gray-900 dark:text-white">Advanced: Future Perfect Tense</h4>
 <p class="text-sm text-gray-600 dark:text-slate-400">Grammar • 20 min</p>
 <div class="mt-2 flex items-center">
 <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-2">
 <div class="bg-primary h-2 rounded-full" style="width: 65%"></div>
 </div>
 <span class="ml-2 text-xs font-medium">65%</span>
 </div>
 </div>
<div class="border-l-4 border-emerald-400 pl-4 py-3">
 <h4 class="font-bold text-gray-900 dark:text-white">Business Negotiations</h4>
 <p class="text-sm text-gray-600 dark:text-slate-400">Speaking • 40 min</p>
 <div class="mt-2 flex items-center">
 <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-2">
 <div class="bg-emerald-400 h-2 rounded-full" style="width: 30%"></div>
 </div>
 <span class="ml-2 text-xs font-medium">30%</span>
 </div>
 </div>
 </div>
<div class="mb-8">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-bold text-gray-900 dark:text-white">Recent Achievements</h3>
 <a href="#" class="text-primary font-medium">View All</a>
 </div>
<div class="grid grid-cols-3 md:grid-cols-5 gap-4">
 <div class="bg-emerald-100 dark:bg-emerald-900 rounded-xl p-4 text-center relative overflow-hidden">
 <div class="absolute top-0 right-0 -mt-2 -mr-2 w-8 h-8 bg-emerald-300 dark:bg-emerald-700 rounded-full flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-800 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 </svg>
 </div>
 <div class="bg-gradient-to-r from-emerald-300 to-emerald-500 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
 </svg>
 </div>
 <p class="text-xs font-medium">7-day Streak</p>
 </div>
<div class="bg-amber-100 dark:bg-amber-900 rounded-xl p-4 text-center relative overflow-hidden">
 <div class="absolute top-0 right-0 -mt-2 -mr-2 w-8 h-8 bg-amber-300 dark:bg-amber-700 rounded-full flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-amber-800 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 </svg>
 </div>
 <div class="bg-gradient-to-r from-amber-300 to-amber-500 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 </div>
 <p class="text-xs font-medium">Quiz Master</p>
 </div>
<div class="bg-blue-100 dark:bg-blue-900 rounded-xl p-4 text-center relative overflow-hidden">
 <div class="absolute top-0 right-0 -mt-2 -mr-2 w-8 h-8 bg-blue-300 dark:bg-blue-700 rounded-full flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-800 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 </svg>
 </div>
 <div class="bg-gradient-to-r from-blue-300 to-blue-500 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 </div>
 <p class="text-xs font-medium">Listening Pro</p>
 </div>
 </div>
 </div>
<div>
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-bold text-gray-900 dark:text-white">Your Progress</h3>
 <div class="flex">
 <button class="text-xs px-2 py-1 rounded-l bg-primary text-white">Week</button>
 <button class="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-700 text-gray-700 dark:text-white">Month</button>
 <button class="text-xs px-2 py-1 rounded-r bg-slate-100 dark:bg-slate-700 text-gray-700 dark:text-white">Year</button>
 </div>
 </div>
 <div class="bg-slate-100 dark:bg-slate-700 rounded-xl p-4">
 <div class="h-64">
 <div class="grid grid-cols-7 h-56 gap-2 items-end">
 <div class="h-1/5 bg-primary rounded-t"></div>
 <div class="h-3/5 bg-primary rounded-t"></div>
 <div class="h-4/5 bg-primary rounded-t"></div>
 <div class="h-3/5 bg-primary rounded-t"></div>
 <div class="h-2/5 bg-primary rounded-t"></div>
 <div class="h-3/5 bg-primary rounded-t"></div>
 <div class="h-4/5 bg-primary rounded-t"></div>
 </div>
 <div class="grid grid-cols-7 text-center text-xs mt-1 text-gray-600 dark:text-slate-400">
 <div>Mon</div>
 <div>Tue</div>
 <div>Wed</div>
 <div>Thu</div>
 <div>Fri</div>
 <div>Sat</div>
 <div>Sun</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Quiz Arena -->
 <section id="quiz" class="py-16 hidden">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Gamified Quiz Arena</h2>
 <p class="mt-4 text-lg max-w-3xl mx-auto text-gray-600 dark:text-slate-400">
 Test your English knowledge against learners worldwide in real-time quiz competitions
 </p>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
 <!-- Left: Game Stats -->
 <div class="lg:col-span-1">
 <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6 mb-8">
 <div class="flex items-center justify-between mb-6">
 <h3 class="text-xl font-bold text-gray-900 dark:text-white">Your Game Stats</h3>
 <button class="text-gray-500 hover:text-primary">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 </button>
 </div>
<div class="space-y-4">
 <div>
 <p class="text-sm text-gray-600 dark:text-slate-400 mb-1">Quiz Points