Upgrade Menu design, add QR/Logo assets and Seed Data feature

src/components/admin/DashboardOverview.jsx

@@ -22,9 +22,48 @@ export default function DashboardOverview() {
     { title: 'Stock Bajo', value: stats.stockBajo, icon: <AlertCircle size={24} color="var(--warning)" />, bg: 'rgba(245, 166, 35, 0.1)' }
   ];
 
+  const seedData = async () => {
+    if (!window.confirm('¿Deseas cargar toda la información de ejemplo en el sistema? Esto agregará productos, insumos y mesas.')) return;
+
+    // 1. Sembrar Menú
+    const menuRef = ref(db, 'menu');
+    const menuExamples = [
+      { name: 'Hamburgesa Trufada', price: 18.50, category: 'Fuertes', image: '/images/burger_classic.png', active: true, ingredients: [], extras: [] },
+      { name: 'Pizza Prosciutto', price: 22.00, category: 'Pizzas', image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&q=80&w=1000', active: true, ingredients: [], extras: [] },
+      { name: 'Limonada de Coco', price: 6.50, category: 'Bebidas', image: 'https://images.unsplash.com/photo-1543648964-1699e74bf300?auto=format&fit=crop&q=80&w=1000', active: true, ingredients: [], extras: [] },
+      { name: 'Ensalada César', price: 14.00, category: 'Entradas', image: 'https://images.unsplash.com/photo-1550304943-4f24f54ddde9?auto=format&fit=crop&q=80&w=1000', active: true, ingredients: [], extras: [] },
+      { name: 'Volcán de Chocolate', price: 9.50, category: 'Postres', image: 'https://images.unsplash.com/photo-1624353365286-3f8d62daad51?auto=format&fit=crop&q=80&w=1000', active: true, ingredients: [], extras: [] }
+    ];
+    for (const item of menuExamples) { await set(push(menuRef), item); }
+
+    // 2. Sembrar Inventario
+    const invRef = ref(db, 'inventory');
+    const invExamples = [
+      { name: 'Harina de Trigo', quantity: 100, unit: 'Kg', minStock: 20 },
+      { name: 'Tomate Cherry', quantity: 15, unit: 'Kg', minStock: 5 },
+      { name: 'Queso Mozzarella', quantity: 40, unit: 'Kg', minStock: 10 },
+      { name: 'Carne de Res Premium', quantity: 25, unit: 'Kg', minStock: 8 },
+      { name: 'Limones', quantity: 200, unit: 'Und', minStock: 50 }
+    ];
+    for (const item of invExamples) { await set(push(invRef), item); }
+
+    // 3. Sembrar Mesas
+    const tableRef = ref(db, 'config/tables');
+    for (let i = 1; i <= 8; i++) {
+      await set(push(tableRef), { number: i, capacity: i > 4 ? 6 : 4, status: 'available', x: 0, y: 0 });
+    }
+
+    alert('Sistema poblado con datos de ejemplo con éxito.');
+  };
+
   return (
     <div className="animate-fade-in">
-      <h2 className="text-gradient" style={{ fontSize: '2rem', marginBottom: '1.5rem' }}>Resumen General</h2>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800' }}>Resumen General</h2>
+        <button onClick={seedData} className="btn-glass" style={{ borderColor: 'var(--info)', color: 'var(--info)' }}>
+          Cargar Datos de Ejemplo
+        </button>
+      </div>
       
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginBottom: '3rem' }}>
         {cards.map((card, i) => (
@@ -41,9 +80,14 @@ export default function DashboardOverview() {
       </div>
 
       <div className="glass-card">
-        <h3 className="text-gradient">Actividad Reciente</h3>
-        <p style={{ color: 'var(--text-muted)', marginTop: '0.5rem' }}>Módulo de notificaciones en tiempo real desde Cocina/Meseros...</p>
+        <h3 className="text-gradient" style={{ marginBottom: '1rem' }}>Misión del Sistema</h3>
+        <p style={{ color: 'var(--text-muted)', lineHeight: '1.6' }}>
+          Este sistema está diseñado para gestionar de manera integral un restaurante moderno. 
+          Desde la recepción del cliente en la <strong>Carta Digital</strong>, pasando por la toma de pedidos en el 
+          <strong> POS de Meseros</strong>, hasta la preparación coordinada en la <strong>Pantalla de Cocina</strong>.
+        </p>
       </div>
     </div>
   );
 }
+

src/index.css

@@ -187,3 +187,20 @@ button {
 .animate-fade-in {
   animation: fadeIn 0.4s ease-out forwards;
 }
+
+.menu-card-hover:hover {
+  transform: translateY(-15px) scale(1.02) !important;
+  box-shadow: 0 30px 60px rgba(0,0,0,0.5) !important;
+  border-color: var(--primary) !important;
+}
+
+.menu-card-hover:hover .card-image {
+  transform: scale(1.1);
+}
+
+.text-gradient {
+  background: linear-gradient(135deg, #fff 0%, var(--primary) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}

src/pages/AdminDashboard.jsx

@@ -38,9 +38,10 @@ export default function AdminDashboard() {
     <div className="app-container">
       {/* Sidebar */}
       <aside className="glass-panel" style={{ width: '280px', borderRadius: '0', borderRight: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column' }}>
-        <div style={{ padding: '2rem 1.5rem', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
-          <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '800' }}>Admin OS</h1>
-          <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '0.25rem' }}>{currentUser?.email}</p>
+        <div style={{ padding: '2.5rem 1.5rem', borderBottom: '1px solid rgba(255,255,255,0.05)', textAlign: 'center' }}>
+          <img src="/images/logo.png" alt="Logo" style={{ height: '50px', marginBottom: '1rem', filter: 'drop-shadow(0 0 10px var(--primary-glow))' }} />
+          <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '900', letterSpacing: '-1px' }}>ADMIN<span style={{color:'var(--primary)'}}>OS</span></h1>
+          <p style={{ color: 'var(--text-muted)', fontSize: '0.75rem', marginTop: '0.25rem', opacity: 0.7 }}>{currentUser?.email}</p>
         </div>
 
         <nav style={{ flex: 1, padding: '1.5rem 1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>

src/pages/CustomerMenu.jsx

@@ -8,31 +8,27 @@ export default function CustomerMenu() {
   const [menuItems, setMenuItems] = useState([]);
   const [categories, setCategories] = useState([]);
   const [activeCategory, setActiveCategory] = useState('Todos');
-  const [menuTheme, setMenuTheme] = useState('dark'); // 'dark' or 'light'
+  const [menuTheme, setMenuTheme] = useState('dark');
   const [feedback, setFeedback] = useState({ rating: 5, comment: '' });
   const [submitted, setSubmitted] = useState(false);
+  const [cartCount, setCartCount] = useState(0);
   const navigate = useNavigate();
 
   useEffect(() => {
-    // Escuchar el menú
     const menuRef = ref(db, 'menu');
     onValue(menuRef, (snapshot) => {
       const data = snapshot.val();
       if (data) {
         const list = Object.keys(data).map(id => ({ id, ...data[id] })).filter(item => item.active !== false);
         setMenuItems(list);
-        
         const cats = [...new Set(list.map(item => item.category))];
         setCategories(['Todos', ...cats]);
       }
     });
 
-    // Escuchar el tema configurado por el admin
     const themeRef = ref(db, 'config/menuTheme');
     onValue(themeRef, (snapshot) => {
-      if (snapshot.exists()) {
-        setMenuTheme(snapshot.val());
-      }
+      if (snapshot.exists()) setMenuTheme(snapshot.val());
     });
   }, []);
 
@@ -41,14 +37,14 @@ export default function CustomerMenu() {
     : menuItems.filter(item => item.category === activeCategory);
 
   const isDark = menuTheme === 'dark';
-  
   const themeColors = {
-    bg: isDark ? '#0a0a0a' : '#ffffff',
+    bg: isDark ? '#050505' : '#f8f9fa',
     text: isDark ? '#ffffff' : '#1a1a1a',
-    muted: isDark ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)',
-    card: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)',
+    muted: isDark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)',
+    card: isDark ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.8)',
     border: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)',
-    accent: '#FF6B6B'
+    accent: '#FF6B6B',
+    accentGradient: 'linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%)'
   };
 
   return (
@@ -57,70 +53,81 @@ export default function CustomerMenu() {
       background: themeColors.bg, 
       color: themeColors.text, 
       fontFamily: "'Outfit', sans-serif",
-      transition: 'all 0.5s ease'
+      transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+      overflowX: 'hidden'
     }}>
       
-      {/* Hero Section */}
+      {/* Floating Header */}
+      <header style={{
+        position: 'fixed', top: 0, left: 0, width: '100%', zIndex: 1000,
+        padding: '20px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+        background: 'rgba(0,0,0,0.2)', backdropFilter: 'blur(20px)', borderBottom: `1px solid ${themeColors.border}`
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <img src="/images/logo.png" alt="Logo" style={{ height: '40px', filter: isDark ? 'invert(0)' : 'invert(1)' }} />
+          <span style={{ fontSize: '1.5rem', fontWeight: '900', letterSpacing: '-1px' }}>RESTAURANT<span style={{color: themeColors.accent}}>OS</span></span>
+        </div>
+        <div style={{ display: 'flex', gap: '15px' }}>
+          <button onClick={() => navigate('/login')} style={{ background: 'none', border: 'none', color: themeColors.text, cursor: 'pointer', fontWeight: '600' }}>Admin</button>
+          <div style={{ position: 'relative', cursor: 'pointer' }}>
+             <Utensils size={24} />
+             {cartCount > 0 && <span style={{ position: 'absolute', top: '-8px', right: '-8px', background: themeColors.accent, color: '#fff', borderRadius: '50%', width: '18px', height: '18px', fontSize: '0.7rem', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: '800' }}>{cartCount}</span>}
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Section with Parallax Effect */}
       <section style={{ 
-        height: '60vh', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
-        background: `linear-gradient(rgba(0,0,0,${isDark ? 0.7 : 0.4}), rgba(0,0,0,${isDark ? 0.7 : 0.4})), url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=2070')`,
-        backgroundSize: 'cover', backgroundPosition: 'center'
+        height: '85vh', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        background: `linear-gradient(rgba(0,0,0,0.5), ${themeColors.bg}), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&q=80&w=2070')`,
+        backgroundSize: 'cover', backgroundPosition: 'center', backgroundAttachment: 'fixed'
       }}>
-        <div style={{ textAlign: 'center', padding: '0 20px' }} className="animate-slide-up">
-          <h1 style={{ fontSize: '4rem', fontWeight: '900', marginBottom: '1rem', letterSpacing: '-2px' }}>Gourmet Experience</h1>
-          <p style={{ fontSize: '1.25rem', opacity: 0.9, maxWidth: '600px', margin: '0 auto' }}>Descubre una fusión de sabores únicos, preparados con pasión y los ingredientes más frescos.</p>
-          <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem', justifyContent: 'center' }}>
-            <button onClick={() => navigate('/login')} className="btn-primary" style={{ padding: '12px 30px', borderRadius: '30px' }}>
-              Reservar Mesa <ArrowRight size={18} style={{ marginLeft: '10px' }} />
+        <div style={{ textAlign: 'center', padding: '0 20px', maxWidth: '900px' }} className="animate-fade-in">
+          <div style={{ 
+            display: 'inline-flex', alignItems: 'center', gap: '10px', padding: '8px 20px', 
+            borderRadius: '40px', background: 'rgba(255,107,107,0.1)', border: '1px solid rgba(255,107,107,0.2)',
+            color: themeColors.accent, fontWeight: '700', fontSize: '0.85rem', marginBottom: '2rem', textTransform: 'uppercase', letterSpacing: '2px'
+          }}>
+            <ChefHat size={16} /> Experiencia Gastronómica Única
+          </div>
+          <h1 style={{ fontSize: '5rem', fontWeight: '900', marginBottom: '1.5rem', letterSpacing: '-3px', lineHeight: '0.9' }}>
+            Sabor que despierta tus <span className="text-gradient">sentidos.</span>
+          </h1>
+          <p style={{ fontSize: '1.4rem', color: themeColors.muted, maxWidth: '700px', margin: '0 auto', lineHeight: '1.5' }}>
+            Una selección exclusiva de platos preparados por chefs de clase mundial, usando ingredientes locales de la más alta calidad.
+          </p>
+          
+          <div style={{ marginTop: '3rem', display: 'flex', gap: '1.5rem', justifyContent: 'center' }}>
+            <button className="btn-primary" style={{ padding: '18px 40px', borderRadius: '40px', fontSize: '1.1rem', fontWeight: '700', boxShadow: '0 20px 40px rgba(255,107,107,0.3)' }}>
+              Ver Especialidades
+            </button>
+            <button className="btn-glass" style={{ padding: '18px 40px', borderRadius: '40px', fontSize: '1.1rem', fontWeight: '700' }}>
+              Nuestra Historia
             </button>
           </div>
         </div>
-        
-        {/* Badges */}
-        <div style={{ 
-          position: 'absolute', bottom: '-40px', left: '50%', transform: 'translateX(-50%)',
-          display: 'flex', gap: '30px', width: '100%', justifyContent: 'center', maxWidth: '800px'
-        }}>
-          {[
-            { icon: <Star size={20} />, text: "4.9 Estrellas" },
-            { icon: <Clock size={20} />, text: "30-45 min" },
-            { icon: <MapPin size={20} />, text: "Centro Histórico" }
-          ].map((badge, i) => (
-            <div key={i} className="glass-card" style={{ 
-              padding: '15px 25px', borderRadius: '15px', display: 'flex', alignItems: 'center', gap: '10px',
-              background: isDark ? 'rgba(30,30,30,0.8)' : 'rgba(255,255,255,0.9)',
-              color: isDark ? '#fff' : '#1a1a1a', border: `1px solid ${themeColors.border}`,
-              boxShadow: '0 10px 30px rgba(0,0,0,0.1)'
-            }}>
-              <span style={{ color: themeColors.accent }}>{badge.icon}</span>
-              <span style={{ fontWeight: '600', fontSize: '0.9rem' }}>{badge.text}</span>
-            </div>
-          ))}
-        </div>
       </section>
 
-      {/* Menu Section */}
-      <section style={{ maxWidth: '1200px', margin: '100px auto', padding: '0 20px' }}>
-        <div style={{ textAlign: 'center', marginBottom: '60px' }}>
-          <h2 style={{ fontSize: '2.5rem', fontWeight: '800', marginBottom: '1rem' }}>Nuestra Carta</h2>
-          <div style={{ width: '60px', height: '4px', background: themeColors.accent, margin: '0 auto', borderRadius: '2px' }}></div>
-        </div>
-
-        {/* Category Tabs */}
+      {/* Main Content Area */}
+      <main style={{ maxWidth: '1400px', margin: '0 auto', padding: '80px 40px' }}>
+        
+        {/* Categories Navigation */}
         <div style={{ 
-          display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '50px', 
-          overflowX: 'auto', padding: '10px 0', scrollbarWidth: 'none' 
+          position: 'sticky', top: '100px', zIndex: 100, marginBottom: '60px',
+          display: 'flex', justifyContent: 'center', gap: '12px',
+          background: 'rgba(0,0,0,0.05)', padding: '10px', borderRadius: '50px', backdropFilter: 'blur(10px)',
+          width: 'fit-content', margin: '0 auto 60px'
         }}>
           {categories.map(cat => (
             <button
               key={cat}
               onClick={() => setActiveCategory(cat)}
               style={{
-                padding: '12px 25px', borderRadius: '30px', border: 'none', cursor: 'pointer',
-                background: activeCategory === cat ? themeColors.accent : themeColors.card,
+                padding: '12px 28px', borderRadius: '40px', border: 'none', cursor: 'pointer',
+                background: activeCategory === cat ? themeColors.accentGradient : 'transparent',
                 color: activeCategory === cat ? '#fff' : themeColors.text,
-                fontWeight: '600', transition: 'all 0.3s ease', whiteSpace: 'nowrap',
-                border: `1px solid ${activeCategory === cat ? themeColors.accent : themeColors.border}`
+                fontWeight: '700', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                whiteSpace: 'nowrap', fontSize: '0.95rem'
               }}
             >
               {cat}
@@ -128,142 +135,136 @@ export default function CustomerMenu() {
           ))}
         </div>
 
-        {/* Menu Grid */}
+        {/* Dynamic Grid */}
         <div style={{ 
           display: 'grid', 
-          gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))', 
-          gap: '30px' 
+          gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', 
+          gap: '40px' 
         }}>
           {filteredItems.map(item => (
-            <div key={item.id} className="glass-card" style={{ 
-              padding: '0', overflow: 'hidden', border: `1px solid ${themeColors.border}`,
-              background: themeColors.card, position: 'relative', transition: 'transform 0.3s ease'
-            }} onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-10px)'} onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
+            <div key={item.id} style={{ 
+              background: themeColors.card, borderRadius: '30px', overflow: 'hidden',
+              border: `1px solid ${themeColors.border}`, transition: 'all 0.4s ease',
+              position: 'relative'
+            }} className="menu-card-hover">
               
-              {/* Dish Image */}
-              <div style={{ height: '240px', overflow: 'hidden', position: 'relative' }}>
+              {/* Image Container */}
+              <div style={{ height: '300px', overflow: 'hidden', position: 'relative' }}>
                 <img 
                   src={item.image || 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&q=80&w=1760'} 
                   alt={item.name} 
-                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.6s ease' }}
+                  className="card-image"
                 />
                 <div style={{ 
-                  position: 'absolute', top: '15px', right: '15px', 
-                  background: 'rgba(0,0,0,0.6)', color: '#fff', padding: '5px 15px', 
-                  borderRadius: '20px', fontWeight: '800', fontSize: '1.1rem', backdropFilter: 'blur(5px)'
+                  position: 'absolute', top: '20px', right: '20px', 
+                  background: 'rgba(0,0,0,0.8)', color: '#fff', padding: '8px 20px', 
+                  borderRadius: '30px', fontWeight: '900', fontSize: '1.2rem', backdropFilter: 'blur(10px)',
+                  boxShadow: '0 10px 20px rgba(0,0,0,0.2)'
                 }}>
                   ${item.price}
                 </div>
+                {item.category === 'Fuertes' && (
+                  <div style={{ 
+                    position: 'absolute', top: '20px', left: '20px', 
+                    background: themeColors.accentGradient, color: '#fff', padding: '5px 15px', 
+                    borderRadius: '30px', fontSize: '0.7rem', fontWeight: '800', textTransform: 'uppercase'
+                  }}>
+                    Popular
+                  </div>
+                )}
               </div>
 
-              {/* Dish Details */}
-              <div style={{ padding: '25px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '10px' }}>
-                  <span style={{ fontSize: '0.75rem', textTransform: 'uppercase', color: themeColors.accent, fontWeight: '800', letterSpacing: '1px' }}>{item.category}</span>
+              {/* Content Container */}
+              <div style={{ padding: '35px' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '15px' }}>
+                  <div>
+                    <h3 style={{ fontSize: '1.8rem', fontWeight: '800', marginBottom: '8px' }}>{item.name}</h3>
+                    <div style={{ display: 'flex', gap: '15px', color: themeColors.muted, fontSize: '0.85rem' }}>
+                      <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}><Clock size={14} /> 25 min</span>
+                      <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}><ChefHat size={14} /> Chef Selection</span>
+                    </div>
+                  </div>
                 </div>
-                <h3 style={{ fontSize: '1.4rem', fontWeight: '700', marginBottom: '10px' }}>{item.name}</h3>
-                <p style={{ color: themeColors.muted, fontSize: '0.95rem', lineHeight: '1.6' }}>Preparado con ingredientes frescos de la estación y el toque secreto de nuestro chef.</p>
-                <div style={{ marginTop: '20px', display: 'flex', gap: '15px' }}>
-                  <span style={{ fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '5px', color: themeColors.muted }}>
-                    <ChefHat size={16} /> Especialidad
-                  </span>
-                  <span style={{ fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '5px', color: themeColors.muted }}>
-                    <Clock size={16} /> 20 min
-                  </span>
+                <p style={{ color: themeColors.muted, fontSize: '1rem', lineHeight: '1.6', marginBottom: '25px' }}>
+                  Preparado magistralmente con técnicas artesanales y los mejores ingredientes seleccionados para garantizar una explosión de sabor.
+                </p>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                   <div style={{ display: 'flex', gap: '5px' }}>
+                      {[1,2,3,4,5].map(s => <Star key={s} size={14} fill={themeColors.accent} color={themeColors.accent} />)}
+                   </div>
+                   <button 
+                    onClick={() => setCartCount(c => c + 1)}
+                    style={{ 
+                      background: themeColors.accentGradient, border: 'none', color: '#fff', 
+                      width: '45px', height: '45px', borderRadius: '15px', cursor: 'pointer',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      boxShadow: '0 10px 20px rgba(255,107,107,0.2)'
+                    }}>
+                     <Plus size={24} />
+                   </button>
                 </div>
               </div>
             </div>
           ))}
         </div>
-      </section>
-
-      {/* Feedback Section */}
-      <section style={{ maxWidth: '800px', margin: '100px auto', padding: '40px', textAlign: 'center' }}>
-          <div className="glass-card" style={{ padding: '3rem', border: `1px solid ${themeColors.border}`, background: themeColors.card }}>
-              {submitted ? (
-                  <div className="animate-fade-in">
-                      <Star size={50} color={themeColors.accent} fill={themeColors.accent} style={{ marginBottom: '1rem' }} />
-                      <h2 style={{ fontSize: '2rem', fontWeight: '800' }}>¡Gracias por tu Feedback!</h2>
-                      <p style={{ color: themeColors.muted, marginTop: '1rem' }}>Tu opinión nos ayuda a mejorar cada día.</p>
-                  </div>
-              ) : (
-                  <>
-                      <h2 style={{ fontSize: '2rem', fontWeight: '800', marginBottom: '1rem' }}>¿Qué te pareció tu visita?</h2>
-                      <p style={{ color: themeColors.muted, marginBottom: '2rem' }}>Déjanos tu comentario para seguir brindando la mejor calidad.</p>
-                      
-                      <div style={{ display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '2rem' }}>
-                          {[1,2,3,4,5].map(star => (
-                              <button 
-                                key={star} 
-                                onClick={() => setFeedback({...feedback, rating: star})}
-                                style={{ background: 'none', border: 'none', cursor: 'pointer', transition: 'transform 0.2s' }}
-                                onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.2)'}
-                                onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
-                              >
-                                  <Star size={32} color={star <= feedback.rating ? themeColors.accent : themeColors.muted} fill={star <= feedback.rating ? themeColors.accent : 'transparent'} />
-                              </button>
-                          ))}
-                      </div>
+      </main>
 
-                      <textarea 
-                          placeholder="Escribe tu comentario aquí..."
-                          value={feedback.comment}
-                          onChange={(e) => setFeedback({...feedback, comment: e.target.value})}
-                          style={{
-                              width: '100%', height: '120px', borderRadius: '15px', padding: '1.5rem',
-                              background: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
-                              border: `1px solid ${themeColors.border}`, color: themeColors.text,
-                              outline: 'none', fontSize: '1rem', marginBottom: '1.5rem'
-                          }}
-                      />
-
-                      <button 
-                        onClick={async () => {
-                            if (!feedback.comment) return;
-                            const fRef = push(ref(db, 'feedback'));
-                            await set(fRef, { ...feedback, timestamp: Date.now() });
-                            setSubmitted(true);
-                        }}
-                        className="btn-primary" 
-                        style={{ padding: '15px 40px', borderRadius: '30px', display: 'flex', alignItems: 'center', gap: '10px', margin: '0 auto' }}
-                      >
-                        <Send size={18} /> Enviar Comentario
-                      </button>
-                  </>
-              )}
+      {/* QR & Info Section */}
+      <section style={{ 
+        background: isDark ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.02)',
+        padding: '100px 40px', borderTop: `1px solid ${themeColors.border}`
+      }}>
+        <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '100px', alignItems: 'center' }}>
+          <div>
+            <h2 style={{ fontSize: '3rem', fontWeight: '900', marginBottom: '2rem', lineHeight: '1' }}>Lleva el menú en tu bolsillo.</h2>
+            <p style={{ fontSize: '1.2rem', color: themeColors.muted, marginBottom: '2.5rem' }}>
+              Escanea el código QR para acceder a nuestra carta digital actualizada en tiempo real, ver promociones exclusivas y realizar tu pedido.
+            </p>
+            <div style={{ display: 'flex', gap: '30px' }}>
+              <div style={{ textAlign: 'center' }}>
+                <div style={{ fontSize: '2.5rem', fontWeight: '900', color: themeColors.accent }}>100%</div>
+                <div style={{ fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: '700' }}>Digital</div>
+              </div>
+              <div style={{ textAlign: 'center' }}>
+                <div style={{ fontSize: '2.5rem', fontWeight: '900', color: themeColors.accent }}>0</div>
+                <div style={{ fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: '700' }}>Contacto</div>
+              </div>
+              <div style={{ textAlign: 'center' }}>
+                <div style={{ fontSize: '2.5rem', fontWeight: '900', color: themeColors.accent }}>24/7</div>
+                <div style={{ fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: '700' }}>Soporte</div>
+              </div>
+            </div>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <div className="glass-card" style={{ padding: '40px', borderRadius: '40px', position: 'relative' }}>
+               <img src="/images/qr_menu.png" alt="QR Code" style={{ width: '300px', borderRadius: '20px' }} />
+               <div style={{ position: 'absolute', top: '-20px', right: '-20px', background: themeColors.accentGradient, padding: '15px', borderRadius: '50%', color: '#fff', fontWeight: '900' }}>SCAN</div>
+            </div>
           </div>
