Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -42,7 +42,7 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroSplitDualMedia
-          title="Transform Your Brand With Expert Marketing"
+          title="Transform Your Brand"
           description="Strategic marketing campaigns designed to elevate your brand presence and drive measurable business growth."
           tag="Marketing Solutions"
           tagIcon={Sparkles}
@@ -55,7 +55,7 @@ export default function LandingPage() {
           background={{ variant: "plain" }}
           mediaItems={[
             {
-              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=1",              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"
             },
             {
               imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2",              imageAlt: "Business strategy planning session"
@@ -64,7 +64,64 @@ export default function LandingPage() {
           mediaAnimation="slide-up"
           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">
@@ -103,7 +160,7 @@ 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: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=3",                  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: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=4",                  imageAlt: "Social media content grid"
@@ -245,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);