Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 102841001f | |||
| 0e5bd1d61e | |||
| c554ab26c8 | |||
| c1bfe0ed15 | |||
| bbe67fd3b4 | |||
| 691288ef60 | |||
| dfa9178673 |
311
src/app/apartment-detail/page.tsx
Normal file
311
src/app/apartment-detail/page.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { MapPin, Clock, Users, Home, Star, AlertCircle } from 'lucide-react';
|
||||
|
||||
export default function ApartmentDetailPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="grid"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Vivimilano"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Neighborhoods", id: "/neighborhoods" },
|
||||
{ name: "Apartments", id: "/apartments" },
|
||||
{ name: "Discover Milan", id: "#attractions" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Book Now", href: "#search"
|
||||
}}
|
||||
buttonClassName="font-semibold"
|
||||
className="z-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Loft Porta Romana - Your Milan Experience"
|
||||
description="Discover luxury living in one of Milan's most authentic neighborhoods. Elegantly designed 2-guest loft with modern amenities and panoramic balcony."
|
||||
tag="Premium Accommodation"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg?_wi=1"
|
||||
imageAlt="Loft Porta Romana exterior view"
|
||||
showDimOverlay={true}
|
||||
showBlur={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Check Availability", href: "#availability"
|
||||
},
|
||||
{
|
||||
text: "Contact Host", href: "#contact"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="details" data-section="details">
|
||||
<MediaAbout
|
||||
title="About This Apartment"
|
||||
description="Located in the heart of Porta Romana, this elegantly appointed loft combines modern design with authentic Milanese character. Perfect for discerning travelers seeking a home away from home."
|
||||
tag="Apartment Details"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/sitting-room-with-old-furniture_116348-77.jpg?_wi=1"
|
||||
imageAlt="Loft interior design and furnishings"
|
||||
buttons={[
|
||||
{
|
||||
text: "View More Photos", href: "#gallery"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="map" data-section="map">
|
||||
<FeatureCardSix
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Duomo di Milano", description: "The magnificent Milan Cathedral. Gothic architecture masterpiece with 135 pinnacles. A must-see for architecture enthusiasts. Distance: 1.2 km away.", imageSrc: "http://img.b2bpic.net/free-photo/gothic-window-stained-glass-wooden-doors_169016-68675.jpg?_wi=1", imageAlt: "Milan Duomo Cathedral"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Castello Sforzesco", description: "Medieval fortress hosting important museums and artworks. Explore Milan's history and Lombard cultural treasures. Distance: 1.8 km away.", imageSrc: "http://img.b2bpic.net/free-photo/old-arch-bridge-grass-field-with-trees-building_181624-28637.jpg?_wi=2", imageAlt: "Castello Sforzesco fortress"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Teatro alla Scala", description: "One of the world's most prestigious opera houses. Extraordinary productions of opera and ballet. An unmissable cultural experience. Distance: 0.9 km away.", imageSrc: "http://img.b2bpic.net/free-photo/wooden-benches-modern-sauna-geometric-style_169016-70250.jpg?_wi=2", imageAlt: "Teatro alla Scala opera house"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Galleria Vittorio Emanuele II", description: "Milan's most elegant shopping arcade. A 19th-century architectural masterpiece where shopping and beauty meet. Distance: 1.1 km away.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-listening-music-with-headphones-city-street_171337-16984.jpg?_wi=2", imageAlt: "Galleria Vittorio Emanuele shopping"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Santa Maria delle Grazie", description: "Renaissance church famous for Leonardo da Vinci's 'The Last Supper'. A cornerstone of Milan's artistic heritage. Distance: 2.3 km away.", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-patterned-gray-concrete-building-ceiling_181624-2292.jpg", imageAlt: "Santa Maria delle Grazie church"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Navigli District", description: "Famous canals with vibrant aperitivo culture and nightlife. Charming waterfront restaurants and authentic Milan atmosphere. Distance: 1.6 km away.", imageSrc: "http://img.b2bpic.net/free-photo/shinjuku-gyoen-national-garden_181624-27412.jpg?_wi=2", imageAlt: "Navigli canals district"
|
||||
},
|
||||
]}
|
||||
title="Nearby Attractions & Local Guides"
|
||||
description="Explore incredible sights and experiences within walking distance from your apartment. Each location is carefully curated to showcase Milan's best attractions."
|
||||
tag="Neighborhood Map"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Directions", href: "#"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="guides" data-section="guides">
|
||||
<TeamCardOne
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Marco Rossi", role: "Local Expert", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-looking-away_23-2147955371.jpg", imageAlt: "Marco Rossi local guide"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Giulia Milano", role: "Food & Culture Guide", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-white-clothes-smiling_23-2148056219.jpg", imageAlt: "Giulia Milano guide"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Antonio Conti", role: "History & Architecture", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1666.jpg", imageAlt: "Antonio Conti guide"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Francesca Bianchi", role: "Shopping & Fashion", imageSrc: "http://img.b2bpic.net/free-photo/joyful-pretty-woman-looks-front-isolated-olive-green-wall_141793-66135.jpg", imageAlt: "Francesca Bianchi guide"
|
||||
},
|
||||
]}
|
||||
title="Meet Our Local Guides"
|
||||
description="Connect with experienced locals who can enhance your Milan experience. Our guides offer personalized recommendations and insider tips."
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="availability" data-section="availability">
|
||||
<TimelineHorizontalCardStack
|
||||
title="Availability & Booking Timeline"
|
||||
description="Check availability and plan your stay in Milan. Our interactive calendar shows real-time booking status for your selected dates."
|
||||
tag="Reserve Your Dates"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-composition-flowers-interior-room_169016-5468.jpg", imageAlt: "Bedroom availability view"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sitting-room-with-old-furniture_116348-77.jpg?_wi=1", imageAlt: "Living room booking calendar"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-design-bathroom_1303-2089.jpg", imageAlt: "Bathroom amenities"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-bedroom-interior_169016-5468.jpg", imageAlt: "Master bedroom comfort"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now", href: "#contact"
|
||||
},
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Check-In Day</h3>
|
||||
<p className="text-sm opacity-80">Select your arrival date. Self check-in available 24/7 with automated door code access.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Duration Options</h3>
|
||||
<p className="text-sm opacity-80">Minimum 3 nights. Longer stays receive special discount rates. Flexible booking terms available.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Price Calculation</h3>
|
||||
<p className="text-sm opacity-80">€120 per night. Final price includes taxes and WiFi. No hidden fees or surprise charges.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Confirmation</h3>
|
||||
<p className="text-sm opacity-80">Instant booking confirmation via email. Receive access codes and host information immediately.</p>
|
||||
</div>
|
||||
</TimelineHorizontalCardStack>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What is the check-in and check-out process?", content: "Check-in is completely self-managed and available 24/7. You'll receive unique door codes via email before arrival. Simply enter the code at the main entrance and your assigned apartment door. Check-out is at 11 AM with a simple keypad reset. No need to meet anyone or coordinate timing."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Is WiFi included and how fast is the connection?", content: "Yes, high-speed WiFi is complimentary. Connection speeds reach up to 1 Gbps with a stable, dedicated fiber connection. Perfect for remote work, video calls, and entertainment streaming. Guest WiFi network and password are provided upon arrival."
|
||||
},
|
||||
{
|
||||
id: "3", title: "What amenities are included with my stay?", content: "<ul><li>Fully equipped modern kitchen with stove, oven, dishwasher, and refrigerator</li><li>Luxury linens and towels changed daily</li><li>Premium toiletries and bath products</li><li>Air conditioning and heating</li><li>Washing machine with complimentary detergent</li><li>Smart TV with streaming services</li><li>Coffee machine and tea selection</li></ul>"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Is there 24/7 support available?", content: "Absolutely! Our support team is available around the clock. Contact us via email, WhatsApp, or phone. Average response time is under 30 minutes. We help with everything from local recommendations to technical assistance."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Can I cancel my booking?", content: "We offer flexible cancellation policies. Cancellations made 7+ days before arrival receive a full refund. Cancellations 3-6 days prior receive 50% refund. Cancellations within 72 hours are non-refundable. Travel insurance is recommended for added peace of mind."
|
||||
},
|
||||
{
|
||||
id: "6", title: "Are pets allowed in the apartment?", content: "Small pets (under 5kg) are welcome with a €30 pet fee per stay. Please notify us in advance so we can prepare. The apartment has no carpeting and is easy to clean. We provide pet bowls and a designated pet relief area nearby."
|
||||
},
|
||||
{
|
||||
id: "7", title: "Is parking available?", content: "The apartment is in a pedestrian-friendly area with excellent public transportation. Paid parking is available at nearby garages (€2-3/hour). We recommend using the metro for city exploration. Street parking is available but limited. Contact us for specific parking recommendations."
|
||||
},
|
||||
{
|
||||
id: "8", title: "What is the neighborhood like at night?", content: "Porta Romana is a vibrant, safe neighborhood with many restaurants, bars, and cafes that stay open late. The area has good street lighting and heavy foot traffic. Milan is generally very safe. We provide a local guide and can arrange evening activities upon request."
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about your stay, amenities, policies, and our neighborhood."
|
||||
tag="Apartment FAQs"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Ready to Book?"
|
||||
title="Reserve Your Milan Adventure"
|
||||
description="Contact our team to confirm availability, ask questions, or book your stay. We're here to make your Milan experience unforgettable."
|
||||
background={{
|
||||
variant: "sparkles-gradient"
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-composition-flowers-interior-room_169016-5468.jpg?_wi=1"
|
||||
imageAlt="Booking confirmation background"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Get More Info"
|
||||
termsText="We'll respond within 24 hours with availability details and booking options."
|
||||
onSubmit={(email) => console.log("Booking inquiry:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Vivimilano BnB"
|
||||
copyrightText="© 2025 Vivimilano BnB | All rights reserved"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "Neighborhoods", href: "/neighborhoods"
|
||||
},
|
||||
{
|
||||
label: "Apartments", href: "/apartments"
|
||||
},
|
||||
{
|
||||
label: "Discover Milan", href: "#attractions"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Email: info@vivimilano.com", href: "mailto:info@vivimilano.com"
|
||||
},
|
||||
{
|
||||
label: "Phone: +39 02 1234 5678", href: "tel:+390212345678"
|
||||
},
|
||||
{
|
||||
label: "WhatsApp: +39 324 567 8901", href: "https://wa.me/393245678901"
|
||||
},
|
||||
{
|
||||
label: "Contact Us", href: "#contact"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms and Conditions", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Disclaimer", href: "#"
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
504
src/app/apartment/[id]/page.tsx
Normal file
504
src/app/apartment/[id]/page.tsx
Normal file
@@ -0,0 +1,504 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { useState } from 'react';
|
||||
import { Calendar, Users, MapPin, Mail, Phone, MessageSquare } from 'lucide-react';
|
||||
|
||||
const apartmentData = {
|
||||
"1": {
|
||||
name: "Loft Porta Romana", price: 120,
|
||||
pricePerNight: "€120/notte", guests: 2,
|
||||
bedrooms: 1,
|
||||
bathrooms: 1,
|
||||
description: "Un elegante loft moderno nel cuore del quartiere Porta Romana, con balcone panoramico e vista sulle vie storiche di Milano.", fullDescription: "Questo straordinario loft combina design contemporaneo con la calda atmosfera del quartiere Porta Romana. Spazi luminosi, arredi di qualità e una posizione ideale per scoprire Milano come un vero milanese. Il balcone offre viste suggestive sulle vie trafficate di negozi e ristoranti storici.", images: [
|
||||
"http://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg?_wi=1", "http://img.b2bpic.net/free-photo/sitting-room-with-old-furniture_116348-77.jpg?_wi=1", "http://img.b2bpic.net/free-photo/beautiful-composition-flowers-interior-room_169016-5468.jpg?_wi=1"
|
||||
],
|
||||
amenities: [
|
||||
"WiFi ad alta velocità", "Aria condizionata", "Cucina attrezzata", "Balcone privato", "Smart TV", "Lavatrice"
|
||||
],
|
||||
location: "Porta Romana, Milano", neighborhood: "Porta Romana: elegante e autentico, ristoranti e locali"
|
||||
},
|
||||
"2": {
|
||||
name: "Suite Brera Design", price: 180,
|
||||
pricePerNight: "€180/notte", guests: 4,
|
||||
bedrooms: 2,
|
||||
bathrooms: 2,
|
||||
description: "Una lussuosa suite nel cuore del quartiere artistico Brera, perfetta per famiglie e gruppi di amici.", fullDescription: "La Suite Brera Design è un'esperienza di lusso nel centro storico di Milano. Due camere da letto eleganti, due bagni, e spazi comuni spaziosi per famiglie o gruppi. Posizionata nelle vie ricche di gallerie d'arte e ristoranti raffinati di Brera.", images: [
|
||||
"http://img.b2bpic.net/free-photo/sitting-room-with-old-furniture_116348-77.jpg?_wi=1", "http://img.b2bpic.net/free-photo/beautiful-composition-flowers-interior-room_169016-5468.jpg?_wi=1", "http://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg?_wi=1"
|
||||
],
|
||||
amenities: [
|
||||
"WiFi ultra-veloce", "Aria condizionata", "Cucina completa", "Terrazza", "Home cinema", "Lavatrice", "Asciugatrice", "Smart Home"
|
||||
],
|
||||
location: "Brera, Milano", neighborhood: "Brera: artistico, romantico, pieno di gallerie"
|
||||
},
|
||||
"3": {
|
||||
name: "Navigli Canal Apartment", price: 150,
|
||||
pricePerNight: "€150/notte", guests: 3,
|
||||
bedrooms: 2,
|
||||
bathrooms: 1,
|
||||
description: "Un accogliente appartamento con vista diretta sul celebre canale, nel vivace quartiere dei Navigli.", fullDescription: "Questo affascinante appartamento offre una vista diretta sui Navigli, uno dei quartieri più affascinanti di Milano. La luce naturale inonda gli spazi durante il giorno, e la sera potrete godere della magia dei canali illuminati dal vostro balcone. Perfetto per chi vuole vivere l'atmosfera autentica milanese.", images: [
|
||||
"http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3277.jpg?_wi=1", "http://img.b2bpic.net/free-photo/beautiful-composition-flowers-interior-room_169016-5468.jpg?_wi=1", "http://img.b2bpic.net/free-photo/sitting-room-with-old-furniture_116348-77.jpg?_wi=1"
|
||||
],
|
||||
amenities: [
|
||||
"WiFi ad alta velocità", "Aria condizionata", "Cucina attrezzata", "Balcone vista canale", "Smart TV", "Lavatrice", "Riscaldamento"
|
||||
],
|
||||
location: "Navigli, Milano", neighborhood: "Navigli: famosi canali, aperitivi e vita notturna"
|
||||
},
|
||||
"4": {
|
||||
name: "Isola Urban Flat", price: 110,
|
||||
pricePerNight: "€110/notte", guests: 2,
|
||||
bedrooms: 1,
|
||||
bathrooms: 1,
|
||||
description: "Un moderno monolocale nel vivace quartiere Isola, vicino alla metropolitana e ai migliori locali della città.", fullDescription: "L'Isola Urban Flat è la scelta ideale per chi vuole scoprire il lato moderno e creativo di Milano. Vicino alla metro, a soli minuti dai grattacieli, bar trendy e ristoranti innovativi. Lo spazio è compatto ma elegantemente arredato con tutto ciò che serve per un soggiorno confortevole.", images: [
|
||||
"http://img.b2bpic.net/free-photo/modern-tokyo-street-background_23-2149394880.jpg?_wi=1", "http://img.b2bpic.net/free-photo/beautiful-composition-flowers-interior-room_169016-5468.jpg?_wi=1", "http://img.b2bpic.net/free-photo/sitting-room-with-old-furniture_116348-77.jpg?_wi=1"
|
||||
],
|
||||
amenities: [
|
||||
"WiFi ad alta velocità", "Aria condizionata", "Cucina compatta", "Smart TV", "Lavatrice", "Vicino alla metro"
|
||||
],
|
||||
location: "Isola, Milano", neighborhood: "Isola: moderno e creativo, vicino ai grattacieli"
|
||||
}
|
||||
};
|
||||
|
||||
export default function ApartmentDetailPage({ params }: { params: { id: string } }) {
|
||||
const apartment = apartmentData[params.id as keyof typeof apartmentData];
|
||||
const [checkIn, setCheckIn] = useState("");
|
||||
const [checkOut, setCheckOut] = useState("");
|
||||
const [guests, setGuests] = useState(apartment?.guests || 2);
|
||||
const [email, setEmail] = useState("");
|
||||
const [bookingConfirmed, setBookingConfirmed] = useState(false);
|
||||
const [selectedImage, setSelectedImage] = useState(0);
|
||||
|
||||
if (!apartment) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="grid"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Vivimilano"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Neighborhoods", id: "/neighborhoods" },
|
||||
{ name: "Apartments", id: "/apartments" },
|
||||
{ name: "Discover Milan", id: "#attractions" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Book Now", href: "/"
|
||||
}}
|
||||
buttonClassName="font-semibold"
|
||||
className="z-50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<h1 className="text-4xl font-bold">Apartment not found</h1>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const calculateTotalNights = () => {
|
||||
if (!checkIn || !checkOut) return 0;
|
||||
const start = new Date(checkIn);
|
||||
const end = new Date(checkOut);
|
||||
return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
|
||||
};
|
||||
|
||||
const totalNights = calculateTotalNights();
|
||||
const totalPrice = totalNights > 0 ? apartment.price * totalNights : 0;
|
||||
|
||||
const handleBooking = () => {
|
||||
if (checkIn && checkOut && email) {
|
||||
setBookingConfirmed(true);
|
||||
console.log(`Booking confirmed for ${apartment.name}`);
|
||||
console.log(`Check-in: ${checkIn}, Check-out: ${checkOut}, Total: €${totalPrice}`);
|
||||
console.log(`Confirmation email sent to: ${email}`);
|
||||
alert(`Booking confirmed! Confirmation email sent to ${email}`);
|
||||
} else {
|
||||
alert("Please fill in all required fields");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="grid"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Vivimilano"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Neighborhoods", id: "/neighborhoods" },
|
||||
{ name: "Apartments", id: "/apartments" },
|
||||
{ name: "Discover Milan", id: "#attractions" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Book Now", href: "#booking"
|
||||
}}
|
||||
buttonClassName="font-semibold"
|
||||
className="z-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText={apartment.name.toUpperCase()}
|
||||
description={apartment.description}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Details", href: "#details"
|
||||
},
|
||||
{
|
||||
text: "Book Now", href: "#booking"
|
||||
},
|
||||
]}
|
||||
slides={apartment.images.map((img) => ({
|
||||
imageSrc: img,
|
||||
imageAlt: `${apartment.name} - interior view`
|
||||
}))}
|
||||
autoplayDelay={4000}
|
||||
showDimOverlay={true}
|
||||
ariaLabel={`${apartment.name} detail carousel`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="details" data-section="details">
|
||||
<MediaAbout
|
||||
title="Apartment Details & Features"
|
||||
description={apartment.fullDescription}
|
||||
tag="Property Information"
|
||||
useInvertedBackground={false}
|
||||
imageSrc={apartment.images[0]}
|
||||
imageAlt={`${apartment.name} main image`}
|
||||
buttons={[
|
||||
{
|
||||
text: "Check Availability", href: "#booking"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="amenities" data-section="amenities">
|
||||
<FeatureCardSixteen
|
||||
title="Property Amenities"
|
||||
description="Everything you need for a comfortable stay in Milan. This apartment includes premium amenities designed for modern travelers."
|
||||
tag="Included Services"
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Limited WiFi", "No climate control", "Basic furnishings", "Limited support"
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: apartment.amenities,
|
||||
}}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Reserve Now", href: "#booking"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking" data-section="booking">
|
||||
<div className="w-full max-w-6xl mx-auto px-4 py-16 md:py-24">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Booking Form */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Book Your Stay</h2>
|
||||
<p className="text-lg text-foreground/70">Select your dates and confirm your booking</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 bg-card rounded-2xl p-8 border border-foreground/10">
|
||||
{/* Date Inputs */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm font-semibold mb-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Check-in Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={checkIn}
|
||||
onChange={(e) => setCheckIn(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-foreground/20 bg-background text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm font-semibold mb-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Check-out Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={checkOut}
|
||||
onChange={(e) => setCheckOut(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-foreground/20 bg-background text-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Guest Count */}
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm font-semibold mb-2">
|
||||
<Users className="w-4 h-4" />
|
||||
Number of Guests
|
||||
</label>
|
||||
<select
|
||||
value={guests}
|
||||
onChange={(e) => setGuests(Number(e.target.value))}
|
||||
className="w-full px-4 py-3 rounded-lg border border-foreground/20 bg-background text-foreground"
|
||||
>
|
||||
{[1, 2, 3, 4, 5, 6].map((n) => (
|
||||
<option key={n} value={n}>
|
||||
{n} {n === 1 ? "Guest" : "Guests"}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Email for Confirmation */}
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm font-semibold mb-2">
|
||||
<Mail className="w-4 h-4" />
|
||||
Email for Confirmation
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="your.email@example.com"
|
||||
className="w-full px-4 py-3 rounded-lg border border-foreground/20 bg-background text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Price Breakdown */}
|
||||
{totalNights > 0 && (
|
||||
<div className="pt-4 border-t border-foreground/10 space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span>€{apartment.price} × {totalNights} nights</span>
|
||||
<span className="font-semibold">€{(apartment.price * totalNights).toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-lg font-bold pt-2 border-t border-foreground/10">
|
||||
<span>Total Price</span>
|
||||
<span className="text-primary-cta">€{totalPrice.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Booking Button */}
|
||||
<button
|
||||
onClick={handleBooking}
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-background font-bold py-4 rounded-lg transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Confirm Booking - €{totalPrice.toFixed(2)}
|
||||
</button>
|
||||
|
||||
{bookingConfirmed && (
|
||||
<div className="p-4 bg-green-100 text-green-800 rounded-lg">
|
||||
✓ Booking confirmed! Check your email for details.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary Box */}
|
||||
<div className="space-y-8">
|
||||
<div className="sticky top-32 bg-card rounded-2xl p-8 border border-foreground/10">
|
||||
<h3 className="text-2xl font-bold mb-6">Booking Summary</h3>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<MapPin className="w-5 h-5 mt-1 text-primary-cta" />
|
||||
<div>
|
||||
<p className="font-semibold">{apartment.name}</p>
|
||||
<p className="text-sm text-foreground/60">{apartment.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{checkIn && checkOut && (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Calendar className="w-4 h-4 text-primary-cta" />
|
||||
<span>{totalNights} {totalNights === 1 ? "night" : "nights"}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Users className="w-4 h-4 text-primary-cta" />
|
||||
<span>Max {apartment.guests} guests</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-foreground/10 pt-4 space-y-2">
|
||||
<div className="text-sm text-foreground/60">Property Type</div>
|
||||
<p className="font-semibold">{apartment.bedrooms} Bedroom{apartment.bedrooms > 1 ? "s" : ""} • {apartment.bathrooms} Bathroom{apartment.bathrooms > 1 ? "s" : ""}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 p-4 bg-primary-cta/10 rounded-lg border border-primary-cta/20">
|
||||
<p className="text-sm text-foreground/70">🎉 <span className="font-semibold">Special Offer:</span> Free WiFi included + 24/7 support</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Staying at this apartment was an incredible experience. The apartment is beautifully designed, the location is perfect, and the support team is always responsive. Highly recommended for anyone visiting Milan!"
|
||||
rating={5}
|
||||
author="Marco Bianchi, Guest"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-white-clothes-smiling_23-2148056219.jpg", alt: "Guest 1"
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-looking-away_23-2147955371.jpg", alt: "Guest 2"
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/joyful-pretty-woman-looks-front-isolated-olive-green-wall_141793-66135.jpg", alt: "Guest 3"
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1666.jpg", alt: "Guest 4"
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="similar" data-section="similar">
|
||||
<ProductCardFour
|
||||
title="Similar Apartments You Might Like"
|
||||
description="Explore other premium apartments in different neighborhoods of Milan with similar amenities and exceptional locations."
|
||||
tag="Recommendations"
|
||||
products={[
|
||||
{
|
||||
id: "2", name: "Suite Brera Design", price: "€180/notte", variant: "4 guests • Elegant • Historic Center", imageSrc: "http://img.b2bpic.net/free-photo/sitting-room-with-old-furniture_116348-77.jpg?_wi=1", imageAlt: "Suite Brera Design"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Navigli Canal Apartment", price: "€150/notte", variant: "3 guests • Canal View • Vibrant", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3277.jpg?_wi=1", imageAlt: "Navigli Canal Apartment"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Isola Urban Flat", price: "€110/notte", variant: "2 guests • Modern • Near Metro", imageSrc: "http://img.b2bpic.net/free-photo/modern-tokyo-street-background_23-2149394880.jpg?_wi=1", imageAlt: "Isola Urban Flat"
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Apartments", href: "/apartments"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactSplit
|
||||
tag="Ready to Book?"
|
||||
title="Start Your Milan Adventure"
|
||||
description="Complete your booking or contact our team for more information about this apartment. We're here to help 24/7."
|
||||
background={{
|
||||
variant: "sparkles-gradient"
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/flat-app-flyer-template_23-2148058342.jpg?_wi=1"
|
||||
imageAlt="Milan adventure background"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Get in Touch"
|
||||
termsText="We respect your privacy. You can unsubscribe at any time."
|
||||
onSubmit={(email) => console.log("Contact form submission:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Vivimilano BnB"
|
||||
copyrightText="© 2025 Vivimilano BnB | All rights reserved"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "Neighborhoods", href: "/neighborhoods"
|
||||
},
|
||||
{
|
||||
label: "Apartments", href: "/apartments"
|
||||
},
|
||||
{
|
||||
label: "Discover Milan", href: "#attractions"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "Email: info@vivimilano.com", href: "mailto:info@vivimilano.com"
|
||||
},
|
||||
{
|
||||
label: "Phone: +39 02 1234 5678", href: "tel:+390212345678"
|
||||
},
|
||||
{
|
||||
label: "WhatsApp: +39 324 567 8901", href: "https://wa.me/393245678901"
|
||||
},
|
||||
{
|
||||
label: "Contact Us", href: "#cta"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms & Conditions", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy", href: "#"
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -3,37 +3,17 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Home, MapPin, Users, Wifi, Shield, Sparkles, ChefHat, Armchair, Wind, Lightbulb } from 'lucide-react';
|
||||
|
||||
export default function ApartmentsPage() {
|
||||
const apartments = [
|
||||
{
|
||||
id: "1", name: "Loft Porta Romana", price: "€120/notte", variant: "2 ospiti • Moderno • Balcone", imageSrc: "http://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg?_wi=1", imageAlt: "Loft Porta Romana con balcone panoramico"},
|
||||
{
|
||||
id: "2", name: "Suite Brera Design", price: "€180/notte", variant: "4 ospiti • Elegante • Centro Storico", imageSrc: "http://img.b2bpic.net/free-photo/sitting-room-with-old-furniture_116348-77.jpg?_wi=1", imageAlt: "Suite Brera Design nel centro storico"},
|
||||
{
|
||||
id: "3", name: "Navigli Canal Apartment", price: "€150/notte", variant: "3 ospiti • Vista Canale • Luminoso", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3277.jpg?_wi=1", imageAlt: "Navigli Canal Apartment con vista sul canale"},
|
||||
{
|
||||
id: "4", name: "Isola Urban Flat", price: "€110/notte", variant: "2 ospiti • Moderno • Vicino Metro", imageSrc: "http://img.b2bpic.net/free-photo/modern-tokyo-street-background_23-2149394880.jpg?_wi=1", imageAlt: "Isola Urban Flat vicino alla metropolitana"},
|
||||
{
|
||||
id: "5", name: "Porta Venezia Penthouse", price: "€200/notte", variant: "6 ospiti • Lusso • Terrazza Esclusiva", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-composition-flowers-interior-room_169016-5468.jpg?_wi=1", imageAlt: "Porta Venezia Penthouse con terrazza panoramica"},
|
||||
{
|
||||
id: "6", name: "Navigli Vintage Studio", price: "€95/notte", variant: "1 ospite • Romantico • Vicino ai Canali", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-listening-music-with-headphones-city-street_171337-16984.jpg?_wi=1", imageAlt: "Navigli Vintage Studio con vista sul canale"},
|
||||
{
|
||||
id: "7", name: "Brera Artist Loft", price: "€165/notte", variant: "3 ospiti • Artistico • Gallerie Locali", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-patterned-gray-concrete-building-ceiling_181624-2292.jpg?_wi=1", imageAlt: "Brera Artist Loft nel quartiere artistico"},
|
||||
{
|
||||
id: "8", name: "Isola Tech Residence", price: "€140/notte", variant: "4 ospiti • Smart Working • Postazioni Dedicate", imageSrc: "http://img.b2bpic.net/free-photo/shinjuku-gyoen-national-garden_181624-27412.jpg?_wi=1", imageAlt: "Isola Tech Residence con spazi di lavoro moderni"},
|
||||
{
|
||||
id: "9", name: "Porta Romana Deluxe", price: "€175/notte", variant: "5 ospiti • Premium • Concierge 24/7", imageSrc: "http://img.b2bpic.net/free-photo/wooden-benches-modern-sauna-geometric-style_169016-70250.jpg?_wi=1", imageAlt: "Porta Romana Deluxe con servizi concierge"},
|
||||
{
|
||||
id: "10", name: "Garibaldi Design Suite", price: "€155/notte", variant: "3 ospiti • Contemporaneo • Porta Garibaldi", imageSrc: "http://img.b2bpic.net/free-photo/gothic-window-stained-glass-wooden-doors_169016-68675.jpg?_wi=1", imageAlt: "Garibaldi Design Suite nei pressi di Porta Garibaldi"},
|
||||
{
|
||||
id: "11", name: "Navigli Duplex", price: "€190/notte", variant: "5 ospiti • Spazioso • Su Due Piani", imageSrc: "http://img.b2bpic.net/free-photo/old-arch-bridge-grass-field-with-trees-building_181624-28637.jpg?_wi=1", imageAlt: "Navigli Duplex con spazi generosi su due livelli"},
|
||||
{
|
||||
id: "12", name: "Centro Storico Classic", price: "€135/notte", variant: "2 ospiti • Tradizionale • Duomo Vicino", imageSrc: "http://img.b2bpic.net/free-photo/joyful-pretty-woman-looks-front-isolated-olive-green-wall_141793-66135.jpg?_wi=1", imageAlt: "Centro Storico Classic vicino al Duomo di Milano"},
|
||||
];
|
||||
|
||||
export default function ApartmentDetailPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -58,7 +38,8 @@ export default function ApartmentsPage() {
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Book Now", href: "#search"}}
|
||||
text: "Book Now", href: "#search"
|
||||
}}
|
||||
buttonClassName="font-semibold"
|
||||
className="z-50"
|
||||
/>
|
||||
@@ -66,86 +47,239 @@ export default function ApartmentsPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="I NOSTRI APPARTAMENTI"
|
||||
description="Una collezione curata di eleganti appartamenti nei quartieri più autentici di Milano. Scopri la tua nuova dimora temporanea con stile e comfort."
|
||||
logoText="Loft Porta Romana"
|
||||
description="Discover this elegant loft in the heart of Porta Romana, blending modern design with authentic Milano charm. Perfect for your Milanese experience."
|
||||
buttons={[
|
||||
{
|
||||
text: "Filtra Appartamenti", href: "#apartments"},
|
||||
text: "Book This Apartment", href: "#booking"
|
||||
},
|
||||
{
|
||||
text: "Torna a Home", href: "/"},
|
||||
text: "Back to Apartments", href: "/apartments"
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bottom-arch-gothic-quarter-barcelona-bishops-bridge_1217-1736.jpg?_wi=1", imageAlt: "Milan Duomo Cathedral at sunrise"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-living-room-furniture_1418-155.jpg?_wi=2", imageAlt: "Loft Porta Romana main living area"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/narrow-canal-middle-buildings-venice-italy_181624-11048.jpg?_wi=1", imageAlt: "Navigli Canal with evening lights"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-composition-flowers-interior-room_169016-5468.jpg?_wi=1", imageAlt: "Bedroom with natural light"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-honeymoon-milan_1303-5674.jpg?_wi=1", imageAlt: "Brera artistic quarter romantic street"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-apartment-kitchen_1418-259.jpg?_wi=2", imageAlt: "Modern equipped kitchen"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-playing-with-shopping-bags_23-2147645128.jpg?_wi=1", imageAlt: "Porta Romana elegant neighborhood"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-bathroom-interior_1418-456.jpg?_wi=1", imageAlt: "Elegantly designed bathroom"
|
||||
},
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
showDimOverlay={true}
|
||||
ariaLabel="Apartments listing hero carousel section"
|
||||
showDimOverlay={false}
|
||||
ariaLabel="Apartment image gallery carousel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="apartments" data-section="apartments">
|
||||
<ProductCardFour
|
||||
title="Tutti gli Appartamenti Disponibili"
|
||||
description="Sfoglia la nostra collezione completa di proprietà premium. Ogni appartamento è stato selezionato per garantire comfort, stile e la vera esperienza milanese. Filtra per quartiere, prezzo e numero di ospiti per trovare la tua scelta perfetta."
|
||||
tag="Alloggi Premium"
|
||||
products={apartments}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
<div id="apartment-details" data-section="apartment-details">
|
||||
<MediaAbout
|
||||
title="About This Apartment"
|
||||
description="This stunning 2-bedroom loft is located in the heart of Porta Romana, one of Milano's most elegant and authentic neighborhoods. Recently renovated with premium furnishings, it offers the perfect blend of modern comfort and classic Milanese style. The apartment features high ceilings, abundant natural light, and a private balcony overlooking the charming streets below. Ideal for couples or small families looking for an authentic Milanese experience with all contemporary amenities."
|
||||
tag="2 Bedrooms • 75 sqm • Balcony"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cozy-apartment-balcony-view_1418-789.jpg?_wi=1"
|
||||
imageAlt="Loft balcony with neighborhood view"
|
||||
buttons={[
|
||||
{
|
||||
text: "Check Availability", href: "#booking"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="amenities" data-section="amenities">
|
||||
<FeatureCardSixteen
|
||||
title="Premium Amenities & Services"
|
||||
description="Everything you need for a comfortable and memorable stay in Milano, thoughtfully curated for your convenience and enjoyment."
|
||||
tag="What's Included"
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No WiFi or connectivity", "Shared facilities only", "Limited access hours", "No climate control"
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"🏠 High-speed WiFi (1Gbps) - perfect for remote work", "🛏️ Premium bedding and linens", "🍽️ Fully equipped modern kitchen with appliances", "❄️ Air conditioning and heating control", "📺 Smart TV with streaming services", "🧹 Housekeeping available upon request", "🔑 Keyless smart lock entry", "📱 24/7 emergency support via WhatsApp"
|
||||
],
|
||||
}}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<MetricCardSeven
|
||||
title="Apartment Features & Highlights"
|
||||
description="Discover what makes this apartment the perfect choice for your Milano stay with comprehensive details about each amenity."
|
||||
tag="Complete Details"
|
||||
metrics={[
|
||||
{
|
||||
text: "Contattaci per Prenotazioni", href: "#contact"},
|
||||
id: "1", value: "Modern", title: "Design & Furnishings", items: [
|
||||
"Contemporary Italian design", "Premium furniture pieces", "Marble and wooden finishes", "Minimalist aesthetic"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", value: "Tech", title: "Technology & Connectivity", items: [
|
||||
"1Gbps fiber internet", "Smart TV with streaming", "USB charging throughout", "Smart home controls"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", value: "Comfort", title: "Climate & Environment", items: [
|
||||
"Zone climate control", "Blackout curtains", "Sound insulation", "Air purification system"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4", value: "Kitchen", title: "Culinary Experience", items: [
|
||||
"Stove and oven", "Refrigerator and freezer", "Dishwasher included", "Full cookware collection"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5", value: "Service", title: "Guest Support", items: [
|
||||
"Check-in assistance", "Local recommendations", "Emergency contacts", "Maintenance support"
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="neighborhood" data-section="neighborhood">
|
||||
<BlogCardTwo
|
||||
title="Explore Porta Romana"
|
||||
description="Your apartment is perfectly positioned in one of Milano's most authentic and vibrant neighborhoods. Walk to renowned restaurants, galleries, and landmarks."
|
||||
tag="Neighborhood Guide"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Dining", title: "Trattoria & Wine Bars", excerpt: "Discover authentic Milanese cuisine within walking distance. From traditional trattorias to modern wine bars, Porta Romana offers exceptional culinary experiences that showcase local flavors and traditions.", imageSrc: "http://img.b2bpic.net/free-photo/restaurant-interior-design_1418-512.jpg?_wi=1", imageAlt: "Traditional Milanese restaurant", authorName: "Porta Romana Guide", authorAvatar: "http://img.b2bpic.net/free-photo/smiley-man-with-coffee-cup-front-view_23-2149915931.jpg", date: "Always Open"
|
||||
},
|
||||
{
|
||||
id: "2", category: "Art & Culture", title: "Art Galleries & Museums", excerpt: "Porta Romana is home to contemporary art galleries and cultural venues. Explore independent galleries showcasing emerging artists and small museums dedicated to Milanese history and culture.", imageSrc: "http://img.b2bpic.net/free-photo/art-gallery-exhibition_1418-643.jpg?_wi=1", imageAlt: "Contemporary art gallery", authorName: "Porta Romana Guide", authorAvatar: "http://img.b2bpic.net/free-photo/smiley-man-with-coffee-cup-front-view_23-2149915931.jpg", date: "Always Open"
|
||||
},
|
||||
{
|
||||
id: "3", category: "Shopping", title: "Boutique Shops & Markets", excerpt: "Browse independent boutiques featuring local designers, vintage shops, and artisan markets. Porta Romana's shopping scene reflects authentic Milanese style and craftsmanship.", imageSrc: "http://img.b2bpic.net/free-photo/shopping-street-storefront_1418-789.jpg?_wi=1", imageAlt: "Charming boutique storefront", authorName: "Porta Romana Guide", authorAvatar: "http://img.b2bpic.net/free-photo/smiley-man-with-coffee-cup-front-view_23-2149915931.jpg", date: "Always Open"
|
||||
},
|
||||
{
|
||||
id: "4", category: "Relaxation", title: "Cafés & Aperitivo Spots", excerpt: "Perfect your Italian aperitivo ritual at neighborhood cafés and cocktail bars. Enjoy traditional drinks and snacks while soaking in the authentic Milanese atmosphere and local culture.", imageSrc: "http://img.b2bpic.net/free-photo/cafe-outdoor-seating_1418-456.jpg?_wi=1", imageAlt: "Outdoor café seating area", authorName: "Porta Romana Guide", authorAvatar: "http://img.b2bpic.net/free-photo/smiley-man-with-coffee-cup-front-view_23-2149915931.jpg", date: "Always Open"
|
||||
},
|
||||
{
|
||||
id: "5", category: "Activities", title: "Parks & Recreation", excerpt: "Explore nearby green spaces perfect for morning walks or evening relaxation. Porta Romana offers easy access to parks where you can experience Milano's slower pace away from the city center.", imageSrc: "http://img.b2bpic.net/free-photo/park-trees-green-space_1418-567.jpg?_wi=1", imageAlt: "Neighborhood park with trees", authorName: "Porta Romana Guide", authorAvatar: "http://img.b2bpic.net/free-photo/smiley-man-with-coffee-cup-front-view_23-2149915931.jpg", date: "Always Open"
|
||||
},
|
||||
{
|
||||
id: "6", category: "Transport", title: "Getting Around", excerpt: "Excellent public transport connections including metro, tram, and bus lines. The apartment's central location makes it easy to explore all of Milano while maintaining the authentic neighborhood feel.", imageSrc: "http://img.b2bpic.net/free-photo/public-transport-station_1418-678.jpg?_wi=1", imageAlt: "Metro station entrance", authorName: "Porta Romana Guide", authorAvatar: "http://img.b2bpic.net/free-photo/smiley-man-with-coffee-cup-front-view_23-2149915931.jpg", date: "Always Open"
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Staying in this loft was like living as a true Milanese. The attention to detail, premium amenities, and perfect location in Porta Romana made our visit unforgettable. We felt completely at home with all the modern comforts we needed. Highly recommend!"
|
||||
rating={5}
|
||||
author="Marco & Elena, Milan"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-white-clothes-smiling_23-2148056219.jpg", alt: "Guest avatar 1"
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-looking-away_23-2147955371.jpg", alt: "Guest avatar 2"
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/joyful-pretty-woman-looks-front-isolated-olive-green-wall_141793-66135.jpg", alt: "Guest avatar 3"
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1666.jpg", alt: "Guest avatar 4"
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking" data-section="booking">
|
||||
<ContactSplit
|
||||
tag="Ready to Stay?"
|
||||
title="Complete Your Booking"
|
||||
description="Reserve your stay in this beautiful Porta Romana loft. Check availability for your preferred dates and secure your authentic Milanese experience with Vivimilano BnB."
|
||||
background={{
|
||||
variant: "sparkles-gradient"
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/booking-calendar-plan_1418-890.jpg?_wi=1"
|
||||
imageAlt="Booking confirmation"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Book Now"
|
||||
termsText="By booking, you agree to our cancellation policy and house rules. A confirmation will be sent to your email."
|
||||
onSubmit={(email) => console.log("Booking inquiry:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Vivimilano BnB"
|
||||
copyrightText="© 2025 Vivimilano BnB | Tutti i diritti riservati"
|
||||
copyrightText="© 2025 Vivimilano BnB | All rights reserved"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigazione", items: [
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home", href: "/"},
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "I Nostri Quartieri", href: "/neighborhoods"},
|
||||
label: "Our Neighborhoods", href: "/neighborhoods"
|
||||
},
|
||||
{
|
||||
label: "Appartamenti", href: "/apartments"},
|
||||
label: "Apartments", href: "/apartments"
|
||||
},
|
||||
{
|
||||
label: "Scopri Milano", href: "#attractions"},
|
||||
label: "Discover Milan", href: "#attractions"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contatti", items: [
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Email: info@vivimilano.com", href: "mailto:info@vivimilano.com"},
|
||||
label: "Email: info@vivimilano.com", href: "mailto:info@vivimilano.com"
|
||||
},
|
||||
{
|
||||
label: "Telefono: +39 02 1234 5678", href: "tel:+390212345678"},
|
||||
label: "Phone: +39 02 1234 5678", href: "tel:+390212345678"
|
||||
},
|
||||
{
|
||||
label: "WhatsApp: +39 324 567 8901", href: "https://wa.me/393245678901"},
|
||||
label: "WhatsApp: +39 324 567 8901", href: "https://wa.me/393245678901"
|
||||
},
|
||||
{
|
||||
label: "Contattaci", href: "#contact"},
|
||||
label: "Contact Us", href: "#contact"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legale", items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Termini e Condizioni", href: "#"},
|
||||
label: "Terms & Conditions", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy", href: "#"},
|
||||
label: "Cookie Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Disclaimer", href: "#"},
|
||||
label: "Disclaimer", href: "#"
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user