[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import './globals.css' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'City Museum of Art & History', description: 'Explore art and history at the City Museum', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return children } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Image from 'next/image' import Link from 'next/link' import { Button } from '@/components/ui/button' import { ChatbotWidget } from '@/components/ChatbotWidget' import { ExhibitionHighlights } from '@/components/ExhibitionHighlights' export default function Home() { return (

Welcome to Our Museum

Discover art, history, and culture

Plan Your Visit

Opening Hours

Monday - Friday: 9am - 5pm

Saturday - Sunday: 10am - 6pm

Admission

Adults: $15

Children (under 12): Free

Seniors (65+): $10

Location

123 Museum Street

City, State 12345

Phone: (123) 456-7890

) } [V0_FILE]typescriptreact:file="components/ExhibitionHighlights.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from 'next/image' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' const exhibitions = [ { title: "Ancient Egypt", description: "Discover the mysteries of the pharaohs and explore the wonders of ancient Egyptian civilization.", image: "https://images.unsplash.com/photo-1608425234255-96a0c7819315?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80", date: "June 1 - August 31, 2023", badge: "Popular", }, { title: "Modern Art Masterpieces", description: "Experience a curated collection of contemporary masterpieces from renowned artists around the world.", image: "https://images.unsplash.com/photo-1577083552431-6e5fd01aa342?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80", date: "July 15 - September 30, 2023", badge: "New", }, { title: "Dinosaur World", description: "Journey back to the Jurassic period and come face-to-face with life-sized dinosaur replicas.", image: "https://images.unsplash.com/photo-1566055972289-c52022ae23b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80", date: "August 1 - October 31, 2023", badge: "Family Favorite", }, ] export function ExhibitionHighlights() { if (!exhibitions || exhibitions.length === 0) { return null; // or return a placeholder component } return (

Featured Exhibitions

{exhibitions.map((exhibition, index) => (

{exhibition.title} {exhibition.badge}

{exhibition.date}

{exhibition.description}

Learn More ))}

) } [V0_FILE]typescriptreact:file="components/ModeToggle.tsx" isMerged="true" 'use client' import * as React from 'react' import { Moon, Sun } from 'lucide-react' import { useTheme } from 'next-themes' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme('light')}> Light setTheme('dark')}> Dark setTheme('system')}> System ) } [V0_FILE]typescriptreact:file="app/tickets/page.tsx" isMerged="true" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { useToast } from '@/components/ui/use-toast' export default function TicketsPage() { const [ticketType, setTicketType] = useState('adult') const [quantity, setQuantity] = useState('1') const { toast } = useToast() const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically handle the form submission, e.g., send to an API toast({ title: 'Tickets Booked!', description: `You have booked ${quantity} ${ticketType} ticket(s).`, }) } return (

Book Tickets

) } [V0_FILE]typescriptreact:file="app/events/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' const events = [ { title: "Guided Tour: Ancient Egypt", description: "Join our expert guide for an in-depth exploration of our Ancient Egypt exhibition.", date: "Every Saturday at 2 PM", duration: "90 minutes", price: "$5 with museum admission", }, { title: "Kids Workshop: Dinosaur Dig", description: "Children can experience being a paleontologist in this hands-on workshop.", date: "Sundays at 11 AM", duration: "60 minutes", price: "$10 per child", }, { title: "Lecture Series: Modern Art Movements", description: "A weekly lecture series exploring different modern art movements.", date: "Thursdays at 7 PM", duration: "120 minutes", price: "Free with museum admission", }, { title: "Night at the Museum", description: "Experience the museum after hours with special performances and activities.", date: "Last Friday of each month, 7 PM - 11 PM", duration: "4 hours", price: "$20 per person", }, ] export default function EventsPage() { if (!events || events.length === 0) { return (

Upcoming Events

No events are currently scheduled. Please check back later.

) } return (

Upcoming Events

{events.map((event, index) => ( {event.title} {event.date}

{event.description}

{event.duration} {event.price}

))}

) } [V0_FILE]typescriptreact:file="app/faq/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion' import { Input } from '@/components/ui/input' const faqs = [ { question: "What are the museum's opening hours?", answer: "The museum is open Monday to Friday from 9am to 5pm, and on weekends from 10am to 6pm." }, { question: "How much does admission cost?", answer: "Admission is $15 for adults, $10 for seniors (65+), and free for children under 12." }, { question: "Is photography allowed in the museum?", answer: "Photography is allowed in most areas of the museum, but flash photography is prohibited. Some special exhibitions may have restrictions on photography." }, { question: "Are guided tours available?", answer: "Yes, we offer guided tours daily at 11am and 2pm. These tours are included with your admission ticket." }, { question: "Is the museum accessible for visitors with disabilities?", answer: "Yes, our museum is fully accessible. We offer wheelchair rentals, audio guides for the visually impaired, and sign language tours upon request." }, ] export default function FAQPage() { const [searchTerm, setSearchTerm] = useState('') const filteredFaqs = faqs ? faqs.filter(faq => faq.question.toLowerCase().includes(searchTerm.toLowerCase()) || faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) ) : [] return (

Frequently Asked Questions

setSearchTerm(e.target.value)} /> {filteredFaqs.length > 0 ? ( {filteredFaqs.map((faq, index) => ( {faq.question} {faq.answer} ))} ) : (

No FAQs found matching your search.

)}

) } [V0_FILE]typescriptreact:file="components/ThemeProvider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider } from 'next-themes' import { type ThemeProviderProps } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/LanguageSelector.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { useRouter } from 'next/navigation' import { Check, ChevronsUpDown } from 'lucide-react' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, } from '@/components/ui/command' import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover' const languages = [ { label: 'English', value: 'en' }, { label: 'Español', value: 'es' }, { label: 'Français', value: 'fr' }, { label: 'Deutsch', value: 'de' }, ] export function LanguageSelector({ lang }: { lang: string }) { const [open, setOpen] = useState(false) const router = useRouter() const handleLanguageChange = (newLang: string) => { router.push(`/${newLang}${window.location.pathname.substring(3)}`) } return ( No language found. {languages.map((language) => ( handleLanguageChange(language.value)} > {language.label} ))} ) } [V0_FILE]typescriptreact:file="app/[lang]/layout.tsx" isEdit="true" isMerged="true" import '../globals.css' import { Inter } from 'next/font/google' import { dir } from 'i18next' import { languages } from '../i18n/settings' import { Navbar } from '@/components/Navbar' import { Footer } from '@/components/Footer' import { ThemeProvider } from '@/components/ThemeProvider' import { Toaster } from '@/components/ui/toaster' const inter = Inter({ subsets: ['latin'] }) export async function generateStaticParams() { return languages.map((lang) => ({ lang })) } export default function RootLayout({ children, params: { lang } }: { children: React.ReactNode params: { lang: string } }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/Hero.tsx" isMerged="true" import Image from 'next/image' import { useTranslation } from '../app/i18n' import { Button } from '@/components/ui/button' export default async function Hero({ lang }: { lang: string }) { const { t } = await useTranslation(lang) return (

{t('hero.title')}

{t('hero.subtitle')}

) } [V0_FILE]typescriptreact:file="components/FeaturedExhibitions.tsx" isMerged="true" import Image from 'next/image' import { useTranslation } from '../app/i18n' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' const exhibitions = [ { id: 'ancient-egypt', image: '/images/ancient-egypt.jpg', badge: 'popular', }, { id: 'modern-art', image: '/images/modern-art.jpg', badge: 'new', }, { id: 'dinosaurs', image: '/images/dinosaurs.jpg', badge: 'family-favorite', }, ] export default async function FeaturedExhibitions({ lang }: { lang: string }) { const { t } = await useTranslation(lang) return (

{t('exhibitions.title')}

{exhibitions.map((exhibition) => (

{t(`exhibitions.${exhibition.id}.title`)} {t(`exhibitions.badges.${exhibition.badge}`)}

{t(`exhibitions.${exhibition.id}.date`)}

{t(`exhibitions.${exhibition.id}.description`)}

{t('exhibitions.learnMore')} ))}

) } [V0_FILE]typescriptreact:file="components/UpcomingEvents.tsx" isMerged="true" import { useTranslation } from '../app/i18n' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' const events = ['guided-tour', 'kids-workshop', 'lecture-series', 'night-museum'] export default async function UpcomingEvents({ lang }: { lang: string }) { const { t } = await useTranslation(lang) return (

{t('events.title')}

