From 152022c68f20289b0ac5eb0790cd67eb6c2ca1cc Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Fri, 12 Dec 2025 12:40:34 +0530
Subject: [PATCH] loading issue conetnt top detals card updated

---
 src/app/contact/page.tsx                      |  8 ++-
 .../BengaluruPropertiesClientWrapper.tsx      |  1 +
 src/components/ContactCTA.tsx                 |  2 +-
 src/components/ContactCards.tsx               | 62 +++++++++++++++++++
 src/components/HeaderWrapper.tsx              |  9 +++
 src/components/PropertiesClient.tsx           | 17 +++--
 src/context/CompareContext.tsx                | 10 ++-
 src/data/properties.ts                        | 24 +++----
 8 files changed, 111 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ContactCards.tsx

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index c1b2ab7..07eb087 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,4 +1,5 @@
 import InnerBanner from "@/components/InnerBanner";
+import ContactCards from "@/components/ContactCards";
 import ContactCTA from "@/components/ContactCTA";
 import Footer from "@/components/Footer";
 import { Metadata } from "next";
@@ -20,8 +21,11 @@ export default function ContactPage() {
                 ]}
                 backgroundImage="/assets/images/about/contact-banner.webp"
             />
-            <div>
-                <ContactCTA />
+            <div className="relative bg-[#f3f1e6] dark:bg-gray-900 pt-20">
+                <ContactCards />
+                <div className="-mt-12">
+                    <ContactCTA />
+                </div>
             </div>
             <Footer />
         </main>
diff --git a/src/components/BengaluruPropertiesClientWrapper.tsx b/src/components/BengaluruPropertiesClientWrapper.tsx
index a47069b..026c602 100644
--- a/src/components/BengaluruPropertiesClientWrapper.tsx
+++ b/src/components/BengaluruPropertiesClientWrapper.tsx
@@ -7,6 +7,7 @@ export default function BengaluruPropertiesClientWrapper() {
     return (
         <PropertiesClient
             headerRenderer={(props) => <BengaluruHeader {...props} />}
+            bannerTitle="Properties for Sale in Bengaluru"
         />
     );
 }
diff --git a/src/components/ContactCTA.tsx b/src/components/ContactCTA.tsx
index deec156..9d144f0 100644
--- a/src/components/ContactCTA.tsx
+++ b/src/components/ContactCTA.tsx
@@ -116,7 +116,7 @@ export default function ContactCTA() {
     }, [alert.show]);
 
     return (
-        <section id="contact" className="relative py-24 bg-[#f3f1e6] dark:bg-gray-900">
+        <section id="contact" className="relative pb-24 dark:bg-transparent">
 
             <div className="relative z-10 max-w-6xl mx-auto px-6">
                 <motion.div
diff --git a/src/components/ContactCards.tsx b/src/components/ContactCards.tsx
new file mode 100644
index 0000000..78cc668
--- /dev/null
+++ b/src/components/ContactCards.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { Phone, Mail, MapPin } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function ContactCards() {
+    const cards = [
+        {
+            icon: <Phone size={24} className="text-white" />,
+            title: "Quick Contact",
+            details: ["+91-95388-34444"],
+            type: "phone"
+        },
+        {
+            icon: <Mail size={24} className="text-white" />,
+            title: "Email Address",
+            details: ["support@skyandsoil.com"],
+            type: "email"
+        },
+        {
+            icon: <MapPin size={24} className="text-white" />,
+            title: "Mailing Address",
+            details: [
+                "HSR Layout, Bengaluru, Karnataka 560102"
+            ],
+            type: "address"
+        }
+    ];
+
+    return (
+        <section className="relative z-20 px-6 max-w-6xl mx-auto pb-24">
+            <div className="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-3 gap-6">
+                {cards.map((card, index) => (
+                    <motion.div
+                        key={index}
+                        initial={{ opacity: 0, y: 20 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5, delay: index * 0.1 }}
+                        className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-5 flex flex-col items-start hover:-translate-y-1 transition-transform duration-300"
+                    >
+                        <div className="w-14 h-14 rounded-full bg-primary flex items-center justify-center mb-6 shadow-lg shadow-primary/30">
+                            {card.icon}
+                        </div>
+
+                        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                            {card.title}
+                        </h3>
+
+                        <div className="space-y-1">
+                            {card.details.map((line, i) => (
+                                <p key={i} className="text-gray-600 dark:text-gray-300 font-medium">
+                                    {line}
+                                </p>
+                            ))}
+                        </div>
+                    </motion.div>
+                ))}
+            </div>
+        </section>
+    );
+}
diff --git a/src/components/HeaderWrapper.tsx b/src/components/HeaderWrapper.tsx
index fb2fca6..030e431 100644
--- a/src/components/HeaderWrapper.tsx
+++ b/src/components/HeaderWrapper.tsx
@@ -1,6 +1,15 @@
 "use client";
+import { useEffect, useState } from "react";
 import Header from "./Header";
 
 export default function HeaderWrapper() {
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) return null;
+
     return <Header />;
 }
