Update src/app/page.tsx

Merge version_4 into main

src/app/layout.tsx

@@ -1407,4 +1407,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
@@ -41,10 +41,10 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardRotatedCarousel
+        <HeroSplitDualMedia
-          title="Elevate Your Brand Through Strategic Marketing"
+          title="Transform Your Brand"
-          description="We create targeted marketing campaigns that drive growth, increase brand awareness, and convert customers. Partner with our award-winning team to transform your vision into measurable results."
+          description="Strategic marketing campaigns designed to elevate your brand presence and drive measurable business growth."
-          tag="Marketing Excellence"
+          tag="Marketing Solutions"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
@@ -53,36 +53,82 @@ export default function LandingPage() {
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "plain" }}
-          carouselItems={[
+          mediaItems={[
             {
-              id: "1",              imageSrc: "http://img.b2bpic.net/free-photo/laptop-computer-with-company-profit-progress-screen_482257-77678.jpg",              imageAlt: "Marketing dashboard with analytics"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/uploaded-1772445436332-4x4u1wfq.png",              imageAlt: "Marketing dashboard with analytics"
             },
             {
-              id: "2",              imageSrc: "http://img.b2bpic.net/free-photo/professionals-present-financial-charts-meeting_482257-121150.jpg",              imageAlt: "Business strategy planning session"
+              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2",              imageAlt: "Business strategy planning session"
-            },
-            {
-              id: "3",              imageSrc: "http://img.b2bpic.net/free-photo/young-coworkers-sharing-concepts-together_329181-19755.jpg",              imageAlt: "Creative team brainstorming"
-            },
-            {
-              id: "4",              imageSrc: "http://img.b2bpic.net/free-photo/media-marketing-internet-digital-global_53876-138500.jpg",              imageAlt: "Social media marketing strategy"
-            },
-            {
-              id: "5",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg",              imageAlt: "Creative design and UI"
-            },
-            {
-              id: "6",              imageSrc: "http://img.b2bpic.net/free-photo/growth-status-technology-online-website-concept_53876-21396.jpg",              imageAlt: "Business growth metrics"
             }
           ]}
-          autoPlay={true}
+          mediaAnimation="slide-up"
-          autoPlayInterval={4000}
+          rating={5}
+          ratingText="Trusted by industry leaders"
+          mediaItemClassName="relative group"
+          imageClassName="relative w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          mediaWrapperClassName="relative rounded-lg overflow-hidden"
         />
+        <style jsx>{`
+          :global(.hero-kpi-overlay) {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, rgba(30, 41, 59, 0.6) 100%);
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1.5rem;
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            opacity: 0;
+            group-hover:opacity: 100;
+            transition: opacity 0.3s ease;
+            z-index: 10;
+          }
+
+          :global(.kpi-card) {
+            flex: 1;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 0.5rem;
+            padding: 1rem;
+            text-align: center;
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            transition: all 0.3s ease;
+          }
+
+          :global(.kpi-card:hover) {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.2);
+            transform: translateY(-2px);
+          }
+
+          :global(.kpi-value) {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-cta);
+            margin-bottom: 0.5rem;
+          }
+
+          :global(.kpi-label) {
+            font-size: 0.875rem;
+            color: rgba(255, 255, 255, 0.7);
+            font-weight: 500;
+          }
+        `}</style>
       </div>
 
       <div id="about" data-section="about">
         <TextSplitAbout
           title="Why Choose Nexus Marketing"
           description={[
-            "At Nexus Marketing, we combine data-driven insights with creative excellence to deliver campaigns that resonate with your audience and drive real business growth. Our team of strategists, designers, and copywriters work collaboratively to ensure every aspect of your marketing aligns with your brand vision and business goals.",            "With over a decade of experience across industries, we've helped hundreds of brands achieve their marketing objectives through innovative strategies, compelling storytelling, and measurable results. We don't just create campaigns—we create connections."
+            "At Nexus Marketing, we combine data-driven insights with creative excellence to deliver campaigns that resonate with your audience and drive real business growth."
           ]}
           buttons={[
             { text: "Explore Our Services", href: "#services" }
@@ -103,10 +149,10 @@ export default function LandingPage() {
               title: "Digital Marketing Strategy",              description: "Develop comprehensive digital strategies that align with your business goals and maximize ROI across all channels.",              icon: Target,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-vector/digital-marketing-agency-corporate-social-media-banner-instagram-post-template_1435-1951.jpg?_wi=1",                  imageAlt: "Digital marketing strategy visualization"
+                  imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=1",                  imageAlt: "Digital marketing strategy visualization"
                 },
                 {
-                  imageSrc: "http://img.b2bpic.net/free-vector/search-engine-optimization_24908-55724.jpg?_wi=1",                  imageAlt: "Analytics dashboard"
+                  imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=2",                  imageAlt: "Analytics dashboard"
                 }
               ]
             },
@@ -114,10 +160,10 @@ export default function LandingPage() {
               title: "Content Creation & Management",              description: "Craft compelling content that engages your audience, establishes authority, and drives meaningful conversations around your brand.",              icon: PenTool,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg?_wi=1",                  imageAlt: "Content creation workspace"
+                  imageSrc: "http://img.b2bpic.net/free-photo/focused-team-leader-presenting-marketing-plan-interested-multiracial-coworkers-serious-speaker-boss-executive-business-trainer-explaining-development-strategy-motivated-mixed-race-employees_482257-13781.jpg?id=17983464",                  imageAlt: "Content creation workspace"
                 },
                 {
-                  imageSrc: "http://img.b2bpic.net/free-vector/digital-marketing-agency-corporate-social-media-banner-instagram-post-template_1435-1951.jpg?_wi=2",                  imageAlt: "Social media content grid"
+                  imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=4",                  imageAlt: "Social media content grid"
                 }
               ]
             },
