https://meepdelivery.com/beneficios/

1<!DOCTYPE html>
2<html lang="es">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Beneficios Meep | Meep Delivery</title>
7
8<link rel="preconnect" href="https://fonts.googleapis.com">
9<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
10<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
13<link rel="stylesheet" href="../assets/css/global.css">
14<link rel="stylesheet" href="../assets/css/navbar.css">
15<link rel="stylesheet" href="../assets/css/buttons.css">
16<link rel="stylesheet" href="../assets/css/animations.css">
17<link rel="stylesheet" href="../assets/css/footer.css">
18<link rel="stylesheet" href="../assets/css/app.css">
19<link rel="stylesheet" href="../assets/css/beneficios.css">
20<link rel="stylesheet" href="../assets/css/meepflow/variables.css">
21<link rel="stylesheet" href="../assets/css/meepflow/components.css">
22<link rel="stylesheet" href="../assets/css/meepflow/components/card.css">
23<link rel="stylesheet" href="../assets/css/meepflow/components/typography.css">
24<link rel="stylesheet" href="../assets/css/meepflow/components/info.css">
25<link rel="stylesheet" href="../assets/css/meepflow/components/button.css">
26<link rel="stylesheet" href="../assets/css/meepflow/components/field.css">
27<link rel="stylesheet" href="../assets/css/meepflow/components/input.css">
28<link rel="stylesheet" href="../assets/css/meepflow/components/uploader.css">
29<link rel="stylesheet" href="../assets/css/meepflow/components/confirmation.css">
30
31<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
32<link rel="stylesheet" href="../assets/css/meepflow/meepflow.css">
33
34
35
36</head>
37<body>
38
39<header class="header">
40<div class="container navbar">
41<a href="../index.html" class="logo">
42<img src="../assets/img/logos/logo-light.png" alt="Meep Delivery - Plataforma tecnológica mexicana">
43</a>
44
45<nav class="nav-menu">
46    <a href="../soluciones/">Soluciones</a>
47    <a href="../nosotros/">Nosotros</a>
48    <a href="../beneficios/">Beneficios Meep</a>
49    <a href="../puntomeep/">Punto Meep</a>
50    <a href="../comercios/">Comercios</a>
51    <a href="../repartidores/">Repartidores</a>
52    <a href="../contacto/">Contacto</a>
53    <a href="../login/">Login</a>
54    <a href="https://onelink.to/44w7gv" class="btn" target="_blank" rel="noopener noreferrer">Descargar App</a>
55</nav>
56
57<div class="nav-right">
58    <button class="menu-toggle" id="menuToggle" type="button" aria-label="Abrir menú" aria-expanded="false">
59        <span></span><span></span><span></span>
60    </button>
61</div>
62</div>
63</header>
64
65
66
67
68<main class="beneficios">
69
70    
71<section class="beneficios-presentacion" aria-labelledby="beneficios-presentacion-title">
72    <div class="beneficios-presentacion-container">
73
74        <div class="beneficios-presentacion-copy">
75            <span class="beneficios-presentacion-eyebrow">BENEFICIOS MEEP</span>
76
77            <h1 id="beneficios-presentacion-title">
78                Beneficios que conectan,
79                <strong>oportunidades que crecen.</strong>
80            </h1>
81
82            <p class="beneficios-presentacion-lead">
83                Un espacio donde los comercios pueden ofrecer beneficios
84                y nuestra comunidad puede descubrirlos y disfrutarlos.
85            </p>
86
87            <div class="beneficios-audiencias">
88                <article class="beneficio-audiencia">
89                    <div class="beneficio-audiencia-icon" aria-hidden="true">
90                        <i class="fa-solid fa-user"></i>
91                    </div>
92                    <div>
93                        <h2>Si eres cliente</h2>
94                        <p>Disfruta promociones, descuentos y beneficios especiales de los comercios participantes.</p>
95                    </div>
96                </article>
97
98                <article class="beneficio-audiencia">
99                    <div class="beneficio-audiencia-icon" aria-hidden="true">
100                        <i class="fa-solid fa-store"></i>
101                    </div>
102                    <div>
103                        <h2>Si eres comercio</h2>
104                        <p>Ofrece beneficios, llega a más personas y haz que nuevos clientes conozcan tu negocio.</p>
105                    </div>
106                </article>
107            </div>
108
109            <p class="beneficios-slogan">
110                Con <strong>Beneficios Meep</strong>, nos beneficiamos todos.
111            </p>
112
113            <a class="beneficios-cta" href="#beneficios-intro">
114                Quiero ofrecer un beneficio <span aria-hidden="true">↓</span>
115            </a>
116        </div>
117
118        <div class="beneficios-presentacion-visual">
119            <div class="beneficios-visual-glow" aria-hidden="true"></div>
120            <img src="/assets/img/beneficios/mochila.png"
121                 alt="Mochila de Meep Delivery"
122                 class="beneficios-mochila">
123        </div>
124
125    </div>
126</section>
127
128<section class="flow-container">
129

