[V0_FILE]jpg:file="public/images/pavilion-function-room.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/api-attachments/qCib9iPLAg3q8bvD1xCvh-9tMHRlsFLCCc893XJtuBXHAIwNK0I1.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/pavilion-wedding.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/api-attachments/glNzy5pLOBOMNFUz6Hw7x-HYerkpYNvFSdSHE3OfdIbBJwpPewao.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/pavilion-corporate.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/api-attachments/BLHXdCBOAzptyxUEuG7vi-8hQJAImAuYvuldthtg9jvTZu3fI3Gw.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@vercel/analytics": "1.6.1", "@radix-ui/react-accordion": "1.2.12", "@radix-ui/react-alert-dialog": "1.1.15", "@radix-ui/react-aspect-ratio": "1.1.8", "@radix-ui/react-avatar": "1.1.11", "@radix-ui/react-checkbox": "1.3.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-context-menu": "2.2.16", "@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-dropdown-menu": "2.1.16", "@radix-ui/react-hover-card": "1.1.15", "@radix-ui/react-label": "2.1.8", "@radix-ui/react-menubar": "1.1.16", "@radix-ui/react-navigation-menu": "1.2.14", "@radix-ui/react-popover": "1.1.15", "@radix-ui/react-progress": "1.1.8", "@radix-ui/react-radio-group": "1.3.8", "@radix-ui/react-scroll-area": "1.2.10", "@radix-ui/react-select": "2.2.6", "@radix-ui/react-separator": "1.1.8", "@radix-ui/react-slider": "1.3.6", "@radix-ui/react-slot": "1.2.4", "@radix-ui/react-switch": "1.2.6", "@radix-ui/react-tabs": "1.1.13", "@radix-ui/react-toast": "1.2.15", "@radix-ui/react-toggle": "1.1.10", "@radix-ui/react-toggle-group": "1.1.11", "@radix-ui/react-tooltip": "1.2.8", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.1.1", "date-fns": "4.1.0", "embla-carousel-react": "8.6.0", "input-otp": "1.4.2", "lucide-react": "^0.564.0", "next": "16.1.6", "next-themes": "^0.4.6", "react": "19.2.4", "react-day-picker": "9.13.2", "react-dom": "19.2.4", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^3.3.1", "vaul": "^1.1.2", "zod": "^3.24.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@tailwindcss/postcss": "^4.2.0", "@types/node": "^22", "@types/react": "19.2.14", "@types/react-dom": "19.2.3", "postcss": "^8.5", "tailwindcss": "^4.2.0", "tw-animate-css": "1.3.3", "typescript": "5.7.3" } } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { /* Elegant luxury palette: warm ivory, deep charcoal, champagne gold */ --background: #FDFBF7; --foreground: #1C1917; --card: #FFFFFF; --card-foreground: #1C1917; --popover: #FFFFFF; --popover-foreground: #1C1917; --primary: #1C1917; --primary-foreground: #FDFBF7; --secondary: #F5F0E8; --secondary-foreground: #1C1917; --muted: #F5F0E8; --muted-foreground: #78716C; --accent: #B8975A; --accent-foreground: #FFFFFF; --destructive: #DC2626; --destructive-foreground: #FFFFFF; --border: #E7E0D5; --input: #E7E0D5; --ring: #B8975A; --chart-1: #B8975A; --chart-2: #78716C; --chart-3: #1C1917; --chart-4: #D4C5A9; --chart-5: #A3A3A3; --radius: 0.25rem; } @theme inline { --font-sans: 'Inter', 'Inter Fallback', sans-serif; --font-serif: 'Playfair Display', 'Georgia', serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 2px); --radius-md: var(--radius); --radius-lg: calc(var(--radius) + 2px); --radius-xl: calc(var(--radius) + 6px); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Leaflet map styles */ .leaflet-container { height: 100%; width: 100%; z-index: 0; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--background); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata, Viewport } from 'next' import { Inter, Playfair_Display } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _inter = Inter({ subsets: ['latin'], display: 'swap' }) const _playfair = Playfair_Display({ subsets: ['latin'], display: 'swap' }) export const metadata: Metadata = { title: 'Adelaide Pavilion | Premier Event Venue', description: 'Adelaide Pavilion is a luxurious event venue nestled in the southern Adelaide parklands, specialising in weddings, corporate events and social functions.', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export const viewport: Viewport = { themeColor: '#1C1917', width: 'device-width', initialScale: 1, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import { MapPin, Phone, Mail, Clock } from "lucide-react" export function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]typescriptreact:file="components/sections/about.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" export function AboutSection() { const ref = useRef(null) const [visible, setVisible] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true) }, { threshold: 0.2 } ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) return (

{/* Text */}

Our Story

A Legacy of Unforgettable Moments

The Adelaide Pavilion stands as one of South Australia's most iconic event venues, offering a unique blend of contemporary elegance and natural beauty. Surrounded by the lush Veale Gardens in Adelaide's southern parklands, our venue provides an extraordinary backdrop for life's most memorable occasions.

With floor-to-ceiling panoramic windows framing views of century-old trees and manicured gardens, every event at the Pavilion is bathed in natural light and an atmosphere of refined sophistication. Our dedicated team ensures every detail is perfected, from sumptuous cuisine to seamless service.

25+

Years of Excellence

500+

Events Per Year

800

Guest Capacity

{/* Image */}

Newlywed couple walking hand in hand through the Adelaide Pavilion gardens

Established

1998

) } [V0_FILE]typescriptreact:file="components/sections/rooms.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Users, Maximize, Wifi, Music, Monitor, UtensilsCrossed } from "lucide-react" const rooms = [ { name: "The Grand Pavilion", description: "Our flagship space featuring soaring ceilings, floor-to-ceiling windows and a dedicated stage area. Perfect for large-scale celebrations and corporate galas.", capacity: "Up to 500 guests", size: "600 m\u00B2", image: "/images/pavilion-function-room.jpg", features: ["Built-in stage", "Dance floor", "Panoramic views", "Full AV system"], }, { name: "The Garden Room", description: "An intimate space with direct garden access, ideal for smaller gatherings, cocktail parties and private dinners surrounded by parkland views.", capacity: "Up to 150 guests", size: "200 m\u00B2", image: "/images/pavilion-corporate.jpg", features: ["Garden access", "Natural light", "Private bar", "Flexible layout"], }, { name: "The Terrace", description: "An outdoor covered area that extends seamlessly from the main pavilion, offering al fresco dining under the canopy of mature trees.", capacity: "Up to 200 guests", size: "300 m\u00B2", image: "/images/pavilion-wedding.jpg", features: ["Covered outdoor", "Garden views", "BBQ facilities", "Fairy lights"], }, ] const amenityIcons = [ { icon: Wifi, label: "High-Speed WiFi" }, { icon: Music, label: "Sound System" }, { icon: Monitor, label: "AV Equipment" }, { icon: UtensilsCrossed, label: "In-House Catering" }, ] export function RoomsSection() { const ref = useRef(null) const [visible, setVisible] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true) }, { threshold: 0.1 } ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) return (

