property detail page map scoll optimmized
This commit is contained in:
akash
parent
0c3f4a1553
commit
d6d14902c9
@ -21,6 +21,32 @@ import axios from "axios";
|
||||
import { useCompare } from "@/context/CompareContext";
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const AnimateSection = ({ children, className, id, direction = "left" }: { children: React.ReactNode, className?: string, id?: string, direction?: "left" | "right" | "up" | "down" }) => {
|
||||
const variants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
x: direction === "left" ? -50 : direction === "right" ? 50 : 0,
|
||||
y: direction === "up" ? 50 : direction === "down" ? -50 : 0
|
||||
},
|
||||
visible: { opacity: 1, x: 0, y: 0 }
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
id={id}
|
||||
className={className}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
variants={variants}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -592,7 +618,11 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Image Gallery */}
|
||||
|
||||
<PropertyGallery images={property.images} title={property.title} />
|
||||
<AnimateSection direction="up">
|
||||
|
||||
<PropertyGallery images={property.images} title={property.title} />
|
||||
|
||||
</AnimateSection>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800">
|
||||
|
||||
@ -602,7 +632,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-foreground">{property.title}</h1>
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-foreground">{property.title}</h1>
|
||||
|
||||
<span className="px-4 py-1.5 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-full text-sm font-semibold shadow-md">
|
||||
|
||||
@ -630,7 +660,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Starting from</div>
|
||||
|
||||
<div className="text-4xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
|
||||
<div className="text-4xl md:text-2xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
|
||||
|
||||
{property.price}
|
||||
|
||||
@ -644,15 +674,15 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Quick Stats */}
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 pt-6 border-t border-gray-200 dark:border-gray-800">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4 pt-6 border-t border-gray-200 dark:border-gray-800">
|
||||
|
||||
<div className="text-center p-2 md:p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
<div className="text-2xl font-bold text-primary mb-1">{property.overview.bhk}</div>
|
||||
<div className="text-2xl md:text-1xl font-bold text-primary mb-1">{property.overview.bhk}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Configuration</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-2 md:p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
<div className="text-2xl font-bold text-primary mb-1">{property.overview.size}</div>
|
||||
<div className="text-2xl md:text-1xl font-bold text-primary mb-1">{property.overview.size}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Area</div>
|
||||
</div>
|
||||
|
||||
@ -684,7 +714,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Overview Section */}
|
||||
|
||||
<div id="overview" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="overview" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
|
||||
|
||||
{/* Header with title and badges */}
|
||||
|
||||
@ -904,11 +934,11 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
<div className="space-y-4">
|
||||
<AnimateSection className="space-y-4" direction="left">
|
||||
|
||||
<div className={`relative ${!isConnectivityExpanded ? 'max-h-[60px] overflow-hidden' : ''}`}>
|
||||
|
||||
@ -942,13 +972,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
{/* Info Cards Grid */}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
||||
<AnimateSection className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8" direction="right">
|
||||
|
||||
{/* RERA Card */}
|
||||
|
||||
@ -1056,7 +1086,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
@ -1064,7 +1094,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Pricing Section - Moved and Redesigned */}
|
||||
|
||||
<div id="pricing" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="pricing" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">Pricing</h2>
|
||||
|
||||
@ -1138,13 +1168,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
{/* Connectivity Section (Formerly Location) */}
|
||||
|
||||
<div id="connectivity" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="connectivity" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">Connectivity</h2>
|
||||
|
||||
@ -1194,13 +1224,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
<ConnectivityMap />
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
{/* Master Plan Section */}
|
||||
|
||||
<div id="master-plan" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="master-plan" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
|
||||
|
||||
@ -1262,7 +1292,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Stats Grid */}
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 border-t border-gray-100 dark:border-gray-800 pt-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 border-t border-gray-100 dark:border-gray-800 pt-8">
|
||||
|
||||
<div>
|
||||
|
||||
@ -1304,13 +1334,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
{/* Propsoch Clarity Engine Section */}
|
||||
|
||||
<div className="py-12">
|
||||
<AnimateSection className="py-12" direction="up">
|
||||
|
||||
<div className="text-center mb-12">
|
||||
|
||||
@ -1502,13 +1532,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
{/* Floor Plans Section */}
|
||||
|
||||
<div id="floor-plans" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="floor-plans" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">Floor Plans</h2>
|
||||
|
||||
@ -1654,13 +1684,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
{/* Amenities Section */}
|
||||
|
||||
<div id="amenities" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="amenities" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">Amenities</h2>
|
||||
|
||||
@ -1808,7 +1838,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
@ -1816,7 +1846,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Approvals Section */}
|
||||
|
||||
<div id="approvals" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="approvals" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">Approvals</h2>
|
||||
|
||||
@ -2082,13 +2112,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
{/* About the Builder Section */}
|
||||
|
||||
<div id="builder" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="builder" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">About the builder</h2>
|
||||
|
||||
@ -2136,7 +2166,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
@ -2146,7 +2176,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Locality Section */}
|
||||
|
||||
<div id="locality" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="locality" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">Locality</h2>
|
||||
|
||||
@ -2260,7 +2290,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Checkout Nearby Properties Section */}
|
||||
|
||||
<div id="nearby" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="nearby" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">Checkout Nearby Properties</h2>
|
||||
|
||||
@ -2360,9 +2390,9 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
@ -2378,7 +2408,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* FAQ Section */}
|
||||
|
||||
<div id="faq" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
|
||||
<AnimateSection id="faq" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="up">
|
||||
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">Frequently Asked Questions</h2>
|
||||
|
||||
@ -2484,7 +2514,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
@ -2500,7 +2530,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Contact Form */}
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-lg">
|
||||
<AnimateSection direction="up" className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-lg">
|
||||
|
||||
<h3 className="text-xl font-bold text-foreground mb-4">Get in Touch</h3>
|
||||
|
||||
@ -2618,7 +2648,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</AnimateSection>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user