Update src/app/globals.css

src/app/globals.css

@@ -5,12 +5,12 @@
   /* --vw is set by ThemeProvider */
 
   --background: #ffffff;
-  --card: #fcfcfc;
-  --foreground: #120006e6;
-  --primary-cta: #e63946;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #ffcc00;
   --secondary-cta: #ffffff;
-  --accent: #ffcf40;
-  --background-accent: #ffd966;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/page.tsx

@@ -1,5 +1,12 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
+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,165 @@ 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>
+        <HeroBillboardCarousel
+          title="English Dom"
+          description="Master English fluency with expert instructors. Interactive lessons designed for all levels."
+          mediaItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484689467-d854773z.jpg",
+              imageAlt: "English Dom learning experience"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484692441-ky6zbpw9.jpg",
+              imageAlt: "English Dom learning center"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg",
+              imageAlt: "Beginner English course"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg",
+              imageAlt: "Intermediate English course"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg",
+              imageAlt: "Advanced English course"
+            }
+          ]}
+          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>
   );