diff --git a/public/assets/images/image.png b/public/assets/images/image.png new file mode 100644 index 0000000..ed86e1b Binary files /dev/null and b/public/assets/images/image.png differ diff --git a/public/assets/images/map-placeholder.png b/public/assets/images/map-placeholder.png new file mode 100644 index 0000000..0235a7d Binary files /dev/null and b/public/assets/images/map-placeholder.png differ diff --git a/public/assets/images/master-plan.png b/public/assets/images/master-plan.png new file mode 100644 index 0000000..563add0 Binary files /dev/null and b/public/assets/images/master-plan.png differ diff --git a/src/components/PropertyDetailClient.tsx b/src/components/PropertyDetailClient.tsx index 2c1936a..6bf61fd 100644 --- a/src/components/PropertyDetailClient.tsx +++ b/src/components/PropertyDetailClient.tsx @@ -8,6 +8,7 @@ import PropertyNav from "@/components/PropertyNav"; import InnerBanner from "@/components/InnerBanner"; import { Property } from "@/data/properties"; import axios from "axios"; +import { useCompare } from "@/context/CompareContext"; interface FormData { name: string; @@ -24,11 +25,16 @@ interface FormErrors { const sections = [ { id: "overview", label: "Overview" }, - { id: "about", label: "About" }, - { id: "amenities", label: "Amenities" }, - { id: "floor-plans", label: "Floor Plans" }, - { id: "location", label: "Location" }, { 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" }, ]; export default function PropertyDetailClient({ property }: { property: Property }) { @@ -46,6 +52,146 @@ export default function PropertyDetailClient({ property }: { property: Property 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(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 = { + '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: }, + { name: "Gym - Outdoor", available: true, icon: }, + { name: "Kids Play Area", available: true, rare: true, icon: }, + { name: "Amphitheatre", available: false, icon: }, + { name: "Cafe/Restaurant", available: false, icon: }, + ], + Sports: [ + { name: "Running Track", available: true, rare: true, icon: }, + { name: "Badminton", available: false, icon: }, + { name: "Basketball", available: false, icon: }, + { name: "Cricket Ground", available: false, icon: }, + { name: "Cricket Pitch", available: false, icon: }, + ], + Natural: [ + { name: "Army Land", available: false, icon: }, + { name: "Forest", available: false, icon: }, + { name: "Golf Course", available: false, icon: }, + { name: "Lake", available: false, icon: }, + { name: "Mountain/Hill", available: false, icon: }, + ] + }; const handleChange = (e: ChangeEvent) => { const { name, value } = e.target; @@ -196,100 +342,1010 @@ export default function PropertyDetailClient({ property }: { property: Property
{/* Overview Section */}
-

-
- Overview -

-
-
-
Property Type
-
{property.category}
+ {/* Header with title and badges */} +
+
+

Overview

+

+ Ivy County by Modern Spaaces +

-
-
RERA Status
-
Approved
+
+ Better + Average + Subpar
-
-
Availability
-
Available
+
+ + {/* Subtitle */} +

+ Average is based on comparable projects in Varthur +

+ + {/* Info Grid - 2 rows x 3 columns */} +
+ {/* Land Area */} +
+
+
+ + + +
+
+
50.00 Acres
+
Land Area
+
Avg is 50.00 acres
+
+ + {/* Closest Metro */} +
+
+
+ + + +
+
+
3.62 kms
+
Closest Metro
+
Avg is 0.00 kms
+
+ + {/* Approach Road */} +
+
+
+ + + +
+
+
15 meters
+
Approach Road
+
Avg is 15 meters
+
+ + {/* Open Area */} +
+
+
+ + + +
+
+
45%
+
Open Area
+
Avg is 45%
+
+ + {/* Unit Density */} +
+
+
+ + + +
+
+
13 units/acre
+
Unit Density
+
Avg is 13 units/acre
+
+ + {/* Club House */} +
+
+
+ + + +
+
+
50000 sqft
+
Club House
+
Avg is 50000 sqft
- {/* About Section */} -
-

-
- About this Property -

-

{property.description}

+
+
+

+ {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. */} +

+ + {!isExpanded && ( +
+ )} +
+
- {/* Amenities Section */} -
-

-
- Amenities -

-
- {property.amenities.map((amenity, idx) => ( -
-
- - - -
- {amenity} + {/* Info Cards Grid */} +
+ {/* RERA Card */} +
+
+ + + +
+ + +
- ))} +
+

{property.title} is approved by RERA

+

It was approved on Nov 2024

+ +
+ + {/* Brochure Card */} +
+
+ + + + +
+

See {property.title} brochure

+

Beware, beautiful brochures don't show hidden realities

+ +
+ + {/* Pros & Cons Card */} +
+
+ + + +
+ + + + +
+
+

See the truth beyond the brochures

+

See every risk & potential clearly with our experts

+ +
+
+ + + {/* Pricing Section - Moved and Redesigned */} +
+

Pricing

+

Last updated on 03 Nov 2025

+ +
+
+
Total Range
+
{property.price}
+
+
+
+ Monthly EMI + + + +
+
₹ 73K - ₹ 1.82 L
+
+
+
+ Project's Avg. + + + +
+
₹ 10326 psft.
+
+
+
+ Market Avg. + + + +
+
₹ 9700 psft.
+
+
+
+ + {/* Connectivity Section (Formerly Location) */} +
+

Connectivity

+

{property.title}

+ +
+
+

+ ✦ + {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. +

+ {!isConnectivityExpanded && ( +
+ )} +
+ +
+ + {/* Map Interface */} +
+ {/* Tabs */} +
+ {["Commute", "Education", "Hospitals", "Work", "Entertainment ", "Search"].map((tab) => ( + + ))} +
+ +
+ {/* Map Area */} +
+ {/* Map Image Placeholder */} +
+ Map View +
+ + {/* Map Controls */} +
+ + +
+ + {/* Layer Toggle */} +
+ +
+ + {/* Pins (Static for demo) */} +
+
6
+
+
+
6
+
+
+
7
+
+
+
+ + + + +
+
+
+ + {/* List Area */} +
+
+ {[ + { name: "Dommasandra Circle Metro Station", dist: "3.62 Km", time: "7 mins" }, + { name: "Sompura Metro Station", dist: "7.05 Km", time: "15 mins" }, + { name: "Sarjapur Metro Station", dist: "8.28 Km", time: "18 mins" }, + { name: "Ambedkar nagar Metro Station", dist: "8.89 Km", time: "18 mins" }, + ].map((item, idx) => ( +
+

{item.name}

+
+ {item.dist} + | + {item.time} +
+
+ ))} +
+
+
+
+
+ + {/* Master Plan Section */} +
+
+
+

Master Plan

+

+ {property.title} is a plotted development with 658 plots. +

+
+ +
+ + {/* Master Plan Image */} +
setIsLightboxOpen(true)} + > + Master Plan +
+ + Click to zoom + +
+
+ + {/* Stats Grid */} +
+
+
Total Units
+
658
+
+
+
Water Source
+
+ Borewells + +1 +
+
+
+
Park Area
+
8.00 Acres
+
+
+
Land type
+
Agricultural
+
+
+
+ + {/* Propsoch Clarity Engine Section */} +
+
+

The Propsoch Clarity Engine

+

+ 300+ families found safer homes with Propsoch. You could be next + ☝️ +

+
+ +
+ {/* Card 1: Compare */} +
+ {/* Decorative Circle */} +
+ +
+ {/* House Icon Placeholder - Using SVG for 3D feel */} + + + + + + +
+ +

Like this project?

+

Compare it with the rest

+ +

+ Compare 2 properties side by side on 40+ parameters like connectivity, layout, price, specs and more +

+ + +
+ + {/* Card 2: Negotiate (Green) */} +
+ {/* Trusted Badge */} +
+ TRUSTED BY 300+ FAMILIES +
+ + {/* Sparkles */} +
+ +
+ +
+ {/* Trophy Icon */} + + + + +
+ +

Pay less. Get more.

+

Let us negotiate for you.

+ +

+ Get a free Peace of Mind report, solid negotiations & a loyalty reward up to ₹3.29 Lakhs when you work with us +

+ + +
+ + {/* Card 3: Report (Purple) */} +
+ {/* Decorative Triangle */} +
+ +
+ {/* Report Icon */} + + + + + + +
+ +

Almost convinced?

+

See what we uncovered

+ +

+ Ideal if you've already visited and close to deciding. Our Peace of Mind report shows you what builders won't. +

+ + +
{/* Floor Plans Section */}
-

-
- Floor Plans -

-
- - - -

Floor plans available on request

- -
-
+

Floor Plans

+

+ {property.title} has plots ranging from 1200 sqft to 3000 sqft. +

- {/* Location Section */} -
-

-
- Location -

-
- - - -

Interactive map coming soon

-
-
- - {/* Pricing Section */} -
-

-
- Pricing Details -

-
-
- Base Price - {property.price} + {/* Tabs */} +
+
+ {floorPlans.map((plan) => ( + + ))} +
+
+ + +
+
+ + {/* Active Plan Details Card */} +
+
+
+

{activePlanDetails.id}

+ {activePlanDetails.price} +
+ +
+
Saleable Area
+
{activePlanDetails.area}
+
+ +
+
Direction(s)
+
{activePlanDetails.direction}
+
-

* Prices are subject to change. Please contact us for the latest pricing and offers.

+ + {/* Amenities Section */} +
+

Amenities

+

{property.title}

+ +
+ {/* Lifestyle */} +
+

Lifestyle Amenities

+
    + {amenitiesData.Lifestyle.map((item, idx) => ( +
  • +
    + {item.icon} +
    + + {item.name} + +
    • + ))} +
+
+ + {/* Sports */} +
+

Sports Amenities

+
    + {amenitiesData.Sports.map((item, idx) => ( +
  • +
    + {item.icon} +
    + + {item.name} + +
    • + ))} +
+
+ + {/* Natural */} +
+

Natural Amenities

+
    + {amenitiesData.Natural.map((item, idx) => ( +
  • +
    + {item.icon} +
    + + {item.name} + +
    • + ))} +
+
+
+ + +
+ + + {/* Approvals Section */} +
+

Approvals

+

+ {property.title} by Modern Spaaces has received 4 out of 4 important approvals as per RERA +

+ + {/* Approvals List - Two Columns */} +
+ {/* Left Column */} +
+
+ + + +
+
+

Approved by BBMP

+ +
+
+ + {/* Right Column */} +
+
+ + + +
+
+

Approved by BDA

+ +
+
+ + {/* Left Column */} +
+
+ + + +
+
+

Approved by BWSSB

+
+
+ + {/* Right Column */} +
+
+ + + +
+
+

Approved by MOEF

+ +
+
+
+ + {/* Documents Subsection */} +

Documents

+

+ Curated documents from various sources for {property.title} by Modern Spaaces +

+ +
+ {/* City Development Plan */} +
+
+ + + +
+
+ + + +
+

City Development Plan

+

+ Used to identify land types, sensitive zones/flood risks, future developments etc. +

+ +
+ + + + {/* Legal Opinion */} +
+
+ + + +
+
+ + + +
+

Legal Opinion

+

+ Used to only declare any litigations by the builder. Do NOT mistake for a clean title. +

+ +
+ + + {/* Development Rights */} +
+
+ + + +
+
+ + + +
+

Development Rights

+

+ Outlines the agreed terms of development between the land owner & the builder +

+ +
+
+
+ + {/* About the Builder Section */} +
+

About the builder

+

Modern Spaaces

+ +
+
+

+ 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. +

+ + See all properties by Modern Spaaces + +
+
+
+

Established On

+

2012

+
+
+

Completed Projects

+

No Data

+
+
+
+
+ + + + {/* Locality Section */} +
+

Locality

+

Varthur

+ + {/* Large Image */} +
+ Varthur Locality +
+

Varthur

+
+
+ +

+ 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. +

+ + {/* Gauges */} +
+ {/* Developing */} +
+
+
+
+
+
+

Developing

+

Living Experience

+
+ + {/* Medium */} +
+
+
+
+
+
+

Medium

+

Investment Potential

+
+ + {/* Moderate */} +
+
+
+
+
+
+

Moderate

+

Price Range

+
+ +
+ {/* Checkout Nearby Properties Section */} +
+

Checkout Nearby Properties

+

+ See properties similar to {property.title} by Modern Spaaces in the same neighbourhood +

+ +
+ {/* Property 1 */} +
+
+ Prestige Raintree Park +
+

Prestige Raintree Park

+

3.07 Crores - 5.67 Crores

+

Varthur

+ +
+ + {/* Property 2 */} +
+
+ Adarsh Park Heights +
+

Adarsh Park Heights

+

1.63 Crores - 2.32 Crores

+

Varthur

+ +
+ + {/* Property 3 */} +
+
+ Tru Aquapolis +
+

Tru Aquapolis

+

2.22 Crores - 3.51 Crores

+

Varthur

+ +
+
+ + + See all properties in Varthur + +
+
+ + + + + + + {/* FAQ Section */} +
+

Frequently Asked Questions

+

+ 99% of your queries should get answered here, for others, you can always talk to us +

+ + {/* Tabs */} +
+ {['Project Details', 'Location & Connectivity', 'Price & Booking', 'Services'].map((tab) => ( + + ))} +
+ + + + {/* Accordion List */} +
+ {faqData[activeFaqTab]?.map((item, index) => ( +
+ + {expandedFaq === index && ( +
+ {item.answer} +
+ )} +
+ ))} +
+
+
{/* Sidebar */} @@ -361,33 +1417,142 @@ export default function PropertyDetailClient({ property }: { property: Property

Quick Actions

- -
-
+
+
-
+ {/* Lightbox */} + { + isLightboxOpen && ( +
setIsLightboxOpen(false)} + > + + Master Plan Full View e.stopPropagation()} + /> +
+ ) + } + {/* Amenities Modal */} + { + isAmenitiesModalOpen && ( +
setIsAmenitiesModalOpen(false)} + > +
e.stopPropagation()} + > + {/* Header */} +
+
+

Amenities

+

Lifestyle

+
+ +
+ + {/* Content */} +
+
+ {/* Flatten and map all amenities for the modal */} + {Object.entries(amenitiesData).flatMap(([category, items]) => + items.map((item, idx) => ( +
+
+
+ {item.icon} +
+ {(item as any).rare && ( + + Rare + + )} +
+ + {item.name} + +
+ )) + )} +
+
+
+
+ ) + } +
); }