{events.map((event) => ( {t(`events.${event}.title`)} {t(`events.${event}.date`)}

{t(`events.${event}.description`)}

{t(`events.${event}.duration`)} {t(`events.${event}.price`)}

))}

) } [V0_FILE]typescriptreact:file="components/Footer.tsx" isEdit="true" isMerged="true" import Link from 'next/link' import { useTranslation } from '../app/i18n' import { MapComponent } from '@/components/MapComponent' export async function Footer({ lang }: { lang: string }) { const { t } = await useTranslation(lang) return ( ) } [V0_FILE]typescript:file="app/i18n/settings.ts" isMerged="true" export const fallbackLng = 'en' export const languages = [fallbackLng, 'es', 'fr', 'de'] export const defaultNS = 'translation' export function getOptions (lng = fallbackLng, ns = defaultNS) { return { // debug: true, supportedLngs: languages, fallbackLng, lng, fallbackNS: defaultNS, defaultNS, ns } } [V0_FILE]typescript:file="app/i18n/index.ts" isMerged="true" import { createInstance } from 'i18next' import resourcesToBackend from 'i18next-resources-to-backend' import { initReactI18next } from 'react-i18next/initReactI18next' import { getOptions } from './settings' const initI18next = async (lng: string, ns: string) => { const i18nInstance = createInstance() await i18nInstance .use(initReactI18next) .use(resourcesToBackend((language: string, namespace: string) => import(`./locales/${language}/${namespace}.json`))) .init(getOptions(lng, ns)) return i18nInstance } export async function useTranslation(lng: string, ns: string = 'translation', options: { keyPrefix?: string } = {}) { const i18nextInstance = await initI18next(lng, ns) return { t: i18nextInstance.getFixedT(lng, Array.isArray(ns) ? ns[0] : ns, options.keyPrefix), i18n: i18nextInstance } } [V0_FILE]typescript:file="app/i18n/client.ts" isMerged="true" 'use client' import i18next from 'i18next' import { initReactI18next, useTranslation as useTranslationOrg } from 'react-i18next' import resourcesToBackend from 'i18next-resources-to-backend' import LanguageDetector from 'i18next-browser-languagedetector' import { getOptions } from './settings' // i18next .use(initReactI18next) .use(LanguageDetector) .use(resourcesToBackend((language: string, namespace: string) => import(`./locales/${language}/${namespace}.json`))) .init({ ...getOptions(), lng: undefined, // let detect the language on client side detection: { order: ['path', 'htmlTag', 'cookie', 'navigator'], } }) export function useTranslation(lng: string, ns: string, options: { keyPrefix?: string } = {}) { if (i18next.resolvedLanguage !== lng) i18next.changeLanguage(lng) return useTranslationOrg(ns, options) } [V0_FILE]typescriptreact:file="components/ChatbotWidget.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { useTranslation } from '../app/i18n/client' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { ScrollArea } from '@/components/ui/scroll-area' type Message = { text: string isUser: boolean } export function ChatbotWidget({ lang }: { lang: string }) { const { t } = useTranslation(lang) const [isOpen, setIsOpen] = useState(false) const [messages, setMessages] = useState([ { text: t('chatbot.welcome'), isUser: false } ]) const [inputText, setInputText] = useState('') const handleSendMessage = () => { if (inputText.trim()) { setMessages(prev => [...prev, { text: inputText, isUser: true }]) // Here you would typically send the message to your chatbot backend // and receive a response. For now, we'll just echo the message. setTimeout(() => { setMessages(prev => [...prev, { text: t('chatbot.response', { message: inputText }), isUser: false }]) }, 1000) setInputText('') } } return (

{!isOpen ? ( ) : ( {t('chatbot.title')} {messages.map((message, index) => (

{message.text}

))} )}

) } export { ChatbotWidget }; [V0_FILE]typescriptreact:file="app/[lang]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { useTranslation } from '../i18n' import Hero from '@/components/Hero' import FeaturedExhibitions from '@/components/FeaturedExhibitions' import UpcomingEvents from '@/components/UpcomingEvents' import { ChatbotWidget } from '@/components/ChatbotWidget' export default async function Home({ params: { lang } }: { params: { lang: string } }) { const { t } = await useTranslation(lang) return (

) } [V0_FILE]typescriptreact:file="components/MapComponent.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { APIProvider, Map, AdvancedMarker, Pin, InfoWindow } from '@vis.gl/react-google-maps' import { Card } from '@/components/ui/card' import { Skeleton } from '@/components/ui/skeleton' const MUSEUM_LOCATION = { lat: 40.7128, lng: -74.0060, address: '123 Museum Street, New York, NY 10001', name: 'City Museum of Art & History' } const mapStyle = [ { "featureType": "all", "elementType": "geometry", "stylers": [{ "color": "#242f3e" }] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "lightness": -80 }] }, { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{ "color": "#746855" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#d59563" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#17263c" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#515c6d" }] } ] export function MapComponent() { const [isInfoWindowOpen, setIsInfoWindowOpen] = useState(false) const [isLoaded, setIsLoaded] = useState(false) if (!process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY) { return (

Please configure your Google Maps API key to view the map.

) } return (

{!isLoaded && ( )} setIsLoaded(true)} gestureHandling={'cooperative'} disableDefaultUI={true} className="w-full h-full" > setIsInfoWindowOpen(true)} > {isInfoWindowOpen && ( setIsInfoWindowOpen(false)} >

{MUSEUM_LOCATION.name}

{MUSEUM_LOCATION.address}

)}

) } [V0_FILE]plaintext:file=".env.local" isMerged="true" NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key_here [V0_FILE]typescriptreact:file="app/[lang]/visit/page.tsx" isEdit="true" isMerged="true" import { useTranslation } from '../../i18n' import { MapComponent } from '@/components/MapComponent' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Clock, MapPin, Ticket, Bus, Car, Train } from 'lucide-react' export default async function VisitPage({ params: { lang } }: { params: { lang: string } }) { const { t } = await useTranslation(lang) const transportOptions = [ { icon: Train, title: t('visit.transport.train.title'), description: t('visit.transport.train.description'), }, { icon: Bus, title: t('visit.transport.bus.title'), description: t('visit.transport.bus.description'), }, { icon: Car, title: t('visit.transport.car.title'), description: t('visit.transport.car.description'), }, ] return (

{t('visit.title')}

{t('visit.description')}

{t('visit.hours.title')}

{t('visit.hours.weekdays')}: 9:00 AM - 6:00 PM

{t('visit.hours.weekends')}: 10:00 AM - 8:00 PM

{t('visit.hours.holidays')}

{t('visit.admission.title')}

{t('visit.admission.adult')}

$15

{t('visit.admission.senior')}

$10

{t('visit.admission.student')}

{t('visit.admission.child')}

{t('visit.admission.free')}

{t('visit.location.title')}

City Museum of Art & History

123 Museum Street

New York, NY 10001

{transportOptions.map((option, index) => (

{option.title}

{option.description}

))}

) } [V0_FILE]json:file="package.json" isMerged="true" { "dependencies": { "@vis.gl/react-google-maps": "^0.4.1" } } [V0_FILE]typescriptreact:file="components/Navbar.tsx" isEdit="true" isQuickEdit="true" 'use client' import Link from 'next/link' import { usePathname } from 'next/navigation' import { useTranslation } from '../app/i18n/client' import { Button } from '@/components/ui/button' import { LanguageSelector } from '@/components/LanguageSelector' import { ModeToggle } from '@/components/ModeToggle' import { Search, Bell, ChevronDown } from 'lucide-react' import { Input } from '@/components/ui/input' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' const navItems = [ { href: '/', label: 'nav.home' }, { href: '/exhibitions', label: 'nav.exhibitions' }, { href: '/events', label: 'nav.events' }, { href: '/tickets', label: 'nav.tickets' }, { href: '/visit', label: 'nav.visit' }, ] export function Navbar({ lang }: { lang: string }) { const { t } = useTranslation(lang) const pathname = usePathname() return (

City Museum Art & History

{navItems.map((item) => ( {t(item.label)} ))}

{t('nav.userMenu.label')} {t('nav.userMenu.profile')} {t('nav.userMenu.settings')} {t('nav.userMenu.logout')}

) } [V0_FILE]typescriptreact:file="app/i18n/locales/en/translation.json" isEdit="true" isQuickEdit="true" { "visit": { "title": "Plan Your Visit", "description": "Welcome to the City Museum of Art & History. Plan your visit and discover our world-class exhibitions and collections.", "hours": { "title": "Opening Hours", "weekdays": "Monday - Friday", "weekends": "Saturday - Sunday", "holidays": "Closed on major holidays" }, "admission": { "title": "Admission", "adult": "Adult", "senior": "Senior (65+)", "student": "Student", "child": "Child (under 12)", "free": "Free", "buyTickets": "Buy Tickets" }, "location": { "title": "Location" }, "transport": { "train": { "title": "By Train", "description": "5 minute walk from Central Station" }, "bus": { "title": "By Bus", "description": "Bus stops on Museum Street" }, "car": { "title": "By Car", "description": "Parking available nearby" } } }, "nav": { "search": "Search...", "userGreeting": "Welcome, User", "userMenu": { "label": "My Account", "profile": "Profile", "settings": "Settings", "logout": "Log out" } } }