@@ -125,10 +171,10 @@ export default function LandingPage() {
               title: "SEO & Search Marketing",              description: "Boost your online visibility with data-driven SEO strategies and targeted search campaigns that attract qualified leads.",              icon: Search,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-vector/search-engine-optimization_24908-55724.jpg?_wi=2",                  imageAlt: "SEO analytics and metrics"
+                  imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=3",                  imageAlt: "SEO analytics and metrics"
                 },
                 {
-                  imageSrc: "http://img.b2bpic.net/free-vector/digital-marketing-agency-corporate-social-media-banner-instagram-post-template_1435-1951.jpg?_wi=3",                  imageAlt: "Search engine optimization"
+                  imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=4",                  imageAlt: "Search engine optimization"
                 }
               ]
             },
@@ -136,10 +182,10 @@ export default function LandingPage() {
               title: "Brand Identity & Design",              description: "Build a distinctive brand identity that resonates with your target audience and sets you apart from competitors.",              icon: Palette,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-vector/modern-business-card-template-with-geometric-design_23-2147941082.jpg",                  imageAlt: "Brand design and identity"
+                  imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=1",                  imageAlt: "Brand design and identity"
                 },
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg?_wi=2",                  imageAlt: "Creative brand assets"
+                  imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=2",                  imageAlt: "Creative brand assets"
                 }
               ]
             }
@@ -187,22 +233,22 @@ export default function LandingPage() {
           author="Sarah Mitchell, CEO of TechFlow Solutions"
           avatars={[
             {
-              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Sarah Mitchell"
+              src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              alt: "Sarah Mitchell"
             },
             {
-              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Team member 2"
+              src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              alt: "Team member 2"
             },
             {
-              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Team member 3"
+              src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              alt: "Team member 3"
             },
             {
-              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Team member 4"
+              src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              alt: "Team member 4"
             },
             {
-              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Team member 5"
+              src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              alt: "Team member 5"
             },
             {
-              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Team member 6"
+              src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              alt: "Team member 6"
             }
           ]}
           ratingAnimation="slide-up"
@@ -256,6 +302,44 @@ export default function LandingPage() {
           copyrightText="© 2025 Nexus Marketing. All rights reserved."
         />
       </div>
+
+      <script dangerouslySetInnerHTML={{
+        __html: `
+        // Enhanced glassmorphic overlay with KPI cards on hover
+        document.addEventListener('DOMContentLoaded', function() {
+          const heroSection = document.getElementById('hero');
+          if (!heroSection) return;
+
+          const mediaItems = heroSection.querySelectorAll('[class*="mediaItem"]');
+          
+          mediaItems.forEach(item => {
+            const imageElement = item.querySelector('img');
+            if (!imageElement) return;
+
+            // Create overlay container
+            const overlay = document.createElement('div');
+            overlay.className = 'hero-kpi-overlay';
+
+            // Create KPI cards
+            const kpiCards = [
+              { value: '250+', label: 'Campaigns Launched' },
+              { value: '156%', label: 'Avg ROI Increase' }
+            ];
+
+            kpiCards.forEach(kpi => {
+              const card = document.createElement('div');
+              card.className = 'kpi-card';
+              card.innerHTML = 
+                '<div class="kpi-value">' + kpi.value + '</div>' +
+                '<div class="kpi-label">' + kpi.label + '</div>';
+              overlay.appendChild(card);
+            });
+
+            item.appendChild(overlay);
+          });
+        });
+        `
+      }} />
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
+  /* --background: #0a0a0a;;;
-  --card: #ffffff;;
+  --card: #1a1a1a;;;
-  --foreground: #1c1c1c;;
+  --foreground: #fffffae6;;;
-  --primary-cta: #6139e6;;
+  --primary-cta: #fde047;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #1a1a1a;;;
-  --accent: #6139e6;;
+  --accent: #737373;;;
-  --background-accent: #b3a8e8;; */
+  --background-accent: #737373;;; */
 
-  --background: #f5f5f5;;
+  --background: #0a0a0a;;;
-  --card: #ffffff;;
+  --card: #1a1a1a;;;
-  --foreground: #1c1c1c;;
+  --foreground: #fffffae6;;;
-  --primary-cta: #6139e6;;
+  --primary-cta: #fde047;;;
-  --primary-cta-text: #f5f5f5;;
+  --primary-cta-text: #0a0a0a;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #1a1a1a;;;
-  --secondary-cta-text: #1c1c1c;;
+  --secondary-cta-text: #fffffae6;;;
-  --accent: #6139e6;;
+  --accent: #737373;;;
-  --background-accent: #b3a8e8;;
+  --background-accent: #737373;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);