{/* Header */}

Our Spaces

Function Rooms

Choose from our versatile collection of function spaces, each designed to create the perfect atmosphere for your event.

{/* Rooms */}

{rooms.map((room, i) => (

{room.name}

{room.description}

{room.capacity}

{room.size}

{room.features.map((feature) => ( {feature} ))}

))}

{/* Amenities bar */}

{amenityIcons.map(({ icon: Icon, label }) => (

{label}

))}

) } [V0_FILE]typescriptreact:file="components/sections/weddings.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Heart, Camera, UtensilsCrossed, Music, Flower2, Car } from "lucide-react" const services = [ { icon: UtensilsCrossed, title: "Bespoke Catering", description: "Custom menus crafted by our executive chef, featuring the finest South Australian produce." }, { icon: Music, title: "Entertainment", description: "From live bands to DJs, we coordinate all entertainment for your perfect celebration." }, { icon: Camera, title: "Photography", description: "Endless stunning backdrops amongst the parkland gardens and our elegant interiors." }, { icon: Flower2, title: "Floral Design", description: "Work with our preferred florists to bring your floral vision to life." }, { icon: Heart, title: "Ceremony Setup", description: "Indoor and outdoor ceremony options with the parklands as your backdrop." }, { icon: Car, title: "Guest Parking", description: "Complimentary on-site parking for up to 80 vehicles, with easy CBD access." }, ] export function WeddingsSection() { const ref = useRef(null) const [visible, setVisible] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true) }, { threshold: 0.15 } ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) return (

