<style> * { margin: 0; padding: 0; box-sizing: border-box; } :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 { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; } .nav-login:hover { color: var(--teal); } .nav-right-link { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; } .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; } /* ============================= CYBERPUNK DEVICE CLUSTER ============================= */ .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 TABLE === */ .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 & Tutorials */ .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/inventory-app-builder/#webpage", "url": "https://www.adalo.com/solutions/inventory-app-builder", "name": "Inventory App Builder | Adalo", "description": "Build a custom inventory 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 track stock, scan barcodes, and manage warehouses across all three platforms.", "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": "Inventory App Builder", "item": "https://www.adalo.com/solutions/inventory-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 add barcode scanning to my inventory app?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's native iOS and Android apps can access the device camera for barcode and QR code scanning. You can build a scan-to-lookup workflow where staff scan an item's barcode to instantly view stock levels, location, and supplier details." } }, { "@type": "Question", "name": "Can I track inventory across multiple locations?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's built-in relational database lets you create location records and link them to inventory items with per-location quantities. You can build transfer screens to move stock between warehouses, retail stores, or job sites." } }, { "@type": "Question", "name": "How do reorder alerts work?", "acceptedAnswer": { "@type": "Answer", "text": "You set a minimum stock threshold for each item. When stock drops below that threshold, Adalo sends a native push notification and displays the item on a low-stock dashboard. Connect Zapier for automated purchase orders." } }, { "@type": "Question", "name": "Can I manage supplier information in the app?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Use Adalo's relational database to create a Suppliers collection linked to your Items collection. Each supplier record can include company name, contact person, pricing, lead times, and order history." } }, { "@type": "Question", "name": "Can I generate inventory reports?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Build custom dashboards displaying stock value, item counts by category or location, and usage trends. Connect Zapier to push data to Google Sheets or accounting software for detailed report exports." } }, { "@type": "Question", "name": "How much does a custom inventory app cost?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's paid plans start at $36/mo with unlimited usage\u2014no caps on users, records, actions, or storage. The free plan includes 500 database records to prototype. Compare that to Sortly at $49+/mo with user limits." } }, { "@type": "Question", "name": "What can't Adalo inventory apps do?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo excels at custom inventory apps but isn't a replacement for full ERP systems. Advanced features like lot tracking, automated demand forecasting, EDI integration, and manufacturing BOM management require dedicated platforms like NetSuite or SAP." } } ] } ] } </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>Inventory App Builder</span> </div> <div class="hero-inner"> <div class="hero-content"> <div class="use-case-badge"> 📦 Inventory & Stock </div> <h1> Build Custom <span class="hero-highlight">Inventory Apps</span> for Any Warehouse or Team </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 — no code, no developers required. Build an inventory system that tracks your stock the way your business actually works. </p> <div class="hero-buttons"> <a href="https://app.adalo.com/signup" class="btn-primary">Build Free <span class="arrow">→</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</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> <!-- Cyberpunk Device Cluster --> <div class="device-column"> <div class="device-cluster"> <!-- Desktop: Light Dashboard --> <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/inventory</div> </div> <div class="screen"> <div class="dk-header"> <h4>Stock Dashboard</h4> <div class="dk-add">+ Add Item</div> </div> <div class="dk-body"> <div class="dk-sidebar"> <span class="si active">■</span> <span class="si">○</span> <span class="si">□</span> <span class="si">△</span> <span class="si">⚙</span> </div> <div class="dk-kanban"> <div class="dk-col"> <div class="glass-col-header">In Stock</div> <div class="glass-card"> <div class="glass-name">Widget A</div> <div class="glass-price">1,245 units</div> <span class="glass-tag glass-tag-ok">OK</span> </div> <div class="glass-card"> <div class="glass-name">Widget B</div> <div class="glass-price">892 units</div> <div class="glass-sub">Bay C-4</div> </div> <div class="glass-card"> <div class="glass-name">Connector J</div> <div class="glass-price">3,100 units</div> <span class="glass-tag glass-tag-new">SURPLUS</span> </div> </div> <div class="dk-col"> <div class="glass-col-header">Low Stock</div> <div class="glass-card"> <div class="glass-name">Part X-7</div> <div class="glass-price">23 units</div> <span class="glass-tag glass-tag-pop">LOW</span> </div> <div class="glass-card"> <div class="glass-name">Gasket #4</div> <div class="glass-price">15 units</div> <span class="glass-tag glass-tag-sale">REORDER</span> </div> <div class="glass-card"> <div class="glass-name">Bearing M2</div> <div class="glass-price">8 units</div> <div class="glass-sub">Critical</div> </div> </div> <div class="dk-col"> <div class="glass-col-header">On Order</div> <div class="glass-card"> <div class="glass-name">Part X-7</div> <div class="glass-price">500 units</div> <span class="glass-tag glass-tag-new">ETA 3/15</span> </div> <div class="glass-card"> <div class="glass-name">Gasket #4</div> <div class="glass-price">200 units</div> <div class="glass-sub">PO-2851</div> </div> </div> <div class="dk-col"> <div class="glass-col-header">Warehouse</div> <div class="glass-card"> <div class="glass-name">Bay A-12</div> <div class="glass-price">89% full</div> <div class="glass-sub">2,340 items</div> </div> <div class="glass-card"> <div class="glass-name">Bay B-3</div> <div class="glass-price">62% full</div> <span class="glass-tag glass-tag-ok">AVAILABLE</span> </div> </div> </div> </div> </div> </div> <div class="stand"></div> <div class="base"></div> </div> <!-- Tablet: Cyberpunk Detail (iPad style) --> <div class="cyber-tablet"> <div class="frame"> <div class="tb-camera"></div> <div class="screen"> <div class="tb-header"> <h4>Part X-7</h4> <span class="neon-items">23 units</span> </div> <div class="tb-kanban"> <div style="flex:1;"> <div class="neon-card"> <div class="n-name">SKU</div> <div class="n-amount neon-cyan">PX7-2024-A</div> <div class="n-contact">Bay A-12</div> </div> <div class="neon-card"> <div class="n-name">Reorder Point</div> <div class="n-amount neon-magenta">50 units</div> <div class="n-contact">Below min</div> </div> <div class="neon-card"> <div class="n-name">On Order</div> <div class="n-amount neon-gold">500 units</div> <div class="n-contact">PO-2847</div> </div> <div class="tb-total-row"> <div class="tb-total-label">COST</div> <div class="tb-total-amount">$4.25/ea</div> </div> </div> </div> <div class="tb-nav"> <span>○</span> <span class="active" style="color:#ff00ff;">■</span> <span>□</span> <span>⚙</span> </div> <div class="tb-home-bar"></div> </div> </div> </div> <!-- Phone: Native iOS (iPhone style) --> <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>●●●</span> </div> <div class="native-header"> <h4>Quick Scan</h4> <span class="native-accent">Ready</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>Scan</span> <span>Verify</span> <span class="active">Update</span> <span>Done</span> </div> <div class="native-content"> <div class="native-card"> <div class="native-row"> <span class="native-label" style="margin:0;">Scanned</span> <span class="native-pill pill-success">PX7</span> </div> </div> <div class="native-card"> <div class="native-label">Item Details</div> <div class="native-row"> <span class="native-value">Part X-7</span> <span class="native-price">23 units</span> </div> <div class="native-row"> <span class="native-value">Location</span> <span class="native-price">Bay A-12</span> </div> <div class="native-row"> <span class="native-value">Last Count</span> <span class="native-price">Today</span> </div> </div> <div class="native-total"> <span class="native-total-label">Updated</span> <span class="native-total-amount">23</span> </div> </div> <div class="native-nav"> <span>⌂</span> <span>🔍</span> <span class="active">📦</span> <span>⚙</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 Inventory App You Can Imagine</h2> <p class="section-description"> From basic stock counters to multi-warehouse management systems—describe what you need and Ada, Adalo's AI builder, generates a working inventory app with Magic Start in minutes. </p> </div> <div class="app-types-grid"> <div class="app-chip"> <div class="chip-icon">📦</div> <div class="chip-text">Stock Tracker</div> </div> <div class="app-chip"> <div class="chip-icon">🏭</div> <div class="chip-text">Warehouse Manager</div> </div> <div class="app-chip"> <div class="chip-icon">📋</div> <div class="chip-text">Asset Registry</div> </div> <div class="app-chip"> <div class="chip-icon">🛒</div> <div class="chip-text">Reorder System</div> </div> <div class="app-chip"> <div class="chip-icon">🚚</div> <div class="chip-text">Receiving Log</div> </div> <div class="app-chip"> <div class="chip-icon">📊</div> <div class="chip-text">Stock Dashboard</div> </div> <div class="app-chip"> <div class="chip-icon">📱</div> <div class="chip-text">Field Counter</div> </div> <div class="app-chip"> <div class="chip-icon">🔗</div> <div class="chip-text">Supplier Portal</div> </div> </div> </div> </div> <div class="section"> <div class="container"> <div class="section-header"> <span class="section-label">The Challenge</span> <h2>Your Inventory Deserves Better Than Spreadsheets & Expensive ERP Systems</h2> <p class="section-description"> Most small and mid-size businesses are stuck between error-prone spreadsheets and enterprise inventory systems that cost thousands per month. There's a better path. </p> </div> <div class="problem-solution"> <div class="problem-card"> <h3 class="card-title">The Inventory Management Problem</h3> <ul class="card-list"> <li>Stock levels tracked in spreadsheets with no real-time updates from the floor</li> <li>Items lost across warehouses, trucks, and retail locations</li> <li>No mobile access for warehouse staff doing physical counts</li> <li>ERP systems costing $500–5,000+/mo with features you'll never use</li> <li>Reorder alerts that come too late or not at all</li> <li>Different tracking methods across locations that never reconcile</li> </ul> </div> <div class="solution-card"> <h3 class="card-title">The Adalo Inventory Solution</h3> <ul class="card-list"> <li>Visual canvas lets you design stock views, item details, and dashboards your way</li> <li>Built-in relational database connects items, locations, suppliers, and transactions</li> <li>Native iOS and Android apps for real-time stock updates from the warehouse floor</li> <li>$36/mo with unlimited users, records, and storage—no per-seat charges</li> <li>Ada generates a working inventory app from a description—ship in days, not months</li> <li>One app version across web, iOS, and Android for every team member</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 Warehouse Team Needs in One App</h2> <p class="section-description"> Built for teams that need inventory tracking tailored to how they actually operate—on web, iOS, and Android from a single build. </p> </div> <div class="features"> <div class="feature"> <div class="feature-icon">📦</div> <h3>Stock Level Tracking</h3> <p>Track quantities, locations, and status for every item in Adalo's built-in relational database. Link items to suppliers, purchase orders, and transaction history—all connected automatically without external database setup.</p> </div> <div class="feature"> <div class="feature-icon">🔍</div> <h3>Barcode & QR Scanning</h3> <p>Use your phone's camera to scan barcodes and QR codes for instant stock lookups, receiving, and transfers. Native iOS and Android apps access the device camera directly for fast, reliable scanning on the warehouse floor.</p> </div> <div class="feature"> <div class="feature-icon">🔔</div> <h3>Reorder Alerts</h3> <p>Set minimum stock thresholds per item and receive native push notifications when levels drop below the reorder point. Never run out of critical materials because someone forgot to check a spreadsheet.</p> </div> <div class="feature"> <div class="feature-icon">🗺️</div> <h3>Multi-Location Tracking</h3> <p>Track inventory across warehouses, retail stores, trucks, and job sites. See stock levels by location, transfer items between sites, and maintain accurate counts at every point in your supply chain.</p> </div> <div class="feature"> <div class="feature-icon">📊</div> <h3>Stock Dashboards</h3> <p>Build dashboards showing total stock value, low-stock items, incoming orders, and usage trends. Filter by location, category, supplier, or any custom field your operation requires.</p> </div> <div class="feature"> <div class="feature-icon">👥</div> <h3>Supplier Management</h3> <p>Link suppliers to items with pricing, lead times, and contact details. When an item needs reordering, your team sees supplier information immediately—no switching between systems.</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 Inventory App in Five Steps</h2> <p class="section-description"> Adalo 3.0's infrastructure (launched late 2025) is 3–4x faster and scales to 1M+ monthly active users. Here's how to build your inventory system 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 Inventory System to Ada</h3> <p>Tell Ada, Adalo's AI builder, what your warehouse or operations team needs. Magic Start generates a complete inventory app with screens, database, and navigation from your description—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 inventory app for a hardware distributor. I need a product catalog with SKU, name, quantity, location, and supplier. Include a stock dashboard, low-stock alerts, a receiving screen for incoming shipments, and a transfer screen to move items between our two warehouses." </div> </div> </div> </div> </div> <div class="workflow-step"> <div class="step-number">2</div> <div class="step-content"> <h3>Customize Your Data Model</h3> <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your item fields, categories, and location structure. Add features like barcode scanning or supplier management with Magic Add using natural language.</p> <div class="step-details"> <div class="step-details-title">Typical item fields:</div> <div class="columns-list"> <div class="column-item">Item Name</div> <div class="column-item">SKU</div> <div class="column-item">Quantity</div> <div class="column-item">Location</div> <div class="column-item">Reorder Point</div> <div class="column-item">Supplier</div> </div> </div> </div> </div> <div class="workflow-step"> <div class="step-number">3</div> <div class="step-content"> <h3>Connect Data Sources</h3> <p>Use Adalo's built-in relational database for your primary inventory data, or connect Google Sheets via SheetBridge if your team already tracks stock in spreadsheets. Add Zapier or Make integrations for purchase orders, accounting software, and supplier notifications.</p> <div class="step-details"> <div class="step-details-title">Common inventory integrations:</div> <div class="screens-grid"> <div class="screen-item"> <div class="screen-title">SheetBridge</div> <div class="screen-desc">Import existing item 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 accounting, purchasing, and supplier notification systems</div> </div> <div class="screen-item"> <div class="screen-title">Custom API</div> <div class="screen-desc">External Collections connect to any REST API for ERP or POS data</div> </div> <div class="screen-item"> <div class="screen-title">Webhooks</div> <div class="screen-desc">Trigger reorder emails or purchase orders when stock drops below thresholds</div> </div> </div> </div> </div> </div> <div class="workflow-step"> <div class="step-number">4</div> <div class="step-content"> <h3>Test on Real Devices</h3> <p>Preview your inventory app on any device form factor directly from the canvas. Test the full workflow—scanning items, adjusting quantities, receiving shipments, checking dashboards—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 inventory app as a native iOS app on the Apple App Store, a native Android app on Google Play, and a web app—all from a single build. Your warehouse team downloads the app and starts tracking stock 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 Inventory</span> <h2>The Inventory System That Fits Your Budget & Your Workflow</h2> <p class="section-description"> Stop paying for enterprise ERP features you don't use. Build exactly the inventory system your team needs. </p> </div> <div class="benefits-grid"> <div class="benefit-card"> <div class="benefit-icon">💸</div> <h3>Fraction of ERP Cost</h3> <p>Adalo costs $36/mo with unlimited users, records, and storage. No per-seat licensing. A 20-person warehouse team on NetSuite or SAP pays thousands per month—on Adalo, it's still $36/mo.</p> </div> <div class="benefit-card"> <div class="benefit-icon">📱</div> <h3>Warehouse Floor Mobility</h3> <p>True native iOS and Android apps with barcode scanning, push notifications, and camera access. Your floor staff updates stock in real time from their phones, not by walking back to a desktop terminal.</p> </div> <div class="benefit-card"> <div class="benefit-icon">🗄️</div> <h3>One Database for Everything</h3> <p>Adalo's built-in relational database connects items, locations, suppliers, transactions, and purchase orders without configuring external services. No Firebase setup. No Supabase. It just works.</p> </div> <div class="benefit-card"> <div class="benefit-icon">🚀</div> <h3>Ship in Days, Not Months</h3> <p>Ada generates your inventory app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live inventory app in under a week.</p> </div> <div class="benefit-card"> <div class="benefit-icon">🔍</div> <h3>Visual Canvas for Complex Workflows</h3> <p>See every screen of your inventory app at once—receiving, transfers, cycle counts, dashboards. Adalo's multi-screen canvas lets you design warehouse workflows visually instead of describing them in chat prompts.</p> </div> <div class="benefit-card"> <div class="benefit-icon">📊</div> <h3>Scale Without Surprises</h3> <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. Whether you're tracking 500 SKUs or 50,000, the infrastructure scales with your operation—no migration required.</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>Custom Inventory App vs. Off-the-Shelf vs. Custom Development</h2> <p class="section-description"> See how building your own inventory app with Adalo compares to the alternatives. </p> </div> <table class="comp-table"> <thead> <tr> <th>Factor</th> <th>Adalo Inventory App</th> <th>Sortly / inFlow</th> <th>Custom Development</th> </tr> </thead> <tbody> <tr> <td>Build Time</td> <td>✅ Days to weeks</td> <td>Immediate, but limited customization</td> <td>3–6 months</td> </tr> <tr> <td>Monthly Cost</td> <td>✅ $36/mo flat (unlimited users)</td> <td>$49–149/mo (user and feature caps)</td> <td>$5,000–20,000/mo (hosting + team)</td> </tr> <tr> <td>Native Mobile App</td> <td>✅ iOS and Android (true native)</td> <td>Mobile apps available (limited customization)</td> <td>Yes (if budgeted separately)</td> </tr> <tr> <td>Multi-Location</td> <td>✅ Unlimited locations in your data model</td> <td>Limited to plan tier</td> <td>Full (at development cost)</td> </tr> <tr> <td>Customization</td> <td>✅ Full — your screens, your fields, your workflow</td> <td>Constrained by platform templates</td> <td>Full (at development cost)</td> </tr> <tr> <td>Maintenance</td> <td>✅ Adalo handles infrastructure</td> <td>Vendor handles</td> <td>Your dev team handles</td> </tr> <tr> <td>Time to Change</td> <td>✅ Minutes</td> <td>Feature requests to vendor</td> <td>Sprint cycle (1–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 Inventory App Success</h2> <p class="section-description"> Patterns from Makers who have built and shipped successful inventory apps with Adalo. </p> </div> <div class="practices-grid"> <div class="practice-card"> <h3><span class="practice-icon">📦</span> Start with Your Item Catalog</h3> <p>Your item list is the foundation of any inventory system. Define your fields first (name, SKU, quantity, location, reorder point), build the catalog view, then expand to dashboards, receiving, and transfers.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">🔗</span> Link Items to Locations & Suppliers</h3> <p>Use Adalo's relational database to connect items to locations and suppliers. This way, when staff opens an item, they see current stock at every location, supplier pricing, and lead times in one place.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">🔔</span> Set Reorder Points Early</h3> <p>Configure minimum stock thresholds and push notification alerts before going live. Catching stockouts early is the single biggest value-add of moving from spreadsheets to an app.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">📱</span> Design Mobile-First for Floor Staff</h3> <p>Warehouse staff will use the app on phones. Design for quick searches, large tap targets, and minimal data entry. Use camera-based scanning instead of manual SKU typing whenever possible.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">🧪</span> Test with Real Stock Data</h3> <p>Import a sample of your actual inventory before going live. Real data exposes edge cases—items with zero stock, SKUs with special characters, multi-location items—that test data won't catch.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">📋</span> Use SheetBridge to Migrate Gradually</h3> <p>If your team tracks inventory in Google Sheets, use SheetBridge to connect your existing spreadsheet as a database. Run both systems in parallel until your team is confident in the app.</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 & Run an Inventory System</h2> </div> <div class="requirements-cards"> <div class="requirement-card"> <div class="requirement-icon">♾️</div> <div class="requirement-content"> <h4>Unlimited Records on Paid Plans</h4> <p>No caps on items, locations, or transactions. 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">🔔</div> <div class="requirement-content"> <h4>Push Notifications</h4> <p>Native push notifications for low-stock alerts, reorder triggers, and receiving confirmations. Keeps your warehouse team aware without requiring them to check dashboards constantly.</p> </div> </div> <div class="requirement-card"> <div class="requirement-icon">📄</div> <div class="requirement-content"> <h4>Google Sheets via SheetBridge</h4> <p>Already tracking inventory 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">⚡</div> <div class="requirement-content"> <h4>Zapier & Make Integrations</h4> <p>Connect your inventory app to 6,000+ tools. Sync with accounting software, purchasing systems, supplier portals, 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 Inventory 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 — no code, no developers required.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">Can I add barcode scanning to my inventory app?</h3> <div class="faq-answer"> <p>Yes. Adalo's native iOS and Android apps can access the device camera for barcode and QR code scanning. You can build a scan-to-lookup workflow where staff scan an item's barcode to instantly view stock levels, location, and supplier details—or scan during receiving to update quantities automatically. This works because Adalo builds true native apps, not web wrappers, so you get full access to device hardware.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">Can I track inventory across multiple locations?</h3> <div class="faq-answer"> <p>Yes. Adalo's built-in relational database lets you create location records and link them to inventory items with per-location quantities. You can build transfer screens to move stock between warehouses, retail stores, or job sites—and see a consolidated view across all locations on your dashboard. There's no limit on the number of locations you can track.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">How do reorder alerts work?</h3> <div class="faq-answer"> <p>You set a minimum stock threshold (reorder point) for each item in the database. When a stock adjustment drops an item below that threshold, Adalo can send a native push notification to designated team members and display the item on a low-stock dashboard. For automated purchasing, connect a Zapier workflow to send reorder emails or create purchase orders in your accounting system when thresholds are triggered.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">Can I manage supplier information in the app?</h3> <div class="faq-answer"> <p>Yes. Use Adalo's relational database to create a Suppliers collection linked to your Items collection. Each supplier record can include company name, contact person, phone, email, pricing, lead times, and order history. When viewing an item that needs reordering, your team sees the supplier details immediately without switching between systems.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">Can I generate inventory reports?</h3> <div class="faq-answer"> <p>Yes. You can build custom dashboards in Adalo that display stock value, item counts by category or location, usage trends, and low-stock summaries. For detailed report exports, connect Zapier to push inventory data to Google Sheets or your accounting software on a schedule. Adalo also supports CSV export from the database for ad-hoc analysis.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">How much does a custom inventory app cost?</h3> <div class="faq-answer"> <p>Adalo's paid plans start at $36/mo with unlimited usage—no caps on users, records, actions, or storage. Compare that to Sortly at $49+/mo with user limits or inFlow at $110+/mo. A 15-person warehouse team on Sortly's Team plan costs $149/mo with feature caps. That same team on Adalo costs $36/mo total, with fully custom screens and native iOS and Android apps included. The free plan includes 500 database records so you can prototype your inventory app before committing.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">What can't Adalo inventory apps do?</h3> <div class="faq-answer"> <p>Adalo excels at building custom inventory apps that fit your specific workflow, but it's not a drop-in replacement for full ERP systems. Advanced features like lot tracking and serial number tracing, automated demand forecasting, EDI integration with suppliers, and manufacturing BOM (bill of materials) management require dedicated platforms like NetSuite, Fishbowl, or SAP. Adalo also doesn't include built-in barcode label printing—you'd connect to a label printer via Zapier or a Custom Action. For teams that need inventory tracking tailored to their workflow with native mobile apps at a fraction of ERP pricing, 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/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/ai-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">AI-Powered Apps</a>, and <a href="https://www.adalo.com/solutions/internal-tools-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Internal Tools</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 & Tutorials</span> <h2>Learn How to Build Inventory Apps with Adalo</h2> <p class="section-description"> Step-by-step guides, video walkthroughs, and documentation to help you build and ship your inventory system. </p> </div> <div class="resources-grid"> <a href="https://www.adalo.com/posts/how-to-build-an-inventory-app" class="resource-card"> <div class="resource-type">Tutorial</div> <h3>How to Build an Inventory App Without Code</h3> <p>Full walkthrough: item database, stock views, barcode scanning, and publishing to app stores.</p> <span class="resource-link">Read guide →</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 inventory app to existing APIs and tools.</p> <span class="resource-link">View docs →</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 Inventory App via SheetBridge</h3> <p>Migrate your spreadsheet stock tracker to a real inventory app without losing your existing data workflow.</p> <span class="resource-link">Read guide →</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—the foundation of any inventory data model.</p> <span class="resource-link">View docs →</span> </a> </div> </div> </div> <div class="cta-section"> <div class="cta-content"> <h2>Ready to Build Your Inventory App?</h2> <p> Join Makers who have replaced spreadsheet stock trackers and overpriced ERP licenses with custom native apps built on Adalo—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 Inventory App Free <span class="arrow">→</span> </a> <a href="https://www.adalo.com/solutions" class="btn btn-outline"> Explore More Solutions </a> </div> </div> </div>
Inventory & Warehouse Apps