Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -3,9 +3,9 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import BlogCardOne from '@/components/sections/blog/BlogCardOne';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
@@ -49,7 +49,7 @@ export default function LandingPage() {
       logoAlt="Espérance Sportive de Tunis Logo"
       brandName="EST"
       button={{
-        text: "Join Fan Club",        href: "#contact"}}
+        text: "Join Fan Club",          href: "#contact"}}
       animateOnLoad={true}
     />
   </div>
@@ -274,36 +274,54 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactCTA
       useInvertedBackground={false}
-      title="Get in Touch with EST"
-      description="Reach out to us for fan inquiries, partnership opportunities, or general feedback. We're here to connect!"
-      inputs={[
+      title="Engage with EST Community"
+      description="Whether it's a fan inquiry, partnership opportunity, or feedback, our team is ready to connect and build the future of Espérance together."
+      tag="Connect with Us"
+      tagIcon={Sparkles}
+      tagAnimation="slide-up"
+      buttons={[
         {
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true},
+          text: "Email Us",          href: "mailto:contact@est.com"},
         {
-          name: "email",          type: "email",          placeholder: "Your Email",          required: true}
+          text: "Join Our Fan Club",          href: "#"},
       ]}
-      textarea={{
-        name: "message",        placeholder: "Your Message",        rows: 4,
-        required: true}}
-      buttonText="Send Message"
-      onSubmit={(data) => console.log(data)}
-      imageSrc="http://img.b2bpic.net/free-photo/football-player-jumping-with-ball_23-2149509428.jpg"
-      imageAlt="Football player making a jump kick"
-      mediaPosition="right"
+      buttonAnimation="slide-up"
+      background={{
+        variant: "radial-gradient"}}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterBase
       logoSrc="http://img.b2bpic.net/free-vector/autumn-labels-collection_23-2147882334.jpg"
       logoAlt="EST Logo"
       logoText="EST: The Empire of Africa"
-      leftLink={{
-        text: "Home",        href: "#home"}}
-      rightLink={{
-        text: "News",        href: "#news"}}
+      copyrightText="© 2025 | Espérance Sportive de Tunis. All rights reserved."
+      columns={[
+        {
+          title: "Discover EST",          items: [
+            { label: "Home", href: "#home" },
+            { label: "Legends", href: "#legends" },
+            { label: "Sports Hub", href: "#sports-hub" },
+            { label: "Players", href: "#players" }
+          ]
+        },
+        {
+          title: "Media & Info",          items: [
+            { label: "News", href: "#news" },
+            { label: "Partners", href: "#partners" },
+            { label: "About", href: "#about" }
+          ]
+        },
+        {
+          title: "Connect",          items: [
+            { label: "Contact", href: "#contact" },
+            { label: "Join Fan Club", href: "#" }
+          ]
+        }
+      ]}
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0A;
-  --card: #1A1A1A;
-  --foreground: #F0F0F0;
-  --primary-cta: #C8102E;
-  --primary-cta-text: #FFFFFF;
-  --secondary-cta: #FFD700;
-  --secondary-cta-text: #000000;
-  --accent: #E01B44;
-  --background-accent: #5A000D;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #cee7ff;
+  --primary-cta-text: #000000;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
+  --background-accent: #CEE7FF;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);