Update src/app/page.tsx

Merge version_9 into main

src/app/page.tsx

@@ -5,12 +5,14 @@ import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import { Award, Check, Clock, MessageSquare, ThumbsUp, Users } from "lucide-react";
 
 export default function LandingPage() {
@@ -19,8 +21,8 @@ export default function LandingPage() {
         defaultButtonVariant="expand-hover"
         defaultTextAnimation="reveal-blur"
         borderRadius="rounded"
-        contentWidth="mediumLarge"
-        sizing="largeSmall"
+        contentWidth="medium"
+        sizing="medium"
         background="aurora"
         cardStyle="inset"
         primaryButtonStyle="gradient"
@@ -40,7 +42,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero" className="py-0">
           <HeroBillboardScroll
             background={{ variant: "plain" }}
             title="Speak English with confidence in the UK"
@@ -53,7 +55,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="services" data-section="services">
+        <div id="services" data-section="services" className="py-4">
           <FeatureCardTwentySeven
             animationType="slide-up"
             textboxLayout="split"
@@ -70,7 +72,30 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="how-it-works" data-section="how-it-works">
+        <div id="testimonials" data-section="testimonials" className="py-4">
+          <TestimonialCardSixteen
+            title="What Our Clients Say"
+            description="Hear from Brazilians who have transformed their lives in the UK with our support."
+            testimonials={[
+              { id: "t1", name: "Ana Silva", role: "Accountant", company: "London Finance Group", rating: 5 },
+              { id: "t2", name: "Pedro Santos", role: "Construction Manager", company: "BuildMax", rating: 5 }
+            ]}
+            kpiItems={[
+              { value: "100+", label: "Situations Resolved" },
+              { value: "99%", label: "Satisfied Clients" },
+              { value: "24/7", label: "Support Available" }
+            ]}
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            gridClassName="gap-2"
+            carouselClassName="gap-0"
+            cardClassName="p-2"
+            className="py-4"
+          />
+        </div>
+
+        <div id="how-it-works" data-section="how-it-works" className="py-4">
           <MetricCardOne
             animationType="slide-up"
             textboxLayout="split"
@@ -86,7 +111,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="trust" data-section="trust">
+        <div id="trust" data-section="trust" className="py-4">
           <SocialProofOne
             textboxLayout="split"
             useInvertedBackground={true}
@@ -96,7 +121,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="about" data-section="about">
+        <div id="about" data-section="about" className="py-4">
           <TextSplitAbout
             useInvertedBackground={false}
             title="Built for the Community"
@@ -106,7 +131,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="stats" data-section="stats">
+        <div id="stats" data-section="stats" className="py-4">
           <MetricCardOne
             animationType="slide-up"
             textboxLayout="split"
@@ -122,7 +147,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq" className="py-4">
           <FaqBase
             textboxLayout="split"
             useInvertedBackground={false}
@@ -137,7 +162,22 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="contact" data-section="contact">
+        <div id="contact-details" data-section="contact-details" className="py-4">
+          <ContactCenter
+            tag="Contact Us"
+            title="Reach out to Elite Lingo Brazil"
+            description="We're here to help you navigate your life in the UK. Contact us directly via phone or email for quick support."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+            onSubmit={(email) => console.log(email)}
+          />
+          <div className="flex flex-col gap-2 text-center p-4 bg-card rounded-xl">
+             <p className="font-bold">Phone: 07563282627</p>
+             <p className="font-bold">Email: eliteLingoBrazil@hotmail.com</p>
+          </div>
+        </div>
+
+        <div id="contact" data-section="contact" className="py-4">
           <ContactSplit
             useInvertedBackground={true}
             background={{ variant: "plain" }}
@@ -151,30 +191,13 @@ export default function LandingPage() {
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterBaseCard
+          <FooterBaseReveal
             logoText="Elite Lingo Brazil"
             columns={[
-              {
-                title: "Services",                items: [
-                  { label: "Call Support", href: "#services" },
-                  { label: "Immigration Help", href: "#services" },
-                  { label: "Live Video Interpretation", href: "#services" }
-                ]
-              },
-              {
-                title: "Company",                items: [
-                  { label: "About Us", href: "#about" },
-                  { label: "Contact", href: "#contact" }
-                ]
-              },
-              {
-                title: "Legal",                items: [
-                  { label: "Privacy Policy", href: "#" },
-                  { label: "Terms of Service", href: "#" }
-                ]
-              }
+              { title: "Support", items: [{ label: "Call Support", href: "#services" }, { label: "Immigration Help", href: "#services" }, { label: "Live Video", href: "#services" }] },
+              { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
             ]}
-            copyrightText="© 2025 Elite Lingo Brazil. All Rights Reserved."
           />
         </div>
       </ReactLenis>