diff --git a/src/app/apartment-detail/page.tsx b/src/app/apartment-detail/page.tsx new file mode 100644 index 0000000..b77c391 --- /dev/null +++ b/src/app/apartment-detail/page.tsx @@ -0,0 +1,312 @@ +"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 ( + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+

Check-In Day

+

Select your arrival date. Self check-in available 24/7 with automated door code access.

+
+
+

Duration Options

+

Minimum 3 nights. Longer stays receive special discount rates. Flexible booking terms available.

+
+
+

Price Calculation

+

€120 per night. Final price includes taxes and WiFi. No hidden fees or surprise charges.

+
+
+

Confirmation

+

Instant booking confirmation via email. Receive access codes and host information immediately.

+
+ +
+ +
+
  • Fully equipped modern kitchen with stove, oven, dishwasher, and refrigerator
  • Luxury linens and towels changed daily
  • Premium toiletries and bath products
  • Air conditioning and heating
  • Washing machine with complimentary detergent
  • Smart TV with streaming services
  • Coffee machine and tea selection
    • " + }, + { + 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" + /> +
    + +
    + console.log("Booking inquiry:", email)} + /> +
    + + +     + ); +} \ No newline at end of file diff --git a/src/app/apartment/[id]/page.tsx b/src/app/apartment/[id]/page.tsx new file mode 100644 index 0000000..67a7758 --- /dev/null +++ b/src/app/apartment/[id]/page.tsx @@ -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 ( + + +
    +

    Apartment not found

    +
    +     + ); + } + + 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 ( + + + +
    + ({ + imageSrc: img, + imageAlt: `${apartment.name} - interior view` + }))} + autoplayDelay={4000} + showDimOverlay={true} + ariaLabel={`${apartment.name} detail carousel`} + /> +
    + +
    + +
    + +
    + +
    + +
    +
    +
    + {/* Booking Form */} +
    +
    +

    Book Your Stay

    +

    Select your dates and confirm your booking

    +
    + +
    + {/* Date Inputs */} +
    +
    + + setCheckIn(e.target.value)} + className="w-full px-4 py-3 rounded-lg border border-foreground/20 bg-background text-foreground" + /> +
    +
    + + setCheckOut(e.target.value)} + className="w-full px-4 py-3 rounded-lg border border-foreground/20 bg-background text-foreground" + /> +
    +
    + + {/* Guest Count */} +
    + + +
    + + {/* Email for Confirmation */} +
    + + 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" + /> +
    + + {/* Price Breakdown */} + {totalNights > 0 && ( +
    +
    + €{apartment.price} × {totalNights} nights + €{(apartment.price * totalNights).toFixed(2)} +
    +
    + Total Price + €{totalPrice.toFixed(2)} +
    +
    + )} + + {/* Booking Button */} + + + {bookingConfirmed && ( +
    + ✓ Booking confirmed! Check your email for details. +
    + )} +
    +
    + + {/* Summary Box */} +
    +
    +

    Booking Summary

    + +
    +
    + +
    +

    {apartment.name}

    +

    {apartment.location}

    +
    +
    + + {checkIn && checkOut && ( +
    + + {totalNights} {totalNights === 1 ? "night" : "nights"} +
    + )} + +
    + + Max {apartment.guests} guests +
    +
    + +
    +
    Property Type
    +

    {apartment.bedrooms} Bedroom{apartment.bedrooms > 1 ? "s" : ""} • {apartment.bathrooms} Bathroom{apartment.bathrooms > 1 ? "s" : ""}

    +
    + +
    +

    🎉 Special Offer: Free WiFi included + 24/7 support

    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    + +
    + +
    + console.log("Contact form submission:", email)} + /> +
    + + +     + ); +} \ No newline at end of file diff --git a/src/app/apartments/page.tsx b/src/app/apartments/page.tsx index c26cdf8..e27e11f 100644 --- a/src/app/apartments/page.tsx +++ b/src/app/apartments/page.tsx @@ -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 ( @@ -66,86 +47,239 @@ export default function ApartmentsPage() {
    -
    - + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + console.log("Booking inquiry:", email)} />