Update src/app/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -9,6 +9,7 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import { Sparkles, Zap, Target, PenTool, Search, Palette, Users, TrendingUp, Award, Rocket } from "lucide-react";
 
 export default function LandingPage() {
@@ -32,6 +33,7 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "About", id: "about" },
             { name: "Results", id: "metrics" },
+            { name: "Works", id: "works" },
             { name: "Testimonials", id: "testimonials" }
           ]}
           button={{
@@ -42,7 +44,7 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroSplitDualMedia
-          title="Transform Your Brand With Expert Marketing"
+          title="Transform Your Brand NOW"
           description="Strategic marketing campaigns designed to elevate your brand presence and drive measurable business growth."
           tag="Marketing Solutions"
           tagIcon={Sparkles}
@@ -55,7 +57,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 +66,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">
@@ -92,10 +151,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: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=1",                  imageAlt: "Digital marketing strategy visualization"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/tmp/generate-an-image-of-lorenzo-noya-1772622815832-cedc15c7.jpg",                  imageAlt: "Digital marketing strategy visualization"
                 },
                 {
-                  imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=2",                  imageAlt: "Analytics dashboard"
+                  imageSrc: "http://img.b2bpic.net/free-photo/delicious-candy-concept-with-copy-space_23-2148679289.jpg?id=10289575",                  imageAlt: "Analytics dashboard"
                 }
               ]
             },
@@ -103,7 +162,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"
@@ -169,6 +228,38 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="works" data-section="works">
+        <BlogCardOne
+          blogs={[
+            {
+              id: "1",              category: "E-Commerce",              title: "TechFlow Solutions - 200% Lead Growth",              excerpt: "Transformed their digital presence with a comprehensive SEO and content strategy that doubled their qualified leads in 6 months.",              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop",              imageAlt: "TechFlow case study",              authorName: "Sarah Mitchell",              authorAvatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              date: "15 Nov 2024"
+            },
+            {
+              id: "2",              category: "SaaS",              title: "CloudSync - Market Expansion Campaign",              excerpt: "Developed a multi-channel marketing strategy that helped them enter 3 new markets and increase brand awareness by 340%.",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=1",              imageAlt: "CloudSync case study",              authorName: "Michael Chen",              authorAvatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop",              date: "08 Nov 2024"
+            },
+            {
+              id: "3",              category: "Startups",              title: "InnovateLabs - From Zero to Series A",              excerpt: "Built a brand identity and go-to-market strategy that secured Series A funding and established market leadership position.",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop",              imageAlt: "InnovateLabs case study",              authorName: "Emma Rodriguez",              authorAvatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",              date: "01 Nov 2024"
+            },
+            {
+              id: "4",              category: "Healthcare",              title: "MediCare Plus - Patient Acquisition",              excerpt: "Designed and executed a healthcare marketing campaign that increased patient inquiries by 280% and improved conversion rates.",              imageSrc: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&h=600&fit=crop",              imageAlt: "MediCare Plus case study",              authorName: "Dr. James Wilson",              authorAvatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              date: "25 Oct 2024"
+            },
+            {
+              id: "5",              category: "Retail",              title: "StyleHub - Omnichannel Integration",              excerpt: "Integrated online and offline marketing channels to create a seamless customer experience, resulting in 165% revenue growth.",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2",              imageAlt: "StyleHub case study",              authorName: "Lisa Park",              authorAvatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",              date: "18 Oct 2024"
+            },
+            {
+              id: "6",              category: "Enterprise",              title: "GlobalTech - Enterprise Rebranding",              excerpt: "Led a complete brand refresh and repositioning strategy for a Fortune 500 company, improving market perception and share.",              imageSrc: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&h=600&fit=crop",              imageAlt: "GlobalTech case study",              authorName: "David Kumar",              authorAvatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop",              date: "10 Oct 2024"
+            }
+          ]}
+          title="Our Latest Work"
+          description="Explore the diverse range of projects we've successfully executed across different industries and markets."
+          tag="Case Studies"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          carouselMode="buttons"
+        />
+      </div>
+
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFifteen
           testimonial="Nexus Marketing transformed our approach to digital marketing. Their strategic insights and creative execution resulted in a 200% increase in leads within the first six months. They're not just an agency—they're a true business partner."
@@ -228,7 +319,7 @@ export default function LandingPage() {
             {
               title: "Company",              items: [
                 { label: "About Us", href: "#about" },
-                { label: "Our Work", href: "#metrics" },
+                { label: "Our Work", href: "#works" },
                 { label: "Testimonials", href: "#testimonials" },
                 { label: "Blog", href: "#" }
               ]
@@ -245,6 +336,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: #f5f5f5;;;;
-  --card: #ffffff;;
+  --card: #ffffff;;;;
-  --foreground: #1c1c1c;;
+  --foreground: #1c1c1c;;;;
-  --primary-cta: #6139e6;;
+  --primary-cta: #1c1c1c;;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffffff;;;;
-  --accent: #6139e6;;
+  --accent: #6139e6;;;;
-  --background-accent: #b3a8e8;; */
+  --background-accent: #b3a8e8;;;; */
 
-  --background: #f5f5f5;;
+  --background: #f5f5f5;;;;
-  --card: #ffffff;;
+  --card: #ffffff;;;;
-  --foreground: #1c1c1c;;
+  --foreground: #1c1c1c;;;;
-  --primary-cta: #6139e6;;
+  --primary-cta: #1c1c1c;;;;
-  --primary-cta-text: #f5f5f5;;
+  --primary-cta-text: #f5f5f5;;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffffff;;;;
-  --secondary-cta-text: #1c1c1c;;
+  --secondary-cta-text: #1c1c1c;;;;
-  --accent: #6139e6;;
+  --accent: #6139e6;;;;
-  --background-accent: #b3a8e8;;
+  --background-accent: #b3a8e8;;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);