Merge version_2 into main #3
201
src/app/page.tsx
201
src/app/page.tsx
@@ -30,7 +30,7 @@ import {
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Properties", id: "properties" },
|
||||
{ name: "Properties", id: "/properties" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
@@ -39,8 +39,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Nasr", href: "#about" },
|
||||
{ label: "Our Team", href: "#team" },
|
||||
{ label: "Market Insights", href: "#" },
|
||||
@@ -48,8 +47,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Properties",
|
||||
items: [
|
||||
title: "Properties", items: [
|
||||
{ label: "Featured Listings", href: "/properties" },
|
||||
{ label: "New Developments", href: "#" },
|
||||
{ label: "Investment Properties", href: "#" },
|
||||
@@ -57,8 +55,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "Schedule Viewing", href: "#contact" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
@@ -95,24 +92,16 @@ export default function HomePage() {
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/tanned-girl-shorts-is-hugging-her-laughing-guy-couple-sitting-near-pool_197531-17277.jpg",
|
||||
imageAlt: "luxury modern villa interior architecture",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/tanned-girl-shorts-is-hugging-her-laughing-guy-couple-sitting-near-pool_197531-17277.jpg", imageAlt: "luxury modern villa interior architecture"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/swimming-pool_74190-7327.jpg",
|
||||
imageAlt: "elegant mansion facade luxury home",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/swimming-pool_74190-7327.jpg", imageAlt: "elegant mansion facade luxury home"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-people-watching-smartphone-office_23-2147668943.jpg",
|
||||
imageAlt: "modern penthouse skyline view",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/young-people-watching-smartphone-office_23-2147668943.jpg", imageAlt: "modern penthouse skyline view"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/couple-taking-walk-by-pool-vacation_23-2149369704.jpg",
|
||||
imageAlt: "waterfront luxury villa architecture",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/couple-taking-walk-by-pool-vacation_23-2149369704.jpg", imageAlt: "waterfront luxury villa architecture"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
buttons={[
|
||||
@@ -150,40 +139,28 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
icon: Map,
|
||||
title: "Prime Locations",
|
||||
description:
|
||||
"Access to the most sought-after neighborhoods and exclusive enclaves across the region.",
|
||||
},
|
||||
title: "Prime Locations", description:
|
||||
"Access to the most sought-after neighborhoods and exclusive enclaves across the region."},
|
||||
{
|
||||
icon: DollarSign,
|
||||
title: "Investment Value",
|
||||
description:
|
||||
"Properties that appreciate consistently, backed by market expertise and strategic selection.",
|
||||
},
|
||||
title: "Investment Value", description:
|
||||
"Properties that appreciate consistently, backed by market expertise and strategic selection."},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Expert Guidance",
|
||||
description:
|
||||
"Personalized service from experienced agents who understand luxury market dynamics.",
|
||||
},
|
||||
title: "Expert Guidance", description:
|
||||
"Personalized service from experienced agents who understand luxury market dynamics."},
|
||||
{
|
||||
icon: Key,
|
||||
title: "Exclusive Access",
|
||||
description:
|
||||
"Off-market listings and private showings unavailable through traditional channels.",
|
||||
},
|
||||
title: "Exclusive Access", description:
|
||||
"Off-market listings and private showings unavailable through traditional channels."},
|
||||
{
|
||||
icon: HandshakeIcon,
|
||||
title: "Seamless Process",
|
||||
description:
|
||||
"From viewing to closing, we handle every detail with precision and discretion.",
|
||||
},
|
||||
title: "Seamless Process", description:
|
||||
"From viewing to closing, we handle every detail with precision and discretion."},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Trust & Transparency",
|
||||
description:
|
||||
"Complete transparency in all transactions with full legal protection for buyers and sellers.",
|
||||
},
|
||||
title: "Trust & Transparency", description:
|
||||
"Complete transparency in all transactions with full legal protection for buyers and sellers."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -199,32 +176,14 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "$500M+",
|
||||
title: "Properties Sold",
|
||||
description: "Total transaction value representing market confidence",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-psd/luxury-real-estate-landing-page-template_23-2151270813.jpg?_wi=1",
|
||||
imageAlt: "Property sales milestone",
|
||||
},
|
||||
id: "1", value: "$500M+", title: "Properties Sold", description: "Total transaction value representing market confidence", imageSrc:
|
||||
"http://img.b2bpic.net/free-psd/luxury-real-estate-landing-page-template_23-2151270813.jpg?_wi=1", imageAlt: "Property sales milestone"},
|
||||
{
|
||||
id: "2",
|
||||
value: "2,400+",
|
||||
title: "Happy Clients",
|
||||
description: "Satisfied customers who trust us with their real estate",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/tall-dubai-marina-skyscrapers-uae_231208-7592.jpg?_wi=1",
|
||||
imageAlt: "Client satisfaction",
|
||||
},
|
||||
id: "2", value: "2,400+", title: "Happy Clients", description: "Satisfied customers who trust us with their real estate", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/tall-dubai-marina-skyscrapers-uae_231208-7592.jpg?_wi=1", imageAlt: "Client satisfaction"},
|
||||
{
|
||||
id: "3",
|
||||
value: "98%",
|
||||
title: "Satisfaction Rate",
|
||||
description: "Client satisfaction and recommendation percentage",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/vertical-shot-person-standing-top-building_181624-14409.jpg?_wi=1",
|
||||
imageAlt: "Client satisfaction rate",
|
||||
},
|
||||
id: "3", value: "98%", title: "Satisfaction Rate", description: "Client satisfaction and recommendation percentage", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/vertical-shot-person-standing-top-building_181624-14409.jpg?_wi=1", imageAlt: "Client satisfaction rate"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -239,49 +198,21 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Found Our Perfect Dream Home",
|
||||
quote:
|
||||
"The team at Nasr made the entire process seamless. From our first viewing to closing day, every detail was handled with professionalism and care. We couldn't be happier with our new home!",
|
||||
name: "Sarah Mitchell",
|
||||
role: "Homeowner",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=1",
|
||||
imageAlt: "Sarah Mitchell",
|
||||
},
|
||||
id: "1", title: "Found Our Perfect Dream Home", quote:
|
||||
"The team at Nasr made the entire process seamless. From our first viewing to closing day, every detail was handled with professionalism and care. We couldn't be happier with our new home!", name: "Sarah Mitchell", role: "Homeowner", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=1", imageAlt: "Sarah Mitchell"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Expert Investment Guidance",
|
||||
quote:
|
||||
"I needed an agent who understood the luxury market deeply. Nasr's team provided invaluable insights that helped me make a confident investment decision. The property has already appreciated significantly.",
|
||||
name: "Michael Chen",
|
||||
role: "Investor",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/charming-woman-looks-into-camera-smiles-caucasian-short-haired-lady-black-jacket-laughing-posing-isolated_197531-18517.jpg?_wi=1",
|
||||
imageAlt: "Michael Chen",
|
||||
},
|
||||
id: "2", title: "Expert Investment Guidance", quote:
|
||||
"I needed an agent who understood the luxury market deeply. Nasr's team provided invaluable insights that helped me make a confident investment decision. The property has already appreciated significantly.", name: "Michael Chen", role: "Investor", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/charming-woman-looks-into-camera-smiles-caucasian-short-haired-lady-black-jacket-laughing-posing-isolated_197531-18517.jpg?_wi=1", imageAlt: "Michael Chen"},
|
||||
{
|
||||
id: "3",
|
||||
title: "Premium Service Beyond Expectations",
|
||||
quote:
|
||||
"Selling my luxury property required someone who truly understood the high-end market. Nasr exceeded all my expectations with their strategic approach and professional network.",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Property Seller",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg?_wi=1",
|
||||
imageAlt: "Emily Rodriguez",
|
||||
},
|
||||
id: "3", title: "Premium Service Beyond Expectations", quote:
|
||||
"Selling my luxury property required someone who truly understood the high-end market. Nasr exceeded all my expectations with their strategic approach and professional network.", name: "Emily Rodriguez", role: "Property Seller", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg?_wi=1", imageAlt: "Emily Rodriguez"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Trusted Partner for Multiple Purchases",
|
||||
quote:
|
||||
"I've worked with Nasr on three property acquisitions now. Their consistency, expertise, and dedication to client satisfaction keep me coming back.",
|
||||
name: "David Kim",
|
||||
role: "Repeat Client",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",
|
||||
imageAlt: "David Kim",
|
||||
},
|
||||
id: "4", title: "Trusted Partner for Multiple Purchases", quote:
|
||||
"I've worked with Nasr on three property acquisitions now. Their consistency, expertise, and dedication to client satisfaction keep me coming back.", name: "David Kim", role: "Repeat Client", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "David Kim"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -297,53 +228,23 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "1",
|
||||
name: "James Sterling",
|
||||
role: "CEO & Founder",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg?_wi=1",
|
||||
imageAlt: "James Sterling",
|
||||
},
|
||||
id: "1", name: "James Sterling", role: "CEO & Founder", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg?_wi=1", imageAlt: "James Sterling"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Victoria Laurent",
|
||||
role: "Head of Sales",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12811.jpg?_wi=1",
|
||||
imageAlt: "Victoria Laurent",
|
||||
},
|
||||
id: "2", name: "Victoria Laurent", role: "Head of Sales", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12811.jpg?_wi=1", imageAlt: "Victoria Laurent"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Richard Walsh",
|
||||
role: "Senior Agent",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg?_wi=1",
|
||||
imageAlt: "Richard Walsh",
|
||||
},
|
||||
id: "3", name: "Richard Walsh", role: "Senior Agent", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg?_wi=1", imageAlt: "Richard Walsh"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Alexandra Price",
|
||||
role: "Luxury Specialist",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-woman-working-indoors_23-2149915936.jpg?_wi=1",
|
||||
imageAlt: "Alexandra Price",
|
||||
},
|
||||
id: "4", name: "Alexandra Price", role: "Luxury Specialist", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-woman-working-indoors_23-2149915936.jpg?_wi=1", imageAlt: "Alexandra Price"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Christopher Moore",
|
||||
role: "Market Analyst",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-real-estate-agent_23-2151065041.jpg?_wi=1",
|
||||
imageAlt: "Christopher Moore",
|
||||
},
|
||||
id: "5", name: "Christopher Moore", role: "Market Analyst", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-real-estate-agent_23-2151065041.jpg?_wi=1", imageAlt: "Christopher Moore"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Isabella Bennett",
|
||||
role: "Client Relations",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/modern-businesswoman_23-2148012908.jpg?_wi=1",
|
||||
imageAlt: "Isabella Bennett",
|
||||
},
|
||||
id: "6", name: "Isabella Bennett", role: "Client Relations", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/modern-businesswoman_23-2148012908.jpg?_wi=1", imageAlt: "Isabella Bennett"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -370,4 +271,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
372
src/app/properties/[id]/page.tsx
Normal file
372
src/app/properties/[id]/page.tsx
Normal file
@@ -0,0 +1,372 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
MapPin,
|
||||
Bed,
|
||||
Bath,
|
||||
Maximize2,
|
||||
DollarSign,
|
||||
Phone,
|
||||
Mail,
|
||||
Heart,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
// Mock property data - in a real app, this would come from a database
|
||||
const properties: Record<string, any> = {
|
||||
"1": {
|
||||
id: "1", name: "Luxury Modern Villa", price: "$2,450,000", location: "Beverly Hills, California", bedrooms: 5,
|
||||
bathrooms: 4,
|
||||
sqft: "8,500 sq ft", description:
|
||||
"Stunning modern villa with breathtaking views, state-of-the-art amenities, and premium finishes throughout. This architectural masterpiece features floor-to-ceiling windows, a resort-style pool, and smart home automation.", images: [
|
||||
"http://img.b2bpic.net/free-photo/tanned-girl-shorts-is-hugging-her-laughing-guy-couple-sitting-near-pool_197531-17277.jpg", "http://img.b2bpic.net/free-photo/swimming-pool_74190-7327.jpg", "http://img.b2bpic.net/free-photo/couple-taking-walk-by-pool-vacation_23-2149369704.jpg"],
|
||||
contact: {
|
||||
agent: "James Sterling", phone: "+1 (555) 123-4567", email: "james@nasrealestate.com"},
|
||||
features: [
|
||||
"Smart Home Automation", "Resort-Style Pool", "Home Theater", "Wine Cellar", "Fitness Center", "Gated Entry"],
|
||||
},
|
||||
"2": {
|
||||
id: "2", name: "Elegant Mansion Facade", price: "$3,200,000", location: "Miami Beach, Florida", bedrooms: 6,
|
||||
bathrooms: 5,
|
||||
sqft: "9,200 sq ft", description:
|
||||
"Prestigious oceanfront estate with spectacular views of Biscayne Bay. This luxurious property features marble throughout, custom millwork, and direct beach access.", images: [
|
||||
"http://img.b2bpic.net/free-photo/swimming-pool_74190-7327.jpg", "http://img.b2bpic.net/free-photo/tanned-girl-shorts-is-hugging-her-laughing-guy-couple-sitting-near-pool_197531-17277.jpg", "http://img.b2bpic.net/free-photo/couple-taking-walk-by-pool-vacation_23-2149369704.jpg"],
|
||||
contact: {
|
||||
agent: "Victoria Laurent", phone: "+1 (555) 234-5678", email: "victoria@nasrealestate.com"},
|
||||
features: [
|
||||
"Ocean Front", "Private Beach Access", "Wine Room", "Spa", "Cinema", "Marble Finishes"],
|
||||
},
|
||||
"3": {
|
||||
id: "3", name: "Modern Penthouse Skyline View", price: "$1,850,000", location: "New York City, New York", bedrooms: 3,
|
||||
bathrooms: 3,
|
||||
sqft: "4,800 sq ft", description:
|
||||
"Sophisticated penthouse with panoramic skyline views from floor-to-ceiling windows. Located in Manhattan's most prestigious building with world-class amenities and 24/7 concierge service.", images: [
|
||||
"http://img.b2bpic.net/free-photo/young-people-watching-smartphone-office_23-2147668943.jpg", "http://img.b2bpic.net/free-photo/swimming-pool_74190-7327.jpg", "http://img.b2bpic.net/free-photo/tanned-girl-shorts-is-hugging-her-laughing-guy-couple-sitting-near-pool_197531-17277.jpg"],
|
||||
contact: {
|
||||
agent: "Richard Walsh", phone: "+1 (555) 345-6789", email: "richard@nasrealestate.com"},
|
||||
features: [
|
||||
"Skyline Views", "Concierge Service", "Rooftop Terrace", "Smart Building", "Private Elevator", "Fitness Facilities"],
|
||||
},
|
||||
};
|
||||
|
||||
export default function PropertyDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: { id: string };
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const property = properties[params.id];
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||||
const [isFavorited, setIsFavorited] = useState(false);
|
||||
|
||||
if (!property) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<NavbarStyleApple
|
||||
brandName="Nasr"
|
||||
navItems={[
|
||||
{ name: "Properties", id: "properties" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Property Not Found</h1>
|
||||
<p className="text-lg mb-8">The property you're looking for doesn't exist.</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-block px-6 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition"
|
||||
>
|
||||
Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const nextImage = () => {
|
||||
setCurrentImageIndex(
|
||||
(prev) => (prev + 1) % property.images.length
|
||||
);
|
||||
};
|
||||
|
||||
const prevImage = () => {
|
||||
setCurrentImageIndex(
|
||||
(prev) =>
|
||||
(prev - 1 + property.images.length) % property.images.length
|
||||
);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Properties", id: "properties" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Nasr", href: "/#about" },
|
||||
{ label: "Our Team", href: "/#team" },
|
||||
{ label: "Market Insights", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Properties", items: [
|
||||
{ label: "Featured Listings", href: "/properties" },
|
||||
{ label: "New Developments", href: "#" },
|
||||
{ label: "Investment Properties", href: "#" },
|
||||
{ label: "Luxury Rentals", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Contact Us", href: "/#contact" },
|
||||
{ label: "Schedule Viewing", href: "/#contact" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple brandName="Nasr" navItems={navItems} />
|
||||
</div>
|
||||
|
||||
<main className="flex-1 py-12 md:py-20">
|
||||
<div className="mx-auto max-w-6xl px-4">
|
||||
{/* Back Button */}
|
||||
<div className="mb-8">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center gap-2 text-foreground hover:text-primary-cta transition"
|
||||
>
|
||||
<ChevronLeft size={20} />
|
||||
<span>Back to Properties</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Image Gallery */}
|
||||
<div className="mb-12">
|
||||
<div className="relative mb-4 overflow-hidden rounded-lg bg-card h-[400px] md:h-[600px]">
|
||||
<img
|
||||
src={property.images[currentImageIndex]}
|
||||
alt={property.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{/* Image Navigation */}
|
||||
<button
|
||||
onClick={prevImage}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-black/30 hover:bg-black/50 text-white p-2 rounded-full transition"
|
||||
aria-label="Previous image"
|
||||
>
|
||||
<ChevronLeft size={24} />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextImage}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-black/30 hover:bg-black/50 text-white p-2 rounded-full transition"
|
||||
aria-label="Next image"
|
||||
>
|
||||
<ChevronRight size={24} />
|
||||
</button>
|
||||
{/* Image Counter */}
|
||||
<div className="absolute bottom-4 right-4 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
|
||||
{currentImageIndex + 1} / {property.images.length}
|
||||
</div>
|
||||
{/* Favorite Button */}
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className="absolute top-4 right-4 bg-white/20 hover:bg-white/40 text-white p-2 rounded-full transition"
|
||||
aria-label="Add to favorites"
|
||||
>
|
||||
<Heart
|
||||
size={24}
|
||||
fill={isFavorited ? "currentColor" : "none"}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{/* Thumbnail Navigation */}
|
||||
<div className="flex gap-2 overflow-x-auto pb-2">
|
||||
{property.images.map((img: string, idx: number) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setCurrentImageIndex(idx)}
|
||||
className={`flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition ${
|
||||
idx === currentImageIndex
|
||||
? "border-primary-cta"
|
||||
: "border-transparent hover:border-foreground/30"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={img}
|
||||
alt={`Property ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Property Details Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-2">
|
||||
{property.name}
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-foreground/70 mb-4">
|
||||
<MapPin size={20} />
|
||||
<span>{property.location}</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-primary-cta">
|
||||
{property.price}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Key Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-8 p-6 rounded-lg bg-card">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Bed size={20} className="text-primary-cta" />
|
||||
<span className="font-semibold">Bedrooms</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold">{property.bedrooms}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Bath size={20} className="text-primary-cta" />
|
||||
<span className="font-semibold">Bathrooms</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold">{property.bathrooms}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Maximize2 size={20} className="text-primary-cta" />
|
||||
<span className="font-semibold">Size</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold">{property.sqft}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold mb-4">About This Property</h2>
|
||||
<p className="text-foreground/80 leading-relaxed text-lg">
|
||||
{property.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Features</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{property.features.map((feature: string, idx: number) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-2 p-3 rounded-lg bg-card"
|
||||
>
|
||||
<div className="w-2 h-2 bg-primary-cta rounded-full" />
|
||||
<span className="font-medium">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-24 p-6 rounded-lg bg-card">
|
||||
<h2 className="text-2xl font-bold mb-6">Contact Agent</h2>
|
||||
|
||||
<div className="mb-6">
|
||||
<p className="text-foreground/70 text-sm mb-1">Agent Name</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{property.contact.agent}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
<a
|
||||
href={`tel:${property.contact.phone}`}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-background hover:bg-background/80 transition"
|
||||
>
|
||||
<Phone size={20} className="text-primary-cta" />
|
||||
<span className="font-medium">{property.contact.phone}</span>
|
||||
</a>
|
||||
<a
|
||||
href={`mailto:${property.contact.email}`}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-background hover:bg-background/80 transition"
|
||||
>
|
||||
<Mail size={20} className="text-primary-cta" />
|
||||
<span className="font-medium text-sm">
|
||||
{property.contact.email}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button className="w-full py-3 px-4 rounded-lg bg-primary-cta text-white font-semibold hover:opacity-90 transition">
|
||||
Schedule Viewing
|
||||
</button>
|
||||
|
||||
<button className="w-full mt-3 py-3 px-4 rounded-lg border border-primary-cta text-primary-cta font-semibold hover:bg-primary-cta/5 transition">
|
||||
Make an Inquiry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Nasr Real Estate. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -2,12 +2,50 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import Link from "next/link";
|
||||
import { Home, TrendingUp, Star } from "lucide-react";
|
||||
import {
|
||||
MapPin,
|
||||
Bed,
|
||||
Bath,
|
||||
Maximize2,
|
||||
DollarSign,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface Property {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
location: string;
|
||||
bedrooms: number;
|
||||
bathrooms: number;
|
||||
sqft: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
const properties: Property[] = [
|
||||
{
|
||||
id: "1", name: "Luxury Modern Villa", price: "$2,450,000", location: "Beverly Hills, California", bedrooms: 5,
|
||||
bathrooms: 4,
|
||||
sqft: "8,500 sq ft", image:
|
||||
"http://img.b2bpic.net/free-photo/tanned-girl-shorts-is-hugging-her-laughing-guy-couple-sitting-near-pool_197531-17277.jpg"},
|
||||
{
|
||||
id: "2", name: "Elegant Mansion Facade", price: "$3,200,000", location: "Miami Beach, Florida", bedrooms: 6,
|
||||
bathrooms: 5,
|
||||
sqft: "9,200 sq ft", image:
|
||||
"http://img.b2bpic.net/free-photo/swimming-pool_74190-7327.jpg"},
|
||||
{
|
||||
id: "3", name: "Modern Penthouse Skyline View", price: "$1,850,000", location: "New York City, New York", bedrooms: 3,
|
||||
bathrooms: 3,
|
||||
sqft: "4,800 sq ft", image:
|
||||
"http://img.b2bpic.net/free-photo/young-people-watching-smartphone-office_23-2147668943.jpg"},
|
||||
{
|
||||
id: "4", name: "Waterfront Luxury Villa", price: "$4,100,000", location: "Malibu, California", bedrooms: 7,
|
||||
bathrooms: 6,
|
||||
sqft: "10,500 sq ft", image:
|
||||
"http://img.b2bpic.net/free-photo/couple-taking-walk-by-pool-vacation_23-2149369704.jpg"},
|
||||
];
|
||||
|
||||
export default function PropertiesPage() {
|
||||
const navItems = [
|
||||
@@ -20,17 +58,15 @@ export default function PropertiesPage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Nasr", href: "#about" },
|
||||
{ label: "Our Team", href: "#team" },
|
||||
title: "Company", items: [
|
||||
{ label: "About Nasr", href: "/#about" },
|
||||
{ label: "Our Team", href: "/#team" },
|
||||
{ label: "Market Insights", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Properties",
|
||||
items: [
|
||||
title: "Properties", items: [
|
||||
{ label: "Featured Listings", href: "/properties" },
|
||||
{ label: "New Developments", href: "#" },
|
||||
{ label: "Investment Properties", href: "#" },
|
||||
@@ -38,10 +74,9 @@ export default function PropertiesPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "Schedule Viewing", href: "#contact" },
|
||||
title: "Connect", items: [
|
||||
{ label: "Contact Us", href: "/#contact" },
|
||||
{ label: "Schedule Viewing", href: "/#contact" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
],
|
||||
@@ -61,157 +96,96 @@ export default function PropertiesPage() {
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple brandName="Nasr" navItems={navItems} />
|
||||
</div>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple brandName="Nasr" navItems={navItems} />
|
||||
</div>
|
||||
|
||||
<div id="properties" data-section="properties">
|
||||
<ProductCardFour
|
||||
title="Featured Listings"
|
||||
description="Browse our curated selection of luxury properties, each offering exceptional design, prime locations, and investment potential."
|
||||
tag="Exclusive Listings"
|
||||
tagIcon={Home}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Modern Villa Estate",
|
||||
price: "$2,850,000",
|
||||
variant: "5 Bedrooms • 4,200 sq ft",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-psd/luxury-real-estate-landing-page-template_23-2151270813.jpg?_wi=2",
|
||||
imageAlt: "Modern villa estate",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Downtown Penthouse",
|
||||
price: "$1,950,000",
|
||||
variant: "3 Bedrooms • 3,100 sq ft",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/tall-dubai-marina-skyscrapers-uae_231208-7592.jpg?_wi=2",
|
||||
imageAlt: "Downtown penthouse",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Luxury Townhouse",
|
||||
price: "$1,450,000",
|
||||
variant: "4 Bedrooms • 3,500 sq ft",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/vertical-shot-person-standing-top-building_181624-14409.jpg?_wi=2",
|
||||
imageAlt: "Luxury townhouse",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<main className="flex-1 py-12 md:py-20">
|
||||
<div className="mx-auto max-w-6xl px-4">
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
Featured Properties
|
||||
</h1>
|
||||
<p className="text-lg text-foreground/70">
|
||||
Explore our curated collection of luxury homes and premium real estate opportunities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="Our Market Leadership"
|
||||
description="Proven track record of success with impressive results year after year."
|
||||
tag="By The Numbers"
|
||||
tagIcon={TrendingUp}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "$500M+",
|
||||
title: "Properties Sold",
|
||||
description: "Total transaction value representing market confidence",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-psd/luxury-real-estate-landing-page-template_23-2151270813.jpg?_wi=3",
|
||||
imageAlt: "Property sales milestone",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "2,400+",
|
||||
title: "Happy Clients",
|
||||
description: "Satisfied customers who trust us with their real estate",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/tall-dubai-marina-skyscrapers-uae_231208-7592.jpg?_wi=3",
|
||||
imageAlt: "Client satisfaction",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "98%",
|
||||
title: "Satisfaction Rate",
|
||||
description: "Client satisfaction and recommendation percentage",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/vertical-shot-person-standing-top-building_181624-14409.jpg?_wi=3",
|
||||
imageAlt: "Client satisfaction rate",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
|
||||
{properties.map((property) => (
|
||||
<Link
|
||||
key={property.id}
|
||||
href={`/properties/${property.id}`}
|
||||
className="group cursor-pointer"
|
||||
>
|
||||
<div className="rounded-lg overflow-hidden bg-card h-full shadow-lg hover:shadow-xl transition-shadow">
|
||||
{/* Image */}
|
||||
<div className="relative overflow-hidden h-64 md:h-80">
|
||||
<img
|
||||
src={property.image}
|
||||
alt={property.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute top-4 right-4 bg-primary-cta text-white px-4 py-2 rounded-lg font-bold">
|
||||
{property.price}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Client Stories"
|
||||
description="Hear from those who have found their dream homes and made sound investments with Nasr."
|
||||
tag="Testimonials"
|
||||
tagIcon={Star}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Found Our Perfect Dream Home",
|
||||
quote:
|
||||
"The team at Nasr made the entire process seamless. From our first viewing to closing day, every detail was handled with professionalism and care. We couldn't be happier with our new home!",
|
||||
name: "Sarah Mitchell",
|
||||
role: "Homeowner",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=2",
|
||||
imageAlt: "Sarah Mitchell",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Expert Investment Guidance",
|
||||
quote:
|
||||
"I needed an agent who understood the luxury market deeply. Nasr's team provided invaluable insights that helped me make a confident investment decision. The property has already appreciated significantly.",
|
||||
name: "Michael Chen",
|
||||
role: "Investor",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/charming-woman-looks-into-camera-smiles-caucasian-short-haired-lady-black-jacket-laughing-posing-isolated_197531-18517.jpg?_wi=2",
|
||||
imageAlt: "Michael Chen",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Premium Service Beyond Expectations",
|
||||
quote:
|
||||
"Selling my luxury property required someone who truly understood the high-end market. Nasr exceeded all my expectations with their strategic approach and professional network.",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Property Seller",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg?_wi=2",
|
||||
imageAlt: "Emily Rodriguez",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Trusted Partner for Multiple Purchases",
|
||||
quote:
|
||||
"I've worked with Nasr on three property acquisitions now. Their consistency, expertise, and dedication to client satisfaction keep me coming back.",
|
||||
name: "David Kim",
|
||||
role: "Repeat Client",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",
|
||||
imageAlt: "David Kim",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<h2 className="text-2xl font-bold mb-2 group-hover:text-primary-cta transition">
|
||||
{property.name}
|
||||
</h2>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Nasr Real Estate. All rights reserved."
|
||||
/>
|
||||
<div className="flex items-center gap-2 text-foreground/70 mb-4">
|
||||
<MapPin size={18} />
|
||||
<span>{property.location}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 mb-6 pb-6 border-b border-foreground/10">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bed size={18} className="text-primary-cta" />
|
||||
<div>
|
||||
<p className="text-xs text-foreground/60">Bedrooms</p>
|
||||
<p className="font-bold">{property.bedrooms}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Bath size={18} className="text-primary-cta" />
|
||||
<div>
|
||||
<p className="text-xs text-foreground/60">Bathrooms</p>
|
||||
<p className="font-bold">{property.bathrooms}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Maximize2 size={18} className="text-primary-cta" />
|
||||
<div>
|
||||
<p className="text-xs text-foreground/60">Size</p>
|
||||
<p className="font-bold text-sm">{property.sqft}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full flex items-center justify-between py-3 px-4 rounded-lg bg-primary-cta text-white font-semibold hover:opacity-90 transition">
|
||||
<span>View Details</span>
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Nasr Real Estate. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user