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 ( ); }; // Menu Card Component const MenuCard = ({ item, delay }) => { return (
{item.popular && (
POPULAR
)}

{item.name}

{item.price}

{item.description}

); }; // Menu Page const MenuPage = () => { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 768); handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const menuItems = [ { name: "One Meat Plate", price: "$16.25", description: "Three ribs, two hotlinks, or six wings with your choice of two sides", popular: false }, { name: "Two Meat Plate", price: "$18.25", description: "Mix and match any two of our signature smoked meats with two sides", popular: true }, { name: "Three Meat Plate", price: "$23.25", description: "The ultimate BBQ experience - any combination of meats with two sides", popular: false } ]; 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 (
Our Plates

Signature BBQ Plates

Choose your adventure. All plates come with your choice of two house-made sides and our signature sauces.

{menuItems.map((item, index) => )}

Popular Sides

• Mac & Cheese
• Collard Greens
• Baked Beans
• Coleslaw
• Cornbread
• Potato Salad
); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();