Update src/app/page.tsx
This commit is contained in:
250
src/app/page.tsx
250
src/app/page.tsx
@@ -1,5 +1,12 @@
|
||||
"use client";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBaseSocial from "@/components/sections/footer/FooterBaseSocial";
|
||||
import { Youtube, Twitter, Linkedin } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -16,139 +23,146 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<div className="bg-white text-black p-6">
|
||||
<h1 className="text-2xl font-bold">English Dom</h1>
|
||||
<nav>
|
||||
<ul className="flex space-x-4">
|
||||
<li><a href="#hero">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#features">Courses</a></li>
|
||||
<li><a href="#testimonials">Testimonials</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Courses", id: "features" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="English Dom"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<section className="min-h-screen bg-gradient-to-r from-blue-600 to-purple-600 text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-5xl font-bold mb-4">English Dom</h1>
|
||||
<p className="text-xl mb-8">Master English fluency with expert instructors. Interactive lessons designed for all levels.</p>
|
||||
<div className="space-x-4">
|
||||
<button className="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">Start Trial</button>
|
||||
<button className="border border-white px-6 py-3 rounded-lg font-semibold">All Courses</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<HeroBillboard
|
||||
title="English Dom"
|
||||
description="Master English fluency with expert instructors. Interactive lessons designed for all levels."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484689467-d854773z.jpg"
|
||||
imageAlt="English Dom learning experience"
|
||||
frameStyle="card"
|
||||
buttons={[
|
||||
{ text: "Start Trial", href: "contact" },
|
||||
{ text: "All Courses", href: "features" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<span className="text-blue-600 font-semibold">Our Story</span>
|
||||
<h2 className="text-4xl font-bold mb-6">Transforming English Education Since 2015</h2>
|
||||
<p className="text-gray-600 mb-8">We believe learning English should be engaging, accessible, and effective for everyone.</p>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<span className="text-blue-600 font-semibold">MISSION</span>
|
||||
<h3 className="text-2xl font-bold mb-4">Expert instruction meets modern methodology</h3>
|
||||
<p className="text-gray-600">English Dom combines traditional teaching excellence with cutting-edge technology. Our certified instructors create personalized learning experiences that help students achieve fluency in speaking, listening, reading, and writing.</p>
|
||||
<button className="mt-6 bg-blue-600 text-white px-6 py-3 rounded-lg">Learn More</button>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484692441-ky6zbpw9.jpg" alt="English Dom learning center" className="rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<SplitAbout
|
||||
title="Transforming English Education Since 2015"
|
||||
description="We believe learning English should be engaging, accessible, and effective for everyone."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484692441-ky6zbpw9.jpg"
|
||||
imageAlt="English Dom learning center"
|
||||
imagePosition="right"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Expert Instruction",
|
||||
description: "Certified instructors with proven teaching excellence"
|
||||
},
|
||||
{
|
||||
title: "Modern Methodology",
|
||||
description: "Cutting-edge technology meets traditional teaching"
|
||||
},
|
||||
{
|
||||
title: "Personalized Learning",
|
||||
description: "Customized experiences for speaking, listening, reading, and writing"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<span className="text-blue-600 font-semibold">Courses</span>
|
||||
<h2 className="text-4xl font-bold mb-6">Comprehensive Course Levels</h2>
|
||||
<p className="text-gray-600 mb-12">From complete beginner to advanced proficiency, our structured programs ensure steady progress.</p>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-gray-50 p-6 rounded-lg">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg" alt="Beginner English course" className="rounded-lg mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2">Beginner English</h3>
|
||||
<p className="text-gray-600">Master pronunciation, basic vocabulary, and essential grammar. Perfect for absolute beginners starting their English journey.</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-6 rounded-lg">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg" alt="Intermediate English course" className="rounded-lg mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2">Intermediate English</h3>
|
||||
<p className="text-gray-600">Build conversational fluency with real-world scenarios. Expand vocabulary and master complex grammar structures.</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-6 rounded-lg">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg" alt="Advanced English course" className="rounded-lg mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2">Advanced English</h3>
|
||||
<p className="text-gray-600">Achieve native-like fluency and professionalism. Specialized content for business, academic, and cultural contexts.</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-6 rounded-lg">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484696101-v2pl2f1j.jpg" alt="Certification programs" className="rounded-lg mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2">Certification Programs</h3>
|
||||
<p className="text-gray-600">Prepare for international exams including TOEFL, IELTS, and Cambridge certificates with expert guidance.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<FeatureCardOne
|
||||
title="Comprehensive Course Levels"
|
||||
description="From complete beginner to advanced proficiency, our structured programs ensure steady progress."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
features={[
|
||||
{
|
||||
title: "Beginner English",
|
||||
description: "Master pronunciation, basic vocabulary, and essential grammar. Perfect for absolute beginners starting their English journey.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg",
|
||||
imageAlt: "Beginner English course"
|
||||
},
|
||||
{
|
||||
title: "Intermediate English",
|
||||
description: "Build conversational fluency with real-world scenarios. Expand vocabulary and master complex grammar structures.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg",
|
||||
imageAlt: "Intermediate English course"
|
||||
},
|
||||
{
|
||||
title: "Advanced English",
|
||||
description: "Achieve native-like fluency and professionalism. Specialized content for business, academic, and cultural contexts.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg",
|
||||
imageAlt: "Advanced English course"
|
||||
},
|
||||
{
|
||||
title: "Certification Programs",
|
||||
description: "Prepare for international exams including TOEFL, IELTS, and Cambridge certificates with expert guidance.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484696101-v2pl2f1j.jpg",
|
||||
imageAlt: "Certification programs"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<section className="py-20 bg-blue-600 text-white">
|
||||
<div className="max-w-4xl mx-auto px-4 text-center">
|
||||
<span className="font-semibold">Newsletter</span>
|
||||
<h2 className="text-4xl font-bold mb-6">Start Your English Journey Today</h2>
|
||||
<p className="text-lg mb-8">Join thousands of students who are achieving fluency with English Dom. Get expert guidance, personalized lessons, and proven results.</p>
|
||||
<div className="max-w-md mx-auto flex">
|
||||
<input type="email" placeholder="Enter your email address" className="flex-1 px-4 py-3 rounded-l-lg text-black" />
|
||||
<button className="bg-white text-blue-600 px-6 py-3 rounded-r-lg font-semibold">Join Now US</button>
|
||||
</div>
|
||||
<p className="text-sm mt-4 opacity-80">We respect your privacy. Unsubscribe at any time. By signing up, you agree to our Terms of Service.</p>
|
||||
</div>
|
||||
</section>
|
||||
<ContactCenter
|
||||
tag="Newsletter"
|
||||
title="Start Your English Journey Today"
|
||||
description="Join thousands of students who are achieving fluency with English Dom. Get expert guidance, personalized lessons, and proven results."
|
||||
useInvertedBackground="invertDefault"
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<footer className="bg-gray-900 text-white py-16">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-2xl font-bold">English Dom</h3>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#hero" className="text-gray-400 hover:text-white">Home</a></li>
|
||||
<li><a href="#about" className="text-gray-400 hover:text-white">About Us</a></li>
|
||||
<li><a href="#features" className="text-gray-400 hover:text-white">Courses</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#pricing" className="text-gray-400 hover:text-white">Pricing</a></li>
|
||||
<li><a href="#testimonials" className="text-gray-400 hover:text-white">Testimonials</a></li>
|
||||
<li><a href="#contact" className="text-gray-400 hover:text-white">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-400 hover:text-white">Privacy Policy</a></li>
|
||||
<li><a href="#" className="text-gray-400 hover:text-white">Terms of Service</a></li>
|
||||
<li><a href="#" className="text-gray-400 hover:text-white">Sitemap</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="https://facebook.com" className="text-gray-400 hover:text-white">Facebook</a></li>
|
||||
<li><a href="https://twitter.com" className="text-gray-400 hover:text-white">Twitter</a></li>
|
||||
<li><a href="https://linkedin.com" className="text-gray-400 hover:text-white">LinkedIn</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<FooterBaseSocial
|
||||
logoText="English Dom"
|
||||
description="Master English fluency with expert instructors and proven methodology."
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{ label: "Home", href: "hero" },
|
||||
{ label: "About Us", href: "about" },
|
||||
{ label: "Courses", href: "features" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "FAQs", href: "#" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Sitemap", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
socialLinks={[
|
||||
{ icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" },
|
||||
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
||||
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
|
||||
]}
|
||||
copyrightText="© 2025 | English Dom"
|
||||
onPrivacyClick={() => console.log("Privacy clicked")}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user