Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -10,8 +10,25 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [showPhonePopup, setShowPhonePopup] = useState(false);
+  const phoneNumber = "(443)805-9444";
+
+  const handleCallNowClick = () => {
+    setShowPhonePopup(true);
+  };
+
+  const handleCopyPhone = () => {
+    navigator.clipboard.writeText(phoneNumber);
+    setShowPhonePopup(false);
+  };
+
+  const handleDialPhone = () => {
+    window.location.href = `tel:${phoneNumber}`;
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -25,6 +42,38 @@ export default function LandingPage() {
       secondaryButtonStyle="radial-glow"
       headingFontWeight="light"
     >
+      {showPhonePopup && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white rounded-lg shadow-lg p-8 max-w-sm mx-4">
+            <h3 className="text-xl font-semibold mb-4 text-gray-900">Call Now</h3>
+            <p className="text-gray-700 mb-6">Phone Number:</p>
+            <div className="bg-gray-100 p-4 rounded-md mb-6 text-center">
+              <p className="text-lg font-bold text-gray-900">{phoneNumber}</p>
+            </div>
+            <div className="flex gap-3 flex-col">
+              <button
+                onClick={handleDialPhone}
+                className="bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-4 rounded-md w-full transition"
+              >
+                📞 Call Now
+              </button>
+              <button
+                onClick={handleCopyPhone}
+                className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-md w-full transition"
+              >
+                📋 Copy Number
+              </button>
+              <button
+                onClick={() => setShowPhonePopup(false)}
+                className="bg-gray-300 hover:bg-gray-400 text-gray-900 font-semibold py-3 px-4 rounded-md w-full transition"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
           brandName="Hampden Lawn"
@@ -52,8 +101,8 @@ export default function LandingPage() {
           tag="Trusted Local Service"
           tagAnimation="slide-up"
           buttons={[
-            { text: "📞 Call Now", href: "tel:(443)805-9444" },
-            { text: "📝 Get a Free Quote", href: "#quote" }
+            { text: "📞 Call Now", onClick: handleCallNowClick },
+            { text: "📝 See Your Price in 2 Min", href: "#quote" }
           ]}
           buttonAnimation="slide-up"
           imageSrc="http://img.b2bpic.net/free-photo/gardener-safety-glasses-gloves-pruning-hedge_7502-9825.jpg?_wi=1"