Créateur d'applications e-commerce

:root {
            --teal: #009885;
            --teal-dark: #007D6E;
            --gold: #FFBB00;
            --red: #EF4D30;
            --navy: #333333;
            --navy-light: #121212;
            --gray-50: #F7F9FC;
            --gray-100: #E8ECF4;
            --gray-600: #6C757D;
            --gray-800: #121212;
            --white: #FFFFFF;
            --cream: #F8F4EE;
            --cream-light: #F7F3EE;
        }

body {
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: var(--gray-800);
            background: var(--white);
            overflow-x: hidden;
        }

.nav {
            background: var(--white);
            padding: 14px 24px;
            border-bottom: 1px solid var(--gray-100);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }

.nav-container {
            max-width: 100%;
            padding: 0 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.nav-left { display: flex; align-items: center; gap: 36px; }
        .nav-logo img { height: 28px; width: auto; }
        .nav-links { display: flex; gap: 28px; list-style: none; }
        .nav-links a { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; }
        .nav-links a:hover { color: var(--teal); }
        .nav-right { display: flex; align-items: center; gap: 16px; }
        .nav-login, .nav-right-link { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; }
        .nav-login:hover, .nav-right-link:hover { color: var(--teal); }
        .nav-signup { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); background: #00bfa5; padding: 10px 22px; border-radius: 100px; text-decoration: none; transition: background 0.2s; }
        .nav-signup:hover { background: var(--teal-dark); }

@media (max-width: 768px) {
            .nav-links { display: none; }
            .nav-login { display: none; }
        }

.hero { position: relative; background: #F8F4EE; background-image: linear-gradient(#F7F3EE, rgba(247,243,238,0)); color: #000; padding: 80px 24px 100px; overflow: hidden; }
        .hero::before { content: none; }

.container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
        .breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 32px;   }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .breadcrumb a { color: #00A695; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
        .breadcrumb a:hover { opacity: 0.7; }
        .breadcrumb-separator { color: #424242; }

.hero-inner { display: grid; grid-template-columns: 1fr 560px; gap: 40px; align-items: center; }
        .hero-content { max-width: 600px; }

.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-img { width: 100%; height: 36px; border-radius: 5px; margin-bottom: 5px; object-fit: cover; display: block; }
        .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-rating { font-size: 7px; color: #f59e0b; letter-spacing: -1px; }
        .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; 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; } }

/* ── 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: 15px; 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; gap: 32px; } .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; } }

.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/ecommerce-app-builder#webpage",
                "url": "https://www.adalo.com/solutions/ecommerce-app-builder",
                "name": "eCommerce App Builder | Adalo",
                "description": "Build a custom ecommerce 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 build product catalogs, shopping carts, and order tracking\u2014then publish to the Apple App Store and Google Play.",
                "isPartOf": { "@id": "https://www.adalo.com/#website" },
                "about": { "@id": "https://www.adalo.com/#software" }
            },
            {
                "@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": "eCommerce App Builder", "item": "https://www.adalo.com/solutions/ecommerce-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 an ecommerce app without coding?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Tell Ada (Adalo's AI builder) what your store needs and Magic Start generates a complete ecommerce app with product catalog, cart, checkout, and database. Visually customize everything on the canvas without writing code." } },
                    { "@type": "Question", "name": "How much does it cost to build an ecommerce app with Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's paid plans start at $36/mo with unlimited usage and zero sales commission. The free plan includes 500 database records to prototype your store." } },
                    { "@type": "Question", "name": "Can I publish my ecommerce app to the App Store and Google Play?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo builds true native iOS and Android apps\u2014not web wrappers\u2014that appear in the Apple App Store and Google Play." } },
                    { "@type": "Question", "name": "How do I accept payments in my Adalo ecommerce app?", "acceptedAnswer": { "@type": "Answer", "text": "Connect Stripe for payment processing through Zapier or Custom Actions. Adalo takes zero commission on transactions." } },
                    { "@type": "Question", "name": "Can I manage inventory in my Adalo app?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Use Adalo's built-in relational database or connect Google Sheets via SheetBridge to track product stock levels and sync inventory." } },
                    { "@type": "Question", "name": "How does an Adalo ecommerce app compare to Shopify?", "acceptedAnswer": { "@type": "Answer", "text": "Shopify is the standard for web-based ecommerce but doesn't produce customer-facing native apps. Adalo builds native iOS and Android shopping apps at $36/mo with no commission. Shopify offers deeper built-in ecommerce features for web-first stores." } },
                    { "@type": "Question", "name": "What can't Adalo do for ecommerce?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo doesn't include built-in payment processing, automated tax calculations, advanced shipping calculators, or SEO-optimized web storefronts. For full-featured web storefronts, Shopify or WooCommerce are better starting points." } }
                ]
            }
        ]
    }
    </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>eCommerce App Builder</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">
                        &#x1F6D2; eCommerce
                    </div>
                    <h1>
                        Build Custom <span class="hero-highlight">eCommerce Apps</span> Without Code
                    </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 branded shopping experience that you own and control, not a storefront rented from a marketplace.
                    </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">3</div>
                            <div class="stat-label">Platforms, One Build</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">$36/mo</div>
                            <div class="stat-label">Unlimited Usage</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">500</div>
                            <div class="stat-label">Free Plan Records</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/my-store</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Product Catalog</h4>
                                    <div class="dk-add">+ Add Product</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">Apparel</div>
                                            <div class="glass-card">
                                                <img class="glass-img" src="https://images.unsplash.com/photo-1551028719-00167b16eac5?w=120&h=72&fit=crop" alt="Canvas Jacket">
                                                <div class="glass-name">Canvas Jacket</div>
                                                <div class="glass-price">$89.00</div>
                                                <div class="glass-rating">&#x2605;&#x2605;&#x2605;&#x2605;&#x2606;</div>
                                                <span class="glass-tag glass-tag-new">NEW</span>
                                            </div>
                                            <div class="glass-card">
                                                <img class="glass-img" src="https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=120&h=72&fit=crop" alt="Logo Hoodie">
                                                <div class="glass-name">Logo Hoodie</div>
                                                <div class="glass-price">$65.00</div>
                                                <div class="glass-rating">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;</div>
                                                <span class="glass-tag glass-tag-sale">SALE</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Accessories</div>
                                            <div class="glass-card">
                                                <img class="glass-img" src="https://images.unsplash.com/photo-1627123424574-724758594e93?w=120&h=72&fit=crop" alt="Leather Wallet">
                                                <div class="glass-name">Leather Wallet</div>
                                                <div class="glass-price">$45.00</div>
                                                <div class="glass-sub">IN STOCK</div>
                                            </div>
                                            <div class="glass-card">
                                                <img class="glass-img" src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=120&h=72&fit=crop" alt="Sunglasses">
                                                <div class="glass-name">Sunglasses</div>
                                                <div class="glass-price">$120.00</div>
                                                <div class="glass-rating">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;</div>
                                                <span class="glass-tag glass-tag-pop">POPULAR</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Shoes</div>
                                            <div class="glass-card">
                                                <img class="glass-img" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=120&h=72&fit=crop" alt="Trail Runners">
                                                <div class="glass-name">Trail Runners</div>
                                                <div class="glass-price">$139.00</div>
                                                <div class="glass-sub">IN STOCK</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Stock</div>
                                            <div class="glass-card">
                                                <img class="glass-img" src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=120&h=48&fit=crop" alt="Inventory" style="height: 24px;">
                                                <div class="glass-name">All Items</div>
                                                <div class="glass-price" style="color: #059669;">147 units</div>
                                                <span class="glass-tag glass-tag-ok">TRACKED</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 neon-screen">
                                <div class="tb-header">
                                    <h4 class="neon-magenta">Shopping Cart</h4>
                                    <span class="neon-gold" style="font-family:'Orbitron',monospace;font-size:9px;font-weight:700;">3 items</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Canvas Jacket</div>
                                            <div class="n-amount neon-cyan">$89.00</div>
                                            <div class="n-contact">Qty: 1</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Leather Wallet</div>
                                            <div class="n-amount neon-gold">$45.00</div>
                                            <div class="n-contact">Qty: 1</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Logo Hoodie</div>
                                            <div class="n-amount neon-magenta">$65.00</div>
                                            <div class="n-contact">Qty: 1</div>
                                        </div>
                                        <div style="margin-top:6px;padding:5px;border-top:1px solid rgba(255,0,255,0.15);text-align:right;">
                                            <div style="font-size:8px;color:rgba(255,255,255,0.4);font-family:'Orbitron',monospace;">TOTAL</div>
                                            <div class="n-amount neon-gold" style="font-size:11px;">$199.00</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 #1042</h4>
                                    <span class="native-accent">$199.00</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>Packed</span>
                                    <span class="active">Shipped</span>
                                    <span>Delivered</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">Shipped</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Items</div>
                                        <div class="native-row">
                                            <span class="native-value">Canvas Jacket</span>
                                            <span class="native-price">$89</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Leather Wallet</span>
                                            <span class="native-price">$45</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Logo Hoodie</span>
                                            <span class="native-price">$65</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Total</span>
                                        <span class="native-total-amount">$199</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 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 eCommerce App You Can Imagine</h2>
                <p class="section-description">From niche product shops to full catalog stores&mdash;describe what you need and Ada, Adalo's AI builder, generates a working ecommerce app with Magic Start in minutes.</p>
            </div>
            <div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F6CD;&#xFE0F;</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">&#x1F4E6;</div><div class="chip-text">Order Tracker</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4B3;</div><div class="chip-text">Payment Checkout</div></div>
                <div class="app-chip"><div class="chip-icon">&#x2B50;</div><div class="chip-text">Reviews &amp; Ratings</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CA;</div><div class="chip-text">Sales Dashboard</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">&#x1F4E2;</div><div class="chip-text">Push Promotions</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Selling Online Shouldn't Mean Renting a Storefront You Can't Control</h2>
                <p class="section-description">Most small brands are stuck between marketplace listings they don't own and custom-coded apps they can't afford. There's a better way to sell directly to your customers.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The eCommerce Problem</h3>
                    <ul class="card-list">
                        <li>Marketplace platforms take 15&ndash;30% commission on every sale</li>
                        <li>Web-only storefronts miss mobile shoppers who prefer native apps</li>
                        <li>No native app means no push notifications for promotions or restocks</li>
                        <li>Shopify's mobile app is for store management, not customer shopping</li>
                        <li>Custom app development starts at $25,000+ and takes months</li>
                        <li>Your customer data lives on someone else's platform</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo eCommerce Solution</h3>
                    <ul class="card-list">
                        <li>Own your storefront&mdash;web, iOS, and Android from a single build</li>
                        <li>Built-in relational database manages products, orders, and customers</li>
                        <li>Native push notifications drive repeat purchases and announce sales</li>
                        <li>$36/mo with unlimited users, records, and storage&mdash;no commissions</li>
                        <li>Ada generates a working store from a description&mdash;ship in days</li>
                        <li>Your customer data stays in your database, not a third party's</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 You Need to Sell From Your Own App</h2>
                <p class="section-description">Built for brands and small businesses that want a direct sales channel on web, iOS, and Android from a single build.</p>
            </div>
            <div class="features">
                <div class="feature">
                    <div class="feature-icon">&#x1F6CD;&#xFE0F;</div>
                    <h3>Product Catalog</h3>
                    <p>Display products with images, descriptions, pricing, variants, and categories. Adalo's built-in relational database connects products to categories, reviews, and inventory&mdash;no external database setup required.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F6D2;</div>
                    <h3>Shopping Cart &amp; Checkout</h3>
                    <p>Add-to-cart functionality with quantity selection, cart totals, and checkout flow. Connect payment processing via Stripe through Zapier or Custom Actions to handle secure transactions.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F4E6;</div>
                    <h3>Order Tracking</h3>
                    <p>Customers track order status from placed to shipped to delivered. Push notifications alert them at each stage. You get an admin dashboard showing all orders, fulfillment status, and revenue.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F514;</div>
                    <h3>Push Notifications</h3>
                    <p>Native push notifications alert customers about sales, new arrivals, back-in-stock items, and shipping updates. This is the single biggest advantage of a native app over a web-only store.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x2B50;</div>
                    <h3>Reviews &amp; Ratings</h3>
                    <p>Let customers rate and review products directly in your app. Reviews are stored in the built-in database and displayed on product pages, building trust and driving conversions.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F4CA;</div>
                    <h3>Sales Dashboard</h3>
                    <p>Build admin dashboards showing revenue, top products, customer counts, and order trends. Filter by date, category, or customer segment to understand what's selling and why.</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 Live Store 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 ecommerce 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 you're selling and how your store should work. Magic Start generates a complete ecommerce app with product screens, cart, checkout, and database&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 an ecommerce app for a handmade jewelry brand. I need a product catalog with categories (Rings, Necklaces, Bracelets, Earrings), product detail pages with photos and sizes, a shopping cart, order tracking, and a dashboard for me to manage inventory and view sales."</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Customize Your Storefront</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust product layouts, category navigation, and checkout flow. Add features with Magic Add using natural language.</p>
                        <div class="step-details">
                            <div class="step-details-title">Typical ecommerce screens:</div>
                            <div class="columns-list">
                                <div class="column-item">Home / Featured</div>
                                <div class="column-item">Category View</div>
                                <div class="column-item">Product Detail</div>
                                <div class="column-item">Shopping Cart</div>
                                <div class="column-item">Checkout</div>
                                <div class="column-item">Order History</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Connect Payments &amp; Inventory</h3>
                        <p>Use Adalo's built-in relational database for product and order data. Connect Stripe for payment processing via Zapier or Custom Actions. If you manage inventory in Google Sheets, SheetBridge connects your spreadsheet as a relational database so stock levels stay in sync.</p>
                        <div class="step-details">
                            <div class="step-details-title">Common integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item"><div class="screen-title">Stripe via Zapier</div><div class="screen-desc">Accept credit card and Apple Pay payments securely</div></div>
                                <div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Sync product inventory from Google Sheets as a relational database</div></div>
                                <div class="screen-item"><div class="screen-title">Custom API</div><div class="screen-desc">Connect to shipping APIs like ShipStation or EasyPost</div></div>
                                <div class="screen-item"><div class="screen-title">Zapier / Make</div><div class="screen-desc">Automate order confirmations, email receipts, and fulfillment</div></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>Preview on Real Devices</h3>
                        <p>Preview your store on any device form factor directly from the canvas. Test the full purchase flow&mdash;browsing products, adding to cart, 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 store 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 the app 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 eCommerce</span>
                <h2>A Store You Own, on Every Device, for a Flat Fee</h2>
                <p class="section-description">Stop paying commissions and renting storefronts. Build a branded shopping experience you control.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4B0;</div>
                    <h3>Zero Sales Commission</h3>
                    <p>Adalo charges $36/mo flat&mdash;no percentage of sales, no platform transaction fees. Keep 100% of your revenue (minus your own payment processor fees). Marketplace platforms take 15&ndash;30% of every sale.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4F1;</div>
                    <h3>Native App in App Stores</h3>
                    <p>Your store lives in the Apple App Store and Google Play as a real native app. Customers find you, download, and buy with push notifications driving repeat purchases&mdash;something web-only stores can't match.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F5C4;&#xFE0F;</div>
                    <h3>Your Data, Your Database</h3>
                    <p>Customer emails, purchase history, and preferences live in your Adalo database&mdash;not locked inside a marketplace platform. Build customer relationships directly without intermediaries.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F680;</div>
                    <h3>Launch in Days, Not Months</h3>
                    <p>Ada generates your store from a description. Visually customize on the canvas. Publish to three platforms from one build. Most Makers go from idea to live store in under a week.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Every Screen Visually</h3>
                    <p>See your product catalog, cart, checkout, and order tracking screens simultaneously on Adalo's multi-screen canvas. Point at any element and visually direct the AI to refine it—no chat prompts needed.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Built to Handle Growth</h3>
                    <p>Adalo 3.0 delivers 3–4× faster performance and scales to 1M+ monthly active users. Your store handles flash sales and holiday traffic without the infrastructure headaches.</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 eCommerce App vs. Shopify vs. Custom Development</h2>
                <p class="section-description">See how building your own ecommerce app with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead>
                    <tr>
                        <th>Factor</th>
                        <th>Adalo eCommerce App</th>
                        <th>Shopify</th>
                        <th>Custom Development</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Hours (template), weeks (custom)</td><td>3&ndash;6 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited usage)</td><td>$39&ndash;399/mo + transaction fees</td><td>$5,000&ndash;25,000/mo (hosting + team)</td></tr>
                    <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Management app only, not customer-facing</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Push Notifications</td><td>&#x2705; Built-in native</td><td>Via third-party apps</td><td>Custom implementation required</td></tr>
                    <tr><td>Sales Commission</td><td>&#x2705; 0%</td><td>0.5&ndash;2% (unless Shopify Payments)</td><td>0%</td></tr>
                    <tr><td>Customization</td><td>&#x2705; Full &mdash; your screens, your flow</td><td>Theme-based with Liquid templating</td><td>Full (at development cost)</td></tr>
                    <tr><td>Data Ownership</td><td>&#x2705; Your database</td><td>Shopify's platform</td><td>Your infrastructure</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 eCommerce App Success</h2>
                <p class="section-description">Patterns from Makers who have built and shipped successful ecommerce apps with Adalo.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4F7;</span> Invest in Product Photos</h3>
                    <p>High-quality product images are the number one conversion driver in mobile commerce. Use consistent lighting, multiple angles, and lifestyle shots. Adalo's image component handles resizing automatically.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F6D2;</span> Keep the Cart Visible</h3>
                    <p>Add a persistent cart badge showing item count on every screen. Make it easy for shoppers to review and modify their cart from anywhere in the app without losing their browsing context.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F514;</span> Use Push Notifications Wisely</h3>
                    <p>Send push notifications for order status updates, restocks, and limited-time sales. Avoid daily promotions. Well-timed notifications drive repeat purchases without annoying customers.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CA;</span> Track What Sells</h3>
                    <p>Build an admin dashboard that shows top-selling products, average order value, and customer purchase frequency. Use this data to inform inventory decisions and promotional strategy.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Migrate Catalogs with SheetBridge</h3>
                    <p>If your product catalog lives in Google Sheets, use SheetBridge to connect it as a relational database. Import products, variants, and pricing without manual re-entry.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Test the Full Purchase Flow</h3>
                    <p>Before launching, complete 10 test orders yourself—including edge cases like out-of-stock items, coupon codes, and address changes. Catch friction points before your customers do.</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 an Online Store</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 prototype your store.</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 updates, sale announcements, and restock alerts. The most direct marketing channel for driving repeat purchases from existing customers.</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 managing inventory in Google Sheets? SheetBridge connects your spreadsheet as a relational database so you can keep your existing workflow while building a real app.</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 store to 6,000+ tools. Process payments with Stripe, send order confirmations, sync inventory with fulfillment services, and automate shipping notifications.</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 eCommerce 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 an ecommerce 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 store needs and Magic Start generates a complete ecommerce app with product catalog, cart, checkout, and database. Then visually customize everything on the canvas by pointing at elements and directing changes. Makers routinely build and publish complete ecommerce 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 an ecommerce app with Adalo?</h3>
                    <div class="faq-answer">
                        <p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on users, records, actions, or storage, and zero sales commission. Compare that to Shopify at $39&ndash;399/mo plus transaction fees, or custom development starting at $25,000+. The free plan includes 500 database records so you can prototype your store before committing.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can I publish my ecommerce app to the App Store and Google Play?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo builds true native iOS (IPA) and Android (APK) apps&mdash;not web wrappers. Your store appears in the Apple App Store and Google Play like any other app. Customers find you, download, and shop natively with push notifications for sales and order updates.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">How do I accept payments in my Adalo ecommerce app?</h3>
                    <div class="faq-answer">
                        <p>Adalo connects to Stripe for payment processing through Zapier integrations or Custom Actions. Stripe handles credit cards, debit cards, and Apple Pay securely. You set up your Stripe account, connect it to your Adalo app, and payments flow directly to your bank account. Adalo takes zero commission on transactions&mdash;you only pay Stripe's standard processing fees.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can I manage inventory in my Adalo app?</h3>
                    <div class="faq-answer">
                        <p>Yes. Use Adalo's built-in relational database to track product stock levels, set low-stock alerts, and update inventory as orders are placed. If you currently manage inventory in Google Sheets, SheetBridge connects your spreadsheet as a relational database so your stock data stays in sync. You can also build an admin dashboard to monitor inventory across all product categories.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">How does an Adalo ecommerce app compare to Shopify?</h3>
                    <div class="faq-answer">
                        <p>Shopify is the industry standard for web-based ecommerce with a mature ecosystem of themes, plugins, and payment processing. For brands that want a native mobile app in app stores, Shopify doesn't produce customer-facing native apps&mdash;its mobile app is for store management only. Adalo lets you build a branded native shopping app for iOS, Android, and web from a single build at $36/mo. The trade-off: Shopify has deeper built-in ecommerce features like abandoned cart recovery, advanced shipping rules, and tax calculations. If your primary channel is web and you need those features out of the box, Shopify is the right choice.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">What can't Adalo do for ecommerce?</h3>
                    <div class="faq-answer">
                        <p>Adalo excels at building branded ecommerce apps with native mobile presence, but it doesn't include built-in payment processing (you connect Stripe), automated tax calculations, advanced shipping rate calculators, or SEO-optimized web storefronts. Abandoned cart email sequences, multi-currency support, and complex discount rules require custom logic or third-party integrations via Zapier. For brands that want a native app as their direct sales channel at a fraction of the cost, Adalo is the practical choice. For full-featured web storefronts with mature ecommerce tooling, Shopify or WooCommerce are better starting points.</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/crm-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">CRM Apps</a>, <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/dating-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Dating Apps</a>, and <a href="https://www.adalo.com/solutions/fitness-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Fitness 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 eCommerce Apps with Adalo</h2>
                <p class="section-description">Step-by-step guides, documentation, and integration walkthroughs to help you build and launch your store.</p>
            </div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-an-ecommerce-app" class="resource-card">
                    <div class="resource-type">Tutorial</div>
                    <h3>How to Build an eCommerce App Without Code</h3>
                    <p>Full walkthrough: product catalog, shopping cart, checkout, 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 APIs &amp; Payment Processors</h3>
                    <p>How to use External Collections and Custom Actions to connect Stripe, shipping APIs, and inventory tools.</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 Inventory via SheetBridge</h3>
                    <p>Sync your product spreadsheet with your store app to keep inventory levels accurate across all channels.</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>Database Design for eCommerce</h3>
                    <p>How to structure collections for products, categories, orders, and customers in Adalo's relational database.</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 Own Online Store?</h2>
            <p>Join Makers who have launched branded ecommerce apps on iOS, Android, and web&mdash;with zero sales commission and a flat $36/mo.</p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">Start Building Your Store 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>

Applications de commerce électronique