Add src/app/property/[id]/page.tsx

2026-04-10 16:23:06 +00:00
parent 123a218920
commit b91822886b
1 changed files with 95 additions and 0 deletions
--- a/src/app/property/[id]/page.tsx
+++ b/src/app/property/[id]/page.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+
+export default function PropertyDetailPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="compact"
+        sizing="largeSizeMediumTitles"
+        background="grid"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Properties", id: "/properties" },
+                { name: "About", id: "/about" },
+                { name: "Contact", id: "/contact" },
+              ]}
+              brandName="PropElite"
+            />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroBillboardGallery
+            title="Luxury Modern Villa in Beverly Hills"
+            description="An architectural masterpiece featuring floor-to-ceiling windows, infinity pool, and panoramic city views. Designed for the ultimate modern living experience."
+            mediaItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/swimming-pool-beach-luxury-hotel-type-entertainment-complex-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer-turkey_146671-18719.jpg?_wi=1" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/couch-armchair-seen-from-floor_1203-737.jpg" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/staircase-apartment_1150-11156.jpg" }
+            ]}
+          />
+        </div>
+
+        <div id="metrics" data-section="metrics">
+          <MetricCardFourteen
+            title="Key Property Features"
+            tag="Specifications"
+            metrics={[
+              { id: "m1", value: "5,000 sq ft", description: "Total Interior Space" },
+              { id: "m2", value: "5", description: "Bedrooms" },
+              { id: "m3", value: "6", description: "Bathrooms" },
+              { id: "m4", value: "3", description: "Garage Spaces" }
+            ]}
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardOne
+            title="Premium Amenities"
+            description="Experience lifestyle-focused design with curated amenities for your comfort."
+            animationType="slide-up"
+            gridVariant="asymmetric-60-wide-40-narrow"
+            features={[
+              { title: "Smart Home Integration", description: "Voice-controlled lighting, security, and climate management.", imageSrc: "http://img.b2bpic.net/free-photo/modern-styled-small-entryway_23-2150712847.jpg?_wi=1" },
+              { title: "Infinity Pool", description: "Heated saltwater infinity pool overlooking the skyline.", imageSrc: "http://img.b2bpic.net/free-photo/swimming-pool-beach-luxury-hotel-type-entertainment-complex-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer-turkey_146671-18719.jpg?_wi=2" }
+            ]}
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Schedule a Viewing"
+            title="Interested in this property?"
+            description="Leave your details and our senior agents will arrange a private tour at your convenience."
+            onSubmit={(email) => console.log("Form submitted", email)}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="PropElite Real Estate"
+            copyrightText="© 2025 PropElite. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}