Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LinguaLearn | English Language Institute</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .active::after { | |
| width: 100%; | |
| } | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 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"> | |
| <i class="fas fa-language text-blue-500 text-3xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">LinguaLearn</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="nav-link text-gray-900 hover:text-blue-500 px-3 py-2 text-sm font-medium" onclick="showPage('home')">Home</a> | |
| <a href="#" class="nav-link text-gray-900 hover:text-blue-500 px-3 py-2 text-sm font-medium" onclick="showPage('features')">Features</a> | |
| <a href="#" class="nav-link text-gray-900 hover:text-blue-500 px-3 py-2 text-sm font-medium" onclick="showPage('about')">About</a> | |
| <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Enroll Now</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100" onclick="showPage('home')">Home</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100" onclick="showPage('features')">Features</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100" onclick="showPage('about')">About</a> | |
| <a href="#" class="block w-full bg-blue-500 text-white px-3 py-2 rounded-md text-base font-medium text-center mt-2">Enroll Now</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Home Page --> | |
| <div id="home" class="page active"> | |
| <!-- Hero Section --> | |
| <section class="hero-bg text-white py-20 md:py-32"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:w-2/3 lg:w-1/2"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Master English with Confidence</h1> | |
| <p class="text-lg md:text-xl mb-8">Join our immersive English language programs designed to help you achieve fluency, boost your career, and connect with the world.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium text-center transition duration-300">Start Learning Today</a> | |
| <a href="#" class="bg-white hover:bg-gray-100 text-blue-500 px-6 py-3 rounded-md text-lg font-medium text-center transition duration-300">Explore Courses</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-blue-500 mb-2">10K+</div> | |
| <div class="text-gray-600">Students Enrolled</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-blue-500 mb-2">98%</div> | |
| <div class="text-gray-600">Success Rate</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-blue-500 mb-2">50+</div> | |
| <div class="text-gray-600">Certified Teachers</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-blue-500 mb-2">15</div> | |
| <div class="text-gray-600">Years Experience</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us Section --> | |
| <section class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose LinguaLearn?</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">We provide a comprehensive learning experience that goes beyond traditional language instruction.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md transition duration-300 feature-card"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-chalkboard-teacher text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Expert Instructors</h3> | |
| <p class="text-gray-600">Our certified teachers are native speakers with years of experience in language education.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md transition duration-300 feature-card"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-laptop-code text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Interactive Learning</h3> | |
| <p class="text-gray-600">Engage with our cutting-edge digital platform that makes learning fun and effective.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md transition duration-300 feature-card"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-globe-americas text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Global Community</h3> | |
| <p class="text-gray-600">Connect with students from around the world and practice your skills in real conversations.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Students Say</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Hear from our successful students who transformed their English skills with us.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"LinguaLearn helped me improve my business English tremendously. I can now confidently participate in international meetings."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Maria Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Business Professional</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"The personalized approach and small class sizes made all the difference. I passed my IELTS exam with flying colors!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Ahmed Khan</h4> | |
| <p class="text-sm text-gray-500">University Student</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"I love the cultural immersion aspect. Not only did I learn English, but I also gained a deeper understanding of Western culture."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Yuki Tanaka</h4> | |
| <p class="text-sm text-gray-500">Exchange Student</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="bg-blue-600 text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Transform Your English Skills?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of successful students who achieved their language goals with LinguaLearn.</p> | |
| <a href="#" class="bg-white hover:bg-gray-100 text-blue-600 px-8 py-4 rounded-md text-lg font-medium inline-block transition duration-300">Get Started Today</a> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Features Page --> | |
| <div id="features" class="page"> | |
| <section class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-900 mb-4">Our Comprehensive Features</h1> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Discover what makes our English language programs stand out from the rest.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-headset text-blue-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-3">24/7 Learning Support</h3> | |
| <p class="text-gray-600">Get help whenever you need it with our round-the-clock tutor support system. No question goes unanswered.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-blue-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-3">Progress Tracking</h3> | |
| <p class="text-gray-600">Monitor your improvement with detailed analytics and personalized feedback from your instructors.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt text-blue-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-3">Mobile Learning</h3> | |
| <p class="text-gray-600">Learn on the go with our fully responsive platform that works seamlessly across all devices.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-certificate text-blue-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-3">Certification</h3> | |
| <p class="text-gray-600">Earn internationally recognized certificates upon completion of each proficiency level.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-users text-blue-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-3">Speaking Clubs</h3> | |
| <p class="text-gray-600">Join our weekly conversation clubs to practice speaking with peers and native speakers.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-book-open text-blue-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-3">Extensive Resources</h3> | |
| <p class="text-gray-600">Access our comprehensive library of learning materials, exercises, and real-world content.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gray-50 rounded-lg p-8 md:p-12"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl font-bold mb-6">Our Learning Methodology</h2> | |
| <p class="text-gray-600 mb-6">We combine the best practices from communicative language teaching, task-based learning, and immersive techniques to create a powerful learning experience.</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Personalized learning paths based on your goals</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Focus on practical communication skills</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Regular progress assessments and feedback</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Learning Methodology" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Course Levels</h2> | |
| <div class="grid md:grid-cols-4 gap-6 mt-8"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-blue-500 font-bold text-xl">A1</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Beginner</h3> | |
| <p class="text-gray-600 text-sm">Basic vocabulary and simple sentences</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-blue-500 font-bold text-xl">A2</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Elementary</h3> | |
| <p class="text-gray-600 text-sm">Everyday expressions and routine communication</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-blue-500 font-bold text-xl">B1</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Intermediate</h3> | |
| <p class="text-gray-600 text-sm">Clear communication on familiar topics</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-blue-500 font-bold text-xl">B2</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Upper Intermediate</h3> | |
| <p class="text-gray-600 text-sm">Complex texts and technical discussions</p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 mt-6 max-w-4xl mx-auto"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-blue-500 font-bold text-xl">C1</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Advanced</h3> | |
| <p class="text-gray-600 text-sm">Fluency and flexibility in professional use</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-blue-500 font-bold text-xl">C2</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Proficiency</h3> | |
| <p class="text-gray-600 text-sm">Near-native comprehension and expression</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-briefcase text-blue-500 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Business English</h3> | |
| <p class="text-gray-600 text-sm">Specialized vocabulary for professional contexts</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Find answers to common questions about our programs and learning approach.</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> | |
| <button class="faq-question w-full text-left p-6 hover:bg-gray-50 focus:outline-none"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium text-lg">How long does it take to become fluent in English?</h3> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-answer hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">The time it takes to become fluent depends on several factors including your starting level, learning intensity, and practice outside class. On average, students reach conversational fluency in 6-12 months with our intensive programs. Full professional fluency typically takes 12-24 months.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> | |
| <button class="faq-question w-full text-left p-6 hover:bg-gray-50 focus:outline-none"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium text-lg">What's the difference between group and private classes?</h3> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-answer hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">Group classes (max 8 students) offer peer interaction and collaborative learning at a lower cost. Private classes provide completely personalized instruction with flexible scheduling. Many students combine both for optimal results.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> | |
| <button class="faq-question w-full text-left p-6 hover:bg-gray-50 focus:outline-none"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium text-lg">Do you offer preparation for English proficiency tests?</h3> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-answer hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">Yes, we offer specialized preparation courses for IELTS, TOEFL, Cambridge exams, and other major English proficiency tests. Our test prep programs include mock exams, strategy sessions, and personalized feedback to help you achieve your target score.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> | |
| <button class="faq-question w-full text-left p-6 hover:bg-gray-50 focus:outline-none"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium text-lg">Can I switch between online and in-person classes?</h3> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-answer hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">Absolutely! Our hybrid learning model allows you to seamlessly transition between online and in-person instruction based on your schedule and preferences. Your progress and materials stay synchronized across both formats.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-question w-full text-left p-6 hover:bg-gray-50 focus:outline-none"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium text-lg">What if I need to pause my studies temporarily?</h3> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-answer hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">We understand that life happens. You can freeze your enrollment for up to 3 months without losing your progress or paying for unused time. Just notify us at least 7 days before your intended pause date.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- About Page --> | |
| <div id="about" class="page"> | |
| <section class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-900 mb-4">About LinguaLearn</h1> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Transforming language education through innovation, expertise, and passion.</p> | |
| </div> | |
| <div class="md:flex items-center mb-16"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl font-bold mb-6">Our Story</h2> | |
| <p class="text-gray-600 mb-6">Founded in 2008 by a team of language education specialists, LinguaLearn began with a simple mission: to make English language learning accessible, effective, and enjoyable for students worldwide.</p> | |
| <p class="text-gray-600 mb-6">What started as a small language center has grown into an internationally recognized institution with students from over 60 countries. Our secret? A relentless focus on student outcomes and continuous innovation in teaching methodologies.</p> | |
| <p class="text-gray-600">Today, we're proud to be at the forefront of language education, combining the best of traditional teaching with cutting-edge technology to deliver exceptional results.</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Story" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| </div> | |
| <div class="md:flex items-center flex-row-reverse mb-16"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pl-12"> | |
| <h2 class="text-3xl font-bold mb-6">Our Mission</h2> | |
| <p class="text-gray-600 mb-6">We believe that language is more than just words—it's a bridge to opportunities, connections, and personal growth. Our mission is to empower individuals through language education that opens doors to new possibilities.</p> | |
| <p class="text-gray-600">We're committed to:</p> | |
| <ul class="space-y-3 mt-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Delivering exceptional, results-driven language instruction</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Creating inclusive, supportive learning environments</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Innovating continuously to improve learning outcomes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Making quality education accessible to diverse communities</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1524179091875-b494986c095e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Mission" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| </div> | |
| <div class="md:flex items-center mb-16"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl font-bold mb-6">Our Team</h2> | |
| <p class="text-gray-600 mb-6">Our greatest strength is our team of dedicated language professionals. Each instructor brings unique expertise, cultural perspective, and a passion for teaching to the classroom.</p> | |
| <p class="text-gray-600">All our teachers are:</p> | |
| <ul class="space-y-3 mt-4 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Native or near-native English speakers</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Certified in TESOL, CELTA, or equivalent</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Experienced in teaching diverse student populations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Committed to ongoing professional development</span> | |
| </li> | |
| </ul> | |
| <p class="text-gray-600">Beyond instructors, our support staff, curriculum designers, and technology team work together to create an exceptional learning experience for every student.</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-8 md:p-12"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold mb-4">Our Accreditations</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Recognized by leading educational organizations worldwide</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm flex justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Accreditation_Council_for_Continuing_Education_and_Training_logo.svg/1200px-Accreditation_Council_for_Continuing_Education_and_Training_logo.svg.png" alt="ACCET" class="h-16 object-contain"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm flex justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/EAQUALS_logo.svg/1200px-EAQUALS_logo.svg.png" alt="EAQUALS" class="h-16 object-contain"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm flex justify-center"> | |
| <img src="https://www.englishuk.com/assets/Uploads/EnglishUK-Logo-2020.png" alt="English UK" class="h-16 object-contain"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm flex justify-center"> | |
| <img src="https://www.tesol.org/Portals/0/logos/TESOL_Logo_2016.png" alt="TESOL" class="h-16 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-gray-900 text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-3xl font-bold mb-6">Visit Our Campus</h2> | |
| <p class="text-gray-300 mb-6">Experience our learning environment firsthand. Schedule a tour of our modern facilities equipped with the latest educational technology.</p> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-map-marker-alt text-blue-400 mr-3 text-xl"></i> | |
| <span class="text-gray-300">123 Education Blvd, Language City, LC 10001</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-phone-alt text-blue-400 mr-3 text-xl"></i> | |
| <span class="text-gray-300">+1 (555) 123-4567</span> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-envelope text-blue-400 mr-3 text-xl"></i> | |
| <span class="text-gray-300">info@lingualearn.com</span> | |
| </div> | |
| <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium inline-block transition duration-300">Book a Tour</a> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-lg overflow-hidden"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215256627466!2d-73.9878449241647!3d40.74844097138978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1689784292493!5m2!1sen!2sus" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">LinguaLearn</h3> | |
| <p class="text-gray-400">Empowering global communication through exceptional English language education since 2008.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300" onclick="showPage('home')">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300" onclick="showPage('features')">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300" onclick="showPage('about')">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Courses</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Courses</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">General English</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Business English</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Test Preparation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Academic English</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Conversation Clubs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Connect With Us</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="bg-gray-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 hover:bg-blue-400 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 hover:bg-pink-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 hover:bg-red-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400 mb-2">Subscribe to our newsletter</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md transition duration-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 LinguaLearn. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Page navigation | |
| function showPage(pageId) { | |
| // Hide all pages | |
| document.querySelectorAll('.page').forEach(page => { | |
| page.classList.remove('active'); | |
| }); | |
| // Show selected page | |
| document.getElementById(pageId).classList.add('active'); | |
| // Update active nav link | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active'); | |
| }); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| } | |
| // FAQ accordion | |
| document.querySelectorAll('.faq-question').forEach(question => { | |
| question.addEventListener('click', function() { | |
| const answer = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| // Toggle answer visibility | |
| answer.classList.toggle('hidden'); | |
| // Rotate icon | |
| if (answer.classList.contains('hidden')) { | |
| icon.style.transform = 'rotate(0deg)'; | |
| } else { | |
| icon.style.transform = 'rotate(180deg)'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Zabihkeraam/auth" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |