Property details page and components

[respp]

🏡 Issue: Property Detail Page and Property Components

🎯 Objectives

• Implement the full Property Detail page with key interactive components.
• Enhance core property-related components for improved UX and integration readiness.

🔍 Technical Steps

Property Detail Page

• Develop an image gallery with smooth navigation/swiping.
• Render complete property information:
  • Description (expandable if long).
  • Amenities list.
  • Policies (cancellation, deposits).
  • Exact location with embedded map (Mapbox or Google Maps).
• Integrate a real-time availability calendar allowing date selection.
• Add a prominent "Book Now" button styled in blue (#4A90E2).
• Prepare a Reviews Section placeholder for future on-chain reviews.

Property Components

• PropertyCard:
  • Optimize images for fast loading (use Next.js Image component).
  • Show key info: title, price, location, availability status.
  • Add visual availability states (available, limited, booked).
• PropertyDetail:
  • Include gallery, expandable description, map.
• Calendar Component:
  • Allow date selection.
  • Display availability in real-time.
• ReviewsSection:
  • Static placeholder text for now.
  • Prepare for future on-chain review integration.

✅ Acceptance Criteria

Functionality

• Image gallery supports swipe/arrow navigation.
• All property details dynamically rendered.
• Availability calendar interacts smoothly and shows real-time status.
• "Book Now" button is clearly visible and clickable.
• PropertyCard displays availability status correctly.
• ReviewsSection displays placeholder content.
• Components are responsive and accessible.

UX/UI

• Consistent styling with platform standards.
• Expandable description for long texts.
• Use icons/badges for amenities.
• Color/font as per design system:
  • Font: Quicksand
  • Light mode: Background #CFF0FF, Text #182A47
  • Dark mode: Background #0B1D39, Text #C2F2FF
• Smooth transitions in gallery and calendar.
• Clear visual feedback on availability status.

Code Quality

• Components modular and reusable.
• Clean, typed TypeScript code.
• Styling with TailwindCSS and no inline styles.
• Proper linting and formatting applied.

🧪 Test Scenarios

• Load property page with mock data and verify all sections.
• Test gallery navigation on desktop and mobile.
• Select dates on calendar and check UI response.
• Check availability status display on PropertyCard.
• Validate dark and light mode rendering.
• Confirm placeholder in ReviewsSection.

🌎 References

• Airbnb property page UI
• TailwindUI gallery and calendar components
• Supabase storage for images
• Mapbox/Google Maps integration docs

🔒 Security Requirements

• Sanitize all dynamic content to avoid XSS.
• Secure handling of dates and user input on calendar.
• No sensitive info hardcoded.

🛠️ Technologies Used

• Next.js
• TailwindCSS
• shadcn/ui
• next-themes
• Supabase (image URLs)
• Mapbox or Google Maps
• TypeScript
• Lucide-react icons

---

I’ve attached an example of the expected appearance, followed by a visual guide. This document is not purely textual, suggestions for design improvements and creative input are encouraged and appreciated.

[perpetual-cosmos]

Hi! I’d love to work on this — it’s a great mix of UI, interactivity, and real-world tech. I’m comfortable with Next.js, Tailwind, and TypeScript, and this task is a solid challenge to grow my skills with calendars, maps, and responsive components. I’ll keep the code clean, the UX smooth, and bring fresh energy to the project (plus plenty of console.logs — just during dev, I promise 😄)

[olathedev]

I'm a skilled frontend engineer with a strong background in React JS, Next JS, Tailwind CSS, Shadcn, and a couple of other frameworks. I have the required skills that would help me deliver on this issue perfectly.

[CMI-James]

Hey, I’m Michael. With solid experience in React, Next.js, Tailwind CSS, and component design, I’d love to take on this task. I look at the Image provided and I am very creative at creating good ui from another ui example, so i will create one that matches well with the project and follows the image pattern

ETA: 8 hours.

[JoelVR17]

🧠 How I Will Solve: Property Detail Page

I’ll build a modular PropertyDetail page with a gallery, full info, amenities, policies, map, calendar, and a blue "Book Now" button. Each section will be a separate component. I’ll enable swipeable navigation in the gallery, expandable description, real-time calendar, and map embed. PropertyCard will show key data and availability with visual states. A placeholder ReviewsSection will be added. All styling will follow Tailwind and design system (fonts, colors, light/dark). Components will be responsive, typed in TypeScript, accessible, and cleanly structured.

[respp]

the issue is yours @CMI-James , Please join the Telegram community to understand all its details: t.me/stellarentdevs/1

[CMI-James]

Alright thank you !
I've joined the telegram channel, here is my handle link (t.me/CMIJames)