{/* Image */}

Newlywed couple at Adelaide Pavilion surrounded by lush gardens

{/* Content */}

Weddings

Your Dream Wedding Awaits

Exchange vows in the tranquil beauty of Adelaide's parklands, then celebrate with your loved ones in our magnificent pavilion. From intimate ceremonies to grand receptions, we create weddings that are as unique as your love story.

Our experienced wedding coordinators work closely with every couple to ensure each detail reflects their personal style, creating memories that last a lifetime.

{/* Services grid */}

{services.map(({ icon: Icon, title, description }) => (

{title}

{description}

))}

Plan Your Wedding

) } [V0_FILE]typescriptreact:file="components/sections/corporate.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Monitor, Users, Coffee, Briefcase, Presentation, Headphones } from "lucide-react" const eventTypes = [ { icon: Presentation, title: "Conferences & Seminars", description: "Theatre-style seating for up to 500, with full AV and staging." }, { icon: Briefcase, title: "Product Launches", description: "Stunning spaces to showcase your brand with maximum impact." }, { icon: Users, title: "Team Building", description: "Flexible spaces for workshops, training and team activities." }, { icon: Coffee, title: "Networking Events", description: "Cocktail settings with flowing canapés and premium beverages." }, { icon: Monitor, title: "Gala Dinners", description: "Elegant sit-down dining for up to 400 guests." }, { icon: Headphones, title: "Award Ceremonies", description: "Full stage, lighting and sound for prestigious celebrations." }, ] export function CorporateSection() { const ref = useRef(null) const [visible, setVisible] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true) }, { threshold: 0.15 } ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) return (

{/* Content */}

Corporate

Elevate Your Corporate Events

Open space, natural light and attentive service make the Adelaide Pavilion the perfect venue for your next corporate event. We partner with organisers to ensure a successful and productive occasion, with state-of-the-art facilities and impeccable hospitality.

{eventTypes.map(({ icon: Icon, title, description }) => (

{title}

{description}

))}

Plan Your Event

{/* Image */}

