From 253a7aa5d243a432ec7c31d5a890d6a324526d9d Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Mon, 8 Dec 2025 23:20:50 +0530
Subject: [PATCH] Mobile responisve are fixed

---
 src/components/About.tsx                |  18 +++-
 src/components/ConnectivityMap.tsx      |  23 ++++-
 src/components/Header.tsx               |  56 ++++++------
 src/components/InnerBanner.tsx          |   4 +-
 src/components/Properties.tsx           |   4 +-
 src/components/PropertyDetailClient.tsx |  46 +++++-----
 src/components/Testimonials.tsx         |   2 +-
 src/components/WhyChooseUs.tsx          |   2 +-
 src/data/properties.ts                  | 116 ++++++++++++++++++++----
 9 files changed, 192 insertions(+), 79 deletions(-)

diff --git a/src/components/About.tsx b/src/components/About.tsx
index 11aef59..0100516 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -15,7 +15,7 @@ export default function About() {
     // 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%"]);
+    const y = useTransform(scrollYProgress, [0, 1], ["0%", "-50%"]);
 
     return (
         <section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
@@ -32,7 +32,7 @@ export default function About() {
             </div>
 
             <div className="max-w-7xl mx-auto px-6 relative z-10">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                     {/* Text Content */}
                     <div className="space-y-8 z-10">
                         <h2 className="text-4xl font-bold tracking-tight text-foreground">
@@ -60,16 +60,24 @@ export default function About() {
                     {/* Parallax Image Container */}
                     <div
                         ref={containerRef}
-                        className="h-[400px] w-full max-w-[584px] mx-auto md:mr-0 rounded-2xl shadow-2xl overflow-hidden relative"
+                        className="
+                            h-[400px] 
+                            w-full 
+                            mx-auto 
+                            rounded-2xl 
+                            shadow-2xl 
+                            overflow-hidden 
+                            relative
+                        "
                     >
                         <motion.div
                             style={{ y }}
-                            className="absolute top-[-10%] left-0 w-full h-[160%] will-change-transform" // 140% height to allow movement
+                            className="absolute top-[-10%] left-0 w-full h-[160%] will-change-transform"
                         >
                             <img
                                 src="/assets/images/home/where.webp"
                                 alt="Where Sky Meets Soil"
-                                className="w-full h-full"
+                                className="w-full h-full object-cover"
                             />
                         </motion.div>
                     </div>
diff --git a/src/components/ConnectivityMap.tsx b/src/components/ConnectivityMap.tsx
index 3042f67..89f5ac2 100644
--- a/src/components/ConnectivityMap.tsx
+++ b/src/components/ConnectivityMap.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
@@ -130,6 +130,24 @@ function ZoomHandler({ zoomIn, zoomOut }: { zoomIn: () => void, zoomOut: () => v
 
 export default function ConnectivityMap() {
     const [activeTab, setActiveTab] = useState("Commute");
+    const tabsRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (activeTab && tabsRef.current) {
+            const activeBtn = document.getElementById(`connectivity-tab-${activeTab}`);
+            if (activeBtn) {
+                const container = tabsRef.current;
+                const activeBtnRect = activeBtn.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                const scrollLeft = container.scrollLeft + (activeBtnRect.left - containerRect.left) - (container.offsetWidth / 2) + (activeBtn.offsetWidth / 2);
+
+                container.scrollTo({
+                    left: scrollLeft,
+                    behavior: "smooth"
+                });
+            }
+        }
+    }, [activeTab]);
     const [searchQuery, setSearchQuery] = useState("");
     const [mapZoom, setMapZoom] = useState(13);
     const [mapRef, setMapRef] = useState<L.Map | null>(null);
@@ -159,10 +177,11 @@ export default function ConnectivityMap() {
     return (
         <div className="relative z-0 bg-white dark:bg-gray-900 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700">
             {/* Tabs */}
-            <div className="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 scrollbar-hide">
+            <div ref={tabsRef} className="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 scrollbar-hide">
                 {["Commute", "Education", "Hospitals", "Work", "Entertainment", "Search"].map((tab) => (
                     <button
                         key={tab}
+                        id={`connectivity-tab-${tab}`}
                         onClick={() => {
                             setActiveTab(tab);
                             setSearchQuery(""); // Clear search when switching tabs
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 62561b3..cec4e13 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -10,10 +10,11 @@ export default function Header() {
     const { resolvedTheme } = useTheme();
     const [isScrolled, setIsScrolled] = useState(false);
     const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-    const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
-        setMounted(true);
+        // Set initial scroll state
+        setIsScrolled(window.scrollY > 50);
+
         const handleScroll = () => {
             setIsScrolled(window.scrollY > 50);
         };
@@ -23,31 +24,31 @@ export default function Header() {
     }, []);
 
     // Prevent hydration mismatch
-    if (!mounted) {
-        return (
-            <header className="fixed top-0 left-0 right-0 z-50 bg-transparent py-6">
-                <div className="w-full px-[50px] max-[375px]:px-[25px] flex items-center justify-between">
-                    <Link href="/" className="flex items-center gap-3 group">
-                        <div className="relative w-60 h-20 -left-[83px]">
-                            <Image
-                                src="/assets/images/white-logo.png"
-                                alt="Sky and Soil Logo"
-                                fill
-                                className="object-contain"
-                            />
-                        </div>
-                    </Link>
-                    <div className="flex items-center gap-4">
-                        <button className="p-2 -mr-2 text-white">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </header>
-        );
-    }
+    // if (!mounted) {
+    //     return (
+    //         <header className="fixed top-0 left-0 right-0 z-50 bg-transparent py-6">
+    //             <div className="w-full px-[50px] max-[375px]:px-[25px] flex items-center justify-between">
+    //                 <Link href="/" className="flex items-center gap-3 group">
+    //                     <div className="relative w-60 h-20 -left-[83px]">
+    //                         <Image
+    //                             src="/assets/images/white-logo.png"
+    //                             alt="Sky and Soil Logo"
+    //                             fill
+    //                             className="object-contain"
+    //                         />
+    //                     </div>
+    //                 </Link>
+    //                 <div className="flex items-center gap-4">
+    //                     <button className="p-2 -mr-2 text-white">
+    //                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+    //                             <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    //                         </svg>
+    //                     </button>
+    //                 </div>
+    //             </div>
+    //         </header>
+    //     );
+    // }
 
     const isLight = resolvedTheme === "light";
 
@@ -67,6 +68,7 @@ export default function Header() {
                                 alt="Sky and Soil Logo"
                                 fill
                                 className="object-contain"
+                                priority
                             />
                         </div>
                         {/* <span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
diff --git a/src/components/InnerBanner.tsx b/src/components/InnerBanner.tsx
index aabcde9..c0a8b67 100644
--- a/src/components/InnerBanner.tsx
+++ b/src/components/InnerBanner.tsx
@@ -16,7 +16,7 @@ export default function InnerBanner({
     backgroundImage = "/hero-image.jpg"
 }: InnerBannerProps) {
     return (
-        <div className="relative h-[450px] w-full overflow-hidden">
+        <div className="relative h-[450px] w-full overflow-hidden pt-20">
             {/* Background Image */}
             <div className="absolute inset-0">
                 <Image
@@ -35,7 +35,7 @@ export default function InnerBanner({
                 {/* Breadcrumbs */}
                 {breadcrumbs && breadcrumbs.length > 0 && (
                     <nav className="mb-4">
-                        <ol className="flex items-center gap-2 text-sm text-white/80">
+                        <ol className="flex flex-wrap items-center gap-x-2 gap-y-2 text-sm text-white/80">
                             {breadcrumbs.map((crumb, index) => (
                                 <li key={index} className="flex items-center gap-1 md:gap-2">
                                     {crumb.href ? (
diff --git a/src/components/Properties.tsx b/src/components/Properties.tsx
index 4b1a60c..a1dd482 100644
--- a/src/components/Properties.tsx
+++ b/src/components/Properties.tsx
@@ -45,7 +45,7 @@ export default function Properties({ layout = "slider" }: PropertiesProps) {
                             <button
                                 key={category}
                                 onClick={() => setActiveTab(category)}
-                                className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${activeTab === category
+                                className={`px-4 py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${activeTab === category
                                     ? "bg-white dark:bg-gray-700 text-foreground shadow-sm"
                                     : "text-gray-500 dark:text-gray-400 hover:text-foreground"
                                     }`}
@@ -95,7 +95,7 @@ export default function Properties({ layout = "slider" }: PropertiesProps) {
                                     <div
                                         key={property.id}
                                         className={activeTab === "All"
-                                            ? "min-w-[300px] md:min-w-[380px] snap-center"
+                                            ? "flex-shrink-0 snap-center w-full md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)]"
                                             : "flex-shrink-0 w-full max-w-md mx-auto snap-center"
                                         }
                                     >
diff --git a/src/components/PropertyDetailClient.tsx b/src/components/PropertyDetailClient.tsx
index b08968f..7a39a6b 100644
--- a/src/components/PropertyDetailClient.tsx
+++ b/src/components/PropertyDetailClient.tsx
@@ -663,7 +663,7 @@ export default function PropertyDetailClient({ property }: { property: Property
                                     <div className="flex items-center gap-2 flex-wrap">
                                         {property.overview.badges?.map((badge, index) => (
                                             <span key={index} className={`px-2 sm:px-4 py-1.5 rounded-full text-sm font-medium ${badge === "Better" || badge === "Green Living" || badge === "Lake View" || badge === "Skyline Views" ? "bg-green-100 text-green-700" :
-                                                badge === "Average" || badge === "Premium" || badge === "Luxury" || badge === "Elite" ? "bg-orange-100 text-orange-700" :
+                                                badge === "Average" || badge === "Premium" || badge === "Luxury" || badge === "Elite" ? "bg-blue-100 text-blue-700" :
                                                     "bg-purple-100 text-purple-700"
                                                 }`}>
                                                 {badge}
@@ -712,7 +712,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                         if (stat.icon === 'land') {
                                             bgClass = "bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-800/30";
-                                            textClass = "text-orange-600 dark:text-orange-400";
+                                            textClass = "text-blue-600 dark:text-blue-400";
                                         } else if (stat.icon === 'openArea') {
                                             bgClass = "bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-800/30";
                                             textClass = "text-red-600 dark:text-red-400";
@@ -741,7 +741,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 <div className={`relative ${!isConnectivityExpanded ? 'max-h-[60px] overflow-hidden' : ''}`}>
                                     <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-                                        <span className="text-orange-500 mr-2">✦</span>
+                                        <span className="text-blue-500 mr-2">✦</span>
                                         {property.connectivity?.description || `${property.title} is located in ${property.location}.`}
                                     </p>
 
@@ -757,7 +757,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     onClick={() => setIsConnectivityExpanded(!isConnectivityExpanded)}
 
-                                    className="text-orange-500 font-medium hover:text-orange-600 transition-colors mt-2 text-sm underline"
+                                    className="text-blue-500 font-medium hover:text-blue-600 transition-colors mt-2 text-sm underline"
 
                                 >
 
@@ -797,9 +797,9 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     </div>
 
-                                    <h3 className="font-bold text-gray-900 dark:text-white mb-2">{property.title} is approved by RERA</h3>
+                                    <h3 className="font-bold text-gray-900 dark:text-white mb-2">{property.title} is {property.reraInfo?.isApproved ? 'approved by RERA' : 'pending RERA approval'}</h3>
 
-                                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">It was approved on Nov 2024</p>
+                                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">{property.reraInfo?.isApproved && `It was approved on ${property.reraInfo.approvalDate}`}</p>
 
                                     <button className="w-full py-2.5 px-4 bg-white dark:bg-transparent border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors mt-auto">
 
@@ -827,9 +827,9 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     </div>
 
-                                    <h3 className="font-bold text-gray-900 dark:text-white mb-2">See {property.title} brochure</h3>
+                                    <h3 className="font-bold text-gray-900 dark:text-white mb-2">{property.brochureCard?.title || `See ${property.title} brochure`}</h3>
 
-                                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">Beware, beautiful brochures don't show hidden realities</p>
+                                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">{property.brochureCard?.description || "Download the detailed brochure"}</p>
 
                                     <button className="w-full py-2.5 px-4 bg-white dark:bg-transparent border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors mt-auto">
 
@@ -843,7 +843,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 {/* Pros & Cons Card */}
 
-                                <div className="bg-orange-50 dark:bg-orange-900/20 rounded-2xl p-6 flex flex-col items-center text-center border border-orange-100 dark:border-orange-800/30">
+                                <div className="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-6 flex flex-col items-center text-center border border-blue-100 dark:border-blue-800/30">
 
                                     <div className="w-12 h-12 mb-4 text-purple-500 relative">
 
@@ -867,13 +867,13 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     </div>
 
-                                    <h3 className="font-bold text-gray-900 dark:text-white mb-2">See the truth beyond the brochures</h3>
+                                    <h3 className="font-bold text-gray-900 dark:text-white mb-2">{property.prosConsCard?.title || "See the truth beyond the brochures"}</h3>
 
-                                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">See every risk & potential clearly with our experts</p>
+                                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">{property.prosConsCard?.description || "See every risk & potential clearly with our experts"}</p>
 
-                                    <button className="w-full py-2.5 px-4 bg-orange-500 hover:bg-orange-600 text-white rounded-lg text-sm font-semibold transition-colors mt-auto shadow-md shadow-orange-500/20">
+                                    <button className="w-full py-2.5 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-semibold transition-colors mt-auto shadow-md shadow-blue-500/20">
 
-                                        Get Pros & Cons
+                                        {property.prosConsCard?.buttonText || "Get Pros & Cons"}
 
                                     </button>
 
@@ -891,7 +891,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">Pricing</h2>
 
-                                <p className="text-gray-500 dark:text-gray-400 mb-8">Last updated on 03 Nov 2025</p>
+                                <p className="text-gray-500 dark:text-gray-400 mb-8">Last updated on {property.pricingUpdateDate || "Recently"}</p>
 
 
 
@@ -947,7 +947,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     <div className={`relative ${!isConnectivityExpanded ? 'max-h-[60px] overflow-hidden' : ''}`}>
                                         <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-                                            <span className="text-orange-500 mr-2">✦</span>
+                                            <span className="text-blue-500 mr-2">✦</span>
                                             {property.connectivity?.description || `${property.title} is located in ${property.location}.`}
                                         </p>
 
@@ -963,7 +963,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                         onClick={() => setIsConnectivityExpanded(!isConnectivityExpanded)}
 
-                                        className="text-orange-500 font-medium hover:text-orange-600 transition-colors mt-2 text-sm underline"
+                                        className="text-blue-500 font-medium hover:text-blue-600 transition-colors mt-2 text-sm underline"
 
                                     >
 
@@ -999,9 +999,9 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     </div>
 
-                                  <button className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-3 rounded-xl font-semibold text-base transition-colors shadow-md whitespace-nowrap md:ml-6">
-    Compare Sanction Plan
-</button>
+                                    <button className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-3 rounded-xl font-semibold text-base transition-colors shadow-md whitespace-nowrap md:ml-6">
+                                        Compare Sanction Plan
+                                    </button>
 
 
                                 </div>
@@ -1071,17 +1071,17 @@ export default function PropertyDetailClient({ property }: { property: Property
 
 
 
-                            {/* Propsoch Clarity Engine Section */}
+                            {/* Sky & Soil Clarity Engine Section */}
 
                             <AnimateSection className="py-12" direction="up">
 
                                 <div className="text-center mb-12">
 
-                                    <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-3">The Propsoch Clarity Engine</h2>
+                                    <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-3">The Sky & Soil Clarity Engine</h2>
 
                                     <p className="text-gray-500 dark:text-gray-400 text-lg flex items-center justify-center gap-2">
 
-                                        300+ families found safer homes with Propsoch. You could be next
+                                        300+ families found safer homes with Sky & Soil. You could be next
 
                                         <span className="text-2xl">☝️</span>
 
@@ -1154,7 +1154,7 @@ export default function PropertyDetailClient({ property }: { property: Property
                                         {/* Trusted Badge */}
 
                                         <div className="absolute top-0 left-0 right-0 bg-green-500 text-white text-xs font-bold py-1.5 uppercase tracking-wider">
-                                            TRUSTED BY {property.propsochClarity?.familiesHelped || "300+"} FAMILIES
+                                            TRUSTED BY {property.skyandsoilClarity?.familiesHelped || "300+"} FAMILIES WITH SKY & SOIL
                                         </div>
 
 
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
index 69763eb..e4f4553 100644
--- a/src/components/Testimonials.tsx
+++ b/src/components/Testimonials.tsx
@@ -126,7 +126,7 @@ export default function Testimonials() {
                         {testimonials.map((item, index) => (
                             <div
                                 key={index}
-                                className="min-w-[350px] md:min-w-[400px] snap-center"
+                                className="flex-shrink-0 snap-center w-full md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)]"
                             >
                                 <div className="bg-white dark:bg-gray-900 p-6 rounded-2xl border border-gray-200 dark:border-gray-800 hover:shadow-xl transition-all duration-300 h-full flex flex-col">
                                     {/* Header with Avatar and Info */}
diff --git a/src/components/WhyChooseUs.tsx b/src/components/WhyChooseUs.tsx
index 8001a76..9705046 100644
--- a/src/components/WhyChooseUs.tsx
+++ b/src/components/WhyChooseUs.tsx
@@ -87,7 +87,7 @@ export default function WhyChooseUs() {
                     </p>
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     {features.map((feature, index) => (
                         <div
                             key={index}
diff --git a/src/data/properties.ts b/src/data/properties.ts
index 7297333..58755f9 100644
--- a/src/data/properties.ts
+++ b/src/data/properties.ts
@@ -101,9 +101,23 @@ export type Property = {
         pros: string[];
         cons: string[];
     };
-    propsochClarity?: {
+    skyandsoilClarity?: {
         familiesHelped: string;
     };
+    pricingUpdateDate?: string;
+    reraInfo?: {
+        isApproved: boolean;
+        approvalDate: string;
+    };
+    brochureCard?: {
+        title: string;
+        description: string;
+    };
+    prosConsCard?: {
+        title: string;
+        description: string;
+        buttonText: string;
+    };
     faq?: Record<string, FaqItem[]>;
 };
 
@@ -152,9 +166,23 @@ export const properties: Property[] = [
             parkArea: "22.5 Acres",
             landType: "Residential"
         },
-        propsochClarity: {
+        skyandsoilClarity: {
             familiesHelped: "300+",
         },
+        pricingUpdateDate: "03 Nov 2025",
+        reraInfo: {
+            isApproved: true,
+            approvalDate: "Nov 2024"
+        },
+        brochureCard: {
+            title: "See BARCA at Godrej MSR City brochure",
+            description: "Beware, beautiful brochures don't show hidden realities"
+        },
+        prosConsCard: {
+            title: "See the truth beyond the brochures",
+            description: "See every risk & potential clearly with our experts",
+            buttonText: "Get Pros & Cons"
+        },
         floorPlans: [
             { id: "30 x 40", price: "₹1.24 Crores", area: "1200 sqft", direction: "North West, South East, North" },
             { id: "30 x 50", price: "₹1.55 Crores", area: "1500 sqft", direction: "North West, South East, East, West" },
@@ -238,10 +266,10 @@ export const properties: Property[] = [
                 { question: "What is Service Guided Home Buying (GHB) and Peace of Mind (POM) service?", answer: "Service Guided Home Buying (GHB) and Peace of Mind (POM) service provide end-to-end assistance in your home buying journey, ensuring a hassle-free and transparent experience from selection to possession." },
                 { question: "Why should I get an advisor to help me buy a property?", answer: "An advisor acts as your unbiased partner, helping you navigate the complex real estate market, verify documents, negotiate prices, and avoid common pitfalls." },
                 { question: "Which type of properties do you help with?", answer: "We assist with all types of residential properties including apartments, villas, plots, and gated communities across various budget segments." },
-                { question: "Can I buy homes via Propsoch?", answer: "Yes, you can explore, shortlist, and book homes directly through Propsoch with the help of our expert advisors." },
+                { question: "Can I buy homes via Sky and Soil?", answer: "Yes, you can explore, shortlist, and book homes directly through Sky and Soil with the help of our expert advisors." },
                 { question: "How do I know I am seeing all possible options in the market?", answer: "Our database covers 99% of the market inventory, and our advisors provide unbiased recommendations based on your specific requirements, not just what we want to sell." },
                 { question: "How can I be assured that I am paying the right price?", answer: "We provide data-backed market analysis and comparative pricing reports to ensure you get the best value for your investment." },
-                { question: "What other services can Propsoch help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
+                { question: "What other services can Sky & Soil help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
                 { question: "What is the cost of the services?", answer: "Our basic advisory services are free for home buyers. We charge a nominal fee only for premium services like legal verification and dedicated relationship management." },
             ]
         }
@@ -293,9 +321,23 @@ export const properties: Property[] = [
             parkArea: "19.2 Acres",
             landType: "Residential"
         },
-        propsochClarity: {
+        skyandsoilClarity: {
             familiesHelped: "300+",
         },
+        pricingUpdateDate: "15 Oct 2025",
+        reraInfo: {
+            isApproved: true,
+            approvalDate: "Aug 2024"
+        },
+        brochureCard: {
+            title: "See Godrej Woods brochure",
+            description: "Download detailed brochure to explore forest-themed living"
+        },
+        prosConsCard: {
+            title: "Forest living insights from experts",
+            description: "Discover every aspect of forest-themed community lifestyle",
+            buttonText: "Get Expert Analysis"
+        },
         floorPlans: [
             { id: "30 x 40", price: "₹1.24 Crores", area: "1200 sqft", direction: "North West, South East, North" },
             { id: "30 x 50", price: "₹1.55 Crores", area: "1500 sqft", direction: "North West, South East, East, West" },
@@ -379,10 +421,10 @@ export const properties: Property[] = [
                 { question: "What is Service Guided Home Buying (GHB) and Peace of Mind (POM) service?", answer: "Service Guided Home Buying (GHB) and Peace of Mind (POM) service provide end-to-end assistance in your home buying journey, ensuring a hassle-free and transparent experience from selection to possession." },
                 { question: "Why should I get an advisor to help me buy a property?", answer: "An advisor acts as your unbiased partner, helping you navigate the complex real estate market, verify documents, negotiate prices, and avoid common pitfalls." },
                 { question: "Which type of properties do you help with?", answer: "We assist with all types of residential properties including apartments, villas, plots, and gated communities across various budget segments." },
-                { question: "Can I buy homes via Propsoch?", answer: "Yes, you can explore, shortlist, and book homes directly through Propsoch with the help of our expert advisors." },
+                { question: "Can I buy homes via Sky and Soil?", answer: "Yes, you can explore, shortlist, and book homes directly through Sky and Soil with the help of our expert advisors." },
                 { question: "How do I know I am seeing all possible options in the market?", answer: "Our database covers 99% of the market inventory, and our advisors provide unbiased recommendations based on your specific requirements, not just what we want to sell." },
                 { question: "How can I be assured that I am paying the right price?", answer: "We provide data-backed market analysis and comparative pricing reports to ensure you get the best value for your investment." },
-                { question: "What other services can Propsoch help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
+                { question: "What other services can Sky & Soil help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
                 { question: "What is the cost of the services?", answer: "Our basic advisory services are free for home buyers. We charge a nominal fee only for premium services like legal verification and dedicated relationship management." },
             ]
         }
@@ -431,9 +473,23 @@ export const properties: Property[] = [
             parkArea: "12.6 Acres",
             landType: "Residential"
         },
-        propsochClarity: {
+        skyandsoilClarity: {
             familiesHelped: "300+",
         },
+        pricingUpdateDate: "20 Oct 2025",
+        reraInfo: {
+            isApproved: true,
+            approvalDate: "Sep 2024"
+        },
+        brochureCard: {
+            title: "See Godrej Hoskote brochure",
+            description: "Get comprehensive details about community living at Hoskote"
+        },
+        prosConsCard: {
+            title: "Community living clarity",
+            description: "Get detailed pros & cons analysis for this location",
+            buttonText: "View Analysis"
+        },
         floorPlans: [
             { id: "30 x 40", price: "₹1.24 Crores", area: "1200 sqft", direction: "North West, South East, North" },
             { id: "30 x 50", price: "₹1.55 Crores", area: "1500 sqft", direction: "North West, South East, East, West" },
@@ -517,10 +573,10 @@ export const properties: Property[] = [
                 { question: "What is Service Guided Home Buying (GHB) and Peace of Mind (POM) service?", answer: "Service Guided Home Buying (GHB) and Peace of Mind (POM) service provide end-to-end assistance in your home buying journey, ensuring a hassle-free and transparent experience from selection to possession." },
                 { question: "Why should I get an advisor to help me buy a property?", answer: "An advisor acts as your unbiased partner, helping you navigate the complex real estate market, verify documents, negotiate prices, and avoid common pitfalls." },
                 { question: "Which type of properties do you help with?", answer: "We assist with all types of residential properties including apartments, villas, plots, and gated communities across various budget segments." },
-                { question: "Can I buy homes via Propsoch?", answer: "Yes, you can explore, shortlist, and book homes directly through Propsoch with the help of our expert advisors." },
+                { question: "Can I buy homes via Sky and Soil?", answer: "Yes, you can explore, shortlist, and book homes directly through Sky and Soil with the help of our expert advisors." },
                 { question: "How do I know I am seeing all possible options in the market?", answer: "Our database covers 99% of the market inventory, and our advisors provide unbiased recommendations based on your specific requirements, not just what we want to sell." },
                 { question: "How can I be assured that I am paying the right price?", answer: "We provide data-backed market analysis and comparative pricing reports to ensure you get the best value for your investment." },
-                { question: "What other services can Propsoch help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
+                { question: "What other services can Sky & Soil help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
                 { question: "What is the cost of the services?", answer: "Our basic advisory services are free for home buyers. We charge a nominal fee only for premium services like legal verification and dedicated relationship management." },
             ]
         }
@@ -569,9 +625,23 @@ export const properties: Property[] = [
             parkArea: "25.2 Acres",
             landType: "Residential"
         },
-        propsochClarity: {
+        skyandsoilClarity: {
             familiesHelped: "300+",
         },
+        pricingUpdateDate: "25 Oct 2025",
+        reraInfo: {
+            isApproved: true,
+            approvalDate: "Jul 2024"
+        },
+        brochureCard: {
+            title: "See Godrej Lakeside Orchard brochure",
+            description: "Explore luxury lakeside living with our detailed brochure"
+        },
+        prosConsCard: {
+            title: "Lakeside living insights",
+            description: "Expert analysis of luxury lakefront lifestyle & amenities",
+            buttonText: "Get Insights"
+        },
         floorPlans: [
             { id: "30 x 40", price: "₹1.24 Crores", area: "1200 sqft", direction: "North West, South East, North" },
             { id: "30 x 50", price: "₹1.55 Crores", area: "1500 sqft", direction: "North West, South East, East, West" },
@@ -655,10 +725,10 @@ export const properties: Property[] = [
                 { question: "What is Service Guided Home Buying (GHB) and Peace of Mind (POM) service?", answer: "Service Guided Home Buying (GHB) and Peace of Mind (POM) service provide end-to-end assistance in your home buying journey, ensuring a hassle-free and transparent experience from selection to possession." },
                 { question: "Why should I get an advisor to help me buy a property?", answer: "An advisor acts as your unbiased partner, helping you navigate the complex real estate market, verify documents, negotiate prices, and avoid common pitfalls." },
                 { question: "Which type of properties do you help with?", answer: "We assist with all types of residential properties including apartments, villas, plots, and gated communities across various budget segments." },
-                { question: "Can I buy homes via Propsoch?", answer: "Yes, you can explore, shortlist, and book homes directly through Propsoch with the help of our expert advisors." },
+                { question: "Can I buy homes via Sky and Soil?", answer: "Yes, you can explore, shortlist, and book homes directly through Sky and Soil with the help of our expert advisors." },
                 { question: "How do I know I am seeing all possible options in the market?", answer: "Our database covers 99% of the market inventory, and our advisors provide unbiased recommendations based on your specific requirements, not just what we want to sell." },
                 { question: "How can I be assured that I am paying the right price?", answer: "We provide data-backed market analysis and comparative pricing reports to ensure you get the best value for your investment." },
-                { question: "What other services can Propsoch help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
+                { question: "What other services can Sky & Soil help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
                 { question: "What is the cost of the services?", answer: "Our basic advisory services are free for home buyers. We charge a nominal fee only for premium services like legal verification and dedicated relationship management." },
             ]
         }
@@ -707,9 +777,23 @@ export const properties: Property[] = [
             parkArea: "6.8 Acres",
             landType: "Residential"
         },
-        propsochClarity: {
+        skyandsoilClarity: {
             familiesHelped: "300+",
         },
+        pricingUpdateDate: "01 Nov 2025",
+        reraInfo: {
+            isApproved: true,
+            approvalDate: "Oct 2024"
+        },
+        brochureCard: {
+            title: "See Godrej Tiara brochure",
+            description: "Discover exclusive luxury apartments with panoramic city views"
+        },
+        prosConsCard: {
+            title: "Premium living analysis",
+            description: "Get expert evaluation of this exclusive luxury development",
+            buttonText: "Get Premium Analysis"
+        },
         floorPlans: [
             { id: "30 x 40", price: "₹1.24 Crores", area: "1200 sqft", direction: "North West, South East, North" },
             { id: "30 x 50", price: "₹1.55 Crores", area: "1500 sqft", direction: "North West, South East, East, West" },
@@ -793,10 +877,10 @@ export const properties: Property[] = [
                 { question: "What is Service Guided Home Buying (GHB) and Peace of Mind (POM) service?", answer: "Service Guided Home Buying (GHB) and Peace of Mind (POM) service provide end-to-end assistance in your home buying journey, ensuring a hassle-free and transparent experience from selection to possession." },
                 { question: "Why should I get an advisor to help me buy a property?", answer: "An advisor acts as your unbiased partner, helping you navigate the complex real estate market, verify documents, negotiate prices, and avoid common pitfalls." },
                 { question: "Which type of properties do you help with?", answer: "We assist with all types of residential properties including apartments, villas, plots, and gated communities across various budget segments." },
-                { question: "Can I buy homes via Propsoch?", answer: "Yes, you can explore, shortlist, and book homes directly through Propsoch with the help of our expert advisors." },
+                { question: "Can I buy homes via Sky and Soil?", answer: "Yes, you can explore, shortlist, and book homes directly through Sky and Soil with the help of our expert advisors." },
                 { question: "How do I know I am seeing all possible options in the market?", answer: "Our database covers 99% of the market inventory, and our advisors provide unbiased recommendations based on your specific requirements, not just what we want to sell." },
                 { question: "How can I be assured that I am paying the right price?", answer: "We provide data-backed market analysis and comparative pricing reports to ensure you get the best value for your investment." },
-                { question: "What other services can Propsoch help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
+                { question: "What other services can Sky & Soil help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." },
                 { question: "What is the cost of the services?", answer: "Our basic advisory services are free for home buyers. We charge a nominal fee only for premium services like legal verification and dedicated relationship management." },
             ]
         }