<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; } /* 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 { 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/education-app-builder/#webpage","url":"https://www.adalo.com/solutions/education-app-builder","name":"Education & Course Apps | Adalo","description":"Build custom education 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 deliver courses, track student progress, and issue certificates\u2014then publish to the Apple App Store and Google Play.","isPartOf":{"@id":"https://www.adalo.com/#website"},"about":{"@id":"https://www.adalo.com/#software"}},{"@type":"BreadcrumbList","@id":"https://www.adalo.com/solutions/education-app-builder/#breadcrumb","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":"Education App Builder","item":"https://www.adalo.com/solutions/education-app-builder"}]},{"@type":"FAQPage","@id":"https://www.adalo.com/solutions/education-app-builder/#faq","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 create and manage courses without coding?","acceptedAnswer":{"@type":"Answer","text":"Yes. Tell Ada, Adalo's AI builder, what your education app needs and Magic Start generates a complete app with course screens, student database, and navigation. Then visually customize everything on the canvas by pointing at elements and directing changes."}},{"@type":"Question","name":"How do I track student progress and grades?","acceptedAnswer":{"@type":"Answer","text":"Adalo's built-in relational database lets you create completion records that link students to lessons. When a student finishes a lesson or takes a quiz, the app creates a record tracking their score and completion status."}},{"@type":"Question","name":"Can I add quizzes and assessments to my education app?","acceptedAnswer":{"@type":"Answer","text":"Yes. Build multiple-choice, true/false, and selection-based quizzes directly inside your Adalo app. Quiz questions and answers are stored in the relational database, and you can auto-grade by comparing student responses to stored correct answers."}},{"@type":"Question","name":"Can I include video lessons in my app?","acceptedAnswer":{"@type":"Answer","text":"Yes. Embed videos from YouTube or Vimeo directly into your lesson screens using Adalo's WebView component. Since Adalo builds native apps, video playback works smoothly on both iOS and Android devices."}},{"@type":"Question","name":"Can I issue certificates when students complete a course?","acceptedAnswer":{"@type":"Answer","text":"Yes. Build a certificate screen that generates automatically when a student's completion records show 100% of lessons finished. Store the certificate record in the database with the student's name, course title, completion date, and a unique ID."}},{"@type":"Question","name":"Does the education app work offline?","acceptedAnswer":{"@type":"Answer","text":"Adalo's native apps cache previously viewed content, so students can review lessons they've already loaded in areas with poor connectivity. Full offline mode with download-and-sync is on the product roadmap."}},{"@type":"Question","name":"What can't Adalo do for education apps?","acceptedAnswer":{"@type":"Answer","text":"Adalo excels at building custom education apps, but it's not a drop-in replacement for full-featured LMS platforms. Features like SCORM compliance, built-in payment processing, live video classrooms, and complex cohort-based access controls require platforms like Teachable, Thinkific, or a custom-built solution."}}]}]} </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>Education App Builder</span> </div> <div class="hero-inner"> <div class="hero-content"> <div class="use-case-badge">🎓 Education & Courses</div> <h1>Build Custom <span class="hero-highlight">Education Apps</span> for Any Learning Program</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 a learning experience that fits your curriculum, not someone else's template.</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">300+</div><div class="stat-label">Education 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/courses</div> </div> <div class="screen"> <div class="dk-header"> <h4>Course Catalog</h4> <div class="dk-add">+ Add Course</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">Active</div> <div class="glass-card"> <div class="glass-name">Intro to Design</div> <div class="glass-price">32 enrolled</div> <span class="glass-tag glass-tag-pop">POPULAR</span> </div> <div class="glass-card"> <div class="glass-name">Data Science 101</div> <div class="glass-price">28 enrolled</div> <div class="glass-sub">Module 4</div> </div> <div class="glass-card"> <div class="glass-name">Marketing 201</div> <div class="glass-price">19 enrolled</div> <span class="glass-tag glass-tag-new">NEW</span> </div> </div> <div class="dk-col"> <div class="glass-col-header">Upcoming</div> <div class="glass-card"> <div class="glass-name">UX Research</div> <div class="glass-price">Starts Apr 1</div> <span class="glass-tag glass-tag-new">NEW</span> </div> <div class="glass-card"> <div class="glass-name">Mobile Dev</div> <div class="glass-price">Starts Apr 15</div> <div class="glass-sub">12 pre-enrolled</div> </div> <div class="glass-card"> <div class="glass-name">Cloud Basics</div> <div class="glass-price">Starts May 1</div> <div class="glass-sub">Open for signup</div> </div> </div> <div class="dk-col"> <div class="glass-col-header">Completed</div> <div class="glass-card"> <div class="glass-name">Web Basics</div> <div class="glass-price">45 graduated</div> <span class="glass-tag glass-tag-ok">DONE</span> </div> <div class="glass-card"> <div class="glass-name">Python 101</div> <div class="glass-price">38 graduated</div> <span class="glass-tag glass-tag-ok">4.8 RATING</span> </div> </div> <div class="dk-col"> <div class="glass-col-header">Draft</div> <div class="glass-card"> <div class="glass-name">AI Foundations</div> <div class="glass-price">6 modules</div> <div class="glass-sub">In review</div> </div> <div class="glass-card"> <div class="glass-name">DevOps Intro</div> <div class="glass-price">4 modules</div> <span class="glass-tag glass-tag-pop">DRAFTING</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>Lesson 5</h4> <span class="neon-items">Module 2</span> </div> <div class="tb-kanban"> <div style="flex:1;"> <div class="neon-card"> <div class="n-name">Color Theory</div> <div class="n-amount neon-cyan">15 min read</div> <div class="n-contact">Chapter 5.1</div> </div> <div class="neon-card"> <div class="n-name">Exercise</div> <div class="n-amount neon-magenta">Palette Build</div> <div class="n-contact">20 min</div> </div> <div class="neon-card"> <div class="n-name">Quiz</div> <div class="n-amount neon-gold">10 questions</div> <div class="n-contact">Due Friday</div> </div> <div class="tb-total-row"> <div class="tb-total-label">PROGRESS</div> <div class="tb-total-amount">65%</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>Assignments</h4> <span class="native-accent">2 due soon</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>Assigned</span> <span class="active">Started</span> <span>Review</span> <span>Graded</span> </div> <div class="native-content"> <div class="native-card"> <div class="native-row"> <span class="native-label" style="margin:0;">Next Due</span> <span class="native-pill pill-success">Friday</span> </div> </div> <div class="native-card"> <div class="native-label">Active</div> <div class="native-row"> <span class="native-value">Color palette</span> <span class="native-price">Due Fri</span> </div> <div class="native-row"> <span class="native-value">Essay draft</span> <span class="native-price">Due Mon</span> </div> <div class="native-row"> <span class="native-value">Quiz Ch. 5</span> <span class="native-price">Complete</span> </div> </div> <div class="native-total"> <span class="native-total-label">Grade</span> <span class="native-total-amount">A-</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 Education App You Can Imagine</h2> <p class="section-description">From corporate training portals to university course catalogs—describe what you need and Ada, Adalo's AI builder, generates a working education 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">Course Catalog</div></div> <div class="app-chip"><div class="chip-icon">🏫</div><div class="chip-text">LMS Portal</div></div> <div class="app-chip"><div class="chip-icon">📝</div><div class="chip-text">Quiz Builder</div></div> <div class="app-chip"><div class="chip-icon">📊</div><div class="chip-text">Progress Tracker</div></div> <div class="app-chip"><div class="chip-icon">🎓</div><div class="chip-text">Certificate Generator</div></div> <div class="app-chip"><div class="chip-icon">📱</div><div class="chip-text">Mobile Learning</div></div> <div class="app-chip"><div class="chip-icon">💼</div><div class="chip-text">Corporate Training</div></div> <div class="app-chip"><div class="chip-icon">🗓️</div><div class="chip-text">Class Scheduler</div></div> </div> </div> </div> <div class="section"> <div class="container"> <div class="section-header"> <span class="section-label">The Challenge</span> <h2>Educators Deserve Better Than Generic LMS Platforms & Expensive Course Software</h2> <p class="section-description">Most course creators and training teams are stuck between bloated LMS platforms that cost $100+/month and rigid course builders that don't support native mobile apps. There's a better way to deliver learning.</p> </div> <div class="problem-solution"> <div class="problem-card"> <h3 class="card-title">The Education Technology Problem</h3> <ul class="card-list"> <li>Course platforms charge per-student or per-course fees that scale out of control</li> <li>No native mobile app—students access courses through clunky mobile browsers</li> <li>Cookie-cutter templates that don't match your teaching methodology</li> <li>Teachable and Thinkific plans start at $39–$149/month with transaction fees on sales</li> <li>Student progress data locked inside the platform with limited export options</li> <li>No push notifications to remind students about deadlines or new content</li> </ul> </div> <div class="solution-card"> <h3 class="card-title">The Adalo Education Solution</h3> <ul class="card-list"> <li>Visual canvas lets you design course flows, lesson screens, and quizzes your way</li> <li>Built-in relational database tracks students, courses, lessons, grades, and certificates</li> <li>Native iOS and Android apps so students learn from a real app, not a mobile browser</li> <li>$36/mo with unlimited students, courses, and content—no per-student pricing</li> <li>Ada generates a working learning app from a description—launch in days, not months</li> <li>Push notifications remind students about upcoming quizzes and new lesson releases</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 Learning Program Needs in One App</h2> <p class="section-description">Built for educators who need a learning platform tailored to how they actually teach—on web, iOS, and Android from a single build.</p> </div> <div class="features"> <div class="feature"><div class="feature-icon">📚</div><h3>Course & Lesson Management</h3><p>Organize courses into modules and lessons using Adalo's built-in relational database. Link lessons to quizzes, assignments, and resources—all connected automatically without external database setup.</p></div> <div class="feature"><div class="feature-icon">📊</div><h3>Student Progress Tracking</h3><p>Track completion rates, quiz scores, and time spent per lesson for every student. Build custom dashboards that show class-wide trends and identify students who need extra support.</p></div> <div class="feature"><div class="feature-icon">📝</div><h3>Quizzes & Assessments</h3><p>Build multiple-choice, true/false, and short-answer quizzes directly inside your app. Auto-grade where possible and surface results on the student's progress dashboard.</p></div> <div class="feature"><div class="feature-icon">🔔</div><h3>Push Notifications</h3><p>Native push notifications alert students about upcoming deadlines, new lesson releases, and quiz results. Critical for keeping learners engaged between study sessions.</p></div> <div class="feature"><div class="feature-icon">🎥</div><h3>Video & Media Content</h3><p>Embed video lessons, audio recordings, PDFs, and images directly into lesson screens. Host videos on YouTube or Vimeo and embed them seamlessly into your Adalo app.</p></div> <div class="feature"><div class="feature-icon">🎓</div><h3>Certificates & Completion</h3><p>Issue completion certificates automatically when students finish a course. Store certificate records in the database and let students access their achievements from any device.</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 Education 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 learning platform 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 Learning App to Ada</h3> <p>Tell Ada, Adalo's AI builder, what your education program needs. Magic Start generates a complete learning 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 course app for a photography school. I need a course catalog with categories, individual lesson pages with video and text, a quiz after each module, a student progress dashboard, and a certificate screen on completion."</div> </div> </div> </div> </div> <div class="workflow-step"> <div class="step-number">2</div> <div class="step-content"> <h3>Design Your Course Structure</h3> <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your course hierarchy, lesson layouts, and quiz formats. Add features with Magic Add using natural language.</p> <div class="step-details"> <div class="step-details-title">Typical course structure:</div> <div class="columns-list"> <div class="column-item">Course Catalog</div><div class="column-item">Module List</div><div class="column-item">Lesson View</div> <div class="column-item">Quiz Screen</div><div class="column-item">Progress Dashboard</div><div class="column-item">Certificate</div> </div> </div> </div> </div> <div class="workflow-step"> <div class="step-number">3</div> <div class="step-content"> <h3>Connect Content Sources</h3> <p>Use Adalo's built-in relational database to store your course content, or connect Google Sheets via SheetBridge if your curriculum lives in spreadsheets. Embed videos from YouTube or Vimeo directly into lesson screens.</p> <div class="step-details"> <div class="step-details-title">Common education integrations:</div> <div class="screens-grid"> <div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import course catalogs and student rosters from Google Sheets</div></div> <div class="screen-item"><div class="screen-title">Video Embeds</div><div class="screen-desc">Embed YouTube or Vimeo lessons directly into your app screens</div></div> <div class="screen-item"><div class="screen-title">Zapier / Make</div><div class="screen-desc">Send completion notifications, sync with email marketing tools</div></div> <div class="screen-item"><div class="screen-title">Stripe via Zapier</div><div class="screen-desc">Accept course payments and manage subscriptions</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 education app on any device form factor directly from the canvas. Test the full learning flow—browsing courses, watching lessons, taking quizzes, viewing progress—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 education 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. Students download your app and start learning 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 Education</span> <h2>The Learning Platform That Fits Your Budget & Your Pedagogy</h2> <p class="section-description">Stop paying per student for features you don't use. Build exactly the learning experience your program needs.</p> </div> <div class="benefits-grid"> <div class="benefit-card"><div class="benefit-icon">💸</div><h3>No Per-Student Pricing</h3><p>Adalo costs $36/mo with unlimited users, records, and storage. No per-student fees. A program with 500 students on Teachable could cost $100+/mo with transaction fees—on Adalo, it's still $36/mo.</p></div> <div class="benefit-card"><div class="benefit-icon">📱</div><h3>Native Mobile Learning</h3><p>True native iOS and Android apps with push notifications. Students learn from a real app they download from the App Store—not a mobile browser tab they'll forget about.</p></div> <div class="benefit-card"><div class="benefit-icon">🗄️</div><h3>Your Data, Your Database</h3><p>Adalo's built-in relational database connects students, courses, lessons, quizzes, and certificates without external services. You own the data structure and can export anytime.</p></div> <div class="benefit-card"><div class="benefit-icon">🚀</div><h3>Launch in Days, Not Months</h3><p>Ada generates your learning app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most educators go from idea to live app in under a week.</p></div> <div class="benefit-card"> <div class="benefit-icon">🔍</div> <h3>Design Every Learning Screen Visually</h3> <p>See course catalogs, lesson views, quizzes, and progress dashboards simultaneously on Adalo's canvas. Visually direct the AI to adjust layouts and flows—no coding needed.</p> </div> <div class="benefit-card"> <div class="benefit-icon">📊</div> <h3>Scale to Any Class Size</h3> <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. Whether you have 30 students or 30,000 learners, the infrastructure scales without migration.</p> </div> </div> </div> </div> <div class="section comparison"> <div class="container"> <div class="section-header"> <span class="section-label">Compare Your Options</span> <h2>Adalo Education App vs. Teachable/Thinkific vs. Custom Development</h2> <p class="section-description">See how building your own education app with Adalo compares to the alternatives.</p> </div> <table class="comp-table"> <thead><tr><th>Factor</th><th>Adalo Education App</th><th>Teachable / Thinkific</th><th>Custom Development</th></tr></thead> <tbody> <tr><td>Build Time</td><td>✅ Days to weeks</td><td>Hours (template-based), but limited customization</td><td>3–6 months</td></tr> <tr><td>Monthly Cost</td><td>✅ $36/mo flat (unlimited students)</td><td>$39–$149/mo + transaction fees on some plans</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>No native app—mobile browser only</td><td>Yes (if budgeted separately)</td></tr> <tr><td>Push Notifications</td><td>✅ Built-in</td><td>Email only</td><td>Custom implementation required</td></tr> <tr><td>Customization</td><td>✅ Full — your screens, your flow</td><td>Limited to platform templates</td><td>Full (at development cost)</td></tr> <tr><td>Built-in Payments</td><td>Via Stripe/Zapier integration</td><td>✅ Built-in checkout and payment processing</td><td>Custom implementation required</td></tr> <tr><td>Time to Change</td><td>✅ Minutes</td><td>Limited to template constraints</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 Education App Success</h2> <p class="section-description">Patterns from Makers who have built and shipped successful education apps with Adalo.</p> </div> <div class="practices-grid"> <div class="practice-card"><h3><span class="practice-icon">📚</span> Structure Content First</h3><p>Define your course hierarchy before building screens: Courses contain Modules, Modules contain Lessons, Lessons contain Content blocks. This data model in Adalo's relational database makes everything else easier.</p></div> <div class="practice-card"><h3><span class="practice-icon">📊</span> Track Progress Early</h3><p>Build lesson completion tracking from day one. Link a "Completion" record to each student-lesson pair. This data powers progress bars, certificates, and analytics dashboards later.</p></div> <div class="practice-card"><h3><span class="practice-icon">📱</span> Design Mobile-First</h3><p>Most students will access your course app on their phones. Design lesson screens for small viewports first, then expand for tablet and desktop. Adalo's device preview makes this easy to test.</p></div> <div class="practice-card"><h3><span class="practice-icon">📝</span> Keep Quizzes Simple</h3><p>Start with multiple-choice quizzes that auto-grade. Once your app is live and students are engaged, layer in more complex assessment types using Magic Add.</p></div> <div class="practice-card"> <h3><span class="practice-icon">📋</span> Import Curricula from Spreadsheets</h3> <p>If your course content or student rosters live in Google Sheets, use SheetBridge to connect them as a relational database. Migrate lessons, grades, and enrollment without re-entry.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">🧪</span> Pilot with One Class First</h3> <p>Launch with a single class or cohort before scaling. Real students using the app during actual lessons expose UX friction, content gaps, and pacing issues that solo testing can't.</p> </div> </div> </div> </div> <div class="section requirements"> <div class="container"> <div class="section-header"> <span class="section-label">What's Included</span> <h2>Everything You Need to Build & Run an Education App</h2> </div> <div class="requirements-cards"> <div class="requirement-card"><div class="requirement-icon">♾️</div><div class="requirement-content"><h4>Unlimited Students on Paid Plans</h4><p>No caps on students, courses, or lessons. 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 new lesson alerts, quiz reminders, and course announcements. Keeps students engaged without relying solely on email.</p></div></div> <div class="requirement-card"><div class="requirement-icon">📄</div><div class="requirement-content"><h4>Google Sheets via SheetBridge</h4><p>Already managing student rosters or course catalogs in Google Sheets? SheetBridge connects your spreadsheet as a relational database for a smooth migration.</p></div></div> <div class="requirement-card"><div class="requirement-icon">⚡</div><div class="requirement-content"><h4>Zapier & Make Integrations</h4><p>Connect your education app to 6,000+ tools. Sync with email marketing, payment processors, calendar apps, and student information 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 Education 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 create and manage courses without coding?</h3><div class="faq-answer"><p>Yes. Tell Ada, Adalo's AI builder, what your education app needs and Magic Start generates a complete app with course screens, student database, and navigation. Then visually customize everything on the canvas by pointing at elements and directing changes. Educators routinely build and publish complete learning apps to the App Store and Google Play without writing code.</p></div></div> <div class="faq-item"><h3 class="faq-question">How do I track student progress and grades?</h3><div class="faq-answer"><p>Adalo's built-in relational database lets you create completion records that link students to lessons. When a student finishes a lesson or takes a quiz, the app creates a record tracking their score and completion status. You can then build progress dashboards that aggregate this data—showing completion percentages, average quiz scores, and time-on-task for individual students or the entire class.</p></div></div> <div class="faq-item"><h3 class="faq-question">Can I add quizzes and assessments to my education app?</h3><div class="faq-answer"><p>Yes. Build multiple-choice, true/false, and selection-based quizzes directly inside your Adalo app. Quiz questions and answers are stored in the relational database, and you can auto-grade by comparing student responses to stored correct answers. For more complex assessment types like essay questions, you can build submission screens that instructors review manually.</p></div></div> <div class="faq-item"><h3 class="faq-question">Can I include video lessons in my app?</h3><div class="faq-answer"><p>Yes. Embed videos from YouTube or Vimeo directly into your lesson screens using Adalo's WebView component. You can also include audio files, PDF documents, and images alongside your video content. Since Adalo builds native apps, video playback works smoothly on both iOS and Android devices.</p></div></div> <div class="faq-item"><h3 class="faq-question">Can I issue certificates when students complete a course?</h3><div class="faq-answer"><p>Yes. Build a certificate screen that generates automatically when a student's completion records show 100% of lessons finished. Store the certificate record in the database with the student's name, course title, completion date, and a unique ID. Students can view their certificates from any device. For printable certificates, you can connect to a PDF generation service via Zapier.</p></div></div> <div class="faq-item"><h3 class="faq-question">Does the education app work offline?</h3><div class="faq-answer"><p>Adalo's native apps cache previously viewed content, so students can review lessons they've already loaded in areas with poor connectivity. Full offline mode with download-and-sync is on the product roadmap. For students in low-connectivity environments, the native app experience is more reliable than web-based course platforms accessed through a mobile browser.</p></div></div> <div class="faq-item"><h3 class="faq-question">What can't Adalo do for education apps?</h3><div class="faq-answer"><p>Adalo excels at building custom education apps with your own course structure and student experience, but it's not a drop-in replacement for full-featured LMS platforms. Features like SCORM compliance, built-in payment processing, live video classrooms, automated drip content scheduling, and complex cohort-based access controls require platforms like Teachable, Thinkific, or a custom-built solution. Adalo also doesn't include a built-in video hosting service—you'd embed videos from YouTube or Vimeo. For educators who need a branded native app with a learning experience tailored to their specific pedagogy at a fraction of enterprise LMS 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 & Sales Apps</a>, <a href="https://www.adalo.com/solutions/church-app-builder" style="color:var(--teal);font-weight:600;text-decoration:none;">Church Apps</a>, <a href="https://www.adalo.com/solutions/grocery-app-builder" style="color:var(--teal);font-weight:600;text-decoration:none;">Grocery Apps</a>, and <a href="https://www.adalo.com/solutions/marketplace-app-builder" style="color:var(--teal);font-weight:600;text-decoration:none;">Marketplace Apps</a>. Learn more about <a href="https://www.adalo.com/" style="color:var(--teal);font-weight:600;text-decoration:none;">Adalo's no-code app builder</a>.</p> </div> </div> </div> <div class="section section-light resources"> <div class="container"> <div class="section-header"> <span class="section-label">Resources & Tutorials</span> <h2>Learn How to Build Education Apps with Adalo</h2> <p class="section-description">Step-by-step guides, video walkthroughs, and documentation to help you build and ship your learning app.</p> </div> <div class="resources-grid"> <a href="https://www.adalo.com/posts/how-to-build-an-education-app" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build an Education App Without Code</h3><p>Full walkthrough: course database, lesson screens, quiz logic, progress tracking, and publishing.</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 course data model.</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 App via SheetBridge</h3><p>Import your existing student rosters and course catalogs from spreadsheets into a real app.</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 to APIs, video platforms, and tools.</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 Learning Platform?</h2> <p>Join educators who have replaced expensive course platforms and clunky LMS tools 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 Education 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>
Education & Learning Apps