Update src/app/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -3,27 +3,27 @@
 import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
-import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
 import ContactText from "@/components/sections/contact/ContactText";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Film } from "lucide-react";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import { Sparkles, Film, House, MessageSquareText, Settings, Hexagon, Rocket, ArrowLeftRight, Send } from "lucide-react";
 
 export default function AboutPage() {
   const navItems = [
-    { name: "Home", id: "home" },
-    { name: "About", id: "about" },
-    { name: "Services", id: "services" },
-    { name: "Social Spot", id: "social-spot" },
-    { name: "Cosmic Monkey", id: "cosmic-monkey" },
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "#services" },
+    { name: "Social Spot", id: "/social-spot" },
+    { name: "Cosmic Monkey", id: "/cosmic-monkey" },
   ];
 
   const footerColumns = [
     {
       title: "Solutions",      items: [
         { label: "TG Entertainment", href: "/" },
-        { label: "Social Spot", href: "/#social-spot" },
-        { label: "Cosmic Monkey", href: "/#cosmic-monkey" },
+        { label: "Social Spot", href: "/social-spot" },
+        { label: "Cosmic Monkey", href: "/cosmic-monkey" },
         { label: "Services", href: "/#services" },
       ],
     },
@@ -32,7 +32,7 @@ export default function AboutPage() {
         { label: "About Us", href: "/about" },
         { label: "Our Process", href: "/#services" },
         { label: "Team", href: "/about" },
-        { label: "Contact", href: "/#contact" },
+        { label: "Contact", href: "#contact" },
       ],
     },
     {
@@ -62,50 +62,46 @@ export default function AboutPage() {
         <NavbarStyleCentered
           navItems={navItems}
           button={{
-            text: "Start Your Project",            href: "/contact"}}
+            text: "Start Your Project",            href: "#contact"
+          }}
           brandName="TG Entertainment"
         />
       </div>
 
       <div id="hero-about" data-section="hero-about">
-        <HeroSplitDoubleCarousel
-          title="Our Story & Vision"
+        <HeroBillboardDashboard
+          title="Creative Excellence Reimagined"
           description="TG Entertainment was founded on the belief that great creative work doesn't have to choose between quality and speed. We set out to prove that by combining strategic brilliance, artistic excellence, and intelligent automation, we could deliver premium results at the pace of the modern world."
-          tag="Creative Excellence Reimagined"
+          background={{ variant: "radial-gradient" }}
+          tag="Our Story"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          background={{ variant: "plain" }}
-          leftCarouselItems={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-collaborative-creative-team-of-diverse-1773035470076-7f8faaf6.png?_wi=2",              imageAlt: "Creative team collaboration"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-discovery-phase-visualizatio-1773035469417-75498901.png?_wi=2",              imageAlt: "Strategic discovery phase"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-creative-ideation-and-concept-developm-1773035468803-9c09024a.png",              imageAlt: "Creative ideation workshop"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png?_wi=4",              imageAlt: "Film production setup"},
-          ]}
-          rightCarouselItems={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-visualization-of-ai-augm-1773035469134-2cc7be9e.png?_wi=3",              imageAlt: "AI-augmented creative process"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-production-execution-phase-showing-cin-1773035469384-fbcdfaf1.png",              imageAlt: "Production execution phase"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-stunning-vfx-and-visual-effects-showca-1773035469368-320e3733.png?_wi=2",              imageAlt: "VFX and post-production"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-modern-contact-and-project-kickoff-vis-1773035469400-06c45202.png",              imageAlt: "Project kickoff collaboration"},
-          ]}
           buttons={[
             { text: "Our Three Wings", href: "/" },
-            { text: "Get in Touch", href: "/contact" },
+            { text: "Get in Touch", href: "#contact" },
           ]}
           buttonAnimation="slide-up"
-          carouselPosition="right"
+          dashboard={{
+            title: "About TG Entertainment",            logoIcon: Hexagon,
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-collaborative-creative-team-of-diverse-1773035470076-7f8faaf6.png?_wi=4",            buttons: [{ text: "Learn More", href: "#" }, { text: "Contact", href: "#contact" }],
+            sidebarItems: [{ icon: House, active: true }, { icon: MessageSquareText }, { icon: Settings }],
+            stats: [
+              { title: "Founded", values: [2020, 2021, 2022], description: "Our journey began." },
+              { title: "Team Size", values: [50, 75, 100], description: "Creative professionals." },
+              { title: "Global", values: [5, 8, 12], description: "Office locations." },
+            ],
+            chartTitle: "Growth Over Time",            chartData: [{ value: 20 }, { value: 40 }, { value: 60 }, { value: 80 }, { value: 100 }],
+            listTitle: "Core Values",            listItems: [
+              { icon: Sparkles, title: "Creative Excellence", status: "Always" },
+              { icon: Rocket, title: "Innovation", status: "Constant" },
+              { icon: Film, title: "Quality", status: "Uncompromising" },
+            ],
+          }}
         />
       </div>
 
       <div id="wings-overview" data-section="wings-overview">
-        <FeatureCardThree
+        <FeatureCardEight
           title="Three Specialized Wings, One Creative Force"
           description="Each of our divisions is purpose-built for different market needs, but all share the same commitment to excellence and innovation."
           tag="Our Offerings"
@@ -113,15 +109,19 @@ export default function AboutPage() {
           tagAnimation="slide-up"
           features={[
             {
-              id: "01",              title: "TG Entertainment",              description: "Our flagship full-service creative agency offering strategy, design, production, and AI-augmented workflows for enterprise clients and ambitious brands.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sleek-creative-agency-workspace-with-m-1773035469446-f79fbb53.png?_wi=2",              imageAlt: "TG Entertainment flagship agency"},
+              id: 1,
+              title: "TG Entertainment",              description: "Our flagship full-service creative agency offering strategy, design, production, and AI-augmented workflows for enterprise clients and ambitious brands.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sleek-creative-agency-workspace-with-m-1773035469446-f79fbb53.png?_wi=3",              imageAlt: "TG Entertainment flagship agency"
+            },
             {
-              id: "02",              title: "Social Spot",              description: "Tailored for startups and SMEs seeking growth-focused social media solutions. Swipe-worthy content, trending reels, and strategic monthly planning.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/vibrant-social-media-content-creation-sh-1773035468629-c86e61a3.png?_wi=2",              imageAlt: "Social Spot social media content"},
+              id: 2,
+              title: "Social Spot",              description: "Tailored for startups and SMEs seeking growth-focused social media solutions. Swipe-worthy content, trending reels, and strategic monthly planning.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/vibrant-social-media-content-creation-sh-1773035468629-c86e61a3.png?_wi=2",              imageAlt: "Social Spot social media content"
+            },
             {
-              id: "03",              title: "Cosmic Monkey Studios",              description: "High-end production house specializing in cinematic campaigns, luxury brand visuals, and VFX-driven content for premium clients.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-cinematic-production-still-from-a-high-1773035470369-68ca9538.png?_wi=2",              imageAlt: "Cosmic Monkey Studios cinematic production"},
+              id: 3,
+              title: "Cosmic Monkey Studios",              description: "High-end production house specializing in cinematic campaigns, luxury brand visuals, and VFX-driven content for premium clients.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-cinematic-production-still-from-a-high-1773035470369-68ca9538.png",              imageAlt: "Cosmic Monkey Studios cinematic production"
+            },
           ]}
           textboxLayout="default"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
           useInvertedBackground={false}
         />
       </div>
@@ -132,7 +132,7 @@ export default function AboutPage() {
           animationType="entrance-slide"
           background={{ variant: "plain" }}
           buttons={[
-            { text: "Start a Project", href: "/contact" },
+            { text: "Start a Project", href: "#contact" },
             { text: "View Portfolio", href: "/" },
           ]}
           useInvertedBackground={false}
@@ -140,12 +140,14 @@ export default function AboutPage() {
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase
+        <FooterMedia
           logoText="TG Entertainment"
           columns={footerColumns}
           copyrightText="© 2025 TG Entertainment. All rights reserved. Crafted with creativity and intelligence."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-collaborative-creative-team-of-diverse-1773035470076-7f8faaf6.png?_wi=5"
+          imageAlt="Creative team"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -3,33 +3,33 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import ContactText from "@/components/sections/contact/ContactText";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
 import Link from "next/link";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Home", id: "home" },
-    { name: "About", id: "about" },
-    { name: "Services", id: "services" },
-    { name: "Social Spot", id: "social-spot" },
-    { name: "Cosmic Monkey", id: "cosmic-monkey" },
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/#services" },
+    { name: "Social Spot", id: "/social-spot" },
+    { name: "Cosmic Monkey", id: "/cosmic-monkey" },
   ];
 
   const footerColumns = [
     {
       title: "Solutions",      items: [
         { label: "TG Entertainment", href: "/" },
-        { label: "Social Spot", href: "/" },
-        { label: "Cosmic Monkey", href: "/" },
-        { label: "Services", href: "/" },
+        { label: "Social Spot", href: "/social-spot" },
+        { label: "Cosmic Monkey", href: "/cosmic-monkey" },
+        { label: "Services", href: "/#services" },
       ],
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/" },
-        { label: "Our Process", href: "/" },
-        { label: "Team", href: "/" },
-        { label: "Contact", href: "/contact" },
+        { label: "About Us", href: "/#about" },
+        { label: "Our Process", href: "/#services" },
+        { label: "Team", href: "/#about" },
+        { label: "Contact", href: "/#contact" },
       ],
     },
     {
@@ -57,14 +57,8 @@ export default function ContactPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/" },
-            { name: "Services", id: "/" },
-            { name: "Social Spot", id: "/" },
-            { name: "Cosmic Monkey", id: "/" },
-          ]}
-          button={{ text: "Start Your Project", href: "/contact" }}
+          navItems={navItems}
+          button={{ text: "Start Your Project", href: "#contact" }}
           brandName="TG Entertainment"
           className=""
         />
@@ -76,20 +70,22 @@ export default function ContactPage() {
           animationType="entrance-slide"
           background={{ variant: "plain" }}
           buttons={[
-            { text: "Start Your Project", href: "/contact" },
-            { text: "Schedule a Consultation", href: "/contact" },
+            { text: "Start Your Project", href: "#contact" },
+            { text: "Schedule a Consultation", href: "#contact" },
           ]}
           useInvertedBackground={false}
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase
+        <FooterMedia
           columns={footerColumns}
           logoText="TG Entertainment"
           copyrightText="© 2025 TG Entertainment. All rights reserved. Crafted with creativity and intelligence."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-modern-contact-and-project-kickoff-vis-1773035469400-06c45202.png"
+          imageAlt="Contact and collaboration"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/cosmic-monkey/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import Link from 'next/link';
-import { Film, Award, Zap, TrendingUp } from 'lucide-react';
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import Link from "next/link";
+import { Film, Award, Zap, TrendingUp } from "lucide-react";
 
 export default function CosmicMonkeyPage() {
   return (
@@ -24,23 +24,23 @@ export default function CosmicMonkeyPage() {
       headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered 
+        <NavbarStyleCentered
           navItems={[
-            { name: "Home", id: "home" },
-            { name: "About", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Social Spot", id: "social-spot" },
-            { name: "Cosmic Monkey", id: "cosmic-monkey" }
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Services", id: "#services" },
+            { name: "Social Spot", id: "/social-spot" },
+            { name: "Cosmic Monkey", id: "/cosmic-monkey" },
           ]}
           button={{
-            text: "Start Your Project",            href: "contact"
+            text: "Start Your Project",            href: "#contact"
           }}
           brandName="TG Entertainment"
         />
       </div>
 
       <div id="cosmic-monkey-overview" data-section="cosmic-monkey-overview">
-        <FeatureCardThree
+        <FeatureCardEight
           title="Cosmic Monkey Studios"
           description="High-end production meets bold, original ideas. Time to let the ape out of the cage. Premium cinematography and visuals for luxury brands and enterprise clients."
           tag="High-End Production"
@@ -49,68 +49,64 @@ export default function CosmicMonkeyPage() {
           buttons={[
             {
               text: "Back to Home",              href: "/"
-            }
+            },
           ]}
           buttonAnimation="slide-up"
           features={[
             {
-              id: "01",              title: "Pre-Production",              description: "Strategic creative development, storyboarding, and production planning with cinematic vision.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-discovery-phase-visualizatio-1773035469417-75498901.png?_wi=3",              imageAlt: "Pre-production planning"
+              id: 1,
+              title: "Pre-Production",              description: "Strategic creative development, storyboarding, and production planning with cinematic vision.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-discovery-phase-visualizatio-1773035469417-75498901.png",              imageAlt: "Pre-production planning"
             },
             {
-              id: "02",              title: "Production",              description: "Cinematic cinematography, world-class direction, and premium on-set execution.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png?_wi=5",              imageAlt: "Professional production"
+              id: 2,
+              title: "Production",              description: "Cinematic cinematography, world-class direction, and premium on-set execution.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png",              imageAlt: "Professional production"
             },
             {
-              id: "03",              title: "Post-Production & VFX",              description: "Color grading, VFX, motion design, and sound—western advertising standards throughout.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-stunning-vfx-and-visual-effects-showca-1773035469368-320e3733.png?_wi=3",              imageAlt: "VFX and post-production"
-            }
+              id: 3,
+              title: "Post-Production & VFX",              description: "Color grading, VFX, motion design, and sound—western advertising standards throughout.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-stunning-vfx-and-visual-effects-showca-1773035469368-320e3733.png",              imageAlt: "VFX and post-production"
+            },
           ]}
           textboxLayout="split"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="cosmic-monkey-why-choose" data-section="cosmic-monkey-why-choose">
-        <MetricCardThree
+        <FeatureCardThree
           title="Why Cosmic Monkey Studios"
           description="Premium production partner for brands that refuse to compromise on quality or creativity."
           textboxLayout="default"
-          metrics={[
+          features={[
             {
-              id: "1",              icon: Award,
-              title: "Award-Winning",              value: "50+ Awards"
+              id: "1",              title: "Award-Winning",              description: "50+ Awards",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-cinematic-production-still-from-a-high-1773035470369-68ca9538.png",              imageAlt: "Award-winning"
             },
             {
-              id: "2",              icon: Film,
-              title: "Cinematic Quality",              value: "Hollywood Standard"
+              id: "2",              title: "Cinematic Quality",              description: "Hollywood Standard",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png",              imageAlt: "Cinematic quality"
             },
             {
-              id: "3",              icon: TrendingUp,
-              title: "Proven Results",              value: "2x ROI Average"
+              id: "3",              title: "Proven Results",              description: "2x ROI Average",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png",              imageAlt: "Proven results"
             },
             {
-              id: "4",              icon: Zap,
-              title: "Fast Execution",              value: "30% Quicker"
-            }
+              id: "4",              title: "Fast Execution",              description: "30% Quicker",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-visualization-of-ai-augm-1773035469134-2cc7be9e.png",              imageAlt: "Fast execution"
+            },
           ]}
+          gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
           useInvertedBackground={true}
         />
       </div>
 
       <div id="cosmic-monkey-contact" data-section="cosmic-monkey-contact">
-        <ContactText 
+        <ContactText
           text="Let's create something legendary. Bold ideas deserve bold execution. Schedule your production brief today."
           animationType="entrance-slide"
           buttons={[
-            { 
-              text: "Discuss Your Production", 
-              href: "contact" 
+            {
+              text: "Discuss Your Production",              href: "#contact"
+            },
+            {
+              text: "View Our Portfolio",              href: "/"
             },
-            { 
-              text: "View Our Portfolio", 
-              href: "/" 
-            }
           ]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}
@@ -118,7 +114,7 @@ export default function CosmicMonkeyPage() {
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase 
+        <FooterMedia
           logoText="TG Entertainment"
           columns={[
             {
@@ -126,29 +122,31 @@ export default function CosmicMonkeyPage() {
                 { label: "TG Entertainment", href: "/" },
                 { label: "Social Spot", href: "/social-spot" },
                 { label: "Cosmic Monkey", href: "/cosmic-monkey" },
-                { label: "Services", href: "/#services" }
-              ]
+                { label: "Services", href: "/#services" },
+              ],
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "/#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Our Process", href: "/#services" },
-                { label: "Team", href: "/#about" },
-                { label: "Contact", href: "/#contact" }
-              ]
+                { label: "Team", href: "/about" },
+                { label: "Contact", href: "#contact" },
+              ],
             },
             {
               title: "Connect",              items: [
                 { label: "Instagram", href: "https://instagram.com" },
                 { label: "LinkedIn", href: "https://linkedin.com" },
                 { label: "Dribbble", href: "https://dribbble.com" },
-                { label: "Email Us", href: "mailto:hello@tgentertainment.com" }
-              ]
-            }
+                { label: "Email Us", href: "mailto:hello@tgentertainment.com" },
+              ],
+            },
           ]}
           copyrightText="© 2025 TG Entertainment. All rights reserved. Crafted with creativity and intelligence."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png"
+          imageAlt="Production studio"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -3,30 +3,29 @@
 import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
-import AboutMetric from "@/components/sections/about/AboutMetric";
-import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
-import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
+import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
 import ContactText from "@/components/sections/contact/ContactText";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Zap, Rocket, Film, Target, TrendingUp, Users, Award, Globe, Quote } from "lucide-react";
