const { useState, useEffect } = 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 => (
))}
); }; // 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 ( ); }; // Jobs Page const JobsPage = () => { const [isMobile, setIsMobile] = React.useState(false); const [applicationData, setApplicationData] = React.useState({ name: '', email: '', phone: '', position: '', experience: '', availability: '', 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('Job application submitted:', applicationData); setTimeout(() => { setSubmitted(false); setApplicationData({ name: '', email: '', phone: '', position: '', experience: '', availability: '', 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' }; const jobPositions = [ { title: "Pit Master", type: "Full-time", description: "Lead our BBQ operations with expertise in smoking meats, maintaining consistent quality, and training team members.", requirements: [ "3+ years BBQ/smoking experience", "Knowledge of meat temperatures and cooking times", "Leadership and training abilities", "Early morning availability (5 AM start)" ], benefits: ["Competitive salary", "Health insurance", "Paid time off", "Employee meals"] }, { title: "Line Cook", type: "Full-time / Part-time", description: "Join our kitchen team preparing sides, sauces, and supporting BBQ operations in a fast-paced environment.", requirements: [ "1+ years kitchen experience preferred", "Ability to work in fast-paced environment", "Food safety knowledge", "Flexible schedule including weekends" ], benefits: ["Hourly wage + tips", "Flexible scheduling", "Employee meals", "Growth opportunities"] }, { title: "Server", type: "Full-time / Part-time", description: "Provide exceptional customer service, take orders, and ensure guests have an amazing BBQ experience.", requirements: [ "Previous serving experience preferred", "Excellent communication skills", "Ability to work weekends and evenings", "Knowledge of BBQ and Southern cuisine a plus" ], benefits: ["Hourly wage + tips", "Flexible scheduling", "Employee meals", "Friendly team environment"] }, { title: "Cashier/Host", type: "Part-time", description: "Welcome guests, manage takeout orders, and handle point-of-sale operations with a smile.", requirements: [ "Customer service experience", "Cash handling experience", "Reliable and punctual", "Positive attitude and team player" ], benefits: ["Competitive hourly wage", "Flexible part-time hours", "Employee meals", "Great starter position"] } ]; return (
{/* Hero Section with Application Form */}
Join Our Team

Apply Today

Ready to join Denver's favorite BBQ family? Fill out the application below and we'll get back to you soon.

{/* Quick Application Form */}
{submitted ? (

Application Submitted!

Thank you for your interest. We'll review your application and get back to you soon.

) : (
setApplicationData({...applicationData, 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' }} />
setApplicationData({...applicationData, 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' }} />
setApplicationData({...applicationData, 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' }} />