130        <div class="flow-card" id="beneficios-intro">
131
132            <div class="flow-header">
133			
134			<div class="flow-brand">
135			</div>
136
137<div class="flow-info">
138
139   <div class="flow-info-intro">
140
141    <span class="beneficios-registro-eyebrow">COMIENZA AQUÍ</span>
142    <h2 class="flow-info-title">Registra tu beneficio</h2>
143
144    <p class="flow-info-text">
145
146        <strong>Beneficios Meep</strong> es un programa que permite a <strong>cualquier negocio, sin importar su giro o si forma parte de Meep Delivery</strong>, ofrecer promociones, descuentos o beneficios exclusivos a nuestra comunidad.
147
148    </p>
149	</div>
150	
151	<div class="flow-info-benefits">
152
153        <h4 class="flow-info-subtitle">
154
155            ¿Por qué participar?
156
157        </h4>
158
159    <div class="flow-info-grid">
160
161        <div class="flow-info-item">
162
163            Cualquier giro comercial
164
165        </div>
166
167        <div class="flow-info-item">
168
169            Sin costo de inscripción
170
171        </div>
172
173        <div class="flow-info-item">
174
175            Tú decides el beneficio
176
177        </div>
178
179        <div class="flow-info-item">
180
181            Sin comisiones por venta
182
183        </div>
184
185        <div class="flow-info-item">
186
187            Tú defines la vigencia
188
189        </div>
190
191        <div class="flow-info-item">
192
193            Sin anualidades
194
195        </div>
196
197        <div class="flow-info-item">
198
199            Tú estableces las condiciones
200
201        </div>
202
203        <div class="flow-info-item">
204
205            Nosotros lo publicamos
206
207        </div>
208
209    </div>
210	</div>
211	
212	 <div class="flow-info-action">
213
214    <p class="flow-info-footer">
215
216               <strong>Registra tu negocio en menos de 2 minutos.</strong>
217
218    </p>
219	
220<div class="flow-info-action-button">
221
222    <button
223        id="btn-comenzar-beneficios"
224        class="flow-button flow-button-primary"
225        type="button"
226    >
227        Comenzar →
228    </button>
229
230</div>
231
232</div>
233
234</div>
235
236            </div>
237            
238            </div> <!-- cierre de flow-card -->
239
240    
241    <div id="meepflow-container" class="meepflow-container" hidden>
242
243    <div id="meepflow-app"></div>
244    
245    </div>
246
247</section>
248
249</main>
250
251
252
253
254
255
256<footer class="footer">
257<div class="container">
258<div class="footer-grid">
259<div class="footer-logo">
260<img src="../assets/img/logos/logo-light.png" alt="Meep Delivery">
261<p>Impulsamos el comercio local mediante soluciones inteligentes de logística y entregas de última milla.</p>
262</div>
263<div>
264<h3>Empresa</h3>
265<ul>
266<li><a href="../index.html">Inicio</a></li>
267<li><a href="../contacto/">Contacto</a></li>
268</ul>
269</div>
270<div>
271<h3>Legales</h3>
272<ul>
273<li><a href="../legales/">Centro Legal</a></li>
274<li><a href="aviso-privacidad.html">Aviso de Privacidad</a></li>
275<li><a href="terminos-usuarios.html">Términos y Condiciones</a></li>
276</ul>
277</div>
278</div>
279
280<div class="footer-bottom">
281<div class="footer-copy">© 2026 Meep Delivery. Todos los derechos reservados.</div>
282<div class="footer-country">Hecho en México 🇲🇽</div>
283</div>
284</div>
285</footer>
286

287<script src="../assets/js/menu.js"></script>

287
288
289
290<!-- =========================================
291     MEEP FLOW
292========================================= -->
293

294<script src="../assets/js/meepflow/components/FlowComponent.js"></script>

294

295<script src="../assets/js/meepflow/components/FlowCard.js"></script>

295

296<script src="../assets/js/meepflow/components/FlowField.js"></script>

296

297<script src="../assets/js/meepflow/components/FlowInput.js"></script>

297

298<script src="../assets/js/meepflow/components/FlowSelect.js"></script>

298

299<script src="../assets/js/meepflow/components/FlowUploader.js"></script>

299
300

301<script src="../assets/js/meepflow/MeepStorage.js"></script>

301

302<script src="../assets/js/meepflow/MeepFlow.js"></script>

302
303

304<script src="../assets/js/meepflow/screens/BusinessScreen.js"></script>

304

305<script src="../assets/js/meepflow/screens/LocationScreen.js"></script>

305

306<script src="../assets/js/meepflow/screens/BenefitConfigScreen.js"></script>

306

307<script src="../assets/js/meepflow/screens/ConfirmationScreen.js"></script>

307
308

309<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

309
310
311

312<script>
313
314document
315    .getElementById("btn-comenzar-beneficios")
316    .addEventListener("click", function () {
317
318        console.log("🟡 Iniciando Beneficios Meep...");
319
320        const intro = document.getElementById("beneficios-intro");
321        const container = document.getElementById("meepflow-container");
322        const app = document.getElementById("meepflow-app");
323        
324        
325        // Colocamos el formulario exactamente en el lugar
326        // que ocupaba la introducción
327        intro.parentNode.insertBefore(container, intro);
328
329        // Ocultamos la introducción
330        intro.hidden = true;
331        
332
333        // Mostramos MeepFlow
334        container.hidden = false;
335
336        // Storage
337        const storage = new MeepStorage();
338
339        // Motor MeepFlow
340        const flow = new MeepFlow(
341            storage,
342            app
343        );
344
345        // Pantallas
346        const businessScreen = new BusinessScreen(flow);
347
348        const locationScreen = new LocationScreen(flow);
349
350        const benefitConfigScreen =
351            new BenefitConfigScreen(flow);
352
353        const confirmationScreen =
354            new ConfirmationScreen(flow);
355
356        // Registrar flujo
357        flow.setSteps([
358            businessScreen,
359            locationScreen,
360            benefitConfigScreen,
361            confirmationScreen
362        ]);
363
364        console.log(
365            "🚀 Beneficios Meep iniciado",
366            flow.getData()
367        );
368
369        // Renderizar primera pantalla
370        flow.renderCurrentScreen();
371        
372       console.log("ANTES:", window.scrollY);
373
374setTimeout(() => {
375    console.log("DESPUÉS:", window.scrollY);
376}, 500);
377        
378        
379
380    });
381
382</script>

382
383
384</body>
385</html>