269 lines
13 KiB
TypeScript
269 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="radialGradient"
|
|
cardStyle="neon-glow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<div className="text-center p-8">
|
|
<h1 className="text-2xl font-bold">Red Room English School</h1>
|
|
<p className="text-gray-600 mt-2">Navigation will be restored once components are available</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<div className="text-center p-16">
|
|
<h1 className="text-4xl font-bold mb-4">Red Room</h1>
|
|
<p className="text-lg text-gray-700 max-w-2xl mx-auto">Master English with expert instructors. Immersive learning experiences for every level, from beginner to advanced proficiency.</p>
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490824093-4zvastqq.jpg"
|
|
alt="Dynamic English classroom with engaged students"
|
|
className="w-full max-w-md mx-auto mt-8 rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<div className="p-16">
|
|
<h2 className="text-3xl font-bold mb-4">Learn English Your Way</h2>
|
|
<p className="text-gray-700 mb-8">Red Room is dedicated to transforming how you experience English language learning. Through innovative teaching methods, personalized attention, and a supportive community, we help every student achieve their language goals with confidence and fluency.</p>
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490825100-qr8p9dkh.jpg"
|
|
alt="English learning materials and resources"
|
|
className="w-full max-w-md mx-auto rounded-lg"
|
|
/>
|
|
<div className="grid grid-cols-3 gap-4 mt-8">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold">500+</div>
|
|
<div className="text-gray-600">Students Trained</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold">95%</div>
|
|
<div className="text-gray-600">Success Rate</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold">10+</div>
|
|
<div className="text-gray-600">Years Experience</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="feature" data-section="feature">
|
|
<div className="p-16">
|
|
<h2 className="text-3xl font-bold mb-4">Our Learning Approach</h2>
|
|
<p className="text-gray-700 mb-8">A structured yet flexible methodology designed for real-world communication mastery</p>
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2">01. Assessment</h3>
|
|
<p className="text-gray-700">Comprehensive evaluation of your current English level, goals, and learning preferences to create a personalized learning path.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2">02. Immersion</h3>
|
|
<p className="text-gray-700">Interactive classes focused on speaking, listening, reading, and writing through real-life scenarios and authentic materials.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2">03. Practice</h3>
|
|
<p className="text-gray-700">Regular assignments, group discussions, and one-on-one feedback sessions to reinforce learning and build confidence.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2">04. Mastery</h3>
|
|
<p className="text-gray-700">Milestone testing and certification paths to track progress and validate your English proficiency achievements.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<div className="p-16">
|
|
<h2 className="text-3xl font-bold mb-4">Meet Our Instructors</h2>
|
|
<p className="text-gray-700 mb-8">Experienced English educators passionate about student success</p>
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div className="text-center">
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161716897-3ct4uqsh.jpg"
|
|
alt="Sarah Mitchell, Senior English Instructor"
|
|
className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
|
|
/>
|
|
<h3 className="font-semibold">Sarah Mitchell</h3>
|
|
<p className="text-gray-600">Senior English Instructor</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490826035-lrazclrt.jpg"
|
|
alt="Michael Chen, Business English Specialist"
|
|
className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
|
|
/>
|
|
<h3 className="font-semibold">Michael Chen</h3>
|
|
<p className="text-gray-600">Business English Specialist</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490826727-dlrt5e1i.jpg"
|
|
alt="Emma Rodriguez, Conversation Coach"
|
|
className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
|
|
/>
|
|
<h3 className="font-semibold">Emma Rodriguez</h3>
|
|
<p className="text-gray-600">Conversation Coach</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490827294-y1y03u05.jpg"
|
|
alt="James Patterson, Grammar & Writing Expert"
|
|
className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
|
|
/>
|
|
<h3 className="font-semibold">James Patterson</h3>
|
|
<p className="text-gray-600">Grammar & Writing Expert</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<div className="p-16">
|
|
<h2 className="text-3xl font-bold mb-4">Student Success Stories</h2>
|
|
<p className="text-gray-700 mb-8">Real testimonials from students who transformed their English proficiency at Red Room</p>
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div className="border rounded-lg p-6">
|
|
<div className="flex items-center mb-4">
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490827835-wes34icg.jpg"
|
|
alt="Lisa Johnson"
|
|
className="w-12 h-12 rounded-full mr-4 object-cover"
|
|
/>
|
|
<div>
|
|
<h4 className="font-semibold">Lisa Johnson</h4>
|
|
<p className="text-gray-600 text-sm">Marketing Manager</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-700">"Red Room completely changed my confidence in speaking English. Within six months, I was presenting to international clients without hesitation."</p>
|
|
</div>
|
|
<div className="border rounded-lg p-6">
|
|
<div className="flex items-center mb-4">
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490828433-taahfmi4.jpg"
|
|
alt="David Park"
|
|
className="w-12 h-12 rounded-full mr-4 object-cover"
|
|
/>
|
|
<div>
|
|
<h4 className="font-semibold">David Park</h4>
|
|
<p className="text-gray-600 text-sm">Software Engineer</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-700">"The conversational classes helped me understand movies, podcasts, and casual conversations without subtitles."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<div className="p-16">
|
|
<h2 className="text-3xl font-bold mb-4">Frequently Asked Questions</h2>
|
|
<p className="text-gray-700 mb-8">Everything you need to know about Red Room English School</p>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">What English levels do you offer?</h3>
|
|
<p className="text-gray-700">We offer classes for all levels: Beginner (A1), Elementary (A2), Intermediate (B1), Upper-Intermediate (B2), Advanced (C1), and Mastery (C2).</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">How are classes structured?</h3>
|
|
<p className="text-gray-700">Classes combine interactive group sessions with personalized one-on-one feedback. We use a mix of conversation practice and grammar lessons.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">Do you offer flexible scheduling?</h3>
|
|
<p className="text-gray-700">Yes! We offer morning, afternoon, and evening classes throughout the week. We also provide weekend intensives.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<div className="p-16">
|
|
<h2 className="text-3xl font-bold mb-4">Get in Touch</h2>
|
|
<p className="text-gray-700 mb-8">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div>
|
|
<form className="space-y-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Your Name"
|
|
className="w-full p-3 border rounded-lg"
|
|
required
|
|
/>
|
|
<input
|
|
type="email"
|
|
placeholder="Your Email"
|
|
className="w-full p-3 border rounded-lg"
|
|
required
|
|
/>
|
|
<textarea
|
|
placeholder="Type your message..."
|
|
rows={5}
|
|
className="w-full p-3 border rounded-lg"
|
|
required
|
|
></textarea>
|
|
<button type="submit" className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700">Send Message</button>
|
|
</form>
|
|
</div>
|
|
<div>
|
|
<img
|
|
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490824093-4zvastqq.jpg"
|
|
alt="Red Room contact section"
|
|
className="w-full rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<div className="p-16 bg-gray-100">
|
|
<div className="grid grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<h3 className="text-xl font-bold mb-4">Red Room</h3>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-2">Classes</h4>
|
|
<div className="space-y-1">
|
|
<div><a href="#feature" className="text-gray-600 hover:text-gray-900">All Levels</a></div>
|
|
<div><a href="#feature" className="text-gray-600 hover:text-gray-900">Business English</a></div>
|
|
<div><a href="#faq" className="text-gray-600 hover:text-gray-900">Exam Preparation</a></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-2">School</h4>
|
|
<div className="space-y-1">
|
|
<div><a href="#about" className="text-gray-600 hover:text-gray-900">About Us</a></div>
|
|
<div><a href="#team" className="text-gray-600 hover:text-gray-900">Meet Our Team</a></div>
|
|
<div><a href="#testimonial" className="text-gray-600 hover:text-gray-900">Student Reviews</a></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-2">Contact</h4>
|
|
<div className="space-y-1">
|
|
<div><a href="#contact" className="text-gray-600 hover:text-gray-900">Get in Touch</a></div>
|
|
<div><a href="#contact" className="text-gray-600 hover:text-gray-900">Schedule Demo</a></div>
|
|
<div><a href="mailto:info@redroom.com" className="text-gray-600 hover:text-gray-900">Email Support</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-t pt-4 text-center text-gray-600">
|
|
<p>© 2025 Red Room English School. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |