Merge version_6 into main

Merge version_6 into main

src/app/page.tsx

@@ -2,14 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Brush, Feather, Figma, LayoutTemplate, Lightbulb, Monitor, Palette, Sparkles, Type } from "lucide-react";
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import { Brush, Feather, Figma, LayoutTemplate, Lightbulb, Monitor, Palette, Sparkles, Type, TrendingUp, Users, Rocket } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -35,13 +36,15 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardScroll 
+        <HeroOverlay 
           title="Bamboleya: Where Ideas Take Form"
           description="Transforming visions into captivating digital experiences with creativity and precision. Let's build something remarkable together."
-          background={{variant:"sparkles-gradient"}}
           buttons={[{text:"Our Services",href:"#features"},{text:"See Our Work",href:"#products"}]}
           imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149345223.jpg"
           imageAlt="Abstract illustration of a creative design process with elements like sketches, a laptop, and a lightbulb, symbolizing idea generation and digital execution."
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
         />
       </div>
 
@@ -108,6 +111,22 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="metrics" data-section="metrics">
+        <MetricCardOne
+          title="Our Impact"
+          description="Key metrics showcasing the results we deliver for our clients."
+          gridVariant="uniform-all-items-equal"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          metrics={[
+            { id: '1', value: '100', title: 'Clients Served', description: 'Across various industries worldwide.', icon: Users },
+            { id: '2', value: '95', title: '% Client Retention', description: 'A testament to our commitment to excellence.', icon: TrendingUp },
+            { id: '3', value: '250', title: 'Projects Completed', description: 'From small startups to large enterprises.', icon: Rocket }
+          ]}
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase 
           columns={[{title:"Services",items:[{label:"Web Design",href:"#features"},{label:"Branding",href:"#features"},{label:"UI/UX",href:"#features"}]},{title:"Company",items:[{label:"About Us",href:"#about"},{label:"Our Work",href:"#products"}]},{title:"Connect",items:[{label:"Contact",href:"#contact"},{label:"LinkedIn",href:"https://linkedin.com/company/bamboleya"},{label:"Instagram",href:"https://instagram.com/bamboleya"}]}]}

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #1a1a1a;;
+  /* --background: #f5f5f5;;
+  --card: #ffffff;;
+  --foreground: #1c1c1c;;
   --primary-cta: #e63946;;
-  --secondary-cta: #0a7039;;
-  --accent: #0a7039;;
-  --background-accent: #e2f0e6;; */
+  --secondary-cta: #ffffff;;
+  --accent: #159c49;;
+  --background-accent: #a8e8ba;; */
 
-  --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #1a1a1a;;
+  --background: #f5f5f5;;
+  --card: #ffffff;;
+  --foreground: #1c1c1c;;
   --primary-cta: #e63946;;
-  --primary-cta-text: #fbfaff;;
-  --secondary-cta: #0a7039;;
-  --secondary-cta-text: #0f0022;;
-  --accent: #0a7039;;
-  --background-accent: #e2f0e6;;
+  --primary-cta-text: #ffffff;;
+  --secondary-cta: #ffffff;;
+  --secondary-cta-text: #1c1c1c;;
+  --accent: #159c49;;
+  --background-accent: #a8e8ba;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);