diff --git a/src/components/PropertiesClient.tsx b/src/components/PropertiesClient.tsx
index 0eeb076..7b480a7 100644
--- a/src/components/PropertiesClient.tsx
+++ b/src/components/PropertiesClient.tsx
@@ -12,9 +12,18 @@ import { motion } from "framer-motion";
 interface PropertiesClientProps {
     initialFilters?: Partial<FilterState>;
     headerRenderer?: (props: { filteredCount: number; totalCount: number }) => React.ReactNode;
+    bannerTitle?: string;
+    bannerSubtitle?: string;
+    bannerBackgroundImage?: string;
 }
 
-export default function PropertiesClient({ initialFilters, headerRenderer }: PropertiesClientProps = {}) {
+export default function PropertiesClient({
+    initialFilters,
+    headerRenderer,
+    bannerTitle = "Our Properties",
+    bannerSubtitle = "Discover your dream home from our exclusive collection of premium properties",
+    bannerBackgroundImage = "/assets/images/projects/projects-banner.webp"
+}: PropertiesClientProps = {}) {
     const searchParams = useSearchParams();
     const [filteredProperties, setFilteredProperties] = useState(properties);
     const [initializedFilters, setInitializedFilters] = useState<Partial<FilterState> | undefined>(undefined);
@@ -106,13 +115,13 @@ export default function PropertiesClient({ initialFilters, headerRenderer }: Pro
         <div className="min-h-screen bg-gray-50 dark:bg-black">
 
             <InnerBanner
-                title="Our Properties"
-                subtitle="Discover your dream home from our exclusive collection of premium properties"
+                title={bannerTitle}
+                subtitle={bannerSubtitle}
                 breadcrumbs={[
                     { label: "Home", href: "/" },
                     { label: "Properties" }
                 ]}
-                backgroundImage="/assets/images/projects/projects-banner.webp"
+                backgroundImage={bannerBackgroundImage}
             />
 
             <div>
diff --git a/src/context/CompareContext.tsx b/src/context/CompareContext.tsx
index 99363e3..aa3628f 100644
--- a/src/context/CompareContext.tsx
+++ b/src/context/CompareContext.tsx
@@ -15,6 +15,7 @@ const CompareContext = createContext<CompareContextType | undefined>(undefined);
 
 export function CompareProvider({ children }: { children: React.ReactNode }) {
     const [compareList, setCompareList] = useState<Property[]>([]);
+    const [isLoaded, setIsLoaded] = useState(false);
 
     // Load from localStorage on mount
     useEffect(() => {
@@ -26,12 +27,15 @@ export function CompareProvider({ children }: { children: React.ReactNode }) {
                 console.error("Failed to load compare list:", e);
             }
         }
+        setIsLoaded(true);
     }, []);
 
-    // Save to localStorage whenever compareList changes
+    // Save to localStorage whenever compareList changes, but ONLY after initial load
     useEffect(() => {
-        localStorage.setItem("compareProperties", JSON.stringify(compareList));
-    }, [compareList]);
+        if (isLoaded) {
+            localStorage.setItem("compareProperties", JSON.stringify(compareList));
+        }
+    }, [compareList, isLoaded]);
 
     const addToCompare = (property: Property) => {
         if (compareList.length >= 4) {
diff --git a/src/data/properties.ts b/src/data/properties.ts
index abbe698..af152b8 100644
--- a/src/data/properties.ts
+++ b/src/data/properties.ts
@@ -360,10 +360,10 @@ export const properties: Property[] = [
             { title: "Development Rights", description: "Outlines the agreed terms of development between the land owner & the builder" },
         ],
         builder: {
-            name: "Modern Spaaces",
-            description: "Established in 2012, Modern Spaces focuses on delivering thoughtfully designed residential and commercial developments. With over 1 million sq. ft. completed, the company caters to mid-segment and premium buyers in Bengaluru. Key projects like Modern Greens, Modern Heights, and Modern Meadows are recognized for their innovative layouts and contemporary features. Modern Spaces integrates green practices such as energy-efficient construction and landscaped open spaces into its developments. Known for timely delivery and quality construction, Modern Spaces continues to serve Bengaluru's growing real estate market.",
-            establishedYear: "2012",
-            completedProjects: "No Data",
+            name: "Godrej Properties",
+            description: "Godrej Properties brings the Godrej Group philosophy of innovation, sustainability, and excellence to the real estate industry. Each Godrej Properties development combines a 122-year legacy of excellence and trust with a commitment to cutting-edge design and technology.",
+            establishedYear: "1990",
+            completedProjects: "80+",
         },
         locality: {
             name: "Varthur",
@@ -666,10 +666,10 @@ export const properties: Property[] = [
             { title: "Development Rights", description: "Outlines the agreed terms of development between the land owner & the builder" },
         ],
         builder: {
-            name: "Modern Spaaces",
-            description: "Established in 2012, Modern Spaces focuses on delivering thoughtfully designed residential and commercial developments. With over 1 million sq. ft. completed, the company caters to mid-segment and premium buyers in Bengaluru. Key projects like Modern Greens, Modern Heights, and Modern Meadows are recognized for their innovative layouts and contemporary features. Modern Spaces integrates green practices such as energy-efficient construction and landscaped open spaces into its developments. Known for timely delivery and quality construction, Modern Spaces continues to serve Bengaluru's growing real estate market.",
-            establishedYear: "2012",
-            completedProjects: "No Data",
+            name: "Godrej Properties",
+            description: "Godrej Properties brings the Godrej Group philosophy of innovation, sustainability, and excellence to the real estate industry. Each Godrej Properties development combines a 122-year legacy of excellence and trust with a commitment to cutting-edge design and technology.",
+            establishedYear: "1990",
+            completedProjects: "80+",
         },
         locality: {
             name: "Varthur",
@@ -819,10 +819,10 @@ export const properties: Property[] = [
             { title: "Development Rights", description: "Outlines the agreed terms of development between the land owner & the builder" },
         ],
         builder: {
-            name: "Modern Spaaces",
-            description: "Established in 2012, Modern Spaces focuses on delivering thoughtfully designed residential and commercial developments. With over 1 million sq. ft. completed, the company caters to mid-segment and premium buyers in Bengaluru. Key projects like Modern Greens, Modern Heights, and Modern Meadows are recognized for their innovative layouts and contemporary features. Modern Spaces integrates green practices such as energy-efficient construction and landscaped open spaces into its developments. Known for timely delivery and quality construction, Modern Spaces continues to serve Bengaluru's growing real estate market.",
-            establishedYear: "2012",
-            completedProjects: "No Data",
+            name: "Godrej Properties",
+            description: "Godrej Properties brings the Godrej Group philosophy of innovation, sustainability, and excellence to the real estate industry. Each Godrej Properties development combines a 122-year legacy of excellence and trust with a commitment to cutting-edge design and technology.",
+            establishedYear: "1990",
+            completedProjects: "80+",
         },
         locality: {
             name: "Varthur",