+import { Sparkles, Zap, Rocket, Film, Target, TrendingUp, Users, Award, Globe, Quote, House, MessageSquareText, Settings, Hexagon, CircleDollarSign, ArrowLeftRight, Send } from "lucide-react";
 
 export default function HomePage() {
   const navItems = [
-    { name: "Home", id: "home" },
-    { name: "About", id: "about" },
-    { name: "Services", id: "services" },
-    { name: "Social Spot", id: "social-spot" },
-    { name: "Cosmic Monkey", id: "cosmic-monkey" },
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "#services" },
+    { name: "Social Spot", id: "/social-spot" },
+    { name: "Cosmic Monkey", id: "/cosmic-monkey" },
   ];
 
   const footerColumns = [
     {
       title: "Solutions",      items: [
         { label: "TG Entertainment", href: "/" },
-        { label: "Social Spot", href: "/#social-spot" },
-        { label: "Cosmic Monkey", href: "/#cosmic-monkey" },
+        { label: "Social Spot", href: "/social-spot" },
+        { label: "Cosmic Monkey", href: "/cosmic-monkey" },
         { label: "Services", href: "/#services" },
       ],
     },
@@ -35,7 +34,7 @@ export default function HomePage() {
         { label: "About Us", href: "/about" },
         { label: "Our Process", href: "/#services" },
         { label: "Team", href: "/about" },
-        { label: "Contact", href: "/#contact" },
+        { label: "Contact", href: "#contact" },
       ],
     },
     {
@@ -65,64 +64,65 @@ export default function HomePage() {
         <NavbarStyleCentered
           navItems={navItems}
           button={{
-            text: "Start Your Project",            href: "/contact"}}
+            text: "Start Your Project",            href: "#contact"
+          }}
           brandName="TG Entertainment"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitDoubleCarousel
-          title="Human Creativity × AI Efficiency"
-          description="We blend strategic creative ingenuity with intelligent AI augmentation to deliver premium content, campaigns, and visuals faster, smarter, and more efficiently than traditional agencies. From startups to enterprises, we're built for the future."
-          tag="Next-Gen Creative Agency"
+        <HeroBillboardDashboard
+          title="Next-Gen Creative Agency"
+          description="We blend strategic creative ingenuity with intelligent AI augmentation to deliver premium content, campaigns, and visuals faster, smarter, and more efficiently than traditional agencies."
+          background={{ variant: "radial-gradient" }}
+          tag="Creative Excellence"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          background={{ variant: "plain" }}
-          leftCarouselItems={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-stunning-luxury-automotive-advertiseme-1773035468497-78e1558e.png",              imageAlt: "Luxury automotive campaign production"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-premium-hospitality-brand-visual-showi-1773035469305-002a2aa1.png",              imageAlt: "Premium hospitality brand visual"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sleek-creative-agency-workspace-with-m-1773035469446-f79fbb53.png?_wi=1",              imageAlt: "Creative studio workspace"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png?_wi=1",              imageAlt: "Professional film production setup"},
-          ]}
-          rightCarouselItems={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-fashion-brand-campaign-v-1773035469241-7690ec4f.png?_wi=1",              imageAlt: "Fashion brand editorial campaign"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-cutting-edge-technology-product-showca-1773035468902-4fe127c8.png",              imageAlt: "Technology product showcase"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-visualization-of-ai-augm-1773035469134-2cc7be9e.png?_wi=1",              imageAlt: "AI-augmented creative process"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-cinematic-production-still-from-a-high-1773035470369-68ca9538.png?_wi=1",              imageAlt: "Cinematic production visual"},
-          ]}
           buttons={[
-            { text: "Explore Our Work", href: "/about" },
-            { text: "Start a Project", href: "/contact" },
+            { text: "Explore Our Work", href: "#services" },
+            { text: "Start a Project", href: "#contact" },
           ]}
           buttonAnimation="slide-up"
-          carouselPosition="right"
+          dashboard={{
+            title: "TG Entertainment Metrics",            logoIcon: Hexagon,
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sleek-creative-agency-workspace-with-m-1773035469446-f79fbb53.png?_wi=1",            buttons: [{ text: "Dashboard", href: "#" }, { text: "Export", href: "#" }],
+            sidebarItems: [{ icon: House, active: true }, { icon: MessageSquareText }, { icon: Settings }],
+            stats: [
+              { title: "Campaigns", values: [500, 550, 600], description: "Launched campaigns." },
+              { title: "Brands", values: [150, 160, 175], description: "Brands elevated." },
+              { title: "Team", values: [100, 110, 120], description: "Creative professionals." },
+            ],
+            chartTitle: "Growth Trend",            chartData: [{ value: 50 }, { value: 30 }, { value: 70 }, { value: 40 }, { value: 90 }],
+            listTitle: "Recent Projects",            listItems: [
+              { icon: Rocket, title: "Social Spot Launch", status: "Completed" },
+              { icon: Film, title: "Cosmic Monkey Campaign", status: "In Progress" },
+              { icon: Zap, title: "AI Workflow Integration", status: "Completed" },
+            ],
+          }}
         />
       </div>
 
       <div id="about" data-section="about">
