[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.96 0.008 75); --foreground: oklch(0.2 0.01 75); --card: oklch(0.99 0.003 75); --card-foreground: oklch(0.2 0.01 75); --popover: oklch(0.99 0.003 75); --popover-foreground: oklch(0.2 0.01 75); --primary: oklch(0.25 0.015 75); --primary-foreground: oklch(0.98 0.003 75); --secondary: oklch(0.92 0.01 75); --secondary-foreground: oklch(0.25 0.015 75); --muted: oklch(0.94 0.008 75); --muted-foreground: oklch(0.5 0.01 75); --accent: oklch(0.48 0.12 35); --accent-foreground: oklch(0.98 0.003 75); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.003 75); --border: oklch(0.88 0.008 75); --input: oklch(0.88 0.008 75); --ring: oklch(0.48 0.12 35); --radius: 0.25rem; --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.15 0.01 75); --foreground: oklch(0.96 0.005 75); --card: oklch(0.18 0.01 75); --card-foreground: oklch(0.96 0.005 75); --popover: oklch(0.18 0.01 75); --popover-foreground: oklch(0.96 0.005 75); --primary: oklch(0.96 0.005 75); --primary-foreground: oklch(0.2 0.01 75); --secondary: oklch(0.25 0.015 75); --secondary-foreground: oklch(0.96 0.005 75); --muted: oklch(0.22 0.01 75); --muted-foreground: oklch(0.6 0.01 75); --accent: oklch(0.58 0.15 35); --accent-foreground: oklch(0.15 0.01 75); --destructive: oklch(0.5 0.2 27); --destructive-foreground: oklch(0.96 0.005 75); --border: oklch(0.28 0.01 75); --input: oklch(0.28 0.01 75); --ring: oklch(0.58 0.15 35); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --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); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --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); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Menu, Phone } from "lucide-react" import { useState } from "react" export function Navigation() { const [isOpen, setIsOpen] = useState(false) return (

Calgary Elite Hotels

Hotels Destinations Amenities Contact

{isOpen && (

Hotels Destinations Amenities Contact

)}

) } [V0_FILE]typescriptreact:file="components/stats.tsx" isMerged="true" export function Stats() { const stats = [ { value: "10x", label: "faster time to market", company: "Leading Brands" }, { value: "250%", label: "increase in engagement", company: "Global Clients" }, { value: "99.9%", label: "uptime guarantee", company: "Enterprise Ready" }, { value: "5 days", label: "average delivery", company: "Rapid Execution" }, ] return (

{stats.map((stat, index) => (

{stat.value}

{stat.label}

{stat.company}

))}

) } [V0_FILE]typescriptreact:file="components/features.tsx" isMerged="true" import { Sparkles, Zap, Shield, Users } from "lucide-react" export function Features() { const features = [ { icon: Sparkles, title: "Innovative Design", description: "Cutting-edge aesthetics that push boundaries while maintaining timeless appeal and user-centered functionality.", }, { icon: Zap, title: "Lightning Fast", description: "Optimized performance that delivers instant experiences, keeping your users engaged and conversion rates high.", }, { icon: Shield, title: "Enterprise Security", description: "Bank-level security protocols protecting your data and users with industry-leading encryption standards.", }, { icon: Users, title: "Collaborative Process", description: "Transparent workflow with real-time updates, ensuring your vision is realized at every stage of development.", }, ] return (

Crafted for excellence

Every detail meticulously designed to elevate your brand and deliver measurable results.

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/showcase.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowUpRight } from "lucide-react" export function Showcase() { const projects = [ { title: "Luxury E-Commerce", category: "Retail & Fashion", image: "/luxury-fashion-ecommerce.png", description: "Premium shopping experience with seamless checkout", }, { title: "Financial Platform", category: "FinTech", image: "/modern-financial-dashboard-interface.jpg", description: "Intuitive dashboard for complex financial data", }, { title: "Creative Portfolio", category: "Design & Arts", image: "/creative-portfolio-website.png", description: "Immersive showcase for artistic excellence", }, ] return (

Featured work

Explore our portfolio of transformative digital experiences

{projects.map((project, index) => (

View Project

{project.category}

{project.title}

{project.description}

))}

) } [V0_FILE]typescriptreact:file="components/cta.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function CTA() { return (

Ready to create something extraordinary?

Let's collaborate to bring your vision to life with design that makes an impact and technology that performs flawlessly.

) } [V0_FILE]jpg:file="public/modern-minimalist-interior-design-with-warm-wood-t.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-minimalist-interior-design-with-warm-wood-t-zWrW1BOTQv4h5zFw00LApnbcey3Ltx.jpg" isMerged="true" [V0_FILE]png:file="public/luxury-fashion-ecommerce.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-fashion-ecommerce-LbYbzXaGNY4quz4QHxbAeYr9AlJcW5.png" isMerged="true" [V0_FILE]jpg:file="public/modern-financial-dashboard-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-financial-dashboard-interface-ocJdpHp5NS9cuxtAT1iNyggFQ2URLf.jpg" isMerged="true" [V0_FILE]png:file="public/creative-portfolio-website.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/creative-portfolio-website-RhL3sc9Akyw9Hv4t4dLnbThOOhouBl.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "swr": "2.3.6" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Playfair_Display, Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair", display: "swap", }) const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) export const metadata: Metadata = { title: "Calgary Elite Hotels - Luxury Accommodations", description: "Discover the finest luxury hotels in Calgary with exclusive rates and premium amenities", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function Hero() { return (

Discover Calgary's finest luxury hotels

Experience unparalleled comfort and sophistication in Calgary's most prestigious accommodations. Exclusive rates and premium amenities await.

50+

Luxury Hotels

4.8★

Average Rating

24/7

Concierge Service

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" export function Footer() { return ( ) } [V0_FILE]jpg:file="public/luxury-hotel-lobby-in-calgary-with-modern-elegant-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-hotel-lobby-in-calgary-with-modern-elegant--fcDA1XlVL3Zp5NgBWKT51R7vKIPQnI.jpg" isMerged="true" [V0_FILE]jpg:file="public/luxury-hotel-exterior-fairmont-palliser-calgary.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-hotel-exterior-fairmont-palliser-calgary-MjbE4D61Z60ZWeXEcfQBR0tVE8Raja.jpg" isMerged="true" [V0_FILE]jpg:file="public/boutique-luxury-hotel-le-germain-calgary-modern-in.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/boutique-luxury-hotel-le-germain-calgary-modern-in-Fzc3KI2sigPzro2pDQtvBnFLMckbcZ.jpg" isMerged="true" [V0_FILE]jpg:file="public/westin-hotel-calgary-modern-luxury-rooms.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/westin-hotel-calgary-modern-luxury-rooms-2m7ieT1Xj3N4wjD03lCKBM5TSlG8ZG.jpg" isMerged="true" [V0_FILE]jpg:file="public/hyatt-regency-calgary-luxury-hotel-lobby.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hyatt-regency-calgary-luxury-hotel-lobby-ggrP2gO37Vpcus5oj2pMrrXubxyE8a.jpg" isMerged="true" [V0_FILE]jpg:file="public/boutique-dorian-hotel-calgary-elegant-rooms.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/boutique-dorian-hotel-calgary-elegant-rooms-uKyabXnZx1rc14dNt0drI6pn1Y8GuG.jpg" isMerged="true" [V0_FILE]jpg:file="public/marriott-hotel-calgary-downtown-modern-rooms.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/marriott-hotel-calgary-downtown-modern-rooms-10YIS4Z0Pu4risItthV624Q6NeWbuX.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/search-bar.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Calendar, Users, Search } from "lucide-react" import { useState } from "react" interface SearchBarProps { onSearch?: (params: { checkIn: string; checkOut: string; guests: string }) => void } export function SearchBar({ onSearch }: SearchBarProps) { const today = new Date() const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) const [checkIn, setCheckIn] = useState(today.toISOString().split("T")[0]) const [checkOut, setCheckOut] = useState(tomorrow.toISOString().split("T")[0]) const [guests, setGuests] = useState("2") const handleSearch = () => { if (onSearch) { onSearch({ checkIn, checkOut, guests }) } } return (

Check-in setCheckIn(e.target.value)} min={today.toISOString().split("T")[0]} className="w-full" />

Check-out setCheckOut(e.target.value)} min={checkIn} className="w-full" />

Guests setGuests(e.target.value)} className="w-full" />

) } [V0_FILE]typescriptreact:file="app/api/hotels/route.ts" isEdit="true" isQuickEdit="true" import { type NextRequest, NextResponse } from "next/server" export async function GET(request: NextRequest) { console.log("[v0] API route called") const searchParams = request.nextUrl.searchParams const checkIn = searchParams.get("checkIn") const checkOut = searchParams.get("checkOut") const guests = searchParams.get("guests") || "2" console.log("[v0] Search params:", { checkIn, checkOut, guests }) // Calculate number of nights for dynamic pricing let nights = 1 if (checkIn && checkOut) { const checkInDate = new Date(checkIn) const checkOutDate = new Date(checkOut) nights = Math.max(1, Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24))) } // Base hotel data with dynamic pricing const baseHotels = [ { id: 1, name: "The Fairmont Palliser", location: "Downtown Calgary", rating: 4.8, reviews: 1247, basePrice: 289, image: "/luxury-hotel-exterior-fairmont-palliser-calgary.jpg", amenities: ["Wifi", "Restaurant", "Fitness", "Parking"], description: "Historic luxury hotel in the heart of downtown with elegant rooms and world-class service", availability: "high", }, { id: 2, name: "Hotel Le Germain Calgary", location: "Downtown Calgary", rating: 4.9, reviews: 892, basePrice: 325, image: "/boutique-luxury-hotel-le-germain-calgary-modern-in.jpg", amenities: ["Wifi", "Restaurant", "Fitness", "Parking"], description: "Boutique luxury hotel featuring contemporary design and personalized service", availability: "medium", }, { id: 3, name: "The Westin Calgary", location: "Downtown Calgary", rating: 4.7, reviews: 1563, basePrice: 265, image: "/westin-hotel-calgary-modern-luxury-rooms.jpg", amenities: ["Wifi", "Restaurant", "Fitness", "Parking"], description: "Modern hotel with spacious rooms and stunning city views", availability: "high", }, { id: 4, name: "Hyatt Regency Calgary", location: "Downtown Calgary", rating: 4.6, reviews: 1089, basePrice: 245, image: "/hyatt-regency-calgary-luxury-hotel-lobby.jpg", amenities: ["Wifi", "Restaurant", "Fitness", "Parking"], description: "Connected to the TELUS Convention Centre with premium amenities", availability: "high", }, { id: 5, name: "The Dorian Hotel", location: "Kensington, Calgary", rating: 4.8, reviews: 734, basePrice: 295, image: "/boutique-dorian-hotel-calgary-elegant-rooms.jpg", amenities: ["Wifi", "Restaurant", "Fitness", "Parking"], description: "Sophisticated boutique hotel in trendy Kensington neighborhood", availability: "low", }, { id: 6, name: "Marriott Downtown Calgary", location: "Downtown Calgary", rating: 4.5, reviews: 1421, basePrice: 235, image: "/marriott-hotel-calgary-downtown-modern-rooms.jpg", amenities: ["Wifi", "Restaurant", "Fitness", "Parking"], description: "Contemporary hotel with excellent location and business facilities", availability: "high", }, ] // Calculate dynamic prices based on demand, dates, and guests const hotels = baseHotels.map((hotel) => { // Price multipliers based on various factors let priceMultiplier = 1 // Weekend pricing (higher on Fri/Sat) if (checkIn) { const checkInDate = new Date(checkIn) const dayOfWeek = checkInDate.getDay() if (dayOfWeek === 5 || dayOfWeek === 6) { priceMultiplier += 0.2 } } // Guest count pricing const guestCount = Number.parseInt(guests) if (guestCount > 2) { priceMultiplier += (guestCount - 2) * 0.15 } // Availability-based pricing if (hotel.availability === "low") { priceMultiplier += 0.25 } else if (hotel.availability === "medium") { priceMultiplier += 0.1 } // Random market fluctuation (±5%) const marketFluctuation = 0.95 + Math.random() * 0.1 const currentPrice = Math.round(hotel.basePrice * priceMultiplier * marketFluctuation) const totalPrice = currentPrice * nights return { ...hotel, price: currentPrice, totalPrice, nights, originalPrice: hotel.basePrice, discount: currentPrice < hotel.basePrice ? Math.round(((hotel.basePrice - currentPrice) / hotel.basePrice) * 100) : 0, } }) console.log("[v0] Returning hotel data:", hotels.length, "hotels") return NextResponse.json({ hotels, searchParams: { checkIn, checkOut, guests, nights, }, }) } [V0_FILE]typescriptreact:file="components/hotel-listings.tsx" isEdit="true" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Star, MapPin, Wifi, Coffee, Dumbbell, Car, Loader2, TrendingDown } from "lucide-react" import useSWR from "swr" import { useEffect, useState } from "react" interface Hotel { id: number name: string location: string rating: number reviews: number price: number totalPrice: number nights: number originalPrice: number discount: number image: string amenities: string[] description: string availability: string } interface HotelResponse { hotels: Hotel[] searchParams: { checkIn: string | null checkOut: string | null guests: string nights: number } } const amenityIcons = { Wifi: Wifi, Restaurant: Coffee, Fitness: Dumbbell, Parking: Car, } const fetcher = (url: string) => fetch(url).then((res) => res.json()) interface HotelListingsProps { searchParams?: { checkIn: string; checkOut: string; guests: string } } export function HotelListings({ searchParams }: HotelListingsProps) { const [apiUrl, setApiUrl] = useState("/api/hotels") useEffect(() => { console.log("[v0] Search params changed:", searchParams) if (searchParams) { const params = new URLSearchParams({ checkIn: searchParams.checkIn, checkOut: searchParams.checkOut, guests: searchParams.guests, }) const newUrl = `/api/hotels?${params.toString()}` console.log("[v0] Setting new API URL:", newUrl) setApiUrl(newUrl) } }, [searchParams]) const { data, error, isLoading } = useSWR(apiUrl, fetcher, { refreshInterval: 30000, // Refresh every 30 seconds revalidateOnFocus: true, }) console.log("[v0] SWR state:", { isLoading, hasError: !!error, hasData: !!data }) if (error) { console.error("[v0] Error fetching hotels:", error) } if (data) { console.log("[v0] Hotel data received:", data.hotels.length, "hotels") } return (

Featured luxury hotels in Calgary

{data?.searchParams.checkIn && data?.searchParams.checkOut ? `Showing real-time prices for ${data.searchParams.nights} ${data.searchParams.nights === 1 ? "night" : "nights"} • ${data.searchParams.guests} ${Number.parseInt(data.searchParams.guests) === 1 ? "guest" : "guests"}` : "Handpicked selection of Calgary's most prestigious accommodations offering exceptional comfort and service"}

{isLoading && (

Fetching real-time prices...

)} {error && (

Failed to load hotel prices. Please try again.

)} {data && !isLoading && (

{data.hotels.map((hotel) => (

{hotel.discount > 0 && (

{hotel.discount}% off

)}

{hotel.name}

{hotel.rating}

{hotel.location}

{hotel.description}

{hotel.amenities.map((amenity) => { const Icon = amenityIcons[amenity as keyof typeof amenityIcons] return (

) })}

{hotel.discount > 0 && (

${hotel.originalPrice}/night

)}

{hotel.nights > 1 ? `$${hotel.price}/night` : "From"}

${hotel.nights > 1 ? hotel.totalPrice : hotel.price} {hotel.nights > 1 ? ` total` : "/night"}

))}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { Navigation } from "@/components/navigation" import { Hero } from "@/components/hero" import { SearchBar } from "@/components/search-bar" import { HotelListings } from "@/components/hotel-listings" import { Footer } from "@/components/footer" import { useState } from "react" export default function Home() { const [searchParams, setSearchParams] = useState<{ checkIn: string; checkOut: string; guests: string } | undefined>() const handleSearch = (params: { checkIn: string; checkOut: string; guests: string }) => { console.log("[v0] Search triggered with params:", params) setSearchParams(params) } console.log("[v0] Page rendered with searchParams:", searchParams) return (

) }

About

Tags

Share

About

Tags

Share

More from rajshah9305

More Templates Like This