Adelaide Pavilion corporate theatre-style seating arrangement with panoramic windows

) } [V0_FILE]typescriptreact:file="components/sections/social.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { PartyPopper, GraduationCap, Cake, Gift, Trophy, Sparkles } from "lucide-react" const socialEvents = [ { icon: Cake, title: "Milestone Birthdays", description: "Celebrate life's special milestones in style with custom-themed parties." }, { icon: GraduationCap, title: "Graduations", description: "Mark academic achievements with a celebration worthy of the accomplishment." }, { icon: PartyPopper, title: "Engagement Parties", description: "Toast to new beginnings in our elegant parkland setting." }, { icon: Gift, title: "Anniversary Celebrations", description: "Honour years of love and commitment with an unforgettable evening." }, { icon: Trophy, title: "Sports Club Events", description: "Season launches, presentations and end-of-year celebrations." }, { icon: Sparkles, title: "Christmas Parties", description: "Festive celebrations with custom packages and seasonal menus." }, ] export function SocialSection() { const ref = useRef(null) const [visible, setVisible] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true) }, { threshold: 0.15 } ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) return ( ) } [V0_FILE]typescriptreact:file="components/sections/offers.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { ArrowRight, Calendar, Star } from "lucide-react" const offers = [ { tag: "Wedding", title: "Midweek Wedding Package", description: "Book your dream wedding on a Monday to Thursday and enjoy a premium package at a special rate. Includes ceremony setup, three-course dinner, beverage package and a dedicated wedding coordinator.", price: "From $150 per person", validity: "Valid until December 2026", featured: true, }, { tag: "Corporate", title: "Full-Day Conference Package", description: "Everything you need for a productive day. Includes room hire, morning tea, working lunch, afternoon tea, full AV setup and complimentary WiFi.", price: "From $89 per person", validity: "Available year-round", featured: false, }, { tag: "Social", title: "Christmas Party Packages", description: "Celebrate the festive season at the Pavilion. Choose from cocktail or sit-down options with seasonal menus, beverage packages and festive styling included.", price: "From $95 per person", validity: "November - December 2026", featured: false, }, { tag: "Wedding", title: "Summer Garden Ceremony", description: "Take advantage of Adelaide's beautiful summer weather with an outdoor ceremony in the Veale Gardens, followed by a reception in our Grand Pavilion. Includes floral arch and garden seating.", price: "From $180 per person", validity: "December 2026 - February 2027", featured: false, }, ] export function OffersSection() { const ref = useRef(null) const [visible, setVisible] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true) }, { threshold: 0.1 } ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) return (

{/* Header */}

Limited Time

Special Offers

Take advantage of our exclusive packages and seasonal offers to make your next event even more memorable.

{/* Offers grid */}

{offers.map((offer, i) => (

{offer.featured && (

Featured

)} {offer.tag}

{offer.title}

{offer.description}

{offer.price}

{offer.validity}

Enquire Now

))}

) } [V0_FILE]typescriptreact:file="components/sections/gallery.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { X, ChevronLeft, ChevronRight } from "lucide-react" const galleryImages = [ { src: "/images/pavilion-function-room.jpg", alt: "Grand function room with stage and floor-to-ceiling windows", category: "Spaces" }, { src: "/images/pavilion-wedding.jpg", alt: "Newlywed couple walking through the pavilion gardens", category: "Weddings" }, { src: "/images/pavilion-corporate.jpg", alt: "Corporate theatre seating arrangement with panoramic views", category: "Corporate" }, { src: "https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800&q=80", alt: "Elegant wedding table setting with candles and florals", category: "Weddings" }, { src: "https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=800&q=80", alt: "Outdoor garden ceremony setup with white chairs", category: "Weddings" }, { src: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&q=80", alt: "Corporate event with professional lighting", category: "Corporate" }, { src: "https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=800&q=80", alt: "Festive celebration with elegant decor", category: "Social" }, { src: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=800&q=80", alt: "Fine dining plate presentation", category: "Dining" }, { src: "https://images.unsplash.com/photo-1470229538611-16ba8c7ffbd7?w=800&q=80", alt: "Beautiful parkland gardens with mature trees", category: "Grounds" }, ] const categories = ["All", "Spaces", "Weddings", "Corporate", "Social", "Dining", "Grounds"] export function GallerySection() { const ref = useRef(null) const [visible, setVisible] = useState(false) const [filter, setFilter] = useState("All") const [lightbox, setLightbox] = useState(null) const filtered = filter === "All" ? galleryImages : galleryImages.filter((img) => img.category === filter) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true) }, { threshold: 0.1 } ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) useEffect(() => { if (lightbox !== null) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [lightbox]) const navigateLightbox = (direction: number) => { if (lightbox === null) return const newIndex = lightbox + direction if (newIndex >= 0 && newIndex < filtered.length) { setLightbox(newIndex) } } return (

{/* Header */}

Portfolio

Gallery

{/* Filters */}

{categories.map((cat) => ( ))}

{/* Grid */}

{filtered.map((img, i) => ( ))}

{/* Lightbox */} {lightbox !== null && (

setLightbox(null)} role="dialog" aria-label="Image lightbox" > {lightbox > 0 && ( )} {lightbox < filtered.length - 1 && ( )} {filtered[lightbox].alt}

e.stopPropagation()} />

)}

) } [V0_FILE]typescriptreact:file="components/sections/contact.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { MapPin, Phone, Mail, Clock, CheckCircle } from "lucide-react" export function ContactSection() { const ref = useRef(null) const [visible, setVisible] = useState(false) const [submitted, setSubmitted] = useState(false) const [formData, setFormData] = useState({ name: "", email: "", phone: "", eventType: "", eventDate: "", guests: "", message: "", }) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true) }, { threshold: 0.1 } ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setSubmitted(true) } const handleChange = ( e: React.ChangeEvent ) => { setFormData({ ...formData, [e.target.name]: e.target.value }) } return (