-        <AboutMetric
+        <MetricSplitMediaAbout
           title="We are TG Entertainment: A creative agency redefining what's possible when human brilliance meets intelligent automation."
+          description="From strategic planning to premium execution, we deliver comprehensive creative solutions that combine artistic excellence with AI-powered efficiency."
+          tag="Our Approach"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
           metrics={[
-            { icon: Zap, label: "Campaigns Launched", value: "500+" },
-            { icon: Rocket, label: "Brands Elevated", value: "150+" },
-            { icon: Globe, label: "Global Reach", value: "25+Countries" },
-            { icon: Award, label: "Industry Awards", value: "75+" },
+            { value: "500+", title: "Campaigns Launched" },
+            { value: "150+", title: "Brands Elevated" },
           ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-collaborative-creative-team-of-diverse-1773035470076-7f8faaf6.png?_wi=1"
+          imageAlt="Creative team collaboration"
+          mediaAnimation="slide-up"
           metricsAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="services" data-section="services">
-        <FeatureCardThree
+        <FeatureCardEight
           title="Our Services"
           description="Comprehensive creative solutions designed for modern businesses seeking premium quality with intelligent efficiency."
           tag="What We Deliver"
@@ -130,113 +130,137 @@ export default function HomePage() {
           tagAnimation="slide-up"
           features={[
             {
-              id: "01",              title: "Strategy & Branding",              description: "AI-informed market analysis, brand positioning, and strategic direction that sets you apart from competitors.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png?_wi=1",              imageAlt: "Strategic planning and brand strategy"},
+              id: 1,
+              title: "Strategy & Branding",              description: "AI-informed market analysis, brand positioning, and strategic direction that sets you apart from competitors.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png?_wi=1",              imageAlt: "Strategic planning and brand strategy"
+            },
             {
-              id: "02",              title: "Design & Creative",              description: "Premium visual design, UX/UI, and creative direction optimized for conversions and brand impact.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-collaborative-creative-team-of-diverse-1773035470076-7f8faaf6.png?_wi=1",              imageAlt: "Creative design process"},
+              id: 2,
+              title: "Design & Creative",              description: "Premium visual design, UX/UI, and creative direction optimized for conversions and brand impact.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-collaborative-creative-team-of-diverse-1773035470076-7f8faaf6.png?_wi=2",              imageAlt: "Creative design process"
+            },
             {
-              id: "03",              title: "Production & Execution",              description: "World-class film, photography, and digital production with cutting-edge technology and artistic excellence.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png?_wi=2",              imageAlt: "Professional production setup"},
+              id: 3,
+              title: "Production & Execution",              description: "World-class film, photography, and digital production with cutting-edge technology and artistic excellence.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png?_wi=1",              imageAlt: "Professional production setup"
+            },
             {
-              id: "04",              title: "AI-Augmented Workflows",              description: "Intelligent automation that accelerates delivery without compromising creativity or quality.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-visualization-of-ai-augm-1773035469134-2cc7be9e.png?_wi=2",              imageAlt: "AI creative augmentation"},
+              id: 4,
+              title: "AI-Augmented Workflows",              description: "Intelligent automation that accelerates delivery without compromising creativity or quality.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-visualization-of-ai-augm-1773035469134-2cc7be9e.png?_wi=1",              imageAlt: "AI creative augmentation"
+            },
           ]}
           textboxLayout="default"
-          gridVariant="four-items-2x2-equal-grid"
-          animationType="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="social-spot-overview" data-section="social-spot-overview">
-        <FeatureCardThree
+        <FeatureCardEight
           title="Social Spot"
           description="The creative spark startups need to stand out. Growth-focused social media solutions that drive engagement and build brands."
           tag="For Startups & SMEs"
           tagIcon={Rocket}
           tagAnimation="slide-up"
-          buttons={[{ text: "Explore Social Spot", href: "/about" }]}
+          buttons={[{ text: "Explore Social Spot", href: "/social-spot" }]}
           buttonAnimation="slide-up"
           features={[
             {
-              id: "01",              title: "Swipe-Worthy Content",              description: "Thumb-stopping designs and copywriting that captures attention in crowded feeds.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/vibrant-social-media-content-creation-sh-1773035468629-c86e61a3.png?_wi=1",              imageAlt: "Social media content showcase"},
+              id: 1,
+              title: "Swipe-Worthy Content",              description: "Thumb-stopping designs and copywriting that captures attention in crowded feeds.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/vibrant-social-media-content-creation-sh-1773035468629-c86e61a3.png?_wi=1",              imageAlt: "Social media content showcase"
+            },
             {
-              id: "02",              title: "Reels & Short-Form Video",              description: "Trending video content, transitions, and formats optimized for viral potential.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-fashion-brand-campaign-v-1773035469241-7690ec4f.png?_wi=2",              imageAlt: "Video content creation"},
+              id: 2,
+              title: "Reels & Short-Form Video",              description: "Trending video content, transitions, and formats optimized for viral potential.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-fashion-brand-campaign-v-1773035469241-7690ec4f.png",              imageAlt: "Video content creation"
+            },
             {
-              id: "03",              title: "Monthly Content Strategy",              description: "Strategic planning, scheduling, and engagement management tailored to your growth goals.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png?_wi=2",              imageAlt: "Content strategy planning"},
+              id: 3,
+              title: "Monthly Content Strategy",              description: "Strategic planning, scheduling, and engagement management tailored to your growth goals.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png?_wi=2",              imageAlt: "Content strategy planning"
+            },
           ]}
           textboxLayout="split"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="cosmic-monkey-overview" data-section="cosmic-monkey-overview">
