Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -11,8 +11,18 @@ import ContactCenter from "@/components/sections/contact/ContactCenter";
 import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import { Building, Zap, Droplet, Wind, Home, Mail, CheckCircle } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [showPhoneNumber, setShowPhoneNumber] = useState(false);
+
+  const handleCallNowClick = () => {
+    setShowPhoneNumber(true);
+    setTimeout(() => {
+      window.location.href = "tel:+971557213898";
+    }, 500);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -28,7 +38,7 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
-          brandName="AL Rawaahel"
+          brandName="Al Rawaahel Building Maintenance LLC"
           navItems={[
             { name: "Home", id: "hero" },
             { name: "Services", id: "services" },
@@ -36,7 +46,10 @@ export default function LandingPage() {
             { name: "Reviews", id: "testimonials" },
             { name: "Contact", id: "contact" }
           ]}
-          button={{ text: "Call Now", href: "tel:+971557213898" }}
+          button={{
+            text: showPhoneNumber ? "+971557213898" : "Call Now",            onClick: handleCallNowClick,
+            href: undefined
+          }}
         />
       </div>
 
@@ -50,8 +63,10 @@ export default function LandingPage() {
           showBlur={true}
           showDimOverlay={false}
           buttons={[
-            { text: "Call Now", href: "tel:+971557213898" },
+            {
-            { text: "Get Free Quote", href: "#contact" }
+              text: showPhoneNumber ? "+971557213898" : "Call Now",              onClick: handleCallNowClick
+            },
+            { text: "WhatsApp", href: "https://wa.me/971557213898" }
           ]}
         />
       </div>
@@ -101,7 +116,7 @@ export default function LandingPage() {
 
       <div id="about" data-section="about">
         <MetricSplitMediaAbout
-          title="Why Choose AL Rawaahel"
+          title="Why Choose Al Rawaahel Building Maintenance LLC"
           description="We're a trusted local maintenance company in Dubai dedicated to providing professional, reliable service to homeowners, apartment dwellers, property managers, and businesses. Our experienced team delivers quality work with attention to detail."
           tag="Professional Service Provider"
           metrics={[
@@ -187,7 +202,7 @@ export default function LandingPage() {
           tag="Get Started"
           metrics={[
             { id: "1", value: "📞", description: "Call: +971 557213898 for immediate assistance" },
-            { id: "2", value: "💬", description: "WhatsApp: Message us directly for quick response" },
+            { id: "2", value: "💬", description: "WhatsApp: +971 557213898 for quick response" },
             { id: "3", value: "📧", description: "Email: rawaahel@gmail.com for service inquiries" },
             { id: "4", value: "⚡", description: "Emergency repairs available 24/7 for urgent needs" }
           ]}
@@ -198,8 +213,8 @@ export default function LandingPage() {
 
       <div id="footer" data-section="footer">
         <FooterBase
-          logoText="AL Rawaahel"
+          logoText="Al Rawaahel Building Maintenance LLC"
-          copyrightText="© 2025 AL Rawaahel Building Maintenance LLC. All rights reserved."
+          copyrightText="© 2025 Al Rawaahel Building Maintenance LLC. All rights reserved."
           columns={[
             {
               title: "Services",              items: [
@@ -230,4 +245,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}