loading issue conetnt top detals card updated

This commit is contained in:
akash 2025-12-12 12:40:34 +05:30
parent b8a2d91728
commit 152022c68f
8 changed files with 111 additions and 22 deletions

View File

@ -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,9 +21,12 @@ export default function ContactPage() {
]}
backgroundImage="/assets/images/about/contact-banner.webp"
/>
<div>
<div className="relative bg-[#f3f1e6] dark:bg-gray-900 pt-20">
<ContactCards />
<div className="-mt-12">
<ContactCTA />
</div>
</div>
<Footer />
</main>
);

View File

@ -7,6 +7,7 @@ export default function BengaluruPropertiesClientWrapper() {
return (
<PropertiesClient
headerRenderer={(props) => <BengaluruHeader {...props} />}
bannerTitle="Properties for Sale in Bengaluru"
/>
);
}

View File

@ -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

View File

@ -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>
);
}

View File

@ -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 />;
}

View File

@ -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>

View File

@ -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(() => {
if (isLoaded) {
localStorage.setItem("compareProperties", JSON.stringify(compareList));
}, [compareList]);
}
}, [compareList, isLoaded]);
const addToCompare = (property: Property) => {
if (compareList.length >= 4) {

View File

@ -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",