-        <FeatureCardThree
+        <FeatureCardEight
           title="Cosmic Monkey Studios"
           description="High-end production meets bold, original ideas. Time to let the ape out of the cage. Premium cinematography and visuals for luxury brands and enterprise clients."
           tag="High-End Production"
           tagIcon={Film}
           tagAnimation="slide-up"
-          buttons={[{ text: "Explore Cosmic Monkey", href: "/about" }]}
+          buttons={[{ text: "Explore Cosmic Monkey", href: "/cosmic-monkey" }]}
           buttonAnimation="slide-up"
           features={[
             {
-              id: "01",              title: "Pre-Production",              description: "Strategic creative development, storyboarding, and production planning with cinematic vision.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-discovery-phase-visualizatio-1773035469417-75498901.png?_wi=1",              imageAlt: "Pre-production planning"},
+              id: 1,
+              title: "Pre-Production",              description: "Strategic creative development, storyboarding, and production planning with cinematic vision.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-discovery-phase-visualizatio-1773035469417-75498901.png",              imageAlt: "Pre-production planning"
+            },
             {
-              id: "02",              title: "Production",              description: "Cinematic cinematography, world-class direction, and premium on-set execution.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png?_wi=3",              imageAlt: "Professional production"},
+              id: 2,
+              title: "Production",              description: "Cinematic cinematography, world-class direction, and premium on-set execution.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png?_wi=2",              imageAlt: "Professional production"
+            },
             {
-              id: "03",              title: "Post-Production & VFX",              description: "Color grading, VFX, motion design, and sound—western advertising standards throughout.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-stunning-vfx-and-visual-effects-showca-1773035469368-320e3733.png?_wi=1",              imageAlt: "VFX and post-production"},
+              id: 3,
+              title: "Post-Production & VFX",              description: "Color grading, VFX, motion design, and sound—western advertising standards throughout.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-stunning-vfx-and-visual-effects-showca-1773035469368-320e3733.png",              imageAlt: "VFX and post-production"
+            },
           ]}
           textboxLayout="split"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="why-choose-us" data-section="why-choose-us">
-        <MetricCardThree
+        <FeatureCardEight
           title="Why Partner with TG Entertainment"
-          description="We bring together strategic thinking, creative excellence, and intelligent automation."
+          description="We bring together strategic thinking, creative excellence, and intelligent automation to deliver results that matter."
           textboxLayout="default"
