151 lines
6.1 KiB
TypeScript
151 lines
6.1 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="sharp"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="dotGrid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-indigo-50">
|
|
<div className="text-center space-y-8 max-w-2xl px-6">
|
|
<div className="space-y-4">
|
|
<h1 className="text-4xl md:text-6xl font-bold text-gray-900">
|
|
Capital Great
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-gray-600">
|
|
English Language School
|
|
</p>
|
|
</div>
|
|
<div className="space-y-6">
|
|
<p className="text-gray-700 leading-relaxed">
|
|
Master English with expert instructors at Capital Great. Professional courses for all levels. Start your learning journey today.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
|
|
Start Learning
|
|
</button>
|
|
<button className="border border-blue-600 text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors">
|
|
Learn More
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-green-50 to-emerald-50">
|
|
<div className="text-center space-y-4 max-w-xl px-6">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
Transform Your English Skills
|
|
</h2>
|
|
<p className="text-gray-700">
|
|
Build confidence, fluency, and success with our comprehensive English programs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-purple-50 to-pink-50">
|
|
<div className="text-center space-y-4 max-w-xl px-6">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
About Capital Great
|
|
</h2>
|
|
<p className="text-gray-700">
|
|
Dedicated to helping students achieve fluency and confidence in English with experienced instructors and proven methodologies.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="feature" data-section="feature">
|
|
<div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-yellow-50 to-orange-50">
|
|
<div className="text-center space-y-4 max-w-xl px-6">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
Our Programs
|
|
</h2>
|
|
<p className="text-gray-700">
|
|
Speaking & Conversation, Grammar & Writing, Reading & Comprehension - comprehensive courses for all proficiency levels.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-teal-50 to-cyan-50">
|
|
<div className="text-center space-y-4 max-w-xl px-6">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
Expert Instructors
|
|
</h2>
|
|
<p className="text-gray-700">
|
|
Meet our experienced educators passionate about English language excellence.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-rose-50 to-red-50">
|
|
<div className="text-center space-y-4 max-w-xl px-6">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
Success Stories
|
|
</h2>
|
|
<p className="text-gray-700">
|
|
Hear from our students about their transformative English learning journey with Capital Great.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-indigo-50 to-blue-50">
|
|
<div className="text-center space-y-4 max-w-xl px-6">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
Choose Your Plan
|
|
</h2>
|
|
<p className="text-gray-700">
|
|
Flexible pricing options for every learning goal and budget. From starter to intensive programs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-gray-50 to-slate-50">
|
|
<div className="text-center space-y-4 max-w-xl px-6">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
Start Your Journey
|
|
</h2>
|
|
<p className="text-gray-700">
|
|
Get in touch with our team to discuss your learning goals and find the perfect program.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<div className="bg-gray-900 text-white py-12">
|
|
<div className="text-center space-y-4">
|
|
<h3 className="text-2xl font-bold">Capital Great</h3>
|
|
<p className="text-gray-300">English Language School</p>
|
|
<p className="text-gray-400 text-sm">
|
|
© 2024 Capital Great. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |