Update menu to white background, add history section and 13 example products

src/components/admin/DashboardOverview.jsx

@@ -25,14 +25,25 @@ export default function DashboardOverview() {
   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ú
+    // 1. Sembrar Menú (8 Productos + 5 Especialidades)
     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: [] }
+      // Productos (8)
+      { name: 'Hamburgesa Clásica', price: 12.50, category: 'Fuertes', image: '/images/burger.png', active: true },
+      { name: 'Pasta Pomodoro', price: 10.00, category: 'Pasta', image: '/images/pasta.png', active: true },
+      { name: 'Tacos de Pollo', price: 9.00, category: 'Entradas', image: '/images/tacos.png', active: true },
+      { name: 'Pizza Margherita', price: 14.00, category: 'Pizzas', image: '/images/pizza.png', active: true },
+      { name: 'Ensalada César', price: 8.50, category: 'Entradas', image: 'https://images.unsplash.com/photo-1550304943-4f24f54ddde9?auto=format&fit=crop&q=80&w=1000', active: true },
+      { name: 'Sopa de Tomate', price: 7.00, category: 'Entradas', image: 'https://images.unsplash.com/photo-1547592166-23ac45744acd?auto=format&fit=crop&q=80&w=1000', active: true },
+      { name: 'Sandwich Gourmet', price: 11.00, category: 'Fuertes', image: 'https://images.unsplash.com/photo-1528735602780-2552fd46c7af?auto=format&fit=crop&q=80&w=1000', active: true },
+      { name: 'Chocolate Muffin', price: 4.50, category: 'Postres', image: 'https://images.unsplash.com/photo-1582231222779-1adb0b322f84?auto=format&fit=crop&q=80&w=1000', active: true },
+      
+      // Especialidades (5)
+      { name: 'Ribeye Premium', price: 35.00, category: 'Especialidades', image: '/images/steak.png', active: true },
+      { name: 'Risotto de Trufa', price: 28.00, category: 'Especialidades', image: '/images/risotto.png', active: true },
+      { name: 'Salmón Glaseado', price: 26.00, category: 'Especialidades', image: 'https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=1000', active: true },
+      { name: 'Pato a la Naranja', price: 32.00, category: 'Especialidades', image: 'https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?auto=format&fit=crop&q=80&w=1000', active: true },
+      { name: 'Langosta Thermidor', price: 45.00, category: 'Especialidades', image: 'https://images.unsplash.com/photo-1553243599-c052f82958d2?auto=format&fit=crop&q=80&w=1000', active: true }
     ];
     for (const item of menuExamples) { await set(push(menuRef), item); }
 

src/pages/CustomerMenu.jsx

@@ -37,12 +37,15 @@ export default function CustomerMenu() {
     : menuItems.filter(item => item.category === activeCategory);
 
   const isDark = menuTheme === 'dark';
+  // Forzamos modo claro si el usuario lo pidió, o usamos el tema de la DB
+  const forceLight = true; 
+  
   const themeColors = {
-    bg: isDark ? '#050505' : '#f8f9fa',
-    text: isDark ? '#ffffff' : '#1a1a1a',
-    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)',
+    bg: forceLight ? '#ffffff' : (isDark ? '#050505' : '#f8f9fa'),
+    text: forceLight ? '#1a1a1a' : (isDark ? '#ffffff' : '#1a1a1a'),
+    muted: forceLight ? '#666666' : (isDark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'),
+    card: forceLight ? '#ffffff' : (isDark ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.8)'),
+    border: forceLight ? '#eeeeee' : (isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'),
     accent: '#FF6B6B',
     accentGradient: 'linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%)'
   };
@@ -61,14 +64,15 @@ export default function CustomerMenu() {
       <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}`
+        background: 'rgba(255,255,255,0.8)', backdropFilter: 'blur(20px)', borderBottom: `1px solid ${themeColors.border}`,
+        boxShadow: '0 2px 20px rgba(0,0,0,0.05)'
       }}>
         <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>
+          <img src="/images/logo.png" alt="Logo" style={{ height: '40px', filter: 'invert(1)' }} />
+          <span style={{ fontSize: '1.5rem', fontWeight: '900', letterSpacing: '-1px', color: '#1a1a1a' }}>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={{ display: 'flex', gap: '15px', color: '#1a1a1a' }}>
+          <button onClick={() => navigate('/login')} style={{ background: 'none', border: 'none', color: 'inherit', 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>}
@@ -76,57 +80,62 @@ export default function CustomerMenu() {
         </div>
       </header>
 
-      {/* Hero Section with Parallax Effect */}
+      {/* Hero Section */}
       <section style={{ 
-        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')`,
+        height: '70vh', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        background: `linear-gradient(rgba(255,255,255,0.4), #ffffff), url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=2070')`,
         backgroundSize: 'cover', backgroundPosition: 'center', backgroundAttachment: 'fixed'
       }}>
         <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 style={{ fontSize: '5rem', fontWeight: '900', marginBottom: '1.5rem', letterSpacing: '-3px', lineHeight: '0.9', color: '#1a1a1a' }}>
+            Nuestra <span style={{color: themeColors.accent}}>Historia</span> y Sabor.
           </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 style={{ fontSize: '1.4rem', color: '#666', maxWidth: '700px', margin: '0 auto', lineHeight: '1.5' }}>
+            Desde 1995, fusionando la tradición culinaria con la innovación moderna.
           </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>
+      </section>
+
+      {/* History Section */}
+      <section style={{ padding: '100px 40px', background: '#fff' }}>
+        <div style={{ maxWidth: '1000px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px', alignItems: 'center' }}>
+          <div style={{ borderRadius: '30px', overflow: 'hidden', boxShadow: '0 30px 60px rgba(0,0,0,0.1)' }}>
+            <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=1000" alt="History" style={{ width: '100%', display: 'block' }} />
+          </div>
+          <div>
+            <h2 style={{ fontSize: '2.5rem', fontWeight: '900', marginBottom: '1.5rem', color: '#1a1a1a' }}>Un Legado de Pasión</h2>
+            <p style={{ color: '#666', fontSize: '1.1rem', lineHeight: '1.8', marginBottom: '1.5rem' }}>
+              Lo que comenzó como un pequeño bistro familiar en el corazón de la ciudad, se ha transformado en un referente de la gastronomía contemporánea.
+            </p>
+            <p style={{ color: '#666', fontSize: '1.1rem', lineHeight: '1.8' }}>
+              Nuestra misión es simple: servir felicidad en cada plato, respetando los ingredientes y celebrando la creatividad de nuestro equipo.
+            </p>
           </div>
         </div>
       </section>
 
-      {/* Main Content Area */}
+      {/* Main Menu Area */}
       <main style={{ maxWidth: '1400px', margin: '0 auto', padding: '80px 40px' }}>
         
-        {/* Categories Navigation */}
+        <div style={{ textAlign: 'center', marginBottom: '60px' }}>
+          <h2 style={{ fontSize: '3rem', fontWeight: '900', color: '#1a1a1a' }}>Nuestra Carta Digital</h2>
+          <div style={{ width: '80px', height: '5px', background: themeColors.accentGradient, margin: '20px auto', borderRadius: '10px' }}></div>
+        </div>
+
+        {/* Categories */}
         <div style={{ 
-          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'
+          display: 'flex', justifyContent: 'center', gap: '12px', marginBottom: '60px',
+          padding: '10px', overflowX: 'auto'
         }}>
           {categories.map(cat => (
             <button
               key={cat}
               onClick={() => setActiveCategory(cat)}
               style={{
-                padding: '12px 28px', borderRadius: '40px', border: 'none', cursor: 'pointer',
-                background: activeCategory === cat ? themeColors.accentGradient : 'transparent',
-                color: activeCategory === cat ? '#fff' : themeColors.text,
-                fontWeight: '700', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                padding: '12px 28px', borderRadius: '40px', border: activeCategory === cat ? 'none' : '1px solid #ddd', cursor: 'pointer',
+                background: activeCategory === cat ? themeColors.accentGradient : '#fff',
+                color: activeCategory === cat ? '#fff' : '#666',
+                fontWeight: '700', transition: 'all 0.3s ease',
                 whiteSpace: 'nowrap', fontSize: '0.95rem'
               }}
             >
@@ -135,73 +144,51 @@ export default function CustomerMenu() {
           ))}
         </div>
 
-        {/* Dynamic Grid */}
+        {/* Menu Grid */}
         <div style={{ 
           display: 'grid', 
-          gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', 
+          gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))', 
           gap: '40px' 
         }}>
           {filteredItems.map(item => (
             <div key={item.id} style={{ 
-              background: themeColors.card, borderRadius: '30px', overflow: 'hidden',
-              border: `1px solid ${themeColors.border}`, transition: 'all 0.4s ease',
+              background: '#fff', borderRadius: '30px', overflow: 'hidden',
+              border: '1px solid #eee', transition: 'all 0.4s ease',
+              boxShadow: '0 10px 30px rgba(0,0,0,0.03)',
               position: 'relative'
             }} className="menu-card-hover">
               
-              {/* Image Container */}
-              <div style={{ height: '300px', overflow: 'hidden', position: 'relative' }}>
+              <div style={{ height: '280px', 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', transition: 'transform 0.6s ease' }}
-                  className="card-image"
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                 />
                 <div style={{ 
                   position: 'absolute', top: '20px', right: '20px', 
-                  background: 'rgba(0,0,0,0.8)', color: '#fff', padding: '8px 20px', 
+                  background: 'rgba(255,255,255,0.9)', color: '#1a1a1a', padding: '8px 20px', 
                   borderRadius: '30px', fontWeight: '900', fontSize: '1.2rem', backdropFilter: 'blur(10px)',
-                  boxShadow: '0 10px 20px rgba(0,0,0,0.2)'
+                  boxShadow: '0 10px 20px rgba(0,0,0,0.05)'
                 }}>
                   ${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>
 
-              {/* 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>
-                <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.
+              <div style={{ padding: '30px' }}>
+                <h3 style={{ fontSize: '1.6rem', fontWeight: '800', marginBottom: '10px', color: '#1a1a1a' }}>{item.name}</h3>
+                <p style={{ color: '#666', fontSize: '0.95rem', lineHeight: '1.6', marginBottom: '20px' }}>
+                  Una delicia preparada con ingredientes frescos para deleitar tu paladar.
                 </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>
+                   <span style={{ fontSize: '0.8rem', color: themeColors.accent, fontWeight: '800', textTransform: 'uppercase' }}>{item.category}</span>
                    <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)'
+                      background: '#f5f5f5', border: 'none', color: '#1a1a1a', 
+                      width: '40px', height: '40px', borderRadius: '12px', cursor: 'pointer',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center'
                     }}>
-                     <Plus size={24} />
+                     <Plus size={20} />
                    </button>
                 </div>
               </div>
@@ -210,56 +197,13 @@ export default function CustomerMenu() {
         </div>
       </main>
 
-      {/* 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>
-
       {/* 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={{ fontSize: '0.9rem', color: themeColors.muted, borderTop: `1px solid ${themeColors.border}`, paddingTop: '40px' }}>
-            © {new Date().getFullYear()} Restaurant OS Premium Management System. Designed with Passion.
+      <footer style={{ padding: '80px 40px', borderTop: '1px solid #eee', textAlign: 'center', background: '#fafafa' }}>
+        <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+          <h2 style={{ fontSize: '2rem', fontWeight: '900', marginBottom: '1rem', color: '#1a1a1a' }}>RESTAURANT OS</h2>
+          <p style={{ color: '#666', marginBottom: '30px' }}>Pasión por la cocina, amor por el servicio.</p>
+          <div style={{ fontSize: '0.85rem', color: '#999' }}>
+            © {new Date().getFullYear()} Gourmet Experience. Todos los derechos reservados.
           </div>
         </div>
       </footer>
@@ -268,3 +212,4 @@ export default function CustomerMenu() {
   );
 }
 
+