{/* Header */}

Get In Touch

Contact Us

We'd love to hear about your upcoming event. Reach out and our team will be in touch to discuss how we can bring your vision to life.

{/* Form */}

{submitted ? (

Thank You

Your enquiry has been received. Our events team will be in touch within 24 hours to discuss your requirements.

) : (

Full Name *

Email Address *

Phone Number

Event Type *

Preferred Date

Expected Guests

Message

</div>
                <button
                  type="submit"
                  className="bg-accent px-8 py-3.5 text-xs uppercase tracking-[0.2em] text-accent-foreground transition-all hover:bg-accent/90"
                >
                  Send Enquiry
                </button>
              </form>
            )}
          </div>

{/* Contact info + Map */}
          <div className="flex flex-col gap-8">
            {/* Contact details */}
            <div className="grid grid-cols-2 gap-6">
              <div className="flex items-start gap-3">
                <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-accent" />
                <div>
                  <h4 className="text-sm font-medium text-foreground">Location</h4>
                  <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                    Corner of South Terrace &<br />Peacock Road<br />Adelaide SA 5000
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <Phone className="mt-0.5 h-5 w-5 shrink-0 text-accent" />
                <div>
                  <h4 className="text-sm font-medium text-foreground">Phone</h4>
                  <p className="mt-1 text-xs text-muted-foreground">(08) 8223 3311</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <Mail className="mt-0.5 h-5 w-5 shrink-0 text-accent" />
                <div>
                  <h4 className="text-sm font-medium text-foreground">Email</h4>
                  <p className="mt-1 text-xs text-muted-foreground">events@adelaidepavilion.com.au</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <Clock className="mt-0.5 h-5 w-5 shrink-0 text-accent" />
                <div>
                  <h4 className="text-sm font-medium text-foreground">Office Hours</h4>
                  <p className="mt-1 text-xs text-muted-foreground">Mon-Fri: 9am - 5pm</p>
                </div>
              </div>
            </div>

{/* Map */}
            <div className="flex-1 min-h-[350px] border border-border">
              <LeafletMap />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function LeafletMap() {
  const mapRef = useRef<HTMLDivElement>(null)
  const [mapLoaded, setMapLoaded] = useState(false)

useEffect(() => {
    if (mapLoaded || !mapRef.current) return

// Load Leaflet CSS
    const link = document.createElement("link")
    link.rel = "stylesheet"
    link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    document.head.appendChild(link)

// Load Leaflet JS
    const script = document.createElement("script")
    script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    script.onload = () => {
      if (!mapRef.current) return
      // @ts-expect-error - Leaflet loaded via CDN
      const L = window.L
      // Adelaide Pavilion coordinates (Veale Gardens, South Terrace / Peacock Rd)
      const lat = -34.9385
      const lng = 138.5986
      const map = L.map(mapRef.current).setView([lat, lng], 15)
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      }).addTo(map)
      L.marker([lat, lng])
        .addTo(map)
        .bindPopup("<strong>Adelaide Pavilion</strong><br>Veale Gardens, Adelaide")
        .openPopup()
      setMapLoaded(true)
    }
    document.head.appendChild(script)

return () => {
      // Cleanup handled by component unmount
    }
  }, [mapLoaded])

