<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, .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-name { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #111827; margin-bottom: 2px; } .cyber-desktop .glass-price { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: #7c3aed; margin-bottom: 2px; } .cyber-desktop .glass-sub { font-family: 'Inter', sans-serif; font-size: 7px; color: #9ca3af; } .cyber-desktop .glass-tag { display: inline-block; font-family: 'Inter', sans-serif; font-size: 6px; font-weight: 700; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.5px; margin-top: 3px; } .cyber-desktop .glass-tag-new { background: #ede9fe; color: #7c3aed; } .cyber-desktop .glass-tag-sale { background: #fce7f3; color: #db2777; } .cyber-desktop .glass-tag-pop { background: #fef3c7; color: #d97706; } .cyber-desktop .glass-tag-ok { background: #d1fae5; color: #059669; } .cyber-desktop .stand, .cyber-desktop .base { display: none; } /* ═══════════════════════════════════════ TABLET — Cyberpunk Neon (iPad style) ═══════════════════════════════════════ */ .cyber-tablet { position: absolute; top: 100px; right: 30px; width: 280px; z-index: 4; } .cyber-tablet .frame { background: linear-gradient(160deg, #d4d4d8, #a8a8ad, #c0c0c4, #d4d4d8); border-radius: 18px; padding: 10px; box-shadow: 0 0 30px rgba(255, 0, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255,255,255,0.5); position: relative; } .cyber-tablet .tb-camera { width: 5px; height: 5px; background: #1a1a2a; border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; margin: 0 auto 6px; } .cyber-tablet .screen { border-radius: 8px; min-height: 320px; font-family: 'Orbitron', monospace; background: #0a0a1a; position: relative; overflow: hidden; display: flex; flex-direction: column; } .cyber-tablet .screen::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 240, 255, 0.015) 2px, rgba(0, 240, 255, 0.015) 4px); pointer-events: none; z-index: 2; } .cyber-tablet .tb-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; border-bottom: 1px solid rgba(255, 0, 255, 0.1); position: relative; z-index: 3; } .cyber-tablet .tb-header h4 { font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700; color: #ff00ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.6); } .cyber-tablet .tb-header .neon-items { font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); } .cyber-tablet .tb-kanban { display: flex; gap: 6px; padding: 12px 10px; overflow: hidden; position: relative; z-index: 3; flex: 1; } .cyber-tablet .neon-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 240, 255, 0.08); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; } .cyber-tablet .neon-card .n-name { font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 3px; } .cyber-tablet .neon-card .n-amount { font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700; margin-bottom: 3px; } .cyber-tablet .neon-card .n-contact { font-size: 8px; color: rgba(255, 255, 255, 0.3); } .cyber-tablet .neon-cyan { color: #00f0ff; text-shadow: 0 0 6px rgba(0, 240, 255, 0.6); } .cyber-tablet .neon-magenta { color: #ff00ff; text-shadow: 0 0 6px rgba(255, 0, 255, 0.6); } .cyber-tablet .neon-gold { color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); } .cyber-tablet .tb-total-row { margin-top: 6px; padding: 8px 10px; border-top: 1px solid rgba(255, 0, 255, 0.15); text-align: right; position: relative; z-index: 3; } .cyber-tablet .tb-total-label { font-size: 9px; color: rgba(255, 255, 255, 0.4); font-family: 'Orbitron', monospace; } .cyber-tablet .tb-total-amount { font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700; color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); } .cyber-tablet .tb-nav { display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid rgba(255, 0, 255, 0.08); position: relative; z-index: 3; margin-top: auto; } .cyber-tablet .tb-nav span { font-size: 14px; opacity: 0.3; } .cyber-tablet .tb-nav span.active { opacity: 1; } .cyber-tablet .tb-home-bar { width: 40px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 3px; margin: 4px auto 2px; position: relative; z-index: 3; } /* ═══════════════════════════════════════ PHONE — Light Native App (iPhone style) ═══════════════════════════════════════ */ .cyber-phone { position: absolute; top: 190px; right: 10px; width: 180px; z-index: 5; } .cyber-phone .frame { background: linear-gradient(160deg, #d4d4d8, #a8a8ad, #bbbbbe, #d4d4d8); border-radius: 32px; padding: 3px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255,255,255,0.6), inset 0 -0.5px 0 rgba(0,0,0,0.1); position: relative; } .cyber-phone .frame::before { content: ''; position: absolute; right: -1.5px; top: 70px; width: 2px; height: 24px; background: linear-gradient(180deg, #b0b0b4, #909094, #b0b0b4); border-radius: 0 2px 2px 0; } .cyber-phone .frame::after { content: ''; position: absolute; left: -1.5px; top: 60px; width: 2px; height: 16px; background: linear-gradient(180deg, #b0b0b4, #909094, #b0b0b4); border-radius: 2px 0 0 2px; } .cyber-phone .screen-bezel { background: #000; border-radius: 29px; overflow: hidden; } .cyber-phone .dynamic-island { width: 40px; height: 10px; background: #000; border-radius: 10px; margin: 0 auto; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 5; } .cyber-phone .screen { border-radius: 29px; min-height: 300px; background: #ffffff; overflow: hidden; display: flex; flex-direction: column; position: relative; } .cyber-phone .native-status { display: flex; justify-content: space-between; padding: 6px 14px 0; font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 600; color: #1d1d1f; } .cyber-phone .native-header { padding: 10px 14px 8px; } .cyber-phone .native-header h4 { font-family: -apple-system, 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #111827; letter-spacing: -0.4px; margin: 0 0 2px; } .cyber-phone .native-header .native-accent { font-family: -apple-system, 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: #059669; } .cyber-phone .native-progress { display: flex; gap: 0; align-items: center; margin: 0 14px 4px; } .cyber-phone .progress-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cyber-phone .progress-line { flex: 1; height: 2px; border-radius: 1px; } .cyber-phone .native-progress-labels { display: flex; justify-content: space-between; padding: 0 14px 10px; } .cyber-phone .native-progress-labels span { font-family: -apple-system, 'Inter', sans-serif; font-size: 6px; color: #9ca3af; } .cyber-phone .native-progress-labels span.active { color: #059669; font-weight: 600; } .cyber-phone .native-content { padding: 0 10px; flex: 1; } .cyber-phone .native-card { background: #f9fafb; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; } .cyber-phone .native-label { font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; } .cyber-phone .native-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; } .cyber-phone .native-value { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #374151; } .cyber-phone .native-price { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 700; color: #374151; text-align: right; } .cyber-phone .native-success { color: #059669; } .cyber-phone .native-pill { display: inline-block; font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 700; padding: 3px 8px; border-radius: 10px; } .cyber-phone .pill-success { background: #d1fae5; color: #059669; } .cyber-phone .native-total { background: #059669; border-radius: 12px; padding: 10px 12px; margin: 2px 0 0; display: flex; justify-content: space-between; align-items: center; } .cyber-phone .native-total-label { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.8); } .cyber-phone .native-total-amount { font-family: -apple-system, 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #ffffff; } .cyber-phone .native-nav { display: flex; justify-content: space-around; padding: 8px 0 6px; margin-top: auto; } .cyber-phone .native-nav span { font-size: 13px; opacity: 0.2; color: #6b7280; } .cyber-phone .native-nav span.active { opacity: 1; color: #059669; } .cyber-phone .home-bar { width: 50px; height: 3px; background: #1d1d1f; border-radius: 3px; margin: 2px auto 4px; } .device-column { display: flex; flex-direction: column; } .store-badges { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; } .store-badges img { height: 40px; width: auto; opacity: 0.7; transition: opacity 0.3s; } .store-badges img:hover { opacity: 1; } .use-case-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 169, 150, 0.1); color: #00A695; border: none; padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } h1 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; background: linear-gradient(180deg, #006445, #00A695); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: slideUp 0.6s ease-out 0.2s both; } .hero-highlight { display: inline; } .hero-description { font-size: 16px; line-height: 1.5; margin-bottom: 36px; color: #000; } .hero-stats { display: flex; gap: 24px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; } .stat-value { font-family: 'Work Sans', sans-serif; font-size: 36px; font-weight: 800; color: #00A695; line-height: 1; margin-bottom: 8px; } .stat-label { font-size: 14px; color: #424242; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; } /* ── CTA BUTTONS ── */ .hero-buttons { display: flex; gap: 12px; margin-bottom: 16px; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; background: #00A695; color: white; border: 2px solid #00A898; } .btn-primary:hover { background: #00786A; border-color: #00786A; text-decoration: none; } .btn-outline-hero { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; border: 2px solid #424242; color: #424242; background: transparent; } .btn-outline-hero:hover { border-color: #00A695; color: #00A695; text-decoration: none; } .hero-sub { font-size: 13px; color: #424242; margin-bottom: 20px; } .perks { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; margin-top: 0; margin-bottom: 24px; } .perks li { display: flex; align-items: center; gap: 10px; font-family: 'Work Sans', sans-serif; font-size: 16px; color: #000; font-weight: 400; margin: 0; padding: 0; } .perks li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #0e9e82; flex-shrink: 0; } .arrow { transition: transform 0.3s ease; display: inline-block; } .btn-primary:hover .arrow { transform: translateX(4px); } @media (max-width: 768px) { .hero-buttons { flex-direction: column; } .hero-buttons a { text-align: center; justify-content: center; } } .section { padding: 80px 24px; } .section-light { background: var(--gray-50); } .section-header { max-width: 800px; margin-bottom: 60px; } .section-label { display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; } h2 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--navy); letter-spacing: -0.01em; } .section-description { font-size: 18px; color: var(--gray-600); line-height: 1.7; } .app-types-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; max-width: 1000px; margin-left: auto; margin-right: auto; } .app-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--gray-100); border-radius: 100px; padding: 12px 24px; font-size: 15px; font-weight: 600; color: var(--navy); transition: all 0.3s ease; cursor: default; } .app-chip:hover { border-color: var(--teal); background: rgba(0, 152, 133, 0.05); transform: translateY(-2px); } .chip-icon { font-size: 20px; } .chip-text { white-space: nowrap; } .problem-solution { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; } .problem-card, .solution-card { padding: 48px; border-radius: 24px; position: relative; } .problem-card { background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%); border: 2px solid #FFD5D5; } .problem-card::before { content: '\26A0\FE0F'; position: absolute; top: 24px; right: 24px; font-size: 32px; opacity: 0.3; } .solution-card { background: linear-gradient(135deg, #F0FFF4 0%, #E0F9E8 100%); border: 2px solid #B8F4CC; } .solution-card::before { content: '\2713'; position: absolute; top: 24px; right: 24px; font-size: 48px; color: #38A169; opacity: 0.2; font-weight: 700; } .card-title { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 16px; color: var(--navy); } .card-list { list-style: none; } .card-list li { padding: 12px 0 12px 32px; position: relative; color: var(--gray-800); line-height: 1.6; } .problem-card .card-list li::before { content: '\2715'; position: absolute; left: 0; color: #E53E3E; font-weight: 700; } .solution-card .card-list li::before { content: '\2713'; position: absolute; left: 0; color: #38A169; font-weight: 700; font-size: 18px; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; } .feature { background: var(--white); padding: 36px; border-radius: 20px; border: 2px solid var(--gray-100); transition: all 0.3s ease; } .feature:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 152, 133, 0.2); } .feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.35); } .feature h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--navy); } .feature p { color: var(--gray-600); line-height: 1.7; } .workflow { background: var(--white); } .workflow-steps { display: grid; gap: 0; margin-top: 48px; position: relative; } .workflow-step { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 32px 0; position: relative; } .workflow-step:not(:last-child)::after { content: ''; position: absolute; left: 39px; top: 80px; bottom: -32px; width: 2px; background: linear-gradient(to bottom, var(--teal) 0%, var(--gray-100) 100%); } .step-number { width: 80px; height: 80px; background: var(--teal); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Work Sans', sans-serif; font-size: 32px; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.4); position: relative; z-index: 2; } .step-content h3 { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--navy); } .step-content p { color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; } .step-details { background: var(--gray-50); padding: 24px; border-radius: 12px; margin-top: 16px; } .step-details-title { font-weight: 700; color: var(--navy); margin-bottom: 12px; font-size: 15px; } .columns-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .column-item { background: var(--white); padding: 12px 16px; border-radius: 8px; font-size: 14px; font-family: 'Courier New', monospace; color: var(--navy); border: 1px solid var(--gray-100); } .screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; } .screen-item { background: var(--white); padding: 16px; border-radius: 12px; border: 2px solid var(--gray-100); transition: border-color 0.2s; } .screen-item:hover { border-color: var(--teal); } .screen-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 15px; } .screen-desc { font-size: 14px; color: var(--gray-600); line-height: 1.5; } .benefits { background: var(--navy); color: var(--white); } .benefits h2 { color: var(--white); } .benefits .section-description { color: rgba(255, 255, 255, 0.8); } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 48px; } .benefit-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15); transition: all 0.3s ease; } .benefit-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); border-color: var(--gold); } .benefit-icon { font-size: 36px; margin-bottom: 16px; } .benefit-card h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--gold); } .benefit-card p { color: rgba(255, 255, 255, 0.85); line-height: 1.7; } .comparison { background: #faf6f0; } .comp-table { width: 100%; border-collapse: collapse; background: transparent; margin-top: 48px; } .comp-table th { background: transparent; padding: 18px 24px; text-align: left; font-weight: 700; font-size: 15px; color: var(--navy); border-bottom: 2px solid #e0d8ce; } .comp-table td { padding: 20px 24px; border-bottom: 1px solid #ebe5dc; font-size: 15px; line-height: 1.6; color: #555; vertical-align: top; } .comp-table tr:last-child td { border-bottom: none; } .comp-table td:first-child { font-weight: 700; color: var(--navy); width: 160px; } .best-practices { background: var(--gray-50); } .practices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; } .practice-card { background: var(--white); padding: 32px; border-radius: 16px; border-left: 4px solid var(--teal); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .practice-card h3 { font-family: 'Work Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--navy); display: flex; align-items: center; gap: 8px; } .practice-icon { font-size: 20px; } .practice-card p { color: var(--gray-600); line-height: 1.7; } .requirements { background: var(--white); } .requirements-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; } .requirement-card { background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%); padding: 32px; border-radius: 16px; border: 2px solid var(--gray-100); display: flex; gap: 20px; align-items: flex-start; } .requirement-icon { width: 48px; height: 48px; background: var(--teal); color: var(--white); border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; } .requirement-content h4 { font-weight: 700; color: var(--navy); margin-bottom: 8px; } .requirement-content p { color: var(--gray-600); font-size: 15px; line-height: 1.6; } .resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .resource-card { display: block; background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; text-decoration: none; transition: all 0.3s ease; } .resource-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 152, 133, 0.1); } .resource-type { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); background: rgba(0, 152, 133, 0.08); padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; } .resource-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; } .resource-card p { font-size: 15px; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; } .resource-link { font-size: 14px; font-weight: 600; color: var(--teal); } @media (max-width: 768px) { .resources-grid { grid-template-columns: 1fr; } } .cta-section { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); padding: 100px 24px; text-align: center; color: var(--white); position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px); } .cta-content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; } .cta-section h2 { color: var(--white); margin-bottom: 20px; } .cta-section p { font-size: 20px; margin-bottom: 40px; opacity: 0.95; line-height: 1.7; } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn { padding: 18px 40px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif; } .btn-white { background: var(--white); color: var(--teal); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .btn-white:hover { background: var(--gray-50); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); } .btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); } .btn-outline:hover { background: var(--white); color: var(--teal); transform: translateY(-2px); } .faq-container { max-width: 900px; margin: 0 auto; } .faq-item { background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; margin-bottom: 20px; transition: all 0.3s ease; } .faq-item:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(0, 152, 133, 0.1); } .faq-question { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 16px; } .faq-answer p { color: var(--gray-600); line-height: 1.7; margin: 0; } @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr 440px; } .device-cluster { height: 420px; } .cyber-desktop { width: 400px; } .cyber-tablet { width: 200px; } .cyber-phone { display: none; } } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-content { max-width: 100%; } .device-cluster { height: 360px; max-width: 480px; margin: 0 auto; } .cyber-desktop { width: 100%; max-width: 480px; position: relative; } .cyber-tablet, .cyber-phone { display: none; } .store-badges { justify-content: center; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .hero { padding: 60px 24px 80px; } .hero-inner { grid-template-columns: 1fr; text-align: center; } .device-cluster { display: none; } .hero-content { max-width: 100%; } .hero-stats { justify-content: center; 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/business-app-builder/#webpage", "url": "https://www.adalo.com/solutions/business-app-builder", "name": "Business App Builder | Adalo", "description": "Build custom business apps 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 create dashboards, task management, team directories, and approval workflows before publishing to the Apple App Store and Google Play.", "isPartOf": { "@id": "https://www.adalo.com/#website" } }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.adalo.com/" }, { "@type": "ListItem", "position": 2, "name": "Solutions", "item": "https://www.adalo.com/solutions" }, { "@type": "ListItem", "position": 3, "name": "Business Apps", "item": "https://www.adalo.com/solutions/business-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 multiple team members collaborate on tasks in the app?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo apps support multiple simultaneous users with role-based permissions. Team members can be assigned tasks, update statuses, and leave comments in real time." } }, { "@type": "Question", "name": "Is my business data secure in Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo uses SSL encryption for all data in transit and encrypts data at rest. Each app has its own isolated database. You control user access with role-based permissions." } }, { "@type": "Question", "name": "Can I connect my business app to tools we already use?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo connects to 6,000+ tools via Zapier and Make, including Slack, Google Workspace, QuickBooks, HubSpot, and Trello. SheetBridge lets teams use Google Sheets as a relational database during migration." } }, { "@type": "Question", "name": "Can I build custom approval workflows?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's relational database and conditional logic let you build multi-step approval flows for expenses, time-off requests, purchase orders, and any other business process." } }, { "@type": "Question", "name": "Does the app work offline for field teams?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's native apps cache previously viewed data, so team members can reference task details and project notes in areas with poor connectivity. Full offline editing with sync-on-reconnect is on the product roadmap." } }, { "@type": "Question", "name": "Can the app scale as my business grows?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo 3.0 (launched late 2025) is 3\u20134x faster and scales to 1M+ monthly active users. Paid plans include unlimited database records, users, and storage." } }, { "@type": "Question", "name": "What can't Adalo do for business apps?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo doesn't support complex computed fields like spreadsheet formulas, real-time multi-user editing of the same record, or heavy data analysis with pivot tables. For those needs, complement Adalo with a BI tool. If you need full code export, Power Apps or FlutterFlow offer that capability." } } ] } ] } </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>Business Apps</span></div> <div class="hero-inner"> <div class="hero-content"> <div class="use-case-badge">💼 Business Operations</div> <h1>Build Custom <span class="hero-highlight">Business Apps</span> for Your 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. Replace spreadsheet workflows, disconnected tools, and expensive SaaS with one app that fits your exact process.</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">1,000+</div><div class="stat-label">Business Apps Built</div></div> <div class="stat"><div class="stat-value">3</div><div class="stat-label">Platforms</div></div> <div class="stat"><div class="stat-value">$36/mo</div><div class="stat-label">Unlimited Usage</div></div> </div> </div> <!-- 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/business</div> </div> <div class="screen"> <div class="dk-header"> <h4>KPI Dashboard</h4> <div class="dk-add">View Reports</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">Revenue</div> <div class="glass-card"> <div class="glass-name">Monthly</div> <div class="glass-price">$124,500</div> <span class="glass-tag glass-tag-ok">+12%</span> </div> <div class="glass-card"> <div class="glass-name">Pipeline</div> <div class="glass-price">$340,000</div> <div class="glass-sub">18 deals</div> </div> <div class="glass-card"> <div class="glass-name">Recurring</div> <div class="glass-price">$45,200</div> <span class="glass-tag glass-tag-new">MRR</span> </div> </div> <div class="dk-col"> <div class="glass-col-header">Tasks</div> <div class="glass-card"> <div class="glass-name">Open</div> <div class="glass-price">23 tasks</div> <span class="glass-tag glass-tag-sale">5 DUE</span> </div> <div class="glass-card"> <div class="glass-name">Completed</div> <div class="glass-price">47 this week</div> </div> <div class="glass-card"> <div class="glass-name">Overdue</div> <div class="glass-price">3 tasks</div> <div class="glass-sub">Needs review</div> </div> </div> <div class="dk-col"> <div class="glass-col-header">Team</div> <div class="glass-card"> <div class="glass-name">Active</div> <div class="glass-price">12 members</div> <span class="glass-tag glass-tag-ok">ONLINE</span> </div> <div class="glass-card"> <div class="glass-name">Away</div> <div class="glass-price">3 members</div> <div class="glass-sub">OOO today</div> </div> </div> <div class="dk-col"> <div class="glass-col-header">Goals</div> <div class="glass-card"> <div class="glass-name">Q1 Target</div> <div class="glass-price">78% complete</div> <span class="glass-tag glass-tag-new">ON TRACK</span> </div> <div class="glass-card"> <div class="glass-name">NPS Score</div> <div class="glass-price">72</div> <span class="glass-tag glass-tag-ok">+5</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>Project X</h4> <span class="neon-items">78%</span> </div> <div class="tb-kanban"> <div style="flex:1;"> <div class="neon-card"> <div class="n-name">Phase 1</div> <div class="n-amount neon-cyan">Complete</div> <div class="n-contact">Design finished</div> </div> <div class="neon-card"> <div class="n-name">Phase 2</div> <div class="n-amount neon-gold">In Progress</div> <div class="n-contact">Dev sprint 3</div> </div> <div class="neon-card"> <div class="n-name">Phase 3</div> <div class="n-amount neon-magenta">Planned</div> <div class="n-contact">Q2 launch</div> </div> <div class="tb-total-row"> <div class="tb-total-label">DEADLINE</div> <div class="tb-total-amount">Mar 30</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 Actions</h4> <span class="native-accent">5 pending</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;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 class="progress-line" style="background:#e5e7eb;"></div> <div class="progress-dot" style="background:#e5e7eb;"></div> </div> <div class="native-progress-labels"> <span>Review</span> <span class="active">Approve</span> <span>Assign</span> <span>Done</span> </div> <div class="native-content"> <div class="native-card"> <div class="native-row"> <span class="native-label" style="margin:0;">Priority</span> <span class="native-pill pill-success">High</span> </div> </div> <div class="native-card"> <div class="native-label">Pending Approvals</div> <div class="native-row"> <span class="native-value">Budget request</span> <span class="native-price">$5,200</span> </div> <div class="native-row"> <span class="native-value">New hire</span> <span class="native-price">Review</span> </div> <div class="native-row"> <span class="native-value">Vendor invoice</span> <span class="native-price">$890</span> </div> </div> <div class="native-total"> <span class="native-total-label">Actions</span> <span class="native-total-amount">5</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 Business App You Can Imagine</h2><p class="section-description">From task trackers to full operations platforms—describe what you need and Ada, Adalo's AI builder, generates a working business 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">Operations Dashboard</div></div> <div class="app-chip"><div class="chip-icon">✅</div><div class="chip-text">Task Manager</div></div> <div class="app-chip"><div class="chip-icon">👥</div><div class="chip-text">Team Directory</div></div> <div class="app-chip"><div class="chip-icon">📝</div><div class="chip-text">Approval Workflows</div></div> <div class="app-chip"><div class="chip-icon">📦</div><div class="chip-text">Inventory Tracker</div></div> <div class="app-chip"><div class="chip-icon">💰</div><div class="chip-text">Expense Reports</div></div> <div class="app-chip"><div class="chip-icon">📋</div><div class="chip-text">Client Portal</div></div> <div class="app-chip"><div class="chip-icon">📱</div><div class="chip-text">Field Service App</div></div> </div> </div></div> <div class="section"><div class="container"> <div class="section-header"><span class="section-label">The Challenge</span><h2>Your Business Runs on Spreadsheets, Slack Threads & Too Many SaaS Tools</h2><p class="section-description">Most small and mid-size teams cobble together spreadsheets, project management tools, and communication apps that don't talk to each other. You need one app that matches your actual workflow.</p></div> <div class="problem-solution"> <div class="problem-card"><h3 class="card-title">The Business Operations Problem</h3><ul class="card-list"> <li>Critical data scattered across spreadsheets, email, and five different SaaS tools</li> <li>No mobile access for team members who work outside the office</li> <li>SaaS subscriptions stacking up to $500+/mo for tools your team half-uses</li> <li>Workflow approvals happening via email chains that get lost or delayed</li> <li>No single dashboard showing what's happening across the business</li> <li>IT backlog means custom tools take months to get built</li> </ul></div> <div class="solution-card"><h3 class="card-title">The Adalo Business App Solution</h3><ul class="card-list"> <li>Visual canvas lets you design dashboards, task boards, and workflows that match your process</li> <li>Built-in relational database connects tasks, team members, clients, and documents</li> <li>Native iOS and Android apps give your team access anywhere with push notifications</li> <li>$36/mo with unlimited users, records, and storage—replaces multiple SaaS tools</li> <li>Ada generates a working business app from a description—ship in days, not quarters</li> <li>Your workflow becomes the app—no forcing your team into someone else's process</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 Team Needs in One App</h2><p class="section-description">Built for teams that need tools shaped to their workflow—on web, iOS, and Android from a single build.</p></div> <div class="features"> <div class="feature"><div class="feature-icon">📊</div><h3>Custom Dashboards</h3><p>Build KPI dashboards showing task completion rates, team activity, project status, and business metrics. Filter by department, team member, time period, or any custom field your operations require.</p></div> <div class="feature"><div class="feature-icon">✅</div><h3>Task & Project Management</h3><p>Create task boards with custom statuses, assignees, due dates, and priority levels. Organize by project, department, or client. Move tasks between stages with a tap on any device.</p></div> <div class="feature"><div class="feature-icon">👥</div><h3>Team Directory & Profiles</h3><p>Centralized team directory with contact info, roles, departments, and current projects. New hires find everyone they need. Managers see who's working on what across the organization.</p></div> <div class="feature"><div class="feature-icon">🔔</div><h3>Push Notifications</h3><p>Native push notifications for task assignments, approval requests, deadline reminders, and team announcements. Critical for teams where not everyone is at a desk all day.</p></div> <div class="feature"><div class="feature-icon">📝</div><h3>Approval Workflows</h3><p>Build multi-step approval flows for expenses, time off, vendor onboarding, and purchase orders. Reviewers get push notifications and can approve from their phone in seconds.</p></div> <div class="feature"><div class="feature-icon">🔗</div><h3>Integrations & Automations</h3><p>Connect to Slack, Google Workspace, QuickBooks, and 6,000+ tools via Zapier or Make. Automate repetitive tasks like status updates, email notifications, and data syncing 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 Business 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 business 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 Workflow to Ada</h3><p>Tell Ada, Adalo's AI builder, what your team needs. Magic Start generates a complete business 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 a business operations app for a 25-person team. I need a task board with To Do, In Progress, Review, and Done columns, a team directory, an expense approval workflow, and a dashboard showing task completion and team activity."</div></div></div> </div></div> <div class="workflow-step"><div class="step-number">2</div><div class="step-content"><h3>Customize Your Workflow Screens</h3><p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust task board columns, dashboard layouts, approval flows, and team directory fields. Add features with Magic Add using natural language.</p> <div class="step-details"><div class="step-details-title">Typical workflow stages:</div><div class="columns-list"><div class="column-item">To Do</div><div class="column-item">In Progress</div><div class="column-item">Review</div><div class="column-item">Approved</div><div class="column-item">Done</div><div class="column-item">Archived</div></div></div> </div></div> <div class="workflow-step"><div class="step-number">3</div><div class="step-content"><h3>Connect Your Data Sources</h3><p>Use Adalo's built-in relational database for your primary business data, or connect Google Sheets via SheetBridge if your team already tracks projects in spreadsheets. Add Zapier or Make integrations for Slack, email, and accounting tools.</p> <div class="step-details"><div class="step-details-title">Common business integrations:</div><div class="screens-grid"> <div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import existing project lists and team data from Google Sheets</div></div> <div class="screen-item"><div class="screen-title">Zapier / Make</div><div class="screen-desc">Connect to Slack, Google Workspace, QuickBooks, and more</div></div> <div class="screen-item"><div class="screen-title">Custom API</div><div class="screen-desc">External Collections connect to any REST API endpoint</div></div> <div class="screen-item"><div class="screen-title">Webhooks</div><div class="screen-desc">Trigger automations when tasks complete or approvals are needed</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 business app on any device form factor directly from the canvas. Test the full workflow—creating tasks, submitting approvals, viewing 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 business 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 team downloads the app and starts working 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 Business</span><h2>One App That Replaces Five SaaS Subscriptions</h2><p class="section-description">Stop paying for features you don't use across tools that don't talk to each other. Build exactly the business app your team needs.</p></div> <div class="benefits-grid"> <div class="benefit-card"><div class="benefit-icon">💸</div><h3>Replace Multiple SaaS Tools</h3><p>Adalo costs $36/mo with unlimited users, records, and storage. That replaces a task manager ($10/user), a form builder ($30/mo), an approval tool ($15/user), and a dashboard tool ($50/mo). For a 15-person team, the savings are significant.</p></div> <div class="benefit-card"><div class="benefit-icon">📱</div><h3>Mobile-First for Field Teams</h3><p>True native iOS and Android apps with push notifications and offline data access. Warehouse staff, field service teams, and remote workers stay connected without being tied to a laptop.</p></div> <div class="benefit-card"><div class="benefit-icon">🔧</div><h3>Change Anything Instantly</h3><p>New workflow step? Additional approval stage? Different dashboard metric? Change it on the visual canvas and it's live across all platforms. No waiting for IT, no vendor support tickets.</p></div> <div class="benefit-card"><div class="benefit-icon">🚀</div><h3>Ship in Days, Not Quarters</h3><p>Ada generates your business app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live business app in under a week.</p></div> <div class="benefit-card"> <div class="benefit-icon">🔍</div> <h3>See Every Workflow on One Canvas</h3> <p>Adalo's multi-screen canvas shows all screens simultaneously—dashboards, forms, approval flows, reports. Visually direct the AI to refine any element without switching between page editors.</p> </div> <div class="benefit-card"> <div class="benefit-icon">📊</div> <h3>Scale as Your Business Grows</h3> <p>Adalo 3.0 delivers 3–4× faster performance and handles 1M+ monthly active users. Your business app grows from a 5-person team tool to a company-wide platform without re-building.</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 Business App vs. Off-the-Shelf SaaS vs. Custom Development</h2><p class="section-description">See how building your own business app with Adalo compares to the alternatives.</p></div> <table class="comp-table"><thead><tr><th>Factor</th><th>Adalo Business App</th><th>Glide / Power Apps</th><th>Custom Development</th></tr></thead><tbody> <tr><td>Build Time</td><td>✅ Days to weeks</td><td>Hours to weeks (limited scope)</td><td>3–6 months</td></tr> <tr><td>Monthly Cost</td><td>✅ $36/mo flat (unlimited users)</td><td>$25–60/user/mo (Power Apps) or per-app fees</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>PWA only (Glide) or wrapper (Power Apps)</td><td>Yes (if budgeted separately)</td></tr> <tr><td>Push Notifications</td><td>✅ Built-in native</td><td>Limited or not available</td><td>Custom implementation required</td></tr> <tr><td>Customization</td><td>✅ Full — your screens, your workflow</td><td>Constrained by platform templates</td><td>Full (at development cost)</td></tr> <tr><td>Database</td><td>✅ Built-in relational database</td><td>Spreadsheet-based (Glide) or Dataverse (Power Apps)</td><td>Custom database design</td></tr> <tr><td>Time to Change</td><td>✅ Minutes on the canvas</td><td>Minutes to hours</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 Business App Success</h2><p class="section-description">Patterns from teams that have built and shipped successful business apps with Adalo.</p></div> <div class="practices-grid"> <div class="practice-card"><h3><span class="practice-icon">🎯</span> Solve One Problem First</h3><p>Don't try to replace every tool on day one. Pick the biggest pain point—usually task tracking or a specific approval workflow—build that, get adoption, then expand. Successful business apps grow iteratively.</p></div> <div class="practice-card"><h3><span class="practice-icon">👥</span> Involve Your Team Early</h3><p>Share the app with 2–3 team members during building. Their feedback on what's missing or confusing is worth more than assumptions. Adalo's preview feature makes this easy without publishing.</p></div> <div class="practice-card"><h3><span class="practice-icon">📊</span> Build Dashboards After Data</h3><p>Run your workflow through the app for a week before building dashboards. Real data reveals which metrics actually matter. A dashboard built on hypothetical data just looks good in demos.</p></div> <div class="practice-card"><h3><span class="practice-icon">🔗</span> Layer Integrations Gradually</h3><p>Start with Adalo's built-in database. Once your team uses the app daily, add Slack notifications via Zapier, then email syncing, then accounting connections. Each integration should solve a specific friction point.</p></div> <div class="practice-card"> <h3><span class="practice-icon">📋</span> Import Data from Spreadsheets</h3> <p>If your business data lives in Google Sheets, use SheetBridge to connect it as a relational database. Migrate contacts, inventory, or project records without manual re-entry.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">🧪</span> Pilot Before Rolling Out</h3> <p>Launch with one team or department before expanding company-wide. Real daily workflows—edge cases, workarounds, missing fields—surface issues that internal testing alone won't catch.</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 a Business App</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 tasks, team members, or documents. 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 task assignments, approval requests, deadlines, and team announcements. Keeps everyone informed without requiring them to check a dashboard.</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 projects in Google Sheets? SheetBridge connects your spreadsheet as a relational database so you can migrate incrementally without disrupting current workflows.</p></div></div> <div class="requirement-card"><div class="requirement-icon">⚡</div><div class="requirement-content"><h4>Zapier & Make Integrations</h4><p>Connect your business app to Slack, Google Workspace, QuickBooks, Trello, and 6,000+ other tools. Automate status updates, notifications, and data syncing between systems.</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 Business 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 multiple team members collaborate on tasks in the app?</h3><div class="faq-answer"><p>Yes. Adalo apps support multiple simultaneous users with role-based permissions. Team members can be assigned tasks, update statuses, and leave comments in real time. Adalo's built-in relational database ensures everyone sees the latest data. You can set different access levels so managers see dashboards while team members see their own task lists.</p></div></div> <div class="faq-item"><h3 class="faq-question">Is my business data secure in Adalo?</h3><div class="faq-answer"><p>Adalo uses SSL encryption for all data in transit and encrypts data at rest. Each app has its own isolated database. You control user access with role-based permissions and can set visibility rules at the record level. For teams with compliance requirements, Adalo's paid plans include features like custom domains and data export capabilities.</p></div></div> <div class="faq-item"><h3 class="faq-question">Can I connect my business app to tools we already use?</h3><div class="faq-answer"><p>Yes. Adalo connects to 6,000+ tools via Zapier and Make, including Slack, Google Workspace, QuickBooks, HubSpot, Trello, and Airtable. For custom systems, External Collections and Custom Actions connect to any REST API. SheetBridge lets teams that already work in Google Sheets use their spreadsheet as a relational database during migration.</p></div></div> <div class="faq-item"><h3 class="faq-question">Can I build custom approval workflows?</h3><div class="faq-answer"><p>Yes. Adalo's relational database and conditional logic let you build multi-step approval flows for expenses, time-off requests, purchase orders, and any other business process. Reviewers receive native push notifications and can approve or reject from their phone. The status updates in real time across all platforms.</p></div></div> <div class="faq-item"><h3 class="faq-question">Does the app work offline for field teams?</h3><div class="faq-answer"><p>Adalo's native apps cache previously viewed data, so team members can reference task details, contact information, and project notes in areas with poor connectivity. Full offline editing with sync-on-reconnect is on the product roadmap. For field teams in warehouses, construction sites, or rural areas, the native app experience is significantly more reliable than web-based tools.</p></div></div> <div class="faq-item"><h3 class="faq-question">Can the app scale as my business grows?</h3><div class="faq-answer"><p>Yes. Adalo 3.0 (launched late 2025) is 3–4x faster than previous versions and scales to 1M+ monthly active users. Paid plans include unlimited database records, users, and storage. You can add new screens, workflows, and features to your app at any time without rebuilding—the visual canvas makes iteration fast.</p></div></div> <div class="faq-item"><h3 class="faq-question">What can't Adalo do for business apps?</h3><div class="faq-answer"><p>Adalo excels at building custom business apps that fit your specific workflow, but it has limitations. It doesn't support complex computed fields or formula columns the way spreadsheets do—calculations need to be handled via custom actions or integrations. Real-time multi-user editing of the same record (like Google Docs-style collaboration) isn't supported. For teams that need heavy data analysis with pivot tables and complex queries, a dedicated BI tool like Metabase or Looker would complement the Adalo app. If your team needs full code export or access to the underlying codebase, Power Apps or FlutterFlow offer that capability.</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 & Sales Apps</a>, <a href="https://www.adalo.com/solutions/event-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Event Apps</a>, <a href="https://www.adalo.com/solutions/real-estate-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Real Estate 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 Business Apps with Adalo</h2><p class="section-description">Step-by-step guides, documentation, and examples to help you build and ship your business app.</p></div> <div class="resources-grid"> <a href="https://www.adalo.com/posts/how-to-build-a-business-app" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build a Business App Without Code</h3><p>Full walkthrough: task boards, team directories, approval workflows, 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 business 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 Business App via SheetBridge</h3><p>Migrate your spreadsheet workflows to a real business app without losing your existing data.</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 business 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 Team's Business App?</h2> <p>Join teams that have replaced spreadsheet workflows and expensive SaaS stacks 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 Business 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>
Business Operations Apps