About section image update

src/components/About.tsx

@@ -2,8 +2,21 @@
 
 import Link from "next/link";
 import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { useRef } from "react";
 
 export default function About() {
+    const containerRef = useRef(null);
+    const { scrollYProgress } = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"]
+    });
+
+    // Parallax effect: Moving the image vertically as the user scrolls
+    // The image height is significantly larger than the container
+    // We move from 0% (top aligned) to a negative percentage to reveal the bottom
+    const y = useTransform(scrollYProgress, [0, 1], ["0%", "-30%"]);
+
     return (
         <section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
 
@@ -45,18 +58,20 @@ export default function About() {
                     </div>
 
                     {/* Parallax Image Container */}
-                    {/* Parallax Image Container - Visible on all screens */}
                     <div
-                        className="h-[400px] md:h-[500px] w-full rounded-2xl shadow-2xl overflow-hidden"
+                        ref={containerRef}
-                        style={{
+                        className="h-[400px] w-full max-w-[584px] mx-auto md:mr-0 rounded-2xl shadow-2xl overflow-hidden relative"
-                            backgroundImage: "url('/assets/images/home/where.webp')",
-                            backgroundAttachment: "fixed",
-                            backgroundPosition: "center",
-                            backgroundRepeat: "no-repeat",
-                            backgroundSize: "cover"
-                        }}
                     >
-                        {/* Empty container for the image background */}
+                        <motion.div
+                            style={{ y }}
+                            className="absolute top-[-10%] left-0 w-full h-[160%] will-change-transform" // 140% height to allow movement
+                        >
+                            <img
+                                src="/assets/images/home/where.webp"
+                                alt="Where Sky Meets Soil"
+                                className="w-full h-full"
+                            />
+                        </motion.div>
                     </div>
                 </div>
             </div>

src/components/ConnectivityMap.tsx

@@ -167,7 +167,7 @@ export default function ConnectivityMap() {
                             setActiveTab(tab);
                             setSearchQuery(""); // Clear search when switching tabs
                         }}
-                        className={`px-6 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors border-b-2 ${activeTab === tab
+                        className={`px-4 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors border-b-2 ${activeTab === tab
                             ? "text-orange-500 border-orange-500 bg-orange-50/30 dark:bg-orange-900/10"
                             : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 border-transparent"
                             }`}

src/components/PropertyDetailClient.tsx

@@ -1218,7 +1218,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     <button className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2.5 rounded-lg font-semibold text-sm transition-colors shadow-sm">
 
-                                        Compare With Sanction Plan
+                                        Compare Sanction Plan
 
                                     </button>