return <div ref={mapRef} className="h-full min-h-[350px] w-full" />
}
[V0_FILE]typescriptreact:file="components/sections/cta-banner.tsx" isMerged="true"
"use client"

export function CtaBanner() {
  return (
    <section className="relative overflow-hidden py-24 lg:py-32">
      {/* Background */}
      <div className="absolute inset-0">
        <img
          src="/images/pavilion-function-room.jpg"
          alt=""
          className="h-full w-full object-cover"
        />
        <div className="absolute inset-0 bg-foreground/70" />
      </div>

{/* Content */}
      <div className="relative mx-auto max-w-3xl px-6 text-center lg:px-8">
        <p className="text-xs uppercase tracking-[0.3em] text-accent">
          Begin Your Journey
        </p>
        <h2 className="mt-4 font-serif text-3xl leading-tight text-primary-foreground md:text-4xl lg:text-5xl">
          <span className="text-balance">Ready to Create Something Extraordinary?</span>
        </h2>
        <p className="mx-auto mt-6 max-w-xl text-sm leading-relaxed text-primary-foreground/70">
          Let our experienced events team help you plan an occasion that exceeds every expectation. From concept to celebration, we are with you every step of the way.
        </p>
        <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <a
            href="#contact"
            className="bg-accent px-8 py-3.5 text-xs uppercase tracking-[0.2em] text-accent-foreground transition-all hover:bg-accent/90"
          >
            Enquire Now
          </a>
          <a
            href="tel:0882233311"
            className="border border-primary-foreground/30 px-8 py-3.5 text-xs uppercase tracking-[0.2em] text-primary-foreground transition-all hover:bg-primary-foreground/10"
          >
            Call (08) 8223 3311
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { HeroSection } from "@/components/sections/hero"
import { AboutSection } from "@/components/sections/about"
import { RoomsSection } from "@/components/sections/rooms"
import { WeddingsSection } from "@/components/sections/weddings"
import { CorporateSection } from "@/components/sections/corporate"
import { SocialSection } from "@/components/sections/social"
import { OffersSection } from "@/components/sections/offers"
import { GallerySection } from "@/components/sections/gallery"
import { CtaBanner } from "@/components/sections/cta-banner"
import { ContactSection } from "@/components/sections/contact"
import { Footer } from "@/components/footer"

export default function Home() {
  return (
    <main>
      <Navigation />
      <HeroSection />
      <AboutSection />
      <RoomsSection />
      <WeddingsSection />
      <CorporateSection />
      <SocialSection />
      <CtaBanner />
      <OffersSection />
      <GallerySection />
      <ContactSection />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Menu, X, ChevronDown } from "lucide-react"

const navLinks = [
  { label: "Home", href: "#home" },
  { label: "About", href: "#about" },
  { label: "Rooms", href: "#rooms" },
  {
    label: "Events",
    href: "#events",
    children: [
      { label: "Weddings", href: "#weddings" },
      { label: "Corporate", href: "#corporate" },
      { label: "Social", href: "#social" },
    ],
  },
  { label: "Special Offers", href: "#offers" },
  { label: "Gallery", href: "#gallery" },
  { label: "Contact", href: "#contact" },
]

export function Navigation() {
  const [scrolled, setScrolled] = useState(false)
  const [mobileOpen, setMobileOpen] = useState(false)
  const [eventsOpen, setEventsOpen] = useState(false)

useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50)
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

useEffect(() => {
    if (mobileOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = ""
    }
    return () => {
      document.body.style.overflow = ""
    }
  }, [mobileOpen])

const handleNavClick = (href: string) => {
    setMobileOpen(false)
    setEventsOpen(false)
    const el = document.querySelector(href)
    if (el) {
      el.scrollIntoView({ behavior: "smooth" })
    }
  }

return (
    <>
      <nav
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
          mobileOpen
            ? "bg-background shadow-sm"
            : scrolled
              ? "bg-background/95 backdrop-blur-md shadow-sm"
              : "bg-transparent"
        }`}
      >
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">
          {/* Logo */}
          <button
            onClick={() => handleNavClick("#home")}
            className="flex flex-col items-start"
          >
            <span
              className={`font-serif text-xl tracking-wider transition-colors duration-500 ${
                mobileOpen || scrolled ? "text-foreground" : "text-primary-foreground"
              }`}
            >
              Adelaide Pavilion
            </span>
            <span
              className={`text-[10px] uppercase tracking-[0.3em] transition-colors duration-500 ${
                mobileOpen || scrolled ? "text-muted-foreground" : "text-primary-foreground/70"
              }`}
            >
              Events & Functions
            </span>
          </button>

{/* Desktop nav */}
          <div className="hidden items-center gap-8 lg:flex">
            {navLinks.map((link) =>
              link.children ? (
                <div key={link.label} className="relative group">
                  <button
                    className={`flex items-center gap-1 text-xs uppercase tracking-[0.15em] transition-colors duration-300 ${
                      scrolled
                        ? "text-foreground/80 hover:text-accent"
                        : "text-primary-foreground/80 hover:text-primary-foreground"
                    }`}
                  >
                    {link.label}
                    <ChevronDown className="h-3 w-3" />
                  </button>
                  <div className="invisible absolute left-0 top-full pt-2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100">
                    <div className="flex min-w-[160px] flex-col gap-1 rounded-sm border border-border bg-card p-2 shadow-lg">
                      {link.children.map((child) => (
                        <button
                          key={child.label}
                          onClick={() => handleNavClick(child.href)}
                          className="rounded-sm px-3 py-2 text-left text-xs uppercase tracking-[0.1em] text-card-foreground transition-colors hover:bg-secondary"
                        >
                          {child.label}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              ) : (
                <button
                  key={link.label}
                  onClick={() => handleNavClick(link.href)}
                  className={`text-xs uppercase tracking-[0.15em] transition-colors duration-300 ${
                    scrolled
                      ? "text-foreground/80 hover:text-accent"
                      : "text-primary-foreground/80 hover:text-primary-foreground"
                  }`}
                >
                  {link.label}
                </button>
              )
            )}
            <button
              onClick={() => handleNavClick("#contact")}
              className="border border-accent bg-accent/10 px-5 py-2 text-xs uppercase tracking-[0.15em] text-accent transition-all hover:bg-accent hover:text-accent-foreground"
            >
              Enquire
            </button>
          </div>

{/* Mobile toggle */}
          <button
            onClick={() => setMobileOpen(!mobileOpen)}
            className={`lg:hidden transition-colors ${
              mobileOpen
                ? "text-foreground"
                : scrolled
                  ? "text-foreground"
                  : "text-primary-foreground"
            }`}
            aria-label={mobileOpen ? "Close menu" : "Open menu"}
          >
            {mobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>
      </nav>

{/* Mobile menu */}
      <div
        className={`fixed inset-0 z-40 bg-background transition-all duration-500 lg:hidden ${
          mobileOpen ? "opacity-100 visible" : "opacity-0 invisible"
        }`}
      >
        <div className="flex h-full flex-col items-center justify-start gap-6 overflow-y-auto pt-28 pb-12">
          {navLinks.map((link) =>
            link.children ? (
              <div key={link.label} className="flex flex-col items-center">
                <button
                  onClick={() => setEventsOpen(!eventsOpen)}
                  className="flex items-center gap-2 font-serif text-2xl text-foreground"
                >
                  {link.label}
                  <ChevronDown
                    className={`h-4 w-4 transition-transform ${eventsOpen ? "rotate-180" : ""}`}
                  />
                </button>
                {eventsOpen && (
                  <div className="mt-3 flex flex-col items-center gap-3">
                    {link.children.map((child) => (
                      <button
                        key={child.label}
                        onClick={() => handleNavClick(child.href)}
                        className="text-sm uppercase tracking-[0.15em] text-muted-foreground transition-colors hover:text-foreground"
                      >
                        {child.label}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            ) : (
              <button
                key={link.label}
                onClick={() => handleNavClick(link.href)}
                className="font-serif text-2xl text-foreground transition-colors hover:text-accent"
              >
                {link.label}
              </button>
            )
          )}
          <button
            onClick={() => handleNavClick("#contact")}
            className="mt-4 border border-accent px-8 py-3 text-sm uppercase tracking-[0.2em] text-accent transition-all hover:bg-accent hover:text-accent-foreground"
          >
            Enquire Now
          </button>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/sections/hero.tsx"
"use client"

import { useEffect, useState } from "react"
import { ChevronDown } from "lucide-react"

export function HeroSection() {
  const [loaded, setLoaded] = useState(false)

useEffect(() => {
    setLoaded(true)
  }, [])

return (
    <section id="home" className="relative h-screen min-h-[700px] overflow-hidden">
      {/* Background image */}
      <div className="absolute inset-0">
        <img
          src="/images/pavilion-function-room.jpg"
          alt="Adelaide Pavilion grand function room with floor-to-ceiling windows overlooking parkland gardens"
          className="h-full w-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-foreground/78 via-foreground/65 to-foreground/85" />
      </div>

{/* Content */}
      <div className="relative flex h-full flex-col items-center justify-center px-6 text-center">
        <div
          className={`transition-all duration-1000 delay-300 ${
            loaded ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
          }`}
        >
          <p className="text-xs uppercase tracking-[0.4em] text-primary-foreground/90">
            Adelaide's Premier Event Venue
          </p>
        </div>

<h1
          className={`mt-6 max-w-4xl font-serif text-4xl leading-tight text-primary-foreground md:text-6xl lg:text-7xl transition-all duration-1000 delay-500 ${
            loaded ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
          }`}
        >
          <span className="text-balance">Where Elegance Meets the Parklands</span>
        </h1>

<p
          className={`mt-6 max-w-xl text-sm leading-relaxed text-primary-foreground/90 md:text-base transition-all duration-1000 delay-700 ${
            loaded ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
          }`}
        >
          Nestled in Adelaide's southern parklands, the Adelaide Pavilion offers a breathtaking
          setting for weddings, corporate events and social celebrations.
        </p>

<div
          className={`mt-10 flex flex-col items-center gap-4 sm:flex-row transition-all duration-1000 delay-900 ${
            loaded ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
          }`}
        >
          <a
            href="#contact"
            className="bg-accent px-8 py-3.5 text-xs uppercase tracking-[0.2em] text-accent-foreground transition-all hover:bg-accent/90"
          >
            Enquire Now
          </a>
          <a
            href="#rooms"
            className="border border-primary-foreground/30 px-8 py-3.5 text-xs uppercase tracking-[0.2em] text-primary-foreground transition-all hover:bg-primary-foreground/10"
          >
            Explore Spaces
          </a>
        </div>
      </div>

{/* Scroll indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <ChevronDown className="h-5 w-5 text-primary-foreground/50" />
      </div>
    </section>
  )
}</article></body></html>

A Legacy of Unforgettable Moments

Function Rooms

{room.name}

Your Dream Wedding Awaits

{title}

Elevate Your Corporate Events

{title}

Celebrate Every Occasion

{title}

Special Offers

{offer.title}

Gallery

Contact Us

Thank You