-          metrics={[
-            { id: "1", icon: Target, title: "Premium Quality", value: "Always" },
-            { id: "2", icon: Zap, title: "Faster Delivery", value: "40% Quicker" },
-            { id: "3", icon: TrendingUp, title: "Better Results", value: "Proven ROI" },
-            { id: "4", icon: Users, title: "Expert Team", value: "100+ Creatives" },
+          features={[
+            {
+              id: 1,
+              title: "Premium Quality",              description: "Always delivering excellence without compromise.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-high-end-film-and-video-production-set-1773035468744-d275f092.png?_wi=3",              imageAlt: "Quality production"
+            },
+            {
+              id: 2,
+              title: "Faster Delivery",              description: "40% quicker turnaround with AI-augmented workflows.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-visualization-of-ai-augm-1773035469134-2cc7be9e.png?_wi=2",              imageAlt: "AI efficiency"
+            },
+            {
+              id: 3,
+              title: "Better Results",              description: "Proven ROI and measurable impact on your brand.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png?_wi=3",              imageAlt: "Strategic results"
+            },
+            {
+              id: 4,
+              title: "Expert Team",              description: "100+ creative professionals dedicated to your success.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-collaborative-creative-team-of-diverse-1773035470076-7f8faaf6.png?_wi=3",              imageAlt: "Expert team"
+            },
           ]}
-          animationType="slide-up"
           useInvertedBackground={true}
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardThirteen
+        <TestimonialCardSix
           title="What Our Clients Say"
           description="Hear from brands and businesses that have transformed with TG Entertainment."
           tag="Testimonials"
           tagIcon={Quote}
           tagAnimation="slide-up"
           textboxLayout="default"
-          showRating={true}
           testimonials={[
             {
-              id: "1",              name: "Sarah Chen",              handle: "CEO, TechFlow",              testimonial: "TG Entertainment transformed our brand from concept to market in record time. The AI-augmented workflow meant premium quality without the extended timeline. Incredible partners.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-confident-fem-1773035467956-f9817eeb.png?_wi=1",              imageAlt: "Sarah Chen, CEO"},
+              id: "1",              name: "Sarah Chen",              handle: "CEO, TechFlow",              testimonial: "TG Entertainment transformed our brand from concept to market in record time. The AI-augmented workflow meant premium quality without the extended timeline. Incredible partners.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-confident-fem-1773035467956-f9817eeb.png?_wi=1",              imageAlt: "Sarah Chen, CEO"
+            },
             {
-              id: "2",              name: "Marcus Rodriguez",              handle: "Founder, Elevate Creative",              testimonial: "Social Spot took our startup's social presence from stagnant to viral. The strategic content and execution were exactly what we needed to scale rapidly.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-male-creative-1773035468719-2df96ad5.png?_wi=1",              imageAlt: "Marcus Rodriguez, Founder"},
+              id: "2",              name: "Marcus Rodriguez",              handle: "Founder, Elevate Creative",              testimonial: "Social Spot took our startup's social presence from stagnant to viral. The strategic content and execution were exactly what we needed to scale rapidly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-male-creative-1773035468719-2df96ad5.png?_wi=1",              imageAlt: "Marcus Rodriguez, Founder"
+            },
             {
-              id: "3",              name: "Victoria Okafor",              handle: "Creative Director, Luxe Brands",              testimonial: "Cosmic Monkey Studios delivered a cinematic campaign that won us industry awards. Their understanding of premium production and bold creative direction is unmatched.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-female-creati-1773035468053-03320c50.png",              imageAlt: "Victoria Okafor, Creative Director"},
+              id: "3",              name: "Victoria Okafor",              handle: "Creative Director, Luxe Brands",              testimonial: "Cosmic Monkey Studios delivered a cinematic campaign that won us industry awards. Their understanding of premium production and bold creative direction is unmatched.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-female-creati-1773035468053-03320c50.png",              imageAlt: "Victoria Okafor, Creative Director"
+            },
             {
-              id: "4",              name: "James Sullivan",              handle: "CMO, Global Enterprises",              testimonial: "Working with TG Entertainment meant strategic thinking combined with cutting-edge execution. They didn't just deliver—they elevated our entire marketing approach.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-male-marketin-1773035467882-80e90ae3.png",              imageAlt: "James Sullivan, CMO"},
+              id: "4",              name: "James Sullivan",              handle: "CMO, Global Enterprises",              testimonial: "Working with TG Entertainment meant strategic thinking combined with cutting-edge execution. They didn't just deliver—they elevated our entire marketing approach.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-male-marketin-1773035467882-80e90ae3.png",              imageAlt: "James Sullivan, CMO"
+            },
             {
-              id: "5",              name: "Priya Kapoor",              handle: "Director, Digital Innovation",              testimonial: "The AI-augmented workflows reduced our project timelines by 40% without compromising quality. That's the kind of smart partnership we've been searching for.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-confident-fem-1773035467956-f9817eeb.png?_wi=2",              imageAlt: "Priya Kapoor, Director"},
+              id: "5",              name: "Priya Kapoor",              handle: "Director, Digital Innovation",              testimonial: "The AI-augmented workflows reduced our project timelines by 40% without compromising quality. That's the kind of smart partnership we've been searching for.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-confident-fem-1773035467956-f9817eeb.png?_wi=2",              imageAlt: "Priya Kapoor, Director"
+            },
             {
-              id: "6",              name: "David Park",              handle: "Founder, StartupX",              testimonial: "Social Spot's monthly strategy and execution gave us the competitive edge we needed. Finally, a creative partner who gets the startup mentality.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-male-creative-1773035468719-2df96ad5.png?_wi=2",              imageAlt: "David Park, Founder"},
+              id: "6",              name: "David Park",              handle: "Founder, StartupX",              testimonial: "Social Spot's monthly strategy and execution gave us the competitive edge we needed. Finally, a creative partner who gets the startup mentality.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/professional-headshot-of-a-male-creative-1773035468719-2df96ad5.png?_wi=2",              imageAlt: "David Park, Founder"
+            },
           ]}
           animationType="slide-up"
           useInvertedBackground={false}
