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 - replace with regular elements const motion = new Proxy({}, { get: (target, prop) => { return ({ children, initial, animate, transition, whileHover, whileInView, viewport, ...props }) => { return React.createElement(prop, props, children); }; } }); // Mock hooks const useInView = (ref, options) => true; const useScroll = () => ({}); const useTransform = () => 0; // Styles const navLinkStyle = { color: 'var(--charcoal)', textDecoration: 'none', fontSize: '1rem', fontWeight: '500', transition: 'color 0.2s', cursor: 'pointer', pointerEvents: 'auto', position: 'relative', zIndex: 1001 }; 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' }; const footerLinkStyle = { color: 'rgba(245, 241, 232, 0.7)', textDecoration: 'none', transition: 'color 0.2s', cursor: 'pointer' }; // 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); }; }, []); return ( ); }; // Hero Section const Hero = () => { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth <= 768); }; handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return (
{/* Decorative Elements */}
{/* Left Content */}
Denver's Finest Southern
BBQ
Tradition Slow-smoked perfection meets Denver soul. Experience authentic Southern BBQ crafted with passion, served with pride. Order Online View Menu
11am - 10pm
Open Daily
{!isMobile &&
}
(720) 484-6035
Call to Order
{/* Right Image */}
BBQ Ribs
{/* Scroll Indicator */}
SCROLL
); }; // Feature Card Component const FeatureCard = ({ icon, title, description, delay }) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-100px" }); return (
{title}

{title}

{description}

); }; // Features Section const Features = () => { return (

Why Saucy's?

More than just BBQ - it's a Denver tradition

); }; // Menu Section const Menu = () => { 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 } ]; return ( ); }; // Menu Card Component const MenuCard = ({ item, delay }) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-100px" }); return ( {item.popular && (
POPULAR
)}

{item.name}

{item.price}

{item.description}

); }; // Order Section const OrderSection = () => { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth <= 768); }; handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return (

Order Your Way

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

{/* Mobile App Showcase */}
Coming Soon

Saucy's Mobile App

Skip the line. Earn rewards. Get exclusive deals. Order your favorites with just a tap. Available soon on iOS and Android.

Mobile App
); }; // Order Card Component const OrderCard = ({ icon, title, description, buttonText, buttonLink, delay, featured }) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-100px" }); return ( {featured && (
RECOMMENDED
)}
{title}

{title}

{description}

{buttonText} ); }; // Location Section const LocationSection = () => { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth <= 768); }; handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return (
Visit Us

Come Say Hello

ADDRESS
2100 South University Boulevard
Denver, CO
HOURS
Open Daily
11:00 AM – 10:00 PM
Get Directions
Denver Location
Located in the heart of Denver
We're easy to find on South University Boulevard. Plenty of parking available. Dine-in, takeout, and curbside pickup options available daily.
); }; // Contact Form Section const ContactForm = () => { const [isMobile, setIsMobile] = useState(false); const [formData, setFormData] = useState({ name: '', email: '', phone: '', message: '' }); const [submitted, setSubmitted] = useState(false); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth <= 768); }; handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); setSubmitted(true); // Here you would typically send the form data to a server console.log('Form submitted:', formData); setTimeout(() => { setSubmitted(false); setFormData({ name: '', email: '', phone: '', message: '' }); }, 3000); }; 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.

) : (
e.target.style.borderColor = 'var(--terracotta)'} onBlur={(e) => e.target.style.borderColor = 'rgba(212, 82, 42, 0.2)'} />
e.target.style.borderColor = 'var(--terracotta)'} onBlur={(e) => e.target.style.borderColor = 'rgba(212, 82, 42, 0.2)'} />
e.target.style.borderColor = 'var(--terracotta)'} onBlur={(e) => e.target.style.borderColor = 'rgba(212, 82, 42, 0.2)'} />