+        </div>
       </section>
 
-      {/* Footer */}
-      <footer style={{ 
-        padding: '80px 20px', borderTop: `1px solid ${themeColors.border}`, 
-        background: isDark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.02)', textAlign: 'center' 
-      }}>
-        <div style={{ maxWidth: '600px', margin: '0 auto' }}>
-          <h2 style={{ fontSize: '1.8rem', fontWeight: '900', marginBottom: '1.5rem' }}>Restaurant OS</h2>
-          <p style={{ color: themeColors.muted, marginBottom: '30px' }}>Siguenos en nuestras redes sociales para estar al tanto de nuestras promociones y eventos especiales.</p>
-          <div style={{ display: 'flex', justifyContent: 'center', gap: '20px' }}>
-            <button onClick={() => {}} style={{ background: 'none', border: 'none', color: themeColors.text, cursor: 'pointer' }}><Instagram size={24} /></button>
-            <button onClick={() => {}} style={{ background: 'none', border: 'none', color: themeColors.text, cursor: 'pointer' }}><Facebook size={24} /></button>
+      {/* Modern Footer */}
+      <footer style={{ padding: '100px 40px', borderTop: `1px solid ${themeColors.border}`, textAlign: 'center' }}>
+        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+          <img src="/images/logo.png" alt="Logo" style={{ height: '60px', marginBottom: '30px', filter: isDark ? 'invert(0)' : 'invert(1)' }} />
+          <h2 style={{ fontSize: '2.5rem', fontWeight: '900', marginBottom: '1.5rem' }}>RESTAURANT OS</h2>
+          <p style={{ color: themeColors.muted, fontSize: '1.1rem', marginBottom: '40px' }}>
+            Donde la innovación se encuentra con la tradición culinaria. Únete a nuestra comunidad para recibir noticias y eventos.
+          </p>
+          <div style={{ display: 'flex', justifyContent: 'center', gap: '30px', marginBottom: '60px' }}>
+            <Instagram size={32} style={{ cursor: 'pointer', transition: 'transform 0.3s' }} />
+            <Facebook size={32} style={{ cursor: 'pointer', transition: 'transform 0.3s' }} />
+            <MessageSquare size={32} style={{ cursor: 'pointer', transition: 'transform 0.3s' }} />
           </div>
-          <div style={{ marginTop: '50px', fontSize: '0.85rem', color: themeColors.muted }}>
-            © {new Date().getFullYear()} Gourmet Experience. Todos los derechos reservados.
+          <div style={{ fontSize: '0.9rem', color: themeColors.muted, borderTop: `1px solid ${themeColors.border}`, paddingTop: '40px' }}>
+            © {new Date().getFullYear()} Restaurant OS Premium Management System. Designed with Passion.
           </div>
         </div>
       </footer>
 
-      {/* Admin Quick Back (Floating) */}
-      <button 
-        onClick={() => navigate('/login')}
-        style={{
-          position: 'fixed', bottom: '30px', right: '30px', width: '50px', height: '50px', borderRadius: '50%',
-          background: themeColors.accent, color: '#fff', border: 'none', cursor: 'pointer',
-          boxShadow: '0 10px 20px rgba(0,0,0,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100
-        }}
-        title="Admin Login"
-      >
-        <Utensils size={24} />
-      </button>
     </div>
   );
 }
+