{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "property-detail",
  "type": "registry:component",
  "title": "Property Details",
  "author": "Toby Belhome",
  "description": "Showcase detailed property information with Tailwind CSS property detail sections. These layouts highlight images, descriptions, features, pricing, and calls-to-action, providing a seamless browsing experience. Perfect for real estate websites and marketplaces aiming for modern, engaging, and conversion-friendly property pages.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "examples/blocks/real-estate/property-detail/01/page.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  MapPin,\n  Star,\n  Bed,\n  Bath,\n  Maximize,\n  Cigarette,\n  ChefHat,\n  Home,\n  Wifi,\n  Car\n} from \"lucide-react\";\nimport Image from \"next/image\";\n\nconst iconMap = {\n  bed: Bed,\n  bath: Bath,\n  maximize: Maximize,\n  smoking: Cigarette,\n  \"chef-hat\": ChefHat,\n  home: Home,\n  wifi: Wifi,\n  car: Car\n};\n\nconst property = {\n  name: \"Veloura Residences\",\n  location: \"Miami, Florida, celinam delware 2098\",\n  price: 4050,\n  rating: 4.9,\n  images: [\n    \"https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1000\",\n    \"https://images.unsplash.com/photo-1523217582562-09d0def993a6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1000\",\n    \"https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1000\"\n  ],\n  description:\n    \"Discover this modern 3-bedroom apartment located in the heart of the city, offering a perfect blend of comfort and convenience. Enjoy breathtaking skyline views, an open-concept kitchen, spacious living areas, and a private balcony ideal for relaxing evenings.\",\n  bedrooms: 2,\n  bathrooms: 3,\n  area: 10000,\n  amenities: [\n    { icon: \"bed\", label: \"2 Beds\" },\n    { icon: \"bath\", label: \"3 Baths\" },\n    { icon: \"maximize\", label: \"10k sq ft\" },\n    { icon: \"smoking\", label: \"Smocking Area\" },\n    { icon: \"chef-hat\", label: \"Kitchen\" },\n    { icon: \"home\", label: \"balcony\" },\n    { icon: \"wifi\", label: \"Wifi\" },\n    { icon: \"car\", label: \"Parking Area\" }\n  ],\n  status: \"For Sale\",\n  fullLocation: \"118 Bel Air Rd, Los Angeles\",\n  livingSpace: \"10,00 sq ft\",\n  agent: {\n    name: \"Alex Ripon\",\n    address: \"687 3rd Ave, New York, USA\",\n    phone1: \"+2224555597\",\n    phone2: \"+3334555596\",\n    whatsapp: \"3334555595\",\n    email: \"alexripon@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1521119989659-a83eee488004?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTZ8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200\"\n  },\n  propertyId: \"66R986\"\n};\n\nexport default function Page() {\n  const formatPrice = (price: number) => {\n    return new Intl.NumberFormat(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\",\n      minimumFractionDigits: 0,\n      maximumFractionDigits: 0\n    }).format(price);\n  };\n\n  return (\n    <div className=\"mx-auto max-w-6xl px-4 py-4 lg:py-8\">\n      <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n        {/* Main Content */}\n        <div className=\"space-y-6 lg:col-span-2\">\n          {/* Image Gallery */}\n          <div className=\"grid grid-cols-3 gap-3\">\n            <div className=\"relative col-span-3 aspect-4/3 overflow-hidden rounded-2xl md:col-span-2\">\n              <Image src={property.images[0]} alt={property.name} fill className=\"object-cover\" />\n            </div>\n            <div className=\"col-span-3 grid grid-cols-2 gap-3 md:col-span-1 md:grid-cols-1\">\n              <div className=\"relative aspect-4/3 overflow-hidden rounded-2xl\">\n                <Image\n                  src={property.images[1]}\n                  alt={`${property.name} view 2`}\n                  fill\n                  className=\"object-cover\"\n                />\n              </div>\n              <div className=\"relative aspect-4/3 overflow-hidden rounded-2xl\">\n                <Image\n                  src={property.images[2]}\n                  alt={`${property.name} view 3`}\n                  fill\n                  className=\"object-cover\"\n                />\n                <div className=\"absolute inset-0 flex items-center justify-center bg-black/50\">\n                  <span className=\"text-3xl font-bold text-white\">7+</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Property Info */}\n          <div className=\"space-y-4\">\n            <div className=\"flex flex-wrap items-start justify-between gap-4\">\n              <h1 className=\"text-foreground font-heading text-3xl lg:text-4xl\">{property.name}</h1>\n              <div className=\"text-foreground text-3xl font-semibold whitespace-nowrap lg:text-3xl\">\n                {formatPrice(property.price)}{\" \"}\n              </div>\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-4\">\n              <div className=\"text-muted-foreground flex items-center gap-2\">\n                <MapPin className=\"h-4 w-4\" />\n                <span className=\"text-sm\">{property.location}</span>\n              </div>\n              <div className=\"flex items-center gap-1 text-sm\">\n                <Star className=\"size-4 fill-yellow-400 text-yellow-400\" />\n                <span>{property.rating}</span>\n              </div>\n            </div>\n          </div>\n\n          {/* Description */}\n          <div className=\"space-y-3\">\n            <p className=\"text-muted-foreground leading-relaxed\">{property.description}</p>\n          </div>\n\n          {/* Key Features */}\n          <div className=\"space-y-4\">\n            <h2 className=\"text-foreground font-bold\">Key Features</h2>\n\n            <Card className=\"shadow-none\">\n              <CardContent>\n                <h3 className=\"mb-4 font-semibold\">Amenities</h3>\n                <div className=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n                  {property.amenities.map((amenity, index) => {\n                    const Icon = iconMap[amenity.icon as keyof typeof iconMap] || Home;\n                    return (\n                      <div key={index} className=\"flex items-center gap-2 text-sm\">\n                        <Icon className=\"text-muted-foreground h-4 w-4\" />\n                        <span>{amenity.label}</span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n\n          {/* Areas & Lot */}\n          <div className=\"space-y-4\">\n            <h2 className=\"text-foreground font-bold\">Areas & Lot</h2>\n            <Card className=\"shadow-none\">\n              <CardContent className=\"divide-y text-sm [&_div]:flex [&_div]:items-center [&_div]:justify-between [&_div]:py-4 [&_div]:first:pt-0 [&_div]:last:pb-0\">\n                <div>\n                  <span className=\"text-muted-foreground\">Status</span>\n                  <span className=\"font-medium\">{property.status}</span>\n                </div>\n                <div>\n                  <span className=\"text-muted-foreground\">Location</span>\n                  <span className=\"font-medium\">{property.fullLocation}</span>\n                </div>\n                <div>\n                  <span className=\"text-muted-foreground\">Living Space</span>\n                  <span className=\"font-medium\">{property.livingSpace}</span>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-4\">\n          <Card className=\"bg-muted/50 shadow-none\">\n            <CardContent className=\"space-y-6\">\n              <div className=\"flex items-start gap-4\">\n                <div className=\"relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-full\">\n                  <Image\n                    src={property.agent.avatar}\n                    alt={property.agent.name}\n                    fill\n                    className=\"object-cover\"\n                  />\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <h3 className=\"text-lg font-bold\">{property.agent.name}</h3>\n                  <p className=\"text-muted-foreground text-sm\">{property.agent.address}</p>\n                </div>\n              </div>\n\n              <div className=\"space-y-3 text-sm\">\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Office Phone:</span>\n                  <span className=\"font-medium\">{property.agent.phone1}</span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Office Phone:</span>\n                  <span className=\"font-medium\">{property.agent.phone2}</span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">WhatsApp:</span>\n                  <span className=\"font-medium\">{property.agent.whatsapp}</span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Email:</span>\n                  <span className=\"font-medium\">{property.agent.email}</span>\n                </div>\n              </div>\n\n              <Button className=\"w-full\">View My Property</Button>\n            </CardContent>\n          </Card>\n\n          {/* Schedule Tour Card */}\n          <Card className=\"bg-muted/50 shadow-none\">\n            <CardHeader>\n              <CardTitle>Schedule tour</CardTitle>\n              <CardDescription>\n                See your future home up close — book a tour with Real Nest today and let us help you\n                find the perfect place!\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"space-y-4\">\n                <div className=\"space-y-2\">\n                  <Label className=\"text-muted-foreground text-sm\">Property ID</Label>\n                  <Input value={property.propertyId} readOnly className=\"bg-muted\" />\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label className=\"text-muted-foreground text-sm\">Property Name</Label>\n                  <Input value={property.name} readOnly className=\"bg-muted\" />\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label className=\"text-muted-foreground text-sm\">Full Name</Label>\n                  <Input placeholder=\"Enter your full name\" />\n                </div>\n\n                <Button className=\"w-full\">Schedule</Button>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/property-detail.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}