2930 lines
117 KiB
TypeScript
2930 lines
117 KiB
TypeScript
"use client";
|
||
|
||
|
||
|
||
import { useState, ChangeEvent, FormEvent, useEffect } from "react";
|
||
|
||
import Header from "@/components/Header";
|
||
|
||
import Footer from "@/components/Footer";
|
||
|
||
import PropertyGallery from "@/components/PropertyGallery";
|
||
|
||
import PropertyNav from "@/components/PropertyNav";
|
||
|
||
import InnerBanner from "@/components/InnerBanner";
|
||
|
||
import { Property } from "@/data/properties";
|
||
|
||
import axios from "axios";
|
||
|
||
import { useCompare } from "@/context/CompareContext";
|
||
|
||
import dynamic from 'next/dynamic';
|
||
|
||
|
||
|
||
const ConnectivityMap = dynamic(() => import('./ConnectivityMap'), {
|
||
|
||
ssr: false,
|
||
|
||
loading: () => <div className="h-[450px] w-full bg-gray-100 animate-pulse rounded-xl" />
|
||
|
||
});
|
||
|
||
|
||
|
||
interface FormData {
|
||
|
||
name: string;
|
||
|
||
email: string;
|
||
|
||
phone: string;
|
||
|
||
message: string;
|
||
|
||
}
|
||
|
||
|
||
|
||
interface FormErrors {
|
||
|
||
name?: string;
|
||
|
||
email?: string;
|
||
|
||
phone?: string;
|
||
|
||
}
|
||
|
||
|
||
|
||
const sections = [
|
||
|
||
{ id: "overview", label: "Overview" },
|
||
|
||
{ id: "pricing", label: "Pricing" },
|
||
|
||
{ id: "connectivity", label: "Connectivity" },
|
||
|
||
{ id: "master-plan", label: "Master Plan" },
|
||
|
||
{ id: "floor-plans", label: "Floor Plans" },
|
||
|
||
{ id: "amenities", label: "Amenities" },
|
||
|
||
// { id: "challenges", label: "Challenges" },
|
||
|
||
{ id: "approvals", label: "Approvals" },
|
||
|
||
{ id: "builder", label: "Builder" },
|
||
|
||
{ id: "locality", label: "Locality" },
|
||
|
||
{ id: "faq", label: "FAQ's" },
|
||
|
||
];
|
||
|
||
|
||
|
||
export default function PropertyDetailClient({ property }: { property: Property }) {
|
||
|
||
const [formData, setFormData] = useState<FormData>({
|
||
|
||
name: "",
|
||
|
||
email: "",
|
||
|
||
phone: "",
|
||
|
||
message: "",
|
||
|
||
});
|
||
|
||
|
||
|
||
const [formErrors, setFormErrors] = useState<FormErrors>({});
|
||
|
||
const [alert, setAlert] = useState<{ show: boolean; type: string; message: string }>({
|
||
|
||
show: false,
|
||
|
||
type: "",
|
||
|
||
message: "",
|
||
|
||
});
|
||
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
|
||
const [isExpanded, setIsExpanded] = useState(false);
|
||
|
||
const [isConnectivityExpanded, setIsConnectivityExpanded] = useState(false);
|
||
|
||
const [activeMapTab, setActiveMapTab] = useState("Transit");
|
||
|
||
const [isMapEnabled, setIsMapEnabled] = useState(false);
|
||
|
||
const [isLightboxOpen, setIsLightboxOpen] = useState(false);
|
||
|
||
const [activeFloorPlan, setActiveFloorPlan] = useState("30 x 40");
|
||
|
||
const [isAmenitiesModalOpen, setIsAmenitiesModalOpen] = useState(false);
|
||
|
||
const [isAmenitiesLoading, setIsAmenitiesLoading] = useState(false);
|
||
|
||
const [activeFaqTab, setActiveFaqTab] = useState('Services');
|
||
|
||
const [expandedFaq, setExpandedFaq] = useState<number | null>(null);
|
||
|
||
|
||
|
||
const { addToCompare, removeFromCompare, isInCompare } = useCompare();
|
||
|
||
const isCompared = isInCompare(property.id);
|
||
|
||
const [isWishlisted, setIsWishlisted] = useState(false);
|
||
|
||
|
||
|
||
const handleShare = async () => {
|
||
|
||
if (navigator.share) {
|
||
|
||
try {
|
||
|
||
await navigator.share({
|
||
|
||
title: property.title,
|
||
|
||
text: `Check out this property: ${property.title} in ${property.location}`,
|
||
|
||
url: window.location.href,
|
||
|
||
});
|
||
|
||
} catch (error) {
|
||
|
||
console.log('Error sharing:', error);
|
||
|
||
}
|
||
|
||
} else {
|
||
|
||
// Fallback to clipboard
|
||
|
||
navigator.clipboard.writeText(window.location.href);
|
||
|
||
setAlert({
|
||
|
||
show: true,
|
||
|
||
type: 'success',
|
||
|
||
message: 'Link copied to clipboard!'
|
||
|
||
});
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
const handleWishlist = () => {
|
||
|
||
setIsWishlisted(!isWishlisted);
|
||
|
||
setAlert({
|
||
|
||
show: true,
|
||
|
||
type: 'success',
|
||
|
||
message: !isWishlisted ? 'Added to your wishlist!' : 'Removed from your wishlist'
|
||
|
||
});
|
||
|
||
};
|
||
|
||
|
||
|
||
const handlePrint = () => {
|
||
|
||
window.print();
|
||
|
||
};
|
||
|
||
|
||
|
||
const handleCompareToggle = () => {
|
||
|
||
if (isCompared) {
|
||
|
||
removeFromCompare(property.id);
|
||
|
||
setAlert({
|
||
|
||
show: true,
|
||
|
||
type: 'success',
|
||
|
||
message: 'Removed from compare list'
|
||
|
||
});
|
||
|
||
} else {
|
||
|
||
addToCompare(property);
|
||
|
||
setAlert({
|
||
|
||
show: true,
|
||
|
||
type: 'success',
|
||
|
||
message: 'Added to compare list'
|
||
|
||
});
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
const faqData: Record<string, { question: string; answer: string }[]> = {
|
||
|
||
'Project Details': [
|
||
|
||
{ question: "What is the total land area?", answer: "The project is spread across 5 acres of prime land." },
|
||
|
||
{ question: "How many units are there?", answer: "There are a total of 450 luxury units." },
|
||
|
||
{ question: "What is the completion date?", answer: "The project is expected to be completed by Dec 2026." },
|
||
|
||
{ question: "Is it RERA approved?", answer: "Yes, the project is fully RERA approved." },
|
||
|
||
],
|
||
|
||
'Location & Connectivity': [
|
||
|
||
{ question: "How far is the nearest metro station?", answer: "The nearest metro station is just 2km away." },
|
||
|
||
{ question: "Are there schools nearby?", answer: "Yes, there are several international schools within a 3km radius." },
|
||
|
||
{ question: "How is the road connectivity?", answer: "The project is well-connected to the Outer Ring Road and Whitefield." },
|
||
|
||
{ question: "Is there a hospital nearby?", answer: "Manipal Hospital is located 1.5km from the project." },
|
||
|
||
],
|
||
|
||
'Price & Booking': [
|
||
|
||
{ question: "What is the booking amount?", answer: "The booking amount is 10% of the total sale value." },
|
||
|
||
{ question: "Are there any bank offers?", answer: "Yes, we have tie-ups with SBI, HDFC, and ICICI for home loans." },
|
||
|
||
{ question: "What are the additional charges?", answer: "Additional charges include GST, registration, and maintenance deposits." },
|
||
|
||
{ question: "Is the price negotiable?", answer: "Prices are competitive, but we can discuss offers on table." },
|
||
|
||
],
|
||
|
||
'Services': [
|
||
|
||
{ 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: "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 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." },
|
||
|
||
]
|
||
|
||
};
|
||
|
||
|
||
|
||
const handleSeeAllAmenities = () => {
|
||
|
||
setIsAmenitiesLoading(true);
|
||
|
||
setTimeout(() => {
|
||
|
||
setIsAmenitiesLoading(false);
|
||
|
||
setIsAmenitiesModalOpen(true);
|
||
|
||
}, 500);
|
||
|
||
};
|
||
|
||
|
||
|
||
const 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" },
|
||
|
||
{ id: "30 x 60", price: "₹1.86 Crores", area: "1800 sqft", direction: "North, East, West" },
|
||
|
||
{ id: "40 x 60", price: "₹2.48 Crores", area: "2400 sqft", direction: "East, West" },
|
||
|
||
{ id: "50 x 60", price: "₹3.10 Crores", area: "3000 sqft", direction: "North" },
|
||
|
||
];
|
||
|
||
|
||
|
||
const activePlanDetails = floorPlans.find(p => p.id === activeFloorPlan) || floorPlans[0];
|
||
|
||
|
||
|
||
const amenitiesData = {
|
||
|
||
Lifestyle: [
|
||
|
||
{ name: "Gym - Indoor", available: true, rare: true, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" /></svg> },
|
||
|
||
{ name: "Gym - Outdoor", available: true, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> },
|
||
|
||
{ name: "Kids Play Area", available: true, rare: true, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> },
|
||
|
||
{ name: "Amphitheatre", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" /></svg> },
|
||
|
||
{ name: "Cafe/Restaurant", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg> },
|
||
|
||
],
|
||
|
||
Sports: [
|
||
|
||
{ name: "Running Track", available: true, rare: true, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> },
|
||
|
||
{ name: "Badminton", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /></svg> },
|
||
|
||
{ name: "Basketball", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg> },
|
||
|
||
{ name: "Cricket Ground", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> },
|
||
|
||
{ name: "Cricket Pitch", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg> },
|
||
|
||
],
|
||
|
||
Natural: [
|
||
|
||
{ name: "Army Land", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> },
|
||
|
||
{ name: "Forest", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> },
|
||
|
||
{ name: "Golf Course", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> },
|
||
|
||
{ name: "Lake", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> },
|
||
|
||
{ name: "Mountain/Hill", available: false, icon: <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> },
|
||
|
||
]
|
||
|
||
};
|
||
|
||
|
||
|
||
const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||
|
||
const { name, value } = e.target;
|
||
|
||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||
|
||
// Clear error when user types
|
||
|
||
if (formErrors[name as keyof FormErrors]) {
|
||
|
||
setFormErrors(prev => ({ ...prev, [name]: undefined }));
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
const handleSubmit = async (e: FormEvent) => {
|
||
|
||
e.preventDefault();
|
||
|
||
|
||
|
||
const errors: FormErrors = {};
|
||
|
||
if (!formData.name.trim()) errors.name = "Name is required.";
|
||
|
||
if (!formData.phone.trim()) errors.phone = "Phone number is required.";
|
||
|
||
if (!formData.email.trim()) errors.email = "Email is required.";
|
||
|
||
|
||
|
||
setFormErrors(errors);
|
||
|
||
if (Object.keys(errors).length > 0) return;
|
||
|
||
|
||
|
||
setIsSubmitting(true);
|
||
|
||
|
||
|
||
const emailData = {
|
||
|
||
name: formData.name,
|
||
|
||
phone: formData.phone,
|
||
|
||
email: formData.email,
|
||
|
||
subject: `Property Inquiry: ${property?.title} from ${formData.name}`,
|
||
|
||
message: `<strong>Property Inquiry</strong><br /><br />
|
||
|
||
<strong>Property:</strong> ${property?.title}<br />
|
||
|
||
<strong>Location:</strong> ${property?.location}<br />
|
||
|
||
<strong>Price:</strong> ${property?.price}<br /><br />
|
||
|
||
<strong>Customer Details:</strong><br />
|
||
|
||
Name: ${formData.name}<br />
|
||
|
||
Phone: ${formData.phone}<br />
|
||
|
||
Email: ${formData.email}<br />
|
||
|
||
Message: ${formData.message || 'N/A'}`,
|
||
|
||
to: "hello@skyandsoil.com",
|
||
|
||
senderName: "Sky and Soil Property Inquiry",
|
||
|
||
};
|
||
|
||
|
||
|
||
try {
|
||
|
||
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||
|
||
headers: { "Content-Type": "application/json" },
|
||
|
||
});
|
||
|
||
|
||
|
||
setAlert({
|
||
|
||
show: true,
|
||
|
||
type: "success",
|
||
|
||
message: res?.data?.message || "Request sent successfully! We will contact you soon.",
|
||
|
||
});
|
||
|
||
|
||
|
||
setFormData({ name: "", email: "", phone: "", message: "" });
|
||
|
||
setFormErrors({});
|
||
|
||
} catch (error) {
|
||
|
||
setAlert({
|
||
|
||
show: true,
|
||
|
||
type: "danger",
|
||
|
||
message: "Failed to send request. Please try again later.",
|
||
|
||
});
|
||
|
||
} finally {
|
||
|
||
setIsSubmitting(false);
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
useEffect(() => {
|
||
|
||
if (alert.show) {
|
||
|
||
const timer = setTimeout(() => {
|
||
|
||
setAlert(prev => ({ ...prev, show: false }));
|
||
|
||
}, 5000);
|
||
|
||
return () => clearTimeout(timer);
|
||
|
||
}
|
||
|
||
}, [alert.show]);
|
||
|
||
|
||
|
||
return (
|
||
|
||
<div className="min-h-screen bg-gray-50 dark:bg-black">
|
||
|
||
<Header />
|
||
|
||
|
||
|
||
<InnerBanner
|
||
|
||
title={property.title}
|
||
|
||
subtitle={property.location}
|
||
|
||
breadcrumbs={[
|
||
|
||
{ label: "Home", href: "/" },
|
||
|
||
{ label: "Projects", href: "/projects" },
|
||
|
||
{ label: "Residential Real Estate", href: "/residential-real-estate" },
|
||
|
||
{ label: property.title }
|
||
|
||
]}
|
||
|
||
backgroundImage={property.image}
|
||
|
||
/>
|
||
|
||
|
||
|
||
<div>
|
||
|
||
|
||
|
||
{/* Sticky Navigation */}
|
||
|
||
<PropertyNav sections={sections} />
|
||
|
||
|
||
|
||
<div className="max-w-7xl mx-auto px-6 py-8">
|
||
|
||
{/* Image Gallery */}
|
||
|
||
<PropertyGallery images={property.images} title={property.title} />
|
||
|
||
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800">
|
||
|
||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
||
|
||
<div>
|
||
|
||
<div className="flex items-center gap-3 mb-3">
|
||
|
||
<h1 className="text-3xl md:text-4xl 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">
|
||
|
||
{property.status}
|
||
|
||
</span>
|
||
|
||
</div>
|
||
|
||
<div className="flex items-center text-gray-600 dark:text-gray-400">
|
||
|
||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||
|
||
</svg>
|
||
|
||
{property.location}
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-right">
|
||
|
||
<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">
|
||
|
||
{property.price}
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Quick Stats */}
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-6 border-t border-gray-200 dark:border-gray-800">
|
||
|
||
<div className="text-center 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-sm text-gray-600 dark:text-gray-400">Configuration</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-center 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-sm text-gray-600 dark:text-gray-400">Area</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||
|
||
<div className="text-2xl font-bold text-primary mb-1">{property.overview.possession}</div>
|
||
|
||
<div className="text-sm text-gray-600 dark:text-gray-400">Possession</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||
|
||
<div className="text-2xl font-bold text-primary mb-1">{property.overview.totalUnits}</div>
|
||
|
||
<div className="text-sm text-gray-600 dark:text-gray-400">Total Units</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
|
||
|
||
{/* Main Content */}
|
||
|
||
<div className="lg:col-span-2 space-y-8">
|
||
|
||
{/* Property Header */}
|
||
|
||
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
{/* Header with title and badges */}
|
||
|
||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
||
|
||
<div className="flex-1">
|
||
|
||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Overview</h2>
|
||
|
||
<p className="text-gray-600 dark:text-gray-400">
|
||
|
||
Ivy County by <span className="text-primary font-medium">Modern Spaaces</span>
|
||
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
|
||
<span className="px-4 py-1.5 bg-green-100 text-green-700 rounded-full text-sm font-medium">Better</span>
|
||
|
||
<span className="px-4 py-1.5 bg-orange-100 text-orange-700 rounded-full text-sm font-medium">Average</span>
|
||
|
||
<span className="px-4 py-1.5 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">Subpar</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Subtitle */}
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 text-sm mb-8">
|
||
|
||
Average is based on comparable projects in Varthur
|
||
|
||
</p>
|
||
|
||
|
||
|
||
{/* Info Grid - 2 rows x 3 columns */}
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
|
||
{/* Land Area */}
|
||
|
||
<div className="bg-green-50 dark:bg-green-900/10 rounded-xl p-6 border border-green-100 dark:border-green-800/30">
|
||
|
||
<div className="flex items-center gap-3 mb-3">
|
||
|
||
<div className="w-10 h-10 bg-white dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||
|
||
<svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">50.00 Acres</div>
|
||
|
||
<div className="text-sm font-medium text-gray-900 dark:text-white mb-1">Land Area</div>
|
||
|
||
<div className="text-xs text-orange-600 dark:text-orange-400">Avg is 50.00 acres</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Closest Metro */}
|
||
|
||
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-6 border border-blue-100 dark:border-blue-800/30">
|
||
|
||
<div className="flex items-center gap-3 mb-3">
|
||
|
||
<div className="w-10 h-10 bg-white dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||
|
||
<svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">3.62 kms</div>
|
||
|
||
<div className="text-sm font-medium text-gray-900 dark:text-white mb-1">Closest Metro</div>
|
||
|
||
<div className="text-xs text-blue-600 dark:text-blue-400">Avg is 0.00 kms</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Approach Road */}
|
||
|
||
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-6 border border-blue-100 dark:border-blue-800/30">
|
||
|
||
<div className="flex items-center gap-3 mb-3">
|
||
|
||
<div className="w-10 h-10 bg-white dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||
|
||
<svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">15 meters</div>
|
||
|
||
<div className="text-sm font-medium text-gray-900 dark:text-white mb-1">Approach Road</div>
|
||
|
||
<div className="text-xs text-blue-600 dark:text-blue-400">Avg is 15 meters</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Open Area */}
|
||
|
||
<div className="bg-red-50 dark:bg-red-900/10 rounded-xl p-6 border border-red-100 dark:border-red-800/30">
|
||
|
||
<div className="flex items-center gap-3 mb-3">
|
||
|
||
<div className="w-10 h-10 bg-white dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||
|
||
<svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">45%</div>
|
||
|
||
<div className="text-sm font-medium text-gray-900 dark:text-white mb-1">Open Area</div>
|
||
|
||
<div className="text-xs text-red-600 dark:text-red-400">Avg is 45%</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Unit Density */}
|
||
|
||
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-6 border border-blue-100 dark:border-blue-800/30">
|
||
|
||
<div className="flex items-center gap-3 mb-3">
|
||
|
||
<div className="w-10 h-10 bg-white dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||
|
||
<svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 16a1 1 0 011-1h4a1 1 0 011 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-3zM14 16a1 1 0 011-1h4a1 1 0 011 1v3a1 1 0 01-1 1h-4a1 1 0 01-1-1v-3z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">13 units/acre</div>
|
||
|
||
<div className="text-sm font-medium text-gray-900 dark:text-white mb-1">Unit Density</div>
|
||
|
||
<div className="text-xs text-blue-600 dark:text-blue-400">Avg is 13 units/acre</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Club House */}
|
||
|
||
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-6 border border-blue-100 dark:border-blue-800/30">
|
||
|
||
<div className="flex items-center gap-3 mb-3">
|
||
|
||
<div className="w-10 h-10 bg-white dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||
|
||
<svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">50000 sqft</div>
|
||
|
||
<div className="text-sm font-medium text-gray-900 dark:text-white mb-1">Club House</div>
|
||
|
||
<div className="text-xs text-blue-600 dark:text-blue-400">Avg is 50000 sqft</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div className="space-y-4">
|
||
|
||
<div className={`relative ${!isExpanded ? 'max-h-[150px] overflow-hidden' : ''}`}>
|
||
|
||
<p className="text-gray-700 dark:text-gray-300 leading-relaxed text-lg">
|
||
|
||
{property.description}
|
||
|
||
{/* Simulating more content if description is short, or just showing description.
|
||
|
||
For the purpose of "Read More", we usually need a longer text.
|
||
|
||
If property.description is short, this might not look like the screenshot.
|
||
|
||
Assuming property.description is the main content. */}
|
||
|
||
</p>
|
||
|
||
|
||
|
||
{!isExpanded && (
|
||
|
||
<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white dark:from-gray-900 to-transparent"></div>
|
||
|
||
)}
|
||
|
||
</div>
|
||
|
||
<button
|
||
|
||
onClick={() => setIsExpanded(!isExpanded)}
|
||
|
||
className="text-orange-500 font-medium hover:text-orange-600 transition-colors"
|
||
|
||
>
|
||
|
||
{isExpanded ? "Read less" : "Read more"}
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Info Cards Grid */}
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
||
|
||
{/* RERA Card */}
|
||
|
||
<div className="bg-cyan-50 dark:bg-cyan-900/20 rounded-2xl p-6 flex flex-col items-center text-center border border-cyan-100 dark:border-cyan-800/30">
|
||
|
||
<div className="w-12 h-12 mb-4 relative">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-12 h-12 text-blue-600">
|
||
|
||
<path fillRule="evenodd" d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.352-.272-2.636-.759-3.808a.75.75 0 00-.722-.515 11.209 11.209 0 01-7.877-3.08zM12 13.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" clipRule="evenodd" />
|
||
|
||
</svg>
|
||
|
||
<div className="absolute bottom-0 right-0 bg-white rounded-full p-0.5">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4 text-green-500">
|
||
|
||
<path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h3 className="font-bold text-gray-900 dark:text-white mb-2">{property.title} is approved by RERA</h3>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-6">It was approved on Nov 2024</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">
|
||
|
||
View RERA details
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Brochure Card */}
|
||
|
||
<div className="bg-purple-50 dark:bg-purple-900/20 rounded-2xl p-6 flex flex-col items-center text-center border border-purple-100 dark:border-purple-800/30">
|
||
|
||
<div className="w-12 h-12 mb-4 text-purple-400">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-12 h-12">
|
||
|
||
<path d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z" />
|
||
|
||
<path d="M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<h3 className="font-bold text-gray-900 dark:text-white mb-2">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>
|
||
|
||
<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">
|
||
|
||
Download Brochure
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* 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="w-12 h-12 mb-4 text-purple-500 relative">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-12 h-12">
|
||
|
||
<path d="M11.25 4.533A9.707 9.707 0 006 3.75a9.753 9.753 0 00-3.255.555.75.75 0 00-.575.69v9.12c0 .266.183.505.435.58 1.86.556 3.867.556 5.722 0 .253-.075.436-.314.436-.58v-9.12a.75.75 0 00-.575-.69zM12.75 4.533c.58.194 1.177.34 1.78.435v9.12c0 .266.183.505.435.58 1.86.556 3.867.556 5.722 0 .253-.075.436-.314.436-.58v-9.12a.75.75 0 00-.575-.69 9.753 9.753 0 00-3.255-.555 9.707 9.707 0 00-5.25.784v-9.12c0-.266.183-.505.435-.58a9.709 9.709 0 015.25-.784z" />
|
||
|
||
</svg>
|
||
|
||
<div className="absolute -bottom-1 -right-1">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 text-gray-700">
|
||
|
||
<path d="M8.25 10.875a2.625 2.625 0 115.25 0 2.625 2.625 0 01-5.25 0z" />
|
||
|
||
<path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.125 4.5a4.125 4.125 0 102.338 7.524l2.007 2.006a.75.75 0 101.06-1.06l-2.006-2.007a4.125 4.125 0 00-3.399-6.463z" clipRule="evenodd" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h3 className="font-bold text-gray-900 dark:text-white mb-2">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>
|
||
|
||
<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">
|
||
|
||
Get Pros & Cons
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<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>
|
||
|
||
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
|
||
<div>
|
||
|
||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Range</div>
|
||
|
||
<div className="text-2xl font-bold text-foreground">{property.price}</div>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<div className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 mb-1">
|
||
|
||
Monthly EMI
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4 text-blue-500">
|
||
|
||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-foreground">₹ 73K - ₹ 1.82 L</div>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<div className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 mb-1">
|
||
|
||
Project's Avg.
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4 text-blue-500">
|
||
|
||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-foreground">₹ 10326 psft.</div>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<div className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 mb-1">
|
||
|
||
Market Avg.
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4 text-blue-500">
|
||
|
||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div className="text-2xl font-bold text-foreground">₹ 9700 psft.</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">Connectivity</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-6">{property.title}</p>
|
||
|
||
|
||
|
||
<div className="mb-8">
|
||
|
||
<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>
|
||
|
||
{property.title} is located in {property.location}. In its vicinity, the closest metro is Dommasandra Circle Metro Station. It takes approximately 84 mins to reach the Kempegowda Airport from this property.
|
||
|
||
The area is well-connected to major IT hubs, schools, and hospitals, making it an ideal choice for families and professionals alike.
|
||
|
||
</p>
|
||
|
||
{!isConnectivityExpanded && (
|
||
|
||
<div className="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-white dark:from-gray-900 to-transparent"></div>
|
||
|
||
)}
|
||
|
||
</div>
|
||
|
||
<button
|
||
|
||
onClick={() => setIsConnectivityExpanded(!isConnectivityExpanded)}
|
||
|
||
className="text-orange-500 font-medium hover:text-orange-600 transition-colors mt-2 text-sm underline"
|
||
|
||
>
|
||
|
||
{isConnectivityExpanded ? "Read less" : "Read more"}
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Map Interface */}
|
||
|
||
<ConnectivityMap />
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
|
||
|
||
<div>
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">Master Plan</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400">
|
||
|
||
{property.title} is a plotted development with 658 plots.
|
||
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<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
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Master Plan Image */}
|
||
|
||
<div
|
||
|
||
className="relative rounded-xl overflow-hidden border border-gray-100 dark:border-gray-700 cursor-zoom-in group mb-8"
|
||
|
||
onClick={() => setIsLightboxOpen(true)}
|
||
|
||
>
|
||
|
||
<img
|
||
|
||
src="/assets/images/image.png"
|
||
|
||
alt="Master Plan"
|
||
|
||
className="w-full h-auto object-cover hover:scale-105 transition-transform duration-500"
|
||
|
||
/>
|
||
|
||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
|
||
|
||
<span className="bg-white/90 text-gray-900 px-4 py-2 rounded-full text-sm font-medium shadow-lg backdrop-blur-sm">
|
||
|
||
Click to zoom
|
||
|
||
</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* 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>
|
||
|
||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Units</div>
|
||
|
||
<div className="text-lg font-semibold text-foreground">658</div>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Water Source</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
|
||
<span className="text-lg font-semibold text-foreground">Borewells</span>
|
||
|
||
<span className="bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded-full font-medium">+1</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Park Area</div>
|
||
|
||
<div className="text-lg font-semibold text-foreground">8.00 Acres</div>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Land type</div>
|
||
|
||
<div className="text-lg font-semibold text-foreground">Agricultural</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Propsoch Clarity Engine Section */}
|
||
|
||
<div className="py-12">
|
||
|
||
<div className="text-center mb-12">
|
||
|
||
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-3">The Propsoch 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
|
||
|
||
<span className="text-2xl">☝️</span>
|
||
|
||
</p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
|
||
{/* Card 1: Compare */}
|
||
|
||
<div className="bg-orange-50 dark:bg-orange-900/10 rounded-2xl p-8 flex flex-col items-center text-center relative overflow-hidden group hover:shadow-lg transition-shadow duration-300">
|
||
|
||
{/* Decorative Circle */}
|
||
|
||
<div className="absolute -top-10 -right-10 w-32 h-32 bg-orange-100 dark:bg-orange-800/20 rounded-full blur-2xl"></div>
|
||
|
||
|
||
|
||
<div className="w-24 h-24 mb-6 relative z-10">
|
||
|
||
{/* House Icon Placeholder - Using SVG for 3D feel */}
|
||
|
||
<svg viewBox="0 0 200 200" className="w-full h-full drop-shadow-xl">
|
||
|
||
<path fill="#FDBA74" d="M100 20L20 90h20v90h40v-60h40v60h40V90h20L100 20z" />
|
||
|
||
<path fill="#FB923C" d="M120 180v-60H80v60H40V90H20L100 20l80 70h-20v90h-40z" opacity="0.5" />
|
||
|
||
<circle cx="140" cy="140" r="30" fill="#22C55E" />
|
||
|
||
<path fill="#FFF" d="M130 140l10 10 20-20" stroke="#FFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Like this project?</h3>
|
||
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Compare it with the rest</h3>
|
||
|
||
|
||
|
||
<p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
|
||
|
||
Compare 2 properties side by side on 40+ parameters like connectivity, layout, price, specs and more
|
||
|
||
</p>
|
||
|
||
|
||
|
||
<button className="w-full py-3 px-6 bg-transparent border-2 border-gray-900 dark:border-white rounded-lg text-sm font-bold text-gray-900 dark:text-white hover:bg-gray-900 hover:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors mt-auto">
|
||
|
||
Compare With Peers
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Card 2: Negotiate (Green) */}
|
||
|
||
<div className="bg-green-50 dark:bg-green-900/10 rounded-2xl p-8 pt-12 flex flex-col items-center text-center relative overflow-hidden group hover:shadow-lg transition-shadow duration-300 border-t-4 border-green-500">
|
||
|
||
{/* 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 300+ FAMILIES
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Sparkles */}
|
||
|
||
<div className="absolute top-10 left-4 text-green-300">
|
||
|
||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" /></svg>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div className="w-24 h-24 mb-6 relative z-10">
|
||
|
||
{/* Trophy Icon */}
|
||
|
||
<svg viewBox="0 0 200 200" className="w-full h-full drop-shadow-xl text-green-500">
|
||
|
||
<path fill="currentColor" d="M160 40h-20c0-11-9-20-20-20H80c-11 0-20 9-20 20H40c-11 0-20 9-20 20v20c0 22 18 40 40 40h5c6 19 24 33 45 33s39-14 45-33h5c22 0 40-18 40-40V60c0-11-9-20-20-20zm-100 40H40V60h20v20zm100 0h-20V60h20v20z" />
|
||
|
||
<path fill="#22543D" d="M100 140v40H70v20h60v-20h-30v-40" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Pay less. Get more.</h3>
|
||
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Let us negotiate for you.</h3>
|
||
|
||
|
||
|
||
<p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
|
||
|
||
Get a free Peace of Mind report, solid negotiations & a loyalty reward up to ₹3.29 Lakhs when you work with us
|
||
|
||
</p>
|
||
|
||
|
||
|
||
<button className="w-full py-3 px-6 bg-green-500 hover:bg-green-600 text-white rounded-lg text-sm font-bold transition-colors mt-auto shadow-lg shadow-green-500/30">
|
||
|
||
Get Pros & Cons
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Card 3: Report (Purple) */}
|
||
|
||
<div className="bg-purple-50 dark:bg-purple-900/10 rounded-2xl p-8 flex flex-col items-center text-center relative overflow-hidden group hover:shadow-lg transition-shadow duration-300">
|
||
|
||
{/* Decorative Triangle */}
|
||
|
||
<div className="absolute top-0 right-0 w-24 h-24 bg-purple-200 dark:bg-purple-800/30 transform rotate-45 translate-x-12 -translate-y-12"></div>
|
||
|
||
|
||
|
||
<div className="w-24 h-24 mb-6 relative z-10">
|
||
|
||
{/* Report Icon */}
|
||
|
||
<svg viewBox="0 0 200 200" className="w-full h-full drop-shadow-xl text-purple-500">
|
||
|
||
<path fill="#E9D5FF" d="M60 20h80l40 40v120H60V20z" />
|
||
|
||
<path fill="currentColor" d="M80 60h60v10H80zM80 90h60v10H80zM80 120h40v10H80z" />
|
||
|
||
<circle cx="140" cy="140" r="30" fill="#A855F7" />
|
||
|
||
<path fill="none" stroke="#FFF" strokeWidth="4" d="M130 140l5 5 15-15" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Almost convinced?</h3>
|
||
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">See what we uncovered</h3>
|
||
|
||
|
||
|
||
<p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
|
||
|
||
Ideal if you've already visited and close to deciding. Our Peace of Mind report shows you what builders won't.
|
||
|
||
</p>
|
||
|
||
|
||
|
||
<button className="w-full py-3 px-6 bg-transparent border-2 border-gray-900 dark:border-white rounded-lg text-sm font-bold text-gray-900 dark:text-white hover:bg-gray-900 hover:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors mt-auto">
|
||
|
||
See Sample Report
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">Floor Plans</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-8">
|
||
|
||
{property.title} has plots ranging from 1200 sqft to 3000 sqft.
|
||
|
||
</p>
|
||
|
||
|
||
|
||
{/* Tabs */}
|
||
|
||
<div className="flex items-center gap-4 mb-6">
|
||
|
||
<div className="flex-1 overflow-x-auto flex gap-3 pb-2 scrollbar-hide">
|
||
|
||
{floorPlans.map((plan) => (
|
||
|
||
<button
|
||
|
||
key={plan.id}
|
||
|
||
onClick={() => setActiveFloorPlan(plan.id)}
|
||
|
||
className={`px-6 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-all ${activeFloorPlan === plan.id
|
||
|
||
? "bg-orange-50 text-orange-500 border border-orange-200"
|
||
|
||
: "bg-white text-gray-600 border border-gray-200 hover:border-gray-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700"
|
||
|
||
}`}
|
||
|
||
>
|
||
|
||
{plan.id}
|
||
|
||
</button>
|
||
|
||
))}
|
||
|
||
</div>
|
||
|
||
<div className="flex gap-2">
|
||
|
||
<button
|
||
|
||
onClick={() => {
|
||
|
||
const currentIndex = floorPlans.findIndex(p => p.id === activeFloorPlan);
|
||
|
||
if (currentIndex > 0) {
|
||
|
||
setActiveFloorPlan(floorPlans[currentIndex - 1].id);
|
||
|
||
}
|
||
|
||
}}
|
||
|
||
disabled={floorPlans.findIndex(p => p.id === activeFloorPlan) === 0}
|
||
|
||
className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
||
>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5 text-gray-600 dark:text-gray-400">
|
||
|
||
<path fillRule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clipRule="evenodd" />
|
||
|
||
</svg>
|
||
|
||
</button>
|
||
|
||
<button
|
||
|
||
onClick={() => {
|
||
|
||
const currentIndex = floorPlans.findIndex(p => p.id === activeFloorPlan);
|
||
|
||
if (currentIndex < floorPlans.length - 1) {
|
||
|
||
setActiveFloorPlan(floorPlans[currentIndex + 1].id);
|
||
|
||
}
|
||
|
||
}}
|
||
|
||
disabled={floorPlans.findIndex(p => p.id === activeFloorPlan) === floorPlans.length - 1}
|
||
|
||
className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
||
>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5 text-gray-600 dark:text-gray-400">
|
||
|
||
<path fillRule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clipRule="evenodd" />
|
||
|
||
</svg>
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Active Plan Details Card */}
|
||
|
||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
||
|
||
<div className="space-y-6 flex-1">
|
||
|
||
<div className="flex items-baseline gap-4">
|
||
|
||
<h3 className="text-3xl font-medium text-gray-900 dark:text-white">{activePlanDetails.id}</h3>
|
||
|
||
<span className="text-2xl font-bold text-gray-900 dark:text-white">{activePlanDetails.price}</span>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div>
|
||
|
||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Saleable Area</div>
|
||
|
||
<div className="text-lg font-medium text-gray-900 dark:text-white">{activePlanDetails.area}</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div>
|
||
|
||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Direction(s)</div>
|
||
|
||
<div className="text-lg font-medium text-gray-900 dark:text-white">{activePlanDetails.direction}</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">Amenities</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-8">{property.title}</p>
|
||
|
||
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||
|
||
{/* Lifestyle */}
|
||
|
||
<div>
|
||
|
||
<h3 className="text-xl font-medium text-gray-900 dark:text-white mb-6">Lifestyle Amenities</h3>
|
||
|
||
<ul className="space-y-4">
|
||
|
||
{amenitiesData.Lifestyle.map((item, idx) => (
|
||
|
||
<li key={idx} className={`flex items-center gap-3 ${!item.available ? 'opacity-40 grayscale' : ''}`}>
|
||
|
||
<div className={`w-6 h-6 ${item.available ? 'text-purple-600' : 'text-gray-400'}`}>
|
||
|
||
{item.icon}
|
||
|
||
</div>
|
||
|
||
<span className={`text-base ${!item.available ? 'text-gray-400 line-through decoration-gray-400' : 'text-purple-600 font-medium'}`}>
|
||
|
||
{item.name}
|
||
|
||
</span>
|
||
|
||
</li>
|
||
|
||
))}
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Sports */}
|
||
|
||
<div>
|
||
|
||
<h3 className="text-xl font-medium text-gray-900 dark:text-white mb-6">Sports Amenities</h3>
|
||
|
||
<ul className="space-y-4">
|
||
|
||
{amenitiesData.Sports.map((item, idx) => (
|
||
|
||
<li key={idx} className={`flex items-center gap-3 ${!item.available ? 'opacity-40 grayscale' : ''}`}>
|
||
|
||
<div className={`w-6 h-6 ${item.available ? 'text-purple-600' : 'text-gray-400'}`}>
|
||
|
||
{item.icon}
|
||
|
||
</div>
|
||
|
||
<span className={`text-base ${!item.available ? 'text-gray-400 line-through decoration-gray-400' : 'text-purple-600 font-medium'}`}>
|
||
|
||
{item.name}
|
||
|
||
</span>
|
||
|
||
</li>
|
||
|
||
))}
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Natural */}
|
||
|
||
<div>
|
||
|
||
<h3 className="text-xl font-medium text-gray-900 dark:text-white mb-6">Natural Amenities</h3>
|
||
|
||
<ul className="space-y-4">
|
||
|
||
{amenitiesData.Natural.map((item, idx) => (
|
||
|
||
<li key={idx} className={`flex items-center gap-3 ${!item.available ? 'opacity-40 grayscale' : ''}`}>
|
||
|
||
<div className={`w-6 h-6 ${item.available ? 'text-purple-600' : 'text-gray-400'}`}>
|
||
|
||
{item.icon}
|
||
|
||
</div>
|
||
|
||
<span className={`text-base ${!item.available ? 'text-gray-400 line-through decoration-gray-400' : 'text-purple-600 font-medium'}`}>
|
||
|
||
{item.name}
|
||
|
||
</span>
|
||
|
||
</li>
|
||
|
||
))}
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<button
|
||
|
||
onClick={handleSeeAllAmenities}
|
||
|
||
disabled={isAmenitiesLoading}
|
||
|
||
className="mt-10 px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-bold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-w-[160px] flex items-center justify-center"
|
||
|
||
>
|
||
|
||
{isAmenitiesLoading ? (
|
||
|
||
<span className="flex items-center gap-2">
|
||
|
||
<svg className="animate-spin h-4 w-4 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
|
||
</svg>
|
||
|
||
Loading...
|
||
|
||
</span>
|
||
|
||
) : (
|
||
|
||
"See all amenities"
|
||
|
||
)}
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">Approvals</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-8">
|
||
|
||
{property.title} by <span className="text-primary font-medium">Modern Spaaces</span> has received 4 out of 4 important approvals as per RERA
|
||
|
||
</p>
|
||
|
||
|
||
|
||
{/* Approvals List - Two Columns */}
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-4 mb-12">
|
||
|
||
{/* Left Column */}
|
||
|
||
<div className="flex items-start gap-3">
|
||
|
||
<div className="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-700 dark:text-gray-300">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Approved by BBMP</h4>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Right Column */}
|
||
|
||
<div className="flex items-start gap-3">
|
||
|
||
<div className="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-700 dark:text-gray-300">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Approved by BDA</h4>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Left Column */}
|
||
|
||
<div className="flex items-start gap-3">
|
||
|
||
<div className="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-700 dark:text-gray-300">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S12 3 12 3s-4.5 4.97-4.5 9 2.015 9 4.5 9z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Approved by BWSSB</h4>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Right Column */}
|
||
|
||
<div className="flex items-start gap-3">
|
||
|
||
<div className="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-700 dark:text-gray-300">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Approved by MOEF</h4>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Documents Subsection */}
|
||
|
||
<h3 className="text-2xl font-bold text-foreground mb-2">Documents</h3>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-8">
|
||
|
||
Curated documents from various sources for {property.title} by Modern Spaaces
|
||
|
||
</p>
|
||
|
||
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
|
||
{/* City Development Plan */}
|
||
|
||
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-6 flex flex-col h-full relative group hover:shadow-md transition-all">
|
||
|
||
<div className="absolute top-6 right-6 text-gray-400">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-4 h-4">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div className="w-12 h-12 mb-4 text-gray-700 dark:text-gray-300">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-10 h-10">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<h4 className="font-bold text-gray-900 dark:text-white mb-2">City Development Plan</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-8 flex-grow leading-relaxed">
|
||
|
||
Used to identify land types, sensitive zones/flood risks, future developments etc.
|
||
|
||
</p>
|
||
|
||
<button className="text-sm font-bold text-gray-900 dark:text-white hover:underline text-left">
|
||
|
||
See Document
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
{/* Legal Opinion */}
|
||
|
||
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-6 flex flex-col h-full relative group hover:shadow-md transition-all">
|
||
|
||
<div className="absolute top-6 right-6 text-gray-400">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-4 h-4">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div className="w-12 h-12 mb-4 text-gray-700 dark:text-gray-300">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-10 h-10">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<h4 className="font-bold text-gray-900 dark:text-white mb-2">Legal Opinion</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-8 flex-grow leading-relaxed">
|
||
|
||
Used to only declare any litigations by the builder. Do NOT mistake for a clean title.
|
||
|
||
</p>
|
||
|
||
<button className="text-sm font-bold text-gray-900 dark:text-white hover:underline text-left">
|
||
|
||
See Document
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
{/* Development Rights */}
|
||
|
||
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-6 flex flex-col h-full relative group hover:shadow-md transition-all">
|
||
|
||
<div className="absolute top-6 right-6 text-gray-400">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-4 h-4">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<div className="w-12 h-12 mb-4 text-gray-700 dark:text-gray-300">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-10 h-10">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
|
||
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<h4 className="font-bold text-gray-900 dark:text-white mb-2">Development Rights</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-8 flex-grow leading-relaxed">
|
||
|
||
Outlines the agreed terms of development between the land owner & the builder
|
||
|
||
</p>
|
||
|
||
<button className="text-sm font-bold text-gray-900 dark:text-white hover:underline text-left">
|
||
|
||
See Document
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">About the builder</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-8">Modern Spaaces</p>
|
||
|
||
|
||
|
||
<div className="flex flex-col md:flex-row gap-12">
|
||
|
||
<div className="flex-1">
|
||
|
||
<p className="text-gray-600 dark:text-gray-300 leading-relaxed mb-8">
|
||
|
||
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.
|
||
|
||
</p>
|
||
|
||
<a href="/residential-real-estate/" className="text-blue-600 dark:text-blue-400 font-bold hover:underline">
|
||
|
||
See all properties by Modern Spaaces
|
||
|
||
</a>
|
||
|
||
</div>
|
||
|
||
<div className="w-full md:w-1/3 space-y-8">
|
||
|
||
<div>
|
||
|
||
<h4 className="text-sm text-gray-500 dark:text-gray-400 mb-1">Established On</h4>
|
||
|
||
<p className="text-xl font-bold text-gray-900 dark:text-white">2012</p>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<h4 className="text-sm text-gray-500 dark:text-gray-400 mb-1">Completed Projects</h4>
|
||
|
||
<p className="text-xl font-bold text-gray-900 dark:text-white">No Data</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">Locality</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-8">Varthur</p>
|
||
|
||
|
||
|
||
{/* Large Image */}
|
||
|
||
<div className="relative rounded-2xl overflow-hidden mb-8 h-[300px] group">
|
||
|
||
<img
|
||
|
||
src="/assets/images/map-placeholder.png"
|
||
|
||
alt="Varthur Locality"
|
||
|
||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||
|
||
/>
|
||
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent flex flex-col justify-end p-8">
|
||
|
||
<h3 className="text-3xl font-bold text-white">Varthur</h3>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<p className="text-gray-600 dark:text-gray-300 leading-relaxed mb-12">
|
||
|
||
Varthur, located in East Bengaluru, is an upcoming residential locality that offers a serene living environment. The area is gaining popularity due to its proximity to tech parks and educational institutions.
|
||
|
||
</p>
|
||
|
||
|
||
|
||
{/* Gauges */}
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-4">
|
||
|
||
{/* Developing */}
|
||
|
||
<div className="flex flex-col items-center text-center">
|
||
|
||
<div className="relative w-48 h-24 mb-4 overflow-hidden">
|
||
|
||
<div className="absolute top-0 left-0 w-full h-full bg-orange-100 rounded-t-full"></div>
|
||
|
||
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-orange-200 to-orange-500 rounded-t-full origin-bottom transform rotate-[-45deg]" style={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)' }}></div>
|
||
|
||
<div className="absolute bottom-0 left-1/2 w-1 h-12 bg-orange-600 origin-bottom transform -translate-x-1/2 rotate-[-45deg]"></div>
|
||
|
||
</div>
|
||
|
||
<h4 className="text-xl font-bold text-gray-900 dark:text-white">Developing</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400">Living Experience</p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Medium */}
|
||
|
||
<div className="flex flex-col items-center text-center">
|
||
|
||
<div className="relative w-48 h-24 mb-4 overflow-hidden">
|
||
|
||
<div className="absolute top-0 left-0 w-full h-full bg-orange-100 rounded-t-full"></div>
|
||
|
||
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-orange-200 to-orange-500 rounded-t-full origin-bottom transform rotate-[0deg]" style={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)' }}></div>
|
||
|
||
<div className="absolute bottom-0 left-1/2 w-1 h-12 bg-orange-600 origin-bottom transform -translate-x-1/2 rotate-[0deg]"></div>
|
||
|
||
</div>
|
||
|
||
<h4 className="text-xl font-bold text-gray-900 dark:text-white">Medium</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400">Investment Potential</p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Moderate */}
|
||
|
||
<div className="flex flex-col items-center text-center">
|
||
|
||
<div className="relative w-48 h-24 mb-4 overflow-hidden">
|
||
|
||
<div className="absolute top-0 left-0 w-full h-full bg-orange-100 rounded-t-full"></div>
|
||
|
||
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-orange-200 to-orange-500 rounded-t-full origin-bottom transform rotate-[45deg]" style={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)' }}></div>
|
||
|
||
<div className="absolute bottom-0 left-1/2 w-1 h-12 bg-orange-600 origin-bottom transform -translate-x-1/2 rotate-[45deg]"></div>
|
||
|
||
</div>
|
||
|
||
<h4 className="text-xl font-bold text-gray-900 dark:text-white">Moderate</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400">Price Range</p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
{/* 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">
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">Checkout Nearby Properties</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-8">
|
||
|
||
See properties similar to {property.title} by Modern Spaaces in the same neighbourhood
|
||
|
||
</p>
|
||
|
||
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
|
||
|
||
{/* Property 1 */}
|
||
|
||
<div className="group cursor-pointer">
|
||
|
||
<div className="rounded-xl overflow-hidden mb-4 h-48">
|
||
|
||
<img src="/assets/images/map-placeholder.png" alt="Prestige Raintree Park" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
|
||
|
||
</div>
|
||
|
||
<h4 className="text-lg font-bold text-gray-900 dark:text-white mb-1">Prestige Raintree Park</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">3.07 Crores - 5.67 Crores</p>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">Varthur</p>
|
||
|
||
<button className="text-sm font-medium text-gray-500 dark:text-gray-400 underline hover:text-gray-900 dark:hover:text-white transition-colors">
|
||
|
||
Compare with this property
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Property 2 */}
|
||
|
||
<div className="group cursor-pointer">
|
||
|
||
<div className="rounded-xl overflow-hidden mb-4 h-48">
|
||
|
||
<img src="/assets/images/image.png" alt="Adarsh Park Heights" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
|
||
|
||
</div>
|
||
|
||
<h4 className="text-lg font-bold text-gray-900 dark:text-white mb-1">Adarsh Park Heights</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">1.63 Crores - 2.32 Crores</p>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">Varthur</p>
|
||
|
||
<button className="text-sm font-medium text-gray-500 dark:text-gray-400 underline hover:text-gray-900 dark:hover:text-white transition-colors">
|
||
|
||
Compare with this property
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Property 3 */}
|
||
|
||
<div className="group cursor-pointer">
|
||
|
||
<div className="rounded-xl overflow-hidden mb-4 h-48">
|
||
|
||
<img src="/assets/images/map-placeholder.png" alt="Tru Aquapolis" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
|
||
|
||
</div>
|
||
|
||
<h4 className="text-lg font-bold text-gray-900 dark:text-white mb-1">Tru Aquapolis</h4>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">2.22 Crores - 3.51 Crores</p>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">Varthur</p>
|
||
|
||
<button className="text-sm font-medium text-gray-500 dark:text-gray-400 underline hover:text-gray-900 dark:hover:text-white transition-colors">
|
||
|
||
Compare with this property
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<a href="#" className="text-blue-600 dark:text-blue-400 font-bold hover:underline">
|
||
|
||
See all properties in Varthur
|
||
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
{/* 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">
|
||
|
||
<h2 className="text-3xl font-bold text-foreground mb-2">Frequently Asked Questions</h2>
|
||
|
||
<p className="text-gray-500 dark:text-gray-400 mb-8">
|
||
|
||
99% of your queries should get answered here, for others, you can always talk to us
|
||
|
||
</p>
|
||
|
||
|
||
|
||
{/* Tabs */}
|
||
|
||
<div className="bg-gray-100 dark:bg-gray-800 p-1 rounded-lg flex flex-wrap mb-8">
|
||
|
||
{['Project Details', 'Location & Connectivity', 'Price & Booking', 'Services'].map((tab) => (
|
||
|
||
<button
|
||
|
||
key={tab}
|
||
|
||
onClick={() => setActiveFaqTab(tab)}
|
||
|
||
className={`flex-1 py-3 px-4 text-sm font-medium rounded-md transition-all ${activeFaqTab === tab
|
||
|
||
? 'bg-white dark:bg-gray-700 text-orange-500 shadow-sm'
|
||
|
||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
|
||
|
||
}`}
|
||
|
||
>
|
||
|
||
{tab}
|
||
|
||
</button>
|
||
|
||
))}
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
{/* Accordion List */}
|
||
|
||
<div className="space-y-4">
|
||
|
||
{faqData[activeFaqTab]?.map((item, index) => (
|
||
|
||
<div key={index} className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||
|
||
<button
|
||
|
||
onClick={() => setExpandedFaq(expandedFaq === index ? null : index)}
|
||
|
||
className="w-full flex items-center justify-between p-6 text-left bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
|
||
|
||
>
|
||
|
||
<span className="font-medium text-gray-900 dark:text-white pr-8">{item.question}</span>
|
||
|
||
<span className="text-gray-400">
|
||
|
||
{expandedFaq === index ? (
|
||
|
||
<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="M19.5 12h-15" />
|
||
|
||
</svg>
|
||
|
||
) : (
|
||
|
||
<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="M12 4.5v15m7.5-7.5h-15" />
|
||
|
||
</svg>
|
||
|
||
)}
|
||
|
||
</span>
|
||
|
||
</button>
|
||
|
||
{expandedFaq === index && (
|
||
|
||
<div className="p-6 pt-0 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 leading-relaxed border-t border-gray-100 dark:border-gray-700">
|
||
|
||
{item.answer}
|
||
|
||
</div>
|
||
|
||
)}
|
||
|
||
</div>
|
||
|
||
))}
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Sidebar */}
|
||
|
||
<div className="lg:col-span-1">
|
||
|
||
<div className="sticky top-32 space-y-6">
|
||
|
||
{/* Contact Form */}
|
||
|
||
<div 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>
|
||
|
||
|
||
|
||
{alert.show && (
|
||
|
||
<div className={`mb-4 p-3 rounded-lg text-sm font-medium ${alert.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
|
||
|
||
{alert.message}
|
||
|
||
</div>
|
||
|
||
)}
|
||
|
||
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
|
||
<div>
|
||
|
||
<input
|
||
|
||
type="text"
|
||
|
||
name="name"
|
||
|
||
value={formData.name}
|
||
|
||
onChange={handleChange}
|
||
|
||
placeholder="Your Name"
|
||
|
||
className={`w-full px-4 py-3 border ${formErrors.name ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'} rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-gray-800 text-foreground transition-all`}
|
||
|
||
/>
|
||
|
||
{formErrors.name && <small className="text-red-500 text-xs ml-1">{formErrors.name}</small>}
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<input
|
||
|
||
type="email"
|
||
|
||
name="email"
|
||
|
||
value={formData.email}
|
||
|
||
onChange={handleChange}
|
||
|
||
placeholder="Email Address"
|
||
|
||
className={`w-full px-4 py-3 border ${formErrors.email ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'} rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-gray-800 text-foreground transition-all`}
|
||
|
||
/>
|
||
|
||
{formErrors.email && <small className="text-red-500 text-xs ml-1">{formErrors.email}</small>}
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<input
|
||
|
||
type="tel"
|
||
|
||
name="phone"
|
||
|
||
value={formData.phone}
|
||
|
||
onChange={handleChange}
|
||
|
||
placeholder="Phone Number"
|
||
|
||
className={`w-full px-4 py-3 border ${formErrors.phone ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'} rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-gray-800 text-foreground transition-all`}
|
||
|
||
/>
|
||
|
||
{formErrors.phone && <small className="text-red-500 text-xs ml-1">{formErrors.phone}</small>}
|
||
|
||
</div>
|
||
|
||
<textarea
|
||
|
||
rows={4}
|
||
|
||
name="message"
|
||
|
||
value={formData.message}
|
||
|
||
onChange={handleChange}
|
||
|
||
placeholder="Message (Optional)"
|
||
|
||
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-gray-800 text-foreground transition-all"
|
||
|
||
/>
|
||
|
||
<button
|
||
|
||
type="submit"
|
||
|
||
disabled={isSubmitting}
|
||
|
||
className={`w-full bg-gradient-to-r from-primary to-blue-600 text-white py-3 rounded-lg font-semibold hover:shadow-lg transition-all transform hover:scale-105 ${isSubmitting ? 'opacity-70 cursor-not-allowed' : ''}`}
|
||
|
||
>
|
||
|
||
{isSubmitting ? 'Sending...' : 'Request Callback'}
|
||
|
||
</button>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Quick Actions */}
|
||
|
||
<div className="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700">
|
||
|
||
<h3 className="text-lg font-bold text-foreground mb-4">Quick Actions</h3>
|
||
|
||
<div className="space-y-3">
|
||
|
||
<button
|
||
|
||
onClick={handleShare}
|
||
|
||
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg hover:shadow-md transition-all text-foreground"
|
||
|
||
>
|
||
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||
|
||
</svg>
|
||
|
||
Share Property
|
||
|
||
</button>
|
||
|
||
<button
|
||
|
||
onClick={handleWishlist}
|
||
|
||
className={`w-full flex items-center justify-center gap-2 px-4 py-3 border rounded-lg hover:shadow-md transition-all ${isWishlisted
|
||
|
||
? 'bg-red-50 border-red-200 text-red-600'
|
||
|
||
: 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-foreground'
|
||
|
||
}`}
|
||
|
||
>
|
||
|
||
<svg
|
||
|
||
className={`w-5 h-5 ${isWishlisted ? 'fill-current' : 'fill-none'}`}
|
||
|
||
stroke="currentColor"
|
||
|
||
viewBox="0 0 24 24"
|
||
|
||
>
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||
|
||
</svg>
|
||
|
||
{isWishlisted ? 'Saved to Wishlist' : 'Save to Wishlist'}
|
||
|
||
</button>
|
||
|
||
<button
|
||
|
||
onClick={handlePrint}
|
||
|
||
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg hover:shadow-md transition-all text-foreground"
|
||
|
||
>
|
||
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
||
|
||
</svg>
|
||
|
||
Print Details
|
||
|
||
</button>
|
||
|
||
<button
|
||
|
||
onClick={handleCompareToggle}
|
||
|
||
className={`w-full flex items-center justify-center gap-2 px-4 py-3 border rounded-lg hover:shadow-md transition-all ${isCompared
|
||
|
||
? 'bg-blue-50 border-blue-200 text-blue-600'
|
||
|
||
: 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-foreground'
|
||
|
||
}`}
|
||
|
||
>
|
||
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="w-5 h-5"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
d="M8 7h8v10H8zM4 11h8v10H4z"
|
||
/>
|
||
</svg>
|
||
|
||
{isCompared ? 'Added to Compare' : 'Add to Compare'}
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div >
|
||
|
||
|
||
|
||
|
||
|
||
<Footer />
|
||
|
||
{/* Lightbox */}
|
||
|
||
{
|
||
|
||
isLightboxOpen && (
|
||
|
||
<div
|
||
|
||
className="fixed inset-0 z-[100] bg-black/90 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200"
|
||
|
||
onClick={() => setIsLightboxOpen(false)}
|
||
|
||
>
|
||
|
||
<button
|
||
|
||
className="absolute top-4 right-4 text-white/70 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"
|
||
|
||
onClick={() => setIsLightboxOpen(false)}
|
||
|
||
>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-8 h-8">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||
|
||
</svg>
|
||
|
||
</button>
|
||
|
||
<img
|
||
|
||
src="/assets/images/image.png"
|
||
|
||
alt="Master Plan Full View"
|
||
|
||
className="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl scale-in-95 duration-200"
|
||
|
||
onClick={(e) => e.stopPropagation()}
|
||
|
||
/>
|
||
|
||
</div>
|
||
|
||
)
|
||
|
||
}
|
||
|
||
{/* Amenities Modal */}
|
||
|
||
{
|
||
|
||
isAmenitiesModalOpen && (
|
||
|
||
<div
|
||
|
||
className="fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200"
|
||
|
||
onClick={() => setIsAmenitiesModalOpen(false)}
|
||
|
||
>
|
||
|
||
<div
|
||
|
||
className="bg-white dark:bg-gray-900 w-full max-w-4xl max-h-[90vh] rounded-2xl shadow-2xl overflow-hidden flex flex-col scale-in-95 duration-200"
|
||
|
||
onClick={(e) => e.stopPropagation()}
|
||
|
||
>
|
||
|
||
{/* Header */}
|
||
|
||
<div className="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
|
||
|
||
<div>
|
||
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">Amenities</h2>
|
||
|
||
<p className="text-sm text-gray-500 dark:text-gray-400">Lifestyle</p>
|
||
|
||
</div>
|
||
|
||
<button
|
||
|
||
onClick={() => setIsAmenitiesModalOpen(false)}
|
||
|
||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
|
||
|
||
>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-6 h-6">
|
||
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||
|
||
</svg>
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{/* Content */}
|
||
|
||
<div className="p-8 overflow-y-auto">
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
|
||
{/* Flatten and map all amenities for the modal */}
|
||
|
||
{Object.entries(amenitiesData).flatMap(([category, items]) =>
|
||
|
||
items.map((item, idx) => (
|
||
|
||
<div key={`${category}-${idx}`} className="flex flex-col items-center text-center gap-3">
|
||
|
||
<div className="relative">
|
||
|
||
<div className={`w-12 h-12 ${item.available ? 'text-purple-600' : 'text-gray-300'} mb-1`}>
|
||
|
||
{item.icon}
|
||
|
||
</div>
|
||
|
||
{(item as any).rare && (
|
||
|
||
<span className="absolute -top-2 -right-4 bg-purple-100 text-purple-600 text-[10px] font-bold px-1.5 py-0.5 rounded uppercase tracking-wider">
|
||
|
||
Rare
|
||
|
||
</span>
|
||
|
||
)}
|
||
|
||
</div>
|
||
|
||
<span className={`text-sm ${item.available ? 'text-gray-700 dark:text-gray-300' : 'text-gray-400 line-through'}`}>
|
||
|
||
{item.name}
|
||
|
||
</span>
|
||
|
||
</div>
|
||
|
||
))
|
||
|
||
)}
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
)
|
||
|
||
}
|
||
|
||
</div >
|
||
|
||
);
|
||
|
||
}
|