From 6d4a7bea58a7f8db0769f8eed488a8a290ee6ca0 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 23:11:36 +0000
Subject: [PATCH] Update src/app/homes/[id]/page.tsx

---
 src/app/homes/[id]/page.tsx | 387 ++++++++----------------------------
 1 file changed, 84 insertions(+), 303 deletions(-)

diff --git a/src/app/homes/[id]/page.tsx b/src/app/homes/[id]/page.tsx
index a93dcc8..b8f06f7 100644
--- a/src/app/homes/[id]/page.tsx
+++ b/src/app/homes/[id]/page.tsx
@@ -1,247 +1,13 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
-import ProductCardThree from "@/components/sections/product/ProductCardThree";
-import ContactText from "@/components/sections/contact/ContactText";
-import FooterMedia from "@/components/sections/footer/FooterMedia";
-import { Home, Zap, Award } from "lucide-react";
-import { useParams } from "next/navigation";
-
-// Home/property details data
-const homeData: Record<string, { title: string; location: string; price: string; description: string; image: string; features: Array<{ id: string; title: string; content: string }>; amenities: Array<{ id: string; name: string; price: string; imageSrc: string; imageAlt: string }> }> = {
-  "1": {
-    title: "Modern Lofted Studio with City Views",
-    location: "River North, Chicago",
-    price: "$2,450/month",
-    description: "Stunning floor-to-ceiling windows with panoramic city views. This fully furnished studio features a chef's kitchen, premium finishes, and access to the building's state-of-the-art fitness center and rooftop lounge.",
-    image: "http://img.b2bpic.net/free-photo/pullout-drawer-modern-kitchen-led-lighting_169016-69290.jpg",
-    features: [
-      {
-        id: "1",
-        title: "Premium Furnishings",
-        content: "Professionally designed interior with high-end furniture, premium appliances, and contemporary decor. Everything you need is included – just bring your personal items.",
-      },
-      {
-        id: "2",
-        title: "Building Amenities",
-        content: "Access to fitness center, rooftop lounge with city views, co-working space, and 24/7 concierge service. Community events hosted monthly for residents.",
-      },
-      {
-        id: "3",
-        title: "Prime Location",
-        content: "Located in the heart of River North with walkable access to restaurants, galleries, and entertainment. Direct transit access to downtown and all major employers.",
-      },
-    ],
-    amenities: [
-      {
-        id: "1",
-        name: "Fitness Center",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-moving-into-their-new-apartment_637285-12404.jpg?_wi=2",
-        imageAlt: "Fitness center",
-      },
-      {
-        id: "2",
-        name: "Rooftop Lounge",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/young-woman-laying-couch-with-laptop-doing-victory-stretch-resting-home-weekday_1258-84063.jpg?_wi=2",
-        imageAlt: "Rooftop lounge",
-      },
-      {
-        id: "3",
-        name: "Co-Working Space",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-people-hostel_23-2150446750.jpg?_wi=2",
-        imageAlt: "Co-working space",
-      },
-      {
-        id: "4",
-        name: "Concierge Service",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/guy-looking-something-map-with-city-background_1153-422.jpg?_wi=2",
-        imageAlt: "Concierge service",
-      },
-    ],
-  },
-  "2": {
-    title: "Contemporary 1BR with Shared Rooftop",
-    location: "Capitol Hill, Seattle",
-    price: "$2,800/month",
-    description: "Premium one-bedroom apartment in vibrant Capitol Hill neighborhood. Steps from trendy restaurants and cafes, this home features hardwood floors, modern furnishings, and shared rooftop garden with stunning views.",
-    image: "http://img.b2bpic.net/free-photo/vase-with-flowers-from-garden-white-kitchen-interior_169016-36135.jpg",
-    features: [
-      {
-        id: "1",
-        title: "Modern Design",
-        content: "Thoughtfully designed spaces with hardwood floors, exposed brick accents, and floor-to-ceiling windows. Natural light flows through this bright, inviting space.",
-      },
-      {
-        id: "2",
-        title: "Community Events",
-        content: "Regular community gatherings on the rooftop garden, monthly resident socials, and co-working collaboration sessions. Build genuine friendships with neighbors.",
-      },
-      {
-        id: "3",
-        title: "Neighborhood Hub",
-        content: "Located in Seattle's most vibrant neighborhood with walkable access to Pike Place Market, Capitol Hill parks, and the city's best dining and nightlife.",
-      },
-    ],
-    amenities: [
-      {
-        id: "1",
-        name: "Rooftop Garden",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-moving-into-their-new-apartment_637285-12404.jpg?_wi=3",
-        imageAlt: "Rooftop garden",
-      },
-      {
-        id: "2",
-        name: "Community Kitchen",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/young-woman-laying-couch-with-laptop-doing-victory-stretch-resting-home-weekday_1258-84063.jpg?_wi=3",
-        imageAlt: "Community kitchen",
-      },
-      {
-        id: "3",
-        name: "Bike Storage",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-people-hostel_23-2150446750.jpg?_wi=3",
-        imageAlt: "Bike storage",
-      },
-      {
-        id: "4",
-        name: "Mail & Package Service",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/guy-looking-something-map-with-city-background_1153-422.jpg?_wi=3",
-        imageAlt: "Package service",
-      },
-    ],
-  },
-  "3": {
-    title: "Luxury Loft with Mountain Views",
-    location: "Downtown Denver",
-    price: "$3,800/month",
-    description: "Soaring ceilings, exposed brick, and panoramic mountain views define this luxury loft. Custom furnishings, concierge service, and access to building rooftop and co-working spaces.",
-    image: "http://img.b2bpic.net/free-photo/bathtub-faucet-closeup-with-luxury-living-concept_53876-146213.jpg",
-    features: [
-      {
-        id: "1",
-        title: "Luxury Finishes",
-        content: "High ceilings, exposed brick walls, polished concrete floors, and premium fixtures throughout. Professionally curated furnishings complement the industrial-modern aesthetic.",
-      },
-      {
-        id: "2",
-        title: "Exclusive Services",
-        content: "Dedicated concierge service, premium co-working space with meeting rooms, and rooftop event space. Monthly building events and resident networking opportunities.",
-      },
-      {
-        id: "3",
-        title: "Downtown Location",
-        content: "Prime downtown Denver location with direct access to restaurants, breweries, shopping, and outdoor activities. Rocky Mountains visible from your window.",
-      },
-    ],
-    amenities: [
-      {
-        id: "1",
-        name: "Rooftop Lounge",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-moving-into-their-new-apartment_637285-12404.jpg?_wi=4",
-        imageAlt: "Rooftop lounge",
-      },
-      {
-        id: "2",
-        name: "Co-Working Suites",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/young-woman-laying-couch-with-laptop-doing-victory-stretch-resting-home-weekday_1258-84063.jpg?_wi=4",
-        imageAlt: "Co-working suite",
-      },
-      {
-        id: "3",
-        name: "Premium Fitness",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-people-hostel_23-2150446750.jpg?_wi=4",
-        imageAlt: "Fitness center",
-      },
-      {
-        id: "4",
-        name: "Valet Parking",
-        price: "Optional",
-        imageSrc: "http://img.b2bpic.net/free-photo/guy-looking-something-map-with-city-background_1153-422.jpg?_wi=4",
-        imageAlt: "Valet parking",
-      },
-    ],
-  },
-  "4": {
-    title: "Design-Forward 1BR with Terrace",
-    location: "Marina District, San Francisco",
-    price: "$4,500/month",
-    description: "Sophisticated one-bedroom with private terrace overlooking the Marina. Premium finishes, designer furnishings, building gym and lounge. Move-in ready with flexible terms.",
-    image: "http://img.b2bpic.net/free-photo/empty-restaurant-terrace_1127-2167.jpg",
-    features: [
-      {
-        id: "1",
-        title: "Private Terrace",
-        content: "Exclusive outdoor space with bay views. Perfect for morning coffee, evening relaxation, or entertaining friends. Professionally designed outdoor furnishings included.",
-      },
-      {
-        id: "2",
-        title: "Design Excellence",
-        content: "Curated by top interior designers, this space features luxury fixtures, premium appliances, and thoughtful design. Every detail is intentional and Instagram-worthy.",
-      },
-      {
-        id: "3",
-        title: "Waterfront Living",
-        content: "Located in prestigious Marina District with yacht clubs, waterfront dining, and the Golden Gate Bridge in view. Direct access to Bay Trail and weekend activities.",
-      },
-    ],
-    amenities: [
-      {
-        id: "1",
-        name: "Building Gym",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-moving-into-their-new-apartment_637285-12404.jpg?_wi=5",
-        imageAlt: "Building gym",
-      },
-      {
-        id: "2",
-        name: "Resident Lounge",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/young-woman-laying-couch-with-laptop-doing-victory-stretch-resting-home-weekday_1258-84063.jpg?_wi=5",
-        imageAlt: "Resident lounge",
-      },
-      {
-        id: "3",
-        name: "Secure Parking",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-people-hostel_23-2150446750.jpg?_wi=5",
-        imageAlt: "Secure parking",
-      },
-      {
-        id: "4",
-        name: "Concierge Service",
-        price: "Included",
-        imageSrc: "http://img.b2bpic.net/free-photo/guy-looking-something-map-with-city-background_1153-422.jpg?_wi=5",
-        imageAlt: "Concierge service",
-      },
-    ],
-  },
-};
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Sparkles } from 'lucide-react';
 
 export default function HomeDetailPage() {
-  const params = useParams();
-  const homeId = (params.id as string) || "1";
-  const home = homeData[homeId] || homeData["1"];
-
-  const navItems = [
-    { name: "Explore", id: "markets" },
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Homes", id: "homes" },
-    { name: "About", id: "about" },
-    { name: "Contact", id: "contact" },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -257,99 +23,114 @@ export default function HomeDetailPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          navItems={navItems}
-          button={{ text: "Find Your Home", href: "search" }}
           brandName="Segue Living"
+          navItems={[
+            { name: "Explore", id: "markets" },
+            { name: "How It Works", id: "how-it-works" },
+            { name: "Homes", id: "homes" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{
+            text: "Find Your Home",            href: "search"
+          }}
         />
       </div>
 
-      <div id="home-overview" data-section="home-overview">
-        <FeatureCardTwentyOne
-          title={home.title}
-          description={home.description}
-          tag={home.location}
-          tagIcon={Home}
-          imageSrc={home.image}
-          imageAlt={home.title}
-          accordionItems={home.features}
+      <div id="home-detail" data-section="home-detail" className="w-full">
+        <HeroBillboard
+          background={{ variant: "radial-gradient" }}
+          title="Premium Home Details"
+          description="Explore this beautifully furnished apartment designed for modern living. Premium finishes, optimal location, and community amenities included."
+          tag="Featured Home"
+          tagIcon={Sparkles}
+          imageSrc="http://img.b2bpic.net/free-photo/part-kitchen-interior-white_169016-17725.jpg"
+          imageAlt="Premium furnished home"
+          buttons={[
+            {
+              text: "Schedule Tour",              href: "contact"
+            },
+            {
+              text: "Back to Homes",              href: "homes"
+            },
+          ]}
           mediaAnimation="slide-up"
-          useInvertedBackground={false}
-          mediaPosition="left"
-          buttons={[
-            { text: "Schedule Tour", href: "contact" },
-            { text: "Check Availability", href: "search" },
-          ]}
-        />
-      </div>
-
-      <div id="home-amenities" data-section="home-amenities">
-        <ProductCardThree
-          title="Building Amenities & Services"
-          description={`Premium amenities included with your ${home.title} at ${home.price}`}
-          tag="Included Features"
-          tagIcon={Award}
-          products={home.amenities.map((amenity) => ({
-            id: amenity.id,
-            name: amenity.name,
-            price: amenity.price,
-            imageSrc: amenity.imageSrc,
-            imageAlt: amenity.imageAlt,
-          }))}
-          gridVariant="bento-grid"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Learn More", href: "about" },
-          ]}
+          buttonAnimation="slide-up"
+          tagAnimation="blur-reveal"
+          className="w-full"
         />
       </div>
 
       <div id="home-cta" data-section="home-cta">
         <ContactText
-          text={`Ready to make ${home.title} your home? Contact our leasing team to schedule a tour, discuss flexible move-in dates, and answer any questions about community life.`}
+          text="Ready to schedule a tour or have questions about this home? Contact our team today and find out how to secure your place in this premium co-living community."
           animationType="reveal-blur"
-          background={{ variant: "circleGradient" }}
+          background={{ variant: "radial-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Schedule a Tour", href: "contact" },
-            { text: "Browse Other Homes", href: "homes" },
+            {
+              text: "Contact Us",              href: "contact"
+            },
+            {
+              text: "View More Homes",              href: "homes"
+            },
           ]}
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/young-girl-dealing-with-derealization-dissociation-from-reality_482257-121622.jpg?_wi=4"
-          imageAlt="Young professionals in modern co-living space"
+          imageSrc="http://img.b2bpic.net/free-photo/young-girl-dealing-with-derealization-dissociation-from-reality_482257-121622.jpg"
+          imageAlt="Young professionals apartment living together"
           logoText="Segue Living"
           copyrightText="© 2025 Segue Living | Premium Co-Living Platform"
           columns={[
             {
-              title: "Explore",
-              items: [
-                { label: "Browse Markets", href: "markets" },
-                { label: "Search Homes", href: "search" },
-                { label: "How It Works", href: "how-it-works" },
-                { label: "Our Story", href: "about" },
+              title: "Explore",              items: [
+                {
+                  label: "Browse Markets",                  href: "markets"
+                },
+                {
+                  label: "Search Homes",                  href: "search"
+                },
+                {
+                  label: "How It Works",                  href: "how-it-works"
+                },
+                {
+                  label: "Our Story",                  href: "about"
+                },
               ],
             },
             {
-              title: "Company",
-              items: [
-                { label: "About Us", href: "about" },
-                { label: "Blog", href: "blog" },
-                { label: "Careers", href: "careers" },
-                { label: "Contact", href: "contact" },
+              title: "Company",              items: [
+                {
+                  label: "About Us",                  href: "about"
+                },
+                {
+                  label: "Blog",                  href: "blog"
+                },
+                {
+                  label: "Careers",                  href: "careers"
+                },
+                {
+                  label: "Contact",                  href: "contact"
+                },
               ],
             },
             {
-              title: "Legal",
-              items: [
-                { label: "Terms of Service", href: "#" },
-                { label: "Privacy Policy", href: "#" },
-                { label: "Cookie Policy", href: "#" },
-                { label: "Accessibility", href: "#" },
+              title: "Legal",              items: [
+                {
+                  label: "Terms of Service",                  href: "#"
+                },
+                {
+                  label: "Privacy Policy",                  href: "#"
+                },
+                {
+                  label: "Cookie Policy",                  href: "#"
+                },
+                {
+                  label: "Accessibility",                  href: "#"
+                },
               ],
             },
           ]}