From 7eb79b9c95d0dfb7821470fb63e083ca0f93c45d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 06:01:48 +0000
Subject: [PATCH] Update src/app/cosmic-monkey/page.tsx

---
 src/app/cosmic-monkey/page.tsx | 99 +++++++++++++++-------------------
 1 file changed, 42 insertions(+), 57 deletions(-)

diff --git a/src/app/cosmic-monkey/page.tsx b/src/app/cosmic-monkey/page.tsx
index 5ff58fe..422d400 100644
--- a/src/app/cosmic-monkey/page.tsx
+++ b/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,22 @@ 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"
@@ -48,69 +47,53 @@ export default function CosmicMonkeyPage() {
           tagAnimation="slide-up"
           buttons={[
             {
-              text: "Back to Home",              href: "/"
-            }
+              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: "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",              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: "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",              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: "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",              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: "View Our Portfolio", 
-              href: "/" 
-            }
+            {
+              text: "Discuss Your Production",              href: "#contact"},
+            {
+              text: "View Our Portfolio",              href: "/"},
           ]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}
@@ -118,7 +101,7 @@ export default function CosmicMonkeyPage() {
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase 
+        <FooterMedia
           logoText="TG Entertainment"
           columns={[
             {
@@ -126,29 +109,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: "Our Process", href: "/#services" },
                 { label: "Team", href: "/#about" },
-                { label: "Contact", href: "/#contact" }
-              ]
+                { 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>
   );
-}
\ No newline at end of file
+}