@@ -249,20 +273,22 @@ export default function HomePage() {
           animationType="entrance-slide"
           background={{ variant: "plain" }}
           buttons={[
-            { text: "Start Your Project", href: "/contact" },
-            { text: "Schedule a Consultation", href: "/contact" },
+            { text: "Start Your Project", href: "#contact" },
+            { text: "Schedule a Consultation", href: "#contact" },
           ]}
           useInvertedBackground={false}
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase
+        <FooterMedia
           logoText="TG Entertainment"
           columns={footerColumns}
           copyrightText="© 2025 TG Entertainment. All rights reserved. Crafted with creativity and intelligence."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sleek-creative-agency-workspace-with-m-1773035469446-f79fbb53.png?_wi=2"
+          imageAlt="TG Entertainment Studio"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/social-spot/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import Link from 'next/link';
-import { Rocket, Target, Zap, TrendingUp } from 'lucide-react';
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import Link from "next/link";
+import { Rocket, Target, Zap, TrendingUp } from "lucide-react";
 
 export default function SocialSpotPage() {
   return (
@@ -24,23 +24,23 @@ export default function SocialSpotPage() {
       headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered 
+        <NavbarStyleCentered
           navItems={[
-            { name: "Home", id: "home" },
-            { name: "About", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Social Spot", id: "social-spot" },
-            { name: "Cosmic Monkey", id: "cosmic-monkey" }
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Services", id: "#services" },
+            { name: "Social Spot", id: "/social-spot" },
+            { name: "Cosmic Monkey", id: "/cosmic-monkey" },
           ]}
           button={{
-            text: "Start Your Project",            href: "contact"
+            text: "Start Your Project",            href: "#contact"
           }}
           brandName="TG Entertainment"
         />
       </div>
 
       <div id="social-spot-overview" data-section="social-spot-overview">
-        <FeatureCardThree
+        <FeatureCardEight
           title="Social Spot"
           description="The creative spark startups need to stand out. Growth-focused social media solutions that drive engagement and build brands."
           tag="For Startups & SMEs"
@@ -49,68 +49,64 @@ export default function SocialSpotPage() {
           buttons={[
             {
               text: "Back to Home",              href: "/"
-            }
+            },
           ]}
           buttonAnimation="slide-up"
           features={[
             {
-              id: "01",              title: "Swipe-Worthy Content",              description: "Thumb-stopping designs and copywriting that captures attention in crowded feeds.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/vibrant-social-media-content-creation-sh-1773035468629-c86e61a3.png?_wi=3",              imageAlt: "Social media content showcase"
+              id: 1,
+              title: "Swipe-Worthy Content",              description: "Thumb-stopping designs and copywriting that captures attention in crowded feeds.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/vibrant-social-media-content-creation-sh-1773035468629-c86e61a3.png",              imageAlt: "Social media content showcase"
             },
             {
-              id: "02",              title: "Reels & Short-Form Video",              description: "Trending video content, transitions, and formats optimized for viral potential.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-fashion-brand-campaign-v-1773035469241-7690ec4f.png?_wi=3",              imageAlt: "Video content creation"
+              id: 2,
+              title: "Reels & Short-Form Video",              description: "Trending video content, transitions, and formats optimized for viral potential.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-fashion-brand-campaign-v-1773035469241-7690ec4f.png",              imageAlt: "Video content creation"
             },
             {
-              id: "03",              title: "Monthly Content Strategy",              description: "Strategic planning, scheduling, and engagement management tailored to your growth goals.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png?_wi=3",              imageAlt: "Content strategy planning"
-            }
+              id: 3,
+              title: "Monthly Content Strategy",              description: "Strategic planning, scheduling, and engagement management tailored to your growth goals.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png",              imageAlt: "Content strategy planning"
+            },
           ]}
           textboxLayout="split"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="social-spot-why-choose" data-section="social-spot-why-choose">
-        <MetricCardThree
+        <FeatureCardThree
           title="Why Social Spot Works"
           description="Built specifically for startups and SMEs who need to move fast without sacrificing quality."
           textboxLayout="default"
-          metrics={[
+          features={[
             {
-              id: "1",              icon: Zap,
-              title: "Fast Turnaround",              value: "Weekly Delivery"
+              id: "1",              title: "Fast Turnaround",              description: "Weekly Delivery",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/vibrant-social-media-content-creation-sh-1773035468629-c86e61a3.png",              imageAlt: "Fast turnaround"
             },
             {
-              id: "2",              icon: Target,
-              title: "High Engagement",              value: "3x Better CTR"
+              id: "2",              title: "High Engagement",              description: "3x Better CTR",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-strategic-planning-visualization-showi-1773035469617-c5565f96.png",              imageAlt: "High engagement"
             },
             {
-              id: "3",              icon: TrendingUp,
-              title: "Growth Focused",              value: "100% ROI Focus"
+              id: "3",              title: "Growth Focused",              description: "100% ROI Focus",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-collaborative-creative-team-of-diverse-1773035470076-7f8faaf6.png",              imageAlt: "Growth focused"
             },
             {
-              id: "4",              icon: Rocket,
-              title: "Startup Mentality",              value: "Agile & Flexible"
-            }
+              id: "4",              title: "Startup Mentality",              description: "Agile & Flexible",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/a-sophisticated-visualization-of-ai-augm-1773035469134-2cc7be9e.png",              imageAlt: "Startup mentality"
+            },
           ]}
+          gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
           useInvertedBackground={true}
         />
       </div>
 
       <div id="social-spot-contact" data-section="social-spot-contact">
-        <ContactText 
+        <ContactText
           text="Ready to elevate your social presence? Let's create content that stops the scroll and converts."
           animationType="entrance-slide"
           buttons={[
-            { 
-              text: "Start With Social Spot", 
-              href: "contact" 
+            {
+              text: "Start With Social Spot",              href: "#contact"
+            },
+            {
+              text: "View Our Work",              href: "/"
             },
-            { 
-              text: "View Our Work", 
-              href: "/" 
-            }
           ]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}
@@ -118,7 +114,7 @@ export default function SocialSpotPage() {
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase 
+        <FooterMedia
           logoText="TG Entertainment"
           columns={[
             {
@@ -126,29 +122,31 @@ export default function SocialSpotPage() {
                 { label: "TG Entertainment", href: "/" },
                 { label: "Social Spot", href: "/social-spot" },
                 { label: "Cosmic Monkey", href: "/cosmic-monkey" },
-                { label: "Services", href: "/#services" }
-              ]
+                { label: "Services", href: "/#services" },
+              ],
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "/#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Our Process", href: "/#services" },
-                { label: "Team", href: "/#about" },
-                { label: "Contact", href: "/#contact" }
-              ]
+                { label: "Team", href: "/about" },
+                { label: "Contact", href: "#contact" },
+              ],
             },
             {
               title: "Connect",              items: [
                 { label: "Instagram", href: "https://instagram.com" },
                 { label: "LinkedIn", href: "https://linkedin.com" },
                 { label: "Dribbble", href: "https://dribbble.com" },
-                { label: "Email Us", href: "mailto:hello@tgentertainment.com" }
-              ]
-            }
+                { label: "Email Us", href: "mailto:hello@tgentertainment.com" },
+              ],
+            },
           ]}
           copyrightText="© 2025 TG Entertainment. All rights reserved. Crafted with creativity and intelligence."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhBv7evUTHaOIePB7DlawcPUSp/vibrant-social-media-content-creation-sh-1773035468629-c86e61a3.png"
+          imageAlt="Social media content"
         />
       </div>
     </ThemeProvider>
   );
-}
+}