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 ( ); }; // Order Page const OrderPage = () => { const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 768); handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return (
Order Now

Order Your Favorites

Craving BBQ? Get it delivered, pick it up, or order ahead with our partners

Coming Soon

Saucy's Mobile App

Skip the line. Earn rewards. Get exclusive deals. Order your favorites with just a tap.

App Store
Google Play
); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();