const { useState, useEffect, useRef } = React; // Smoke Effect Component const SmokeEffect = () => { const [particles, setParticles] = useState([]); useEffect(() => { // Create initial particles const initialParticles = Array.from({ length: 15 }, (_, i) => ({ id: i, x: Math.random() * window.innerWidth, y: window.innerHeight + 50, size: Math.random() * 30 + 20, opacity: Math.random() * 0.3 + 0.1, speed: Math.random() * 2 + 1, drift: (Math.random() - 0.5) * 2 })); setParticles(initialParticles); // Animation loop const animateParticles = () => { setParticles(prevParticles => prevParticles.map(particle => { let newY = particle.y - particle.speed; let newX = particle.x + particle.drift; let newOpacity = particle.opacity; // Reset particle when it goes off screen if (newY < -100) { newY = window.innerHeight + 50; newX = Math.random() * window.innerWidth; newOpacity = Math.random() * 0.3 + 0.1; } // Fade out as it rises if (newY < window.innerHeight * 0.7) { newOpacity = newOpacity * 0.995; } return { ...particle, x: newX, y: newY, opacity: Math.max(0, newOpacity) }; }) ); }; const interval = setInterval(animateParticles, 50); return () => clearInterval(interval); }, []); return (
{particles.map(particle => (
))}
); }; // Mock Framer Motion const motion = new Proxy({}, { get: (target, prop) => { return ({ children, initial, animate, transition, whileHover, whileInView, viewport, ...props }) => { return React.createElement(prop, props, children); }; } }); const useInView = (ref, options) => true; // Shared Navigation Component const Navigation = () => { const [scrolled, setScrolled] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [isMobile, setIsMobile] = useState(false); useEffect(() => { const handleScroll = () => setScrolled(window.scrollY > 50); const handleResize = () => { setIsMobile(window.innerWidth <= 768); if (window.innerWidth > 768) setMobileMenuOpen(false); }; handleResize(); window.addEventListener('scroll', handleScroll); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('scroll', handleScroll); window.removeEventListener('resize', handleResize); }; }, []); const navLinkStyle = { color: 'var(--charcoal)', textDecoration: 'none', fontSize: '1rem', fontWeight: '500', transition: 'color 0.2s', cursor: 'pointer' }; const buttonStyle = { display: 'inline-block', padding: '0.875rem 2rem', borderRadius: '8px', textDecoration: 'none', fontWeight: '600', fontSize: '1rem', transition: 'all 0.3s ease', cursor: 'pointer', border: 'none', letterSpacing: '0.02em' }; return ( ); }; // Footer Component const Footer = () => { const footerLinkStyle = { color: 'rgba(245, 241, 232, 0.7)', textDecoration: 'none', transition: 'color 0.2s', cursor: 'pointer' }; return ( ); }; // Contact Page const ContactPage = () => { const [isMobile, setIsMobile] = React.useState(false); const [formData, setFormData] = React.useState({ name: '', email: '', phone: '', message: '' }); const [submitted, setSubmitted] = React.useState(false); React.useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 768); handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const handleSubmit = (e) => { e.preventDefault(); setSubmitted(true); console.log('Form submitted:', formData); setTimeout(() => { setSubmitted(false); setFormData({ name: '', email: '', phone: '', message: '' }); }, 3000); }; const buttonStyle = { display: 'inline-block', padding: '0.875rem 2rem', borderRadius: '8px', textDecoration: 'none', fontWeight: '600', fontSize: '1rem', transition: 'all 0.3s ease', cursor: 'pointer', border: 'none', letterSpacing: '0.02em' }; return (
Get In Touch

Contact Us

Questions about catering? Want to reserve a table? We'd love to hear from you!

{submitted ? (
✓

Thank You!

We've received your message and will get back to you soon.

) : (
setFormData({...formData, name: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }} />
setFormData({...formData, email: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }} />
setFormData({...formData, phone: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }} />