Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { Award, CheckCircle, Shield } from "lucide-react";
+import { CheckCircle, Award, Shield } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -149,65 +149,55 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="depth-3d"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",          icon: CheckCircle,
-          title: "Projects Completed",          value: "500+"},
-        {
-          id: "m2",          icon: Award,
-          title: "Years Experience",          value: "20+"},
-        {
-          id: "m3",          icon: Shield,
-          title: "Happy Clients",          value: "450+"},
-      ]}
+      <MetricCardEleven
+      animationType="blur-reveal"
       title="Our Achievements"
       description="Solid facts backing our stone masonry expertise."
+      textboxLayout="default"
+      metrics={[
+        {
+          id: "m1",          title: "Projects Completed",          value: "500+",          description: "Hand-crafted stone installations globally",          imageSrc: "http://img.b2bpic.net/free-photo/marble-wall-texture_23-2148132262.jpg"},
+        {
+          id: "m2",          title: "Years Experience",          value: "20+",          description: "Decades of professional dedication",          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-view-stonecutter_268835-4727.jpg"},
+        {
+          id: "m3",          title: "Happy Clients",          value: "450+",          description: "Satisfied residential and commercial partners",          imageSrc: "http://img.b2bpic.net/free-photo/colorful-stones-wooden-board-concrete_114579-25177.jpg"},
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient"}}
-      tag="Consultation"
+      <ContactCTA
+      tag="Contact"
       title="Start Your Project"
-      description="Let's turn your vision into a stone-clad reality."
-      imageSrc="http://img.b2bpic.net/free-photo/abstract-background-with-copy-space_1194-638717.jpg"
+      description="Ready to begin your stone transformation? Let's talk about your requirements today."
+      buttons={[
+        { text: "Get a Quote", href: "#" },
+        { text: "Learn More", href: "#" }
+      ]}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/detail-urban-stairs_23-2148107131.jpg"
+      <FooterBaseCard
       logoText="Profistone"
       columns={[
         {
           title: "Company",          items: [
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "Careers",              href: "#"},
+            { label: "About", href: "#about" },
+            { label: "Careers", href: "#" },
           ],
         },
         {
           title: "Resources",          items: [
-            {
-              label: "Blog",              href: "#"},
-            {
-              label: "Support",              href: "#"},
+            { label: "Blog", href: "#" },
+            { label: "Support", href: "#" },
           ],
         },
         {
           title: "Legal",          items: [
-            {
-              label: "Privacy",              href: "#"},
-            {
-              label: "Terms",              href: "#"},
+            { label: "Privacy", href: "#" },
+            { label: "Terms", href: "#" },
           ],
         },
       ]}
@@ -216,4 +206,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffff;
-  --primary-cta: #1f7cff;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #010101;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #ffffff;
-  --accent: #1f7cff;
-  --background-accent: #f96b2f;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);