Grocery Delivery App Builder

.device-cluster { position: relative; height: 560px;  overflow: hidden; }

/* ═══════════════════════════════════════
           DESKTOP — Light Luxury Dashboard
           ═══════════════════════════════════════ */
        .cyber-desktop { position: absolute; top: 0; left: 0; width: 480px; z-index: 3; }
        .cyber-desktop .frame { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px 6px 0; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.04); }
        .cyber-desktop .toolbar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; }
        .cyber-desktop .dot { width: 7px; height: 7px; border-radius: 50%; }
        .cyber-desktop .dot-r { background: #ff5f56; }
        .cyber-desktop .dot-y { background: #ffbd2e; }
        .cyber-desktop .dot-g { background: #27c93f; }
        .cyber-desktop .url-bar { flex: 1; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 3px 10px; font-family: 'Inter', sans-serif; font-size: 8px; color: #9ca3af; margin-left: 8px; letter-spacing: 0.3px; }
        .cyber-desktop .screen { border-radius: 0 0 8px 8px; min-height: 260px; background: #f9fafb; }
        .cyber-desktop .dk-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 10px; border-bottom: 1px solid #e5e7eb; background: #ffffff; }
        .cyber-desktop .dk-header h4 { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #111827; letter-spacing: -0.2px; }
        .cyber-desktop .dk-add { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; background: #7c3aed; border: none; color: #ffffff; padding: 4px 12px; border-radius: 6px; }
        .cyber-desktop .dk-body { display: flex; }
        .cyber-desktop .dk-sidebar { width: 40px; background: #ffffff; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; border-right: 1px solid #f3f4f6; }
        .cyber-desktop .dk-sidebar .si { font-size: 14px; opacity: 0.3; color: #6b7280; }
        .cyber-desktop .dk-sidebar .si.active { opacity: 1; color: #7c3aed; }
        .cyber-desktop .dk-kanban { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; overflow: hidden; }
        .cyber-desktop .dk-col { min-width: 0; }
        .cyber-desktop .glass-col-header { font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; padding: 5px 6px; border-radius: 6px; margin-bottom: 5px; color: #6b7280; background: #f3f4f6; }
        .cyber-desktop .glass-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; margin-bottom: 5px; transition: box-shadow 0.2s, border-color 0.2s; }
        .cyber-desktop .glass-card:hover { border-color: #c4b5fd; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08); }
        .cyber-desktop .glass-name { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #111827; margin-bottom: 2px; }
        .cyber-desktop .glass-price { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: #7c3aed; margin-bottom: 2px; }
        .cyber-desktop .glass-sub { font-family: 'Inter', sans-serif; font-size: 7px; color: #9ca3af; }
        .cyber-desktop .glass-tag { display: inline-block; font-family: 'Inter', sans-serif; font-size: 6px; font-weight: 700; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.5px; margin-top: 3px; }
        .cyber-desktop .glass-tag-new { background: #ede9fe; color: #7c3aed; }
        .cyber-desktop .glass-tag-sale { background: #fce7f3; color: #db2777; }
        .cyber-desktop .glass-tag-pop { background: #fef3c7; color: #d97706; }
        .cyber-desktop .glass-tag-ok { background: #d1fae5; color: #059669; }
        .cyber-desktop .stand, .cyber-desktop .base { display: none; }

/* ═══════════════════════════════════════
           TABLET — Cyberpunk Neon (iPad style)
           ═══════════════════════════════════════ */
        .cyber-tablet { position: absolute; top: 100px; right: 30px; width: 280px; z-index: 4; }
        .cyber-tablet .frame { background: linear-gradient(160deg, #d4d4d8, #a8a8ad, #c0c0c4, #d4d4d8); border-radius: 18px; padding: 10px; box-shadow: 0 0 30px rgba(255, 0, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255,255,255,0.5); position: relative; }
        .cyber-tablet .tb-camera { width: 5px; height: 5px; background: #1a1a2a; border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; margin: 0 auto 6px; }
        .cyber-tablet .screen { border-radius: 8px; min-height: 320px; font-family: 'Orbitron', monospace; background: #0a0a1a; position: relative; overflow: hidden; display: flex; flex-direction: column; }
        .cyber-tablet .screen::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 240, 255, 0.015) 2px, rgba(0, 240, 255, 0.015) 4px); pointer-events: none; z-index: 2; }
        .cyber-tablet .tb-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; border-bottom: 1px solid rgba(255, 0, 255, 0.1); position: relative; z-index: 3; }
        .cyber-tablet .tb-header h4 { font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700; color: #ff00ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.6); }
        .cyber-tablet .tb-header .neon-items { font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); }
        .cyber-tablet .tb-kanban { display: flex; gap: 6px; padding: 12px 10px; overflow: hidden; position: relative; z-index: 3; flex: 1; }
        .cyber-tablet .neon-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 240, 255, 0.08); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
        .cyber-tablet .neon-card .n-name { font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 3px; }
        .cyber-tablet .neon-card .n-amount { font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700; margin-bottom: 3px; }
        .cyber-tablet .neon-card .n-contact { font-size: 8px; color: rgba(255, 255, 255, 0.3); }
        .cyber-tablet .neon-cyan { color: #00f0ff; text-shadow: 0 0 6px rgba(0, 240, 255, 0.6); }
        .cyber-tablet .neon-magenta { color: #ff00ff; text-shadow: 0 0 6px rgba(255, 0, 255, 0.6); }
        .cyber-tablet .neon-gold { color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); }
        .cyber-tablet .tb-total-row { margin-top: 6px; padding: 8px 10px; border-top: 1px solid rgba(255, 0, 255, 0.15); text-align: right; position: relative; z-index: 3; }
        .cyber-tablet .tb-total-label { font-size: 9px; color: rgba(255, 255, 255, 0.4); font-family: 'Orbitron', monospace; }
        .cyber-tablet .tb-total-amount { font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700; color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); }
        .cyber-tablet .tb-nav { display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid rgba(255, 0, 255, 0.08); position: relative; z-index: 3; margin-top: auto; }
        .cyber-tablet .tb-nav span { font-size: 14px; opacity: 0.3; }
        .cyber-tablet .tb-nav span.active { opacity: 1; }
        .cyber-tablet .tb-home-bar { width: 40px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 3px; margin: 4px auto 2px; position: relative; z-index: 3; }

/* ═══════════════════════════════════════
           PHONE — Light Native App (iPhone style)
           ═══════════════════════════════════════ */
        .cyber-phone { position: absolute; top: 190px; right: 10px; width: 180px; z-index: 5; }
        .cyber-phone .frame { background: linear-gradient(160deg, #d4d4d8, #a8a8ad, #bbbbbe, #d4d4d8); border-radius: 32px; padding: 3px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255,255,255,0.6), inset 0 -0.5px 0 rgba(0,0,0,0.1); position: relative; }
        .cyber-phone .frame::before { content: ''; position: absolute; right: -1.5px; top: 70px; width: 2px; height: 24px; background: linear-gradient(180deg, #b0b0b4, #909094, #b0b0b4); border-radius: 0 2px 2px 0; }
        .cyber-phone .frame::after { content: ''; position: absolute; left: -1.5px; top: 60px; width: 2px; height: 16px; background: linear-gradient(180deg, #b0b0b4, #909094, #b0b0b4); border-radius: 2px 0 0 2px; }
        .cyber-phone .screen-bezel { background: #000; border-radius: 29px; overflow: hidden; }
        .cyber-phone .dynamic-island { width: 40px; height: 10px; background: #000; border-radius: 10px; margin: 0 auto; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 5; }
        .cyber-phone .screen { border-radius: 29px; min-height: 300px; background: #ffffff; overflow: hidden; display: flex; flex-direction: column; position: relative; }
        .cyber-phone .native-status { display: flex; justify-content: space-between; padding: 6px 14px 0; font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 600; color: #1d1d1f; }
        .cyber-phone .native-header { padding: 10px 14px 8px; }
        .cyber-phone .native-header h4 { font-family: -apple-system, 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #111827; letter-spacing: -0.4px; margin: 0 0 2px; }
        .cyber-phone .native-header .native-accent { font-family: -apple-system, 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: #059669; }
        .cyber-phone .native-progress { display: flex; gap: 0; align-items: center; margin: 0 14px 4px; }
        .cyber-phone .progress-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .cyber-phone .progress-line { flex: 1; height: 2px; border-radius: 1px; }
        .cyber-phone .native-progress-labels { display: flex; justify-content: space-between; padding: 0 14px 10px; }
        .cyber-phone .native-progress-labels span { font-family: -apple-system, 'Inter', sans-serif; font-size: 6px; color: #9ca3af; }
        .cyber-phone .native-progress-labels span.active { color: #059669; font-weight: 600; }
        .cyber-phone .native-content { padding: 0 10px; flex: 1; }
        .cyber-phone .native-card { background: #f9fafb; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
        .cyber-phone .native-label { font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
        .cyber-phone .native-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
        .cyber-phone .native-value { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #374151; }
        .cyber-phone .native-price { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 700; color: #374151; text-align: right; }
        .cyber-phone .native-success { color: #059669; }
        .cyber-phone .native-pill { display: inline-block; font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
        .cyber-phone .pill-success { background: #d1fae5; color: #059669; }
        .cyber-phone .native-total { background: #059669; border-radius: 12px; padding: 10px 12px; margin: 2px 0 0; display: flex; justify-content: space-between; align-items: center; }
        .cyber-phone .native-total-label { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.8); }
        .cyber-phone .native-total-amount { font-family: -apple-system, 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #ffffff; }
        .cyber-phone .native-nav { display: flex; justify-content: space-around; padding: 8px 0 6px; margin-top: auto; }
        .cyber-phone .native-nav span { font-size: 13px; opacity: 0.2; color: #6b7280; }
        .cyber-phone .native-nav span.active { opacity: 1; color: #059669; }
        .cyber-phone .home-bar { width: 50px; height: 3px; background: #1d1d1f; border-radius: 3px; margin: 2px auto 4px; }

.device-column { display: flex; flex-direction: column; }
        .store-badges { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px;  }
        .store-badges img { height: 40px; width: auto; opacity: 0.7; transition: opacity 0.3s; }
        .store-badges img:hover { opacity: 1; }

.use-case-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 169, 150, 0.1); color: #00A695; border: none; padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        h1 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; background: linear-gradient(180deg, #006445, #00A695); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: slideUp 0.6s ease-out 0.2s both; }
        .hero-highlight { display: inline; }
        .hero-description { font-size: 16px; line-height: 1.5;  margin-bottom: 36px; color: #000;  }
        .hero-stats { display: flex; gap: 24px; flex-wrap: wrap;  }
        .stat { display: flex; flex-direction: column; }
        .stat-value { font-family: 'Work Sans', sans-serif; font-size: 36px; font-weight: 800; color: #00A695; line-height: 1; margin-bottom: 8px; }
        .stat-label { font-size: 14px; color: #424242; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
        
        /* ── CTA BUTTONS ── */
        .hero-buttons { display: flex; gap: 12px; margin-bottom: 16px; }
        .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; background: #00A695; color: white; border: 2px solid #00A898; }
        .btn-primary:hover { background: #00786A; border-color: #00786A; text-decoration: none; }
        .btn-outline-hero { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; border: 2px solid #424242; color: #424242; background: transparent; }
        .btn-outline-hero:hover { border-color: #00A695; color: #00A695; text-decoration: none; }
        .hero-sub { font-size: 13px; color: #424242; margin-bottom: 20px; }
        .perks { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; margin-top: 0; margin-bottom: 24px; }
        .perks li { display: flex; align-items: center; gap: 10px; font-family: 'Work Sans', sans-serif; font-size: 16px; color: #000; font-weight: 400; margin: 0; padding: 0; }
        .perks li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #0e9e82; flex-shrink: 0; }
        .arrow { transition: transform 0.3s ease; display: inline-block; }
        .btn-primary:hover .arrow { transform: translateX(4px); }
        @media (max-width: 768px) { .hero-buttons { flex-direction: column; } .hero-buttons a { text-align: center; justify-content: center; } }

.section { padding: 80px 24px; }
        .section-light { background: var(--gray-50); }
        .section-header { max-width: 800px; margin-bottom: 60px; }
        .section-label { display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
        h2 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--navy); letter-spacing: -0.01em; }
        .section-description { font-size: 18px; color: var(--gray-600); line-height: 1.7; }
        .app-types-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; max-width: 1000px; margin-left: auto; margin-right: auto; }
        .app-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--gray-100); border-radius: 100px; padding: 12px 24px; font-size: 15px; font-weight: 600; color: var(--navy); transition: all 0.3s ease; cursor: default; }
        .app-chip:hover { border-color: var(--teal); background: rgba(0, 152, 133, 0.05); transform: translateY(-2px); }
        .chip-icon { font-size: 20px; }
        .chip-text { white-space: nowrap; }
        .problem-solution { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
        .problem-card, .solution-card { padding: 48px; border-radius: 24px; position: relative; }
        .problem-card { background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%); border: 2px solid #FFD5D5; }
        .problem-card::before { content: '\26A0\FE0F'; position: absolute; top: 24px; right: 24px; font-size: 32px; opacity: 0.3; }
        .solution-card { background: linear-gradient(135deg, #F0FFF4 0%, #E0F9E8 100%); border: 2px solid #B8F4CC; }
        .solution-card::before { content: '\2713'; position: absolute; top: 24px; right: 24px; font-size: 48px; color: #38A169; opacity: 0.2; font-weight: 700; }
        .card-title { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 16px; color: var(--navy); }
        .card-list { list-style: none; }
        .card-list li { padding: 12px 0 12px 32px; position: relative; color: var(--gray-800); line-height: 1.6; }
        .problem-card .card-list li::before { content: '\2715'; position: absolute; left: 0; color: #E53E3E; font-weight: 700; }
        .solution-card .card-list li::before { content: '\2713'; position: absolute; left: 0; color: #38A169; font-weight: 700; font-size: 18px; }
        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
        .feature { background: var(--white); padding: 36px; border-radius: 20px; border: 2px solid var(--gray-100); transition: all 0.3s ease; }
        .feature:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 152, 133, 0.2); }
        .feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.35); }
        .feature h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
        .feature p { color: var(--gray-600); line-height: 1.7; }
        .workflow { background: var(--white); }
        .workflow-steps { display: grid; gap: 0; margin-top: 48px; position: relative; }
        .workflow-step { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 32px 0; position: relative; }
        .workflow-step:not(:last-child)::after { content: ''; position: absolute; left: 39px; top: 80px; bottom: -32px; width: 2px; background: linear-gradient(to bottom, var(--teal) 0%, var(--gray-100) 100%); }
        .step-number { width: 80px; height: 80px; background: var(--teal); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Work Sans', sans-serif; font-size: 32px; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.4); position: relative; z-index: 2; }
        .step-content h3 { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
        .step-content p { color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; }
        .step-details { background: var(--gray-50); padding: 24px; border-radius: 12px; margin-top: 16px; }
        .step-details-title { font-weight: 700; color: var(--navy); margin-bottom: 12px; font-size: 15px; }
        .columns-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
        .column-item { background: var(--white); padding: 12px 16px; border-radius: 8px; font-size: 14px; font-family: 'Courier New', monospace; color: var(--navy); border: 1px solid var(--gray-100); }
        .screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
        .screen-item { background: var(--white); padding: 16px; border-radius: 12px; border: 2px solid var(--gray-100); transition: border-color 0.2s; }
        .screen-item:hover { border-color: var(--teal); }
        .screen-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 15px; }
        .screen-desc { font-size: 14px; color: var(--gray-600); line-height: 1.5; }
        .benefits { background: var(--navy); color: var(--white); }
        .benefits h2 { color: var(--white); }
        .benefits .section-description { color: rgba(255, 255, 255, 0.8); }
        .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 48px; }
        .benefit-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15); transition: all 0.3s ease; }
        .benefit-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); border-color: var(--gold); }
        .benefit-icon { font-size: 36px; margin-bottom: 16px; }
        .benefit-card h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--gold); }
        .benefit-card p { color: rgba(255, 255, 255, 0.85); line-height: 1.7; }
        .comparison { background: #faf6f0; }
        .comp-table { width: 100%; border-collapse: collapse; background: transparent; margin-top: 48px; }
        .comp-table th { background: transparent; padding: 18px 24px; text-align: left; font-weight: 700; font-size: 15px; color: var(--navy); border-bottom: 2px solid #e0d8ce; }
        .comp-table td { padding: 20px 24px; border-bottom: 1px solid #ebe5dc; font-size: 15px; line-height: 1.6; color: #555; vertical-align: top; }
        .comp-table tr:last-child td { border-bottom: none; }
        .comp-table td:first-child { font-weight: 700; color: var(--navy); width: 160px; }
        .best-practices { background: var(--gray-50); }
        .practices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; }
        .practice-card { background: var(--white); padding: 32px; border-radius: 16px; border-left: 4px solid var(--teal); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
        .practice-card h3 { font-family: 'Work Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
        .practice-icon { font-size: 20px; }
        .practice-card p { color: var(--gray-600); line-height: 1.7; }
        .requirements { background: var(--white); }
        .requirements-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; }
        .requirement-card { background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%); padding: 32px; border-radius: 16px; border: 2px solid var(--gray-100); display: flex; gap: 20px; align-items: flex-start; }
        .requirement-icon { width: 48px; height: 48px; background: var(--teal); color: var(--white); border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .requirement-content h4 { font-weight: 700; color: var(--navy); margin-bottom: 8px; }
        .requirement-content p { color: var(--gray-600); font-size: 15px; line-height: 1.6; }
        .resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .resource-card { display: block; background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; text-decoration: none; transition: all 0.3s ease; }
        .resource-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 152, 133, 0.1); }
        .resource-type { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); background: rgba(0, 152, 133, 0.08); padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; }
        .resource-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
        .resource-card p { font-size: 15px; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; }
        .resource-link { font-size: 14px; font-weight: 600; color: var(--teal); }
        @media (max-width: 768px) { .resources-grid { grid-template-columns: 1fr; } }
        .cta-section { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); padding: 100px 24px; text-align: center; color: var(--white); position: relative; overflow: hidden; }
        .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px); }
        .cta-content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
        .cta-section h2 { color: var(--white); margin-bottom: 20px; }
        .cta-section p { font-size: 20px; margin-bottom: 40px; opacity: 0.95; line-height: 1.7; }
        .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
        .btn { padding: 18px 40px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif; }
        .btn-white { background: var(--white); color: var(--teal); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
        .btn-white:hover { background: var(--gray-50); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
        .btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
        .btn-outline:hover { background: var(--white); color: var(--teal); transform: translateY(-2px); }
        .faq-container { max-width: 900px; margin: 0 auto; }
        .faq-item { background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; margin-bottom: 20px; transition: all 0.3s ease; }
        .faq-item:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(0, 152, 133, 0.1); }
        .faq-question { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
        .faq-answer p { color: var(--gray-600); line-height: 1.7; margin: 0; }
                        @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr 440px; } .device-cluster { height: 420px; } .cyber-desktop { width: 400px; } .cyber-tablet { width: 200px; } .cyber-phone { display: none; } }
                        @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-content { max-width: 100%; } .device-cluster { height: 360px; max-width: 480px; margin: 0 auto; } .cyber-desktop { width: 100%; max-width: 480px; position: relative; } .cyber-tablet, .cyber-phone { display: none; } .store-badges { justify-content: center; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } }
        @media (max-width: 768px) { .hero { padding: 60px 24px 80px; } .hero-inner { grid-template-columns: 1fr; text-align: center; } .device-cluster { display: none; } .hero-content { max-width: 100%; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } .comp-table th, .comp-table td { padding: 12px 14px; font-size: 13px; } .comp-table td:first-child { width: 100px; } .problem-solution { grid-template-columns: 1fr; gap: 24px; } .workflow-step { grid-template-columns: 60px 1fr; gap: 20px; } .step-number { width: 60px; height: 60px; font-size: 24px; } .workflow-step:not(:last-child)::after { left: 29px; } .screens-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; } .btn { width: 100%; justify-content: center; } .hero-stats { gap: 32px; } }
        .arrow { transition: transform 0.3s ease; }
        .btn:hover .arrow { transform: translateX(4px); }
    </style>
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@graph": [
            {
                "@type": "WebPage",
                "@id": "https://www.adalo.com/solutions/grocery-app-builder/#webpage",
                "url": "https://www.adalo.com/solutions/grocery-app-builder",
                "name": "Grocery App Builder | Adalo",
                "description": "Build a custom grocery app for iOS, Android, and web with Adalo's no-code app builder. See every screen on one canvas, preview on any device, and visually direct the AI to refine your grocery shopping and delivery app before publishing to the Apple App Store and Google Play.",
                "isPartOf": { "@id": "https://www.adalo.com/#website" }
            },
            {
                "@type": "BreadcrumbList",
                "itemListElement": [
                    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.adalo.com/" },
                    { "@type": "ListItem", "position": 2, "name": "Solutions", "item": "https://www.adalo.com/solutions" },
                    { "@type": "ListItem", "position": 3, "name": "Grocery App Builder", "item": "https://www.adalo.com/solutions/grocery-app-builder" }
                ]
            },
            {
                "@type": "FAQPage",
                "mainEntity": [
                    { "@type": "Question", "name": "What is Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project \u2014 no code, no developers required." } },
                    { "@type": "Question", "name": "Can I build a grocery delivery app without coding?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's no-code app builder requires zero coding. Tell Ada (Adalo's AI builder) what your grocery store needs and Magic Start generates a complete app with product catalog, shopping cart, and order management. Makers routinely build and publish grocery apps to the App Store and Google Play without writing a single line of code." } },
                    { "@type": "Question", "name": "How much does it cost to build a grocery app?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's paid plans start at $36/mo with unlimited usage\u2014no caps on orders, products, customers, or storage. Compare that to Instacart-style platforms that take 15\u201330% of every order, or custom development at $50,000\u2013$200,000. The free plan includes 500 database records so you can prototype before committing." } },
                    { "@type": "Question", "name": "Can customers order groceries from their phones?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo builds true native iOS and Android apps\u2014not web wrappers. Your customers download your grocery app from the Apple App Store or Google Play. Native apps mean push notifications for deals and delivery updates, faster browsing, and a real app experience." } },
                    { "@type": "Question", "name": "What can't Adalo do for a grocery app?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo excels at building custom grocery shopping and ordering apps, but built-in route optimization, real-time GPS tracking on a map, barcode scanning, and POS integration require additional tools or custom API connections. Adalo also doesn't include a built-in payment processor\u2014you connect Stripe or similar services via Zapier." } }
                ]
            }
        ]
    }
    </script>

<div class="hero">
        <div class="container">
            <div class="breadcrumb">
                <a href="https://www.adalo.com/">Home</a>
                <span class="breadcrumb-separator">/</span>
                <a href="https://www.adalo.com/solutions">Solutions</a>
                <span class="breadcrumb-separator">/</span>
                <span>Grocery App Builder</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">&#x1F6D2; Grocery &amp; Delivery</div>
                    <h1>Build Custom <span class="hero-highlight">Grocery Apps</span> for Any Store</h1>
                    <p class="hero-description">Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project &mdash; no code, no developers required. Build a grocery shopping and delivery app tailored to your store, your products, and your customers.</p>
                <div class="hero-buttons">
                    <a href="https://app.adalo.com/signup" class="btn-primary">Build Free <span class="arrow">&rarr;</span></a>
                    <a href="https://www.adalo.com/pricing" class="btn-outline-hero">View Pricing</a>
                </div>
                <ul class="perks">
                    <li>No credit card required</li>
                    <li>Hosted Postgres database included</li>
                    <li>500 records on the free plan with no time limit</li>
                    <li>Web publishing complimentary</li>
                    <li>No overages or excess usage charges</li>
                </ul>
                <div class="hero-stats">
                        <div class="stat"><div class="stat-value">500+</div><div class="stat-label">Retail Apps Built</div></div>
                        <div class="stat"><div class="stat-value">3</div><div class="stat-label">Platforms</div></div>
                        <div class="stat"><div class="stat-value">$36/mo</div><div class="stat-label">Unlimited Usage</div></div>
                    </div>
                </div>
                
                <div class="device-column">
                <div class="device-cluster">
                    
                    <div class="cyber-desktop">
                        <div class="frame">
                            <div class="toolbar">
                                <span class="dot dot-r"></span>
                                <span class="dot dot-y"></span>
                                <span class="dot dot-g"></span>
                                <div class="url-bar">app.adalo.com/grocery</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Product Catalog</h4>
                                    <div class="dk-add">+ Add Item</div>
                                </div>
                                <div class="dk-body">
                                    <div class="dk-sidebar">
                                        <span class="si active">&#x25A0;</span>
                                        <span class="si">&#x25CB;</span>
                                        <span class="si">&#x25A1;</span>
                                        <span class="si">&#x25B3;</span>
                                        <span class="si">&#x2699;</span>
                                    </div>
                                    <div class="dk-kanban">
                                        <div class="dk-col">
                                            <div class="glass-col-header">Produce</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Organic Apples</div>
                                                <div class="glass-price">$3.99/lb</div>
                                                <span class="glass-tag glass-tag-ok">ORGANIC</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Baby Spinach</div>
                                                <div class="glass-price">$4.49</div>
                                                <div class="glass-sub">5 oz bag</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Avocados</div>
                                                <div class="glass-price">$1.99/ea</div>
                                                <span class="glass-tag glass-tag-sale">SALE</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Dairy</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Whole Milk</div>
                                                <div class="glass-price">$5.29</div>
                                                <span class="glass-tag glass-tag-pop">POPULAR</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Greek Yogurt</div>
                                                <div class="glass-price">$6.99</div>
                                                <div class="glass-sub">32 oz tub</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Cheddar Block</div>
                                                <div class="glass-price">$4.99</div>
                                                <div class="glass-sub">8 oz</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Bakery</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Sourdough</div>
                                                <div class="glass-price">$5.99</div>
                                                <span class="glass-tag glass-tag-new">FRESH</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Croissants</div>
                                                <div class="glass-price">$3.49</div>
                                                <div class="glass-sub">4-pack</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Pantry</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Olive Oil</div>
                                                <div class="glass-price">$12.99</div>
                                                <div class="glass-sub">Extra Virgin</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Pasta</div>
                                                <div class="glass-price">$2.49</div>
                                                <span class="glass-tag glass-tag-ok">STAPLE</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="stand"></div>
                        <div class="base"></div>
                    </div>

<div class="cyber-tablet">
                        <div class="frame">
                            <div class="tb-camera"></div>
                            <div class="screen">
                                <div class="tb-header">
                                    <h4>Cart</h4>
                                    <span class="neon-items">6 items</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Organic Apples</div>
                                            <div class="n-amount neon-cyan">$7.98</div>
                                            <div class="n-contact">Qty: 2 lb</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Whole Milk</div>
                                            <div class="n-amount neon-gold">$5.29</div>
                                            <div class="n-contact">Qty: 1</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Sourdough</div>
                                            <div class="n-amount neon-magenta">$5.99</div>
                                            <div class="n-contact">Qty: 1</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">TOTAL</div>
                                            <div class="tb-total-amount">$42.74</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tb-nav">
                                    <span>&#x25CB;</span>
                                    <span class="active" style="color:#ff00ff;">&#x25A0;</span>
                                    <span>&#x25A1;</span>
                                    <span>&#x2699;</span>
                                </div>
                                <div class="tb-home-bar"></div>
                            </div>
                        </div>
                    </div>

<div class="cyber-phone">
                        <div class="frame">
                            <div class="screen-bezel">
                            <div class="dynamic-island"></div>
                            <div class="screen">
                                <div class="native-status">
                                    <span>9:41</span>
                                    <span>&#x25CF;&#x25CF;&#x25CF;</span>
                                </div>
                                <div class="native-header">
                                    <h4>Order #308</h4>
                                    <span class="native-accent">$42.74</span>
                                </div>
                                <div class="native-progress">
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;box-shadow:0 0 6px rgba(5,150,105,0.3);"></div>
                                    <div class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                </div>
                                <div class="native-progress-labels">
                                    <span>Ordered</span>
                                    <span>Picking</span>
                                    <span class="active">Packed</span>
                                    <span>Delivery</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Status</span>
                                            <span class="native-pill pill-success">Packed</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Items</div>
                                        <div class="native-row">
                                            <span class="native-value">Organic Apples</span>
                                            <span class="native-price">$7.98</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Whole Milk</span>
                                            <span class="native-price">$5.29</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Sourdough</span>
                                            <span class="native-price">$5.99</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Total</span>
                                        <span class="native-total-amount">$42</span>
                                    </div>
                                </div>
                                <div class="native-nav">
                                    <span>&#x2302;</span>
                                    <span>&#x1F50D;</span>
                                    <span class="active">&#x1F4E6;</span>
                                    <span>&#x2699;</span>
                                </div>
                                <div class="home-bar"></div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="store-badges">
                    
                    
                    
                </div>
            </div>
            </div>

</div>
            </div>

</div>
    </div>

<div class="section section-light">
        <div class="container">
            <div class="section-header" style="text-align: center; max-width: 900px; margin: 0 auto 60px;">
                <h2>Build Any Grocery App You Can Imagine</h2>
                <p class="section-description">From neighborhood stores to multi-location chains&mdash;describe what you need and Ada, Adalo's AI builder, generates a working grocery app with Magic Start in minutes.</p>
            </div>
            <div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F34E;</div><div class="chip-text">Product Catalog</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F6D2;</div><div class="chip-text">Shopping Cart</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F69A;</div><div class="chip-text">Delivery Tracker</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4E6;</div><div class="chip-text">Inventory Manager</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CB;</div><div class="chip-text">Order Management</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F381;</div><div class="chip-text">Loyalty Program</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4F1;</div><div class="chip-text">Curbside Pickup</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4B3;</div><div class="chip-text">Weekly Specials</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Local Grocers Deserve Better Than Generic Delivery Platforms</h2>
                <p class="section-description">Most independent grocers are stuck choosing between expensive third-party delivery platforms that take 15&ndash;30% commission or building no online presence at all. There's a better path.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Grocery App Problem</h3>
                    <ul class="card-list">
                        <li>Third-party delivery platforms charge 15&ndash;30% commission on every order</li>
                        <li>No control over branding, customer experience, or delivery scheduling</li>
                        <li>Inventory tracked in spreadsheets with no real-time stock visibility</li>
                        <li>Customers can't browse your catalog or place orders from their phones</li>
                        <li>Custom app development costs $50,000&ndash;$200,000 and takes 6+ months</li>
                        <li>No push notifications for deals, restocks, or delivery updates</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo Grocery Solution</h3>
                    <ul class="card-list">
                        <li>Your own branded app on the App Store and Google Play&mdash;zero commission on orders</li>
                        <li>Visual canvas lets you design product catalog, cart, and delivery flow your way</li>
                        <li>Built-in relational database tracks inventory, orders, and customers in one place</li>
                        <li>Native iOS and Android apps let shoppers browse and order from anywhere</li>
                        <li>$36/mo with unlimited users, records, and storage&mdash;no per-order fees</li>
                        <li>Push notifications alert customers about weekly deals and delivery status</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

<div class="section section-light">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Key Features</span>
                <h2>Everything Your Grocery App Needs in One Build</h2>
                <p class="section-description">Built for grocers who want their own app on web, iOS, and Android from a single build&mdash;without giving up control to third-party platforms.</p>
            </div>
            <div class="features">
                <div class="feature"><div class="feature-icon">&#x1F34E;</div><h3>Product Catalog &amp; Categories</h3><p>Organize your entire inventory into categories like produce, dairy, bakery, and deli. Store product names, descriptions, prices, images, and stock levels in Adalo's built-in relational database&mdash;no external database setup required.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F6D2;</div><h3>Shopping Cart &amp; Checkout</h3><p>Customers add items, adjust quantities, and check out directly in the app. Connect Stripe or other payment gateways via Zapier for secure online payments, or offer pay-at-pickup for in-store collection.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F69A;</div><h3>Delivery Tracking</h3><p>Customers see real-time order status from packing through delivery. Drivers update delivery progress from the native mobile app, and customers receive push notifications at every stage.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4E6;</div><h3>Inventory Management</h3><p>Track stock levels across all products. When items run low, the store management dashboard flags them automatically. Update inventory from desktop or mobile&mdash;one version across all platforms.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F514;</div><h3>Push Notifications</h3><p>Native push notifications alert customers about weekly specials, restocks of their favorite products, and delivery updates. Critical for driving repeat orders and keeping shoppers engaged with your store.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F381;</div><h3>Loyalty &amp; Rewards</h3><p>Build a points-based loyalty program tied to customer purchases. Track reward balances, offer exclusive deals to repeat customers, and drive retention without paying third-party loyalty platform fees.</p></div>
            </div>
        </div>
    </div>

<div class="section workflow">
        <div class="container">
            <div class="section-header">
                <span class="section-label">How It Works</span>
                <h2>From Idea to Grocery App in Five Steps</h2>
                <p class="section-description">Adalo 3.0's infrastructure (launched late 2025) is 3&ndash;4x faster and scales to 1M+ monthly active users. Here's how to build your grocery app on it.</p>
            </div>
            <div class="workflow-steps">
                <div class="workflow-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>Describe Your Store to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, what your grocery store needs. Magic Start generates a complete app with product catalog, shopping cart, order management, and navigation from your description&mdash;typically in under two minutes.</p>
                        <div class="step-details">
                            <div class="step-details-title">Example prompt:</div>
                            <div style="margin-top: 8px; padding: 16px; background: var(--white); border-radius: 8px; border-left: 3px solid var(--teal);"><div style="font-size: 14px; color: var(--gray-600); line-height: 1.6; font-style: italic;">"Build me a grocery delivery app for a local organic market. I need a product catalog with categories (produce, dairy, bakery, meat, pantry), a shopping cart with quantities, delivery scheduling with time slots, and an admin dashboard for managing inventory and orders."</div></div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Set Up Your Product Database</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your product categories, pricing fields, and inventory structure. Use Magic Add to add features like deal banners or delivery zones with natural language.</p>
                        <div class="step-details">
                            <div class="step-details-title">Typical database collections:</div>
                            <div class="columns-list">
                                <div class="column-item">Products</div><div class="column-item">Categories</div><div class="column-item">Orders</div><div class="column-item">Customers</div><div class="column-item">Delivery Slots</div><div class="column-item">Promotions</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Connect Payments &amp; Data</h3>
                        <p>Use Adalo's built-in relational database for your product and order data, or connect existing inventory spreadsheets via SheetBridge. Add Stripe via Zapier for payment processing and connect delivery logistics tools.</p>
                        <div class="step-details">
                            <div class="step-details-title">Common grocery app integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import existing product lists from Google Sheets as a relational database</div></div>
                                <div class="screen-item"><div class="screen-title">Zapier / Make</div><div class="screen-desc">Connect to Stripe payments, email marketing, and delivery routing</div></div>
                                <div class="screen-item"><div class="screen-title">Custom API</div><div class="screen-desc">External Collections connect to POS systems or supplier APIs</div></div>
                                <div class="screen-item"><div class="screen-title">Webhooks</div><div class="screen-desc">Trigger automations when orders are placed or delivery is completed</div></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step"><div class="step-number">4</div><div class="step-content"><h3>Test the Shopping Flow</h3><p>Preview your grocery app on any device form factor directly from the canvas. Test the full shopping flow&mdash;browsing products, adding to cart, selecting delivery windows, and checking out&mdash;on iPhone, Android, tablet, and desktop before publishing.</p></div></div>
                <div class="workflow-step"><div class="step-number">5</div><div class="step-content"><h3>Publish to App Stores</h3><p>Deploy your grocery app as a native iOS app on the Apple App Store, a native Android app on Google Play, and a web app&mdash;all from a single build. Your customers download it and start shopping immediately.</p></div></div>
            </div>
        </div>
    </div>

<div class="section benefits">
        <div class="container">
            <div class="section-header">
                <span class="section-label" style="color: var(--gold);">Why Adalo for Grocery</span>
                <h2>Your Store, Your App, Zero Commission</h2>
                <p class="section-description">Stop giving 15&ndash;30% of every order to third-party delivery platforms. Own your customer relationships.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card"><div class="benefit-icon">&#x1F4B8;</div><h3>Zero Commission Fees</h3><p>Third-party platforms take 15&ndash;30% of every order. Adalo costs $36/mo flat with unlimited orders, customers, and products. A store doing $10,000/mo in delivery orders saves $1,500&ndash;$3,000/mo in platform fees alone.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F3F7;&#xFE0F;</div><h3>Your Brand, Not Theirs</h3><p>Your own branded app on the App Store and Google Play. Your logo, your colors, your customer experience&mdash;not a generic marketplace where you compete with every other grocer in town.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F5C4;&#xFE0F;</div><h3>One Database for Everything</h3><p>Products, orders, customers, delivery schedules, and loyalty points in Adalo's built-in relational database. No Firebase setup. No Supabase. No external services to manage.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F680;</div><h3>Ship in Days, Not Months</h3><p>Ada generates your grocery app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live app in under a week.</p></div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Every Screen on One Canvas</h3>
                    <p>See product catalogs, shopping carts, order management, and delivery dashboards simultaneously. Adalo's multi-screen canvas lets you design grocery flows visually with AI direction.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Handle Peak Order Volume</h3>
                    <p>Adalo 3.0 delivers 3–4× faster performance and scales to 1M+ monthly active users. Your app handles Sunday rushes and holiday surges without slowing down.</p>
                </div>
            
            </div>
        </div>
    </div>

<div class="section comparison">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Compare Your Options</span>
                <h2>Adalo Grocery App vs. Instacart-Style Platforms vs. Custom Development</h2>
                <p class="section-description">See how building your own grocery app with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead><tr><th>Factor</th><th>Adalo Grocery App</th><th>Instacart-Style Platforms</th><th>Custom Development</th></tr></thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Immediate (but you're on their platform)</td><td>4&ndash;8 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited orders)</td><td>15&ndash;30% commission per order</td><td>$8,000&ndash;25,000/mo (hosting + team)</td></tr>
                    <tr><td>Branding</td><td>&#x2705; Your own app in stores</td><td>Marketplace branding, not yours</td><td>Fully custom</td></tr>
                    <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Their app, your listing</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Customer Data</td><td>&#x2705; You own all data</td><td>Platform controls customer data</td><td>You own all data</td></tr>
                    <tr><td>Push Notifications</td><td>&#x2705; Built-in</td><td>Platform controls messaging</td><td>Custom implementation required</td></tr>
                    <tr><td>Time to Change</td><td>&#x2705; Minutes</td><td>Limited by platform rules</td><td>Sprint cycle (1&ndash;2 weeks)</td></tr>
                </tbody>
            </table>
        </div>
    </div>

<div class="section best-practices">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Best Practices</span>
                <h2>Tips for Grocery App Success</h2>
                <p class="section-description">Patterns from Makers who have built and shipped successful grocery and delivery apps with Adalo.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card"><h3><span class="practice-icon">&#x1F34E;</span> Start with Your Top Sellers</h3><p>Don't try to catalog every product on day one. Start with your top 50&ndash;100 items that drive most revenue. Get the shopping and ordering flow right first, then expand your catalog over time.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F4F8;</span> Use High-Quality Product Images</h3><p>Product photos drive conversions in grocery apps. Photograph your items with consistent lighting and backgrounds. Even smartphone photos work well if they're clear, well-lit, and consistently styled.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F551;</span> Offer Flexible Delivery Windows</h3><p>Let customers choose delivery time slots instead of offering only same-day delivery. Wider windows reduce failed deliveries and let you batch orders for efficient routing.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F517;</span> Migrate from Spreadsheets Gradually</h3><p>Already tracking inventory in Google Sheets? Use SheetBridge to connect your spreadsheet as a relational database. Migrate incrementally to Adalo's built-in database once the app is running smoothly.</p></div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Import Your Catalog with SheetBridge</h3>
                    <p>If your product list and pricing live in Google Sheets, use SheetBridge to connect them as a relational database. Categories, items, and prices sync without manual re-entry.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Test with Real Neighborhood Orders</h3>
                    <p>Fulfill 20–30 real orders in your delivery zone before promoting broadly. Real groceries reveal logistics gaps—substitution handling, cold chain timing, address issues—that test orders don't.</p>
                </div>
            </div>
        </div>
    </div>

<div class="section requirements">
        <div class="container">
            <div class="section-header"><span class="section-label">What's Included</span><h2>Everything You Need to Build &amp; Run a Grocery App</h2></div>
            <div class="requirements-cards">
                <div class="requirement-card"><div class="requirement-icon">&#x267E;&#xFE0F;</div><div class="requirement-content"><h4>Unlimited Records on Paid Plans</h4><p>No caps on products, orders, or customers. Adalo paid plans include unlimited database records, users, and storage. Free plan includes 500 records to get started.</p></div></div>
                <div class="requirement-card"><div class="requirement-icon">&#x1F514;</div><div class="requirement-content"><h4>Push Notifications</h4><p>Native push notifications for order confirmations, delivery updates, weekly deals, and restock alerts. Keeps shoppers engaged and coming back to your store.</p></div></div>
                <div class="requirement-card"><div class="requirement-icon">&#x1F4C4;</div><div class="requirement-content"><h4>Google Sheets via SheetBridge</h4><p>Already tracking products in Google Sheets? SheetBridge connects your spreadsheet as a relational database so you can migrate incrementally without disruption.</p></div></div>
                <div class="requirement-card"><div class="requirement-icon">&#x26A1;</div><div class="requirement-content"><h4>Zapier &amp; Make Integrations</h4><p>Connect your grocery app to 6,000+ tools. Sync with Stripe payments, email marketing, delivery routing, and POS systems via Zapier or Make.</p></div></div>
            </div>
        </div>
    </div>

<div class="section" style="background: white;">
        <div class="container">
            <div class="section-header"><span class="section-label">Frequently Asked Questions</span><h2>Common Questions About Building Grocery Apps</h2></div>
            <div class="faq-container">
                <div class="faq-item"><h3 class="faq-question">What is Adalo?</h3><div class="faq-answer"><p>Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project &mdash; no code, no developers required.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can I build a grocery delivery app without coding?</h3><div class="faq-answer"><p>Yes. Adalo's no-code app builder requires zero coding. Tell Ada (Adalo's AI builder) what your grocery store needs and Magic Start generates a complete app with product catalog, shopping cart, and order management. Then visually customize everything on the canvas by pointing at elements and directing changes. Makers routinely build and publish grocery apps to the App Store and Google Play without writing a single line of code.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">How much does it cost to build a grocery app?</h3><div class="faq-answer"><p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on orders, products, customers, or storage. Compare that to Instacart-style platforms that take 15&ndash;30% of every order, or custom development at $50,000&ndash;$200,000. A store doing $10,000/mo in deliveries pays $1,500&ndash;$3,000/mo in platform fees. That same store on Adalo pays $36/mo total, with native iOS and Android apps included. The free plan includes 500 database records so you can prototype before committing.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can customers order groceries from their phones?</h3><div class="faq-answer"><p>Yes. Adalo builds true native iOS and Android apps&mdash;not web wrappers. Your customers download your grocery app from the Apple App Store or Google Play like any other app. Native apps mean push notifications for deals and delivery updates, faster browsing, and a shopping experience that feels like a real app rather than a mobile website.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">How do I handle payments in my grocery app?</h3><div class="faq-answer"><p>Adalo connects to payment processors like Stripe via Zapier or Make. Customers can pay online during checkout. You can also offer pay-at-pickup for curbside orders or cash-on-delivery for local deliveries. Payment gateway configuration varies by region, so check Stripe's availability for your market.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can I manage inventory from the app?</h3><div class="faq-answer"><p>Yes. You can build a store management interface within the same app. Adalo's built-in relational database tracks products, stock levels, and categories. Store staff update inventory from the web dashboard or their phones. When items run low, the app can flag them automatically and send notifications to reorder.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">How does this compare to building on Instacart or DoorDash?</h3><div class="faq-answer"><p>Marketplace platforms like Instacart handle logistics but take 15&ndash;30% per order, control your branding, and own the customer relationship. With Adalo, you build your own branded app for $36/mo with zero commission. The trade-off: you manage your own delivery logistics (or use a local driver service). For stores that already have drivers or offer pickup, Adalo gives you full control at a fraction of the cost.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">What can't Adalo do for a grocery app?</h3><div class="faq-answer"><p>Adalo excels at building custom grocery shopping and ordering apps, but it's not a drop-in replacement for enterprise logistics platforms. Built-in route optimization for delivery drivers, real-time GPS tracking on a map, barcode scanning for inventory, and integration with commercial POS systems like Square or Clover require additional tools or custom API connections. Adalo also doesn't include a built-in payment processor&mdash;you connect Stripe or similar services via Zapier. For independent grocers who need a branded shopping app with delivery scheduling at a fraction of marketplace fees, Adalo is the practical choice.</p></div></div>
            </div>
            <div style="margin-top: 60px; text-align: center; padding: 40px; background: var(--gray-50); border-radius: 16px;">
                <p style="font-size: 16px; color: var(--gray-600); margin-bottom: 20px;">Explore more solutions: <a href="https://www.adalo.com/solutions/marketplace-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Marketplace Apps</a>, <a href="https://www.adalo.com/solutions/delivery-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Delivery Apps</a>, <a href="https://www.adalo.com/solutions/inventory-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Inventory Apps</a>, and <a href="https://www.adalo.com/solutions/restaurant-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Restaurant Apps</a>. Learn more about <a href="https://www.adalo.com/" style="color: var(--teal); font-weight: 600; text-decoration: none;">Adalo's no-code app builder</a>.</p>
            </div>
        </div>
    </div>

<div class="section section-light resources">
        <div class="container">
            <div class="section-header"><span class="section-label">Resources &amp; Tutorials</span><h2>Learn How to Build Grocery Apps with Adalo</h2><p class="section-description">Step-by-step guides, video walkthroughs, and documentation to help you build and ship your grocery app.</p></div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-a-delivery-app" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build a Delivery App Without Code</h3><p>Full walkthrough: product catalog, order management, delivery tracking, and publishing to app stores.</p><span class="resource-link">Read guide &rarr;</span></a>
                <a href="https://help.adalo.com/integrations/external-collections" class="resource-card"><div class="resource-type">Documentation</div><h3>Connecting External Data Sources</h3><p>How to use External Collections and Custom Actions to connect your app to POS systems and payment APIs.</p><span class="resource-link">View docs &rarr;</span></a>
                <a href="https://www.adalo.com/posts/google-sheets-app-builder" class="resource-card"><div class="resource-type">Tutorial</div><h3>Google Sheets to App via SheetBridge</h3><p>Migrate your product spreadsheet to a real app without losing your existing data workflow.</p><span class="resource-link">Read guide &rarr;</span></a>
                <a href="https://help.adalo.com/building-your-app/database" class="resource-card"><div class="resource-type">Documentation</div><h3>Relational Database Basics</h3><p>Understand collections, relationships, and record linking&mdash;the foundation of any product and order data model.</p><span class="resource-link">View docs &rarr;</span></a>
            </div>
        </div>
    </div>

<div class="cta-section">
        <div class="cta-content">
            <h2>Ready to Build Your Store's Grocery App?</h2>
            <p>Join Makers who have replaced third-party delivery commissions with their own branded native apps built on Adalo&mdash;at a fraction of the cost.</p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">Start Building Your Grocery App Free <span class="arrow">&rarr;</span></a>
                <a href="https://www.adalo.com/solutions" class="btn btn-outline">Explore More Solutions</a>
            </div>
        </div>
    </div>

Grocery & Shopping Apps