<style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --teal: #009885; --teal-dark: #007D6E; --gold: #FFBB00; --red: #EF4D30; --navy: #333333; --navy-light: #121212; --gray-50: #F7F9FC; --gray-100: #E8ECF4; --gray-600: #6C757D; --gray-800: #121212; --white: #FFFFFF; --cream: #F8F4EE; --cream-light: #F7F3EE; } body { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; color: var(--gray-800); background: var(--white); overflow-x: hidden; } .nav { background: var(--white); padding: 14px 24px; border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); } .nav-container { max-width: 100%; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; } .nav-left { display: flex; align-items: center; gap: 36px; } .nav-logo img { height: 28px; width: auto; } .nav-links { display: flex; gap: 28px; list-style: none; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--teal); } .nav-right { display: flex; align-items: center; gap: 16px; } .nav-login { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; } .nav-login:hover { color: var(--teal); } .nav-right-link { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; } .nav-right-link:hover { color: var(--teal); } .nav-signup { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); background: #00bfa5; padding: 10px 22px; border-radius: 100px; text-decoration: none; transition: background 0.2s; } .nav-signup:hover { background: var(--teal-dark); } @media (max-width: 768px) { .nav-links { display: none; } .nav-login { display: none; } } .hero { position: relative; background: #F8F4EE; background-image: linear-gradient(#F7F3EE, rgba(247,243,238,0)); color: #000; padding: 80px 24px 100px; overflow: hidden; } .hero::before { content: none; } .container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 32px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .breadcrumb a { color: #00A695; text-decoration: none; font-weight: 500; transition: opacity 0.2s; } .breadcrumb a:hover { opacity: 0.7; } .breadcrumb-separator { color: #424242; } .hero-inner { display: grid; grid-template-columns: 1fr 560px; gap: 40px; align-items: center; } .hero-content { max-width: 600px; } /* ============================= CYBERPUNK DEVICE CLUSTER ============================= */ .device-cluster { position: relative; height: 560px; overflow: hidden; } /* ═══════════════════════════════════════ DESKTOP — Light Luxury Dashboard ═══════════════════════════════════════ */ .cyber-desktop { position: absolute; top: 0; left: 0; width: 480px; z-index: 3; } .cyber-desktop .frame { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px 6px 0; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.04); } .cyber-desktop .toolbar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; } .cyber-desktop .dot { width: 7px; height: 7px; border-radius: 50%; } .cyber-desktop .dot-r { background: #ff5f56; } .cyber-desktop .dot-y { background: #ffbd2e; } .cyber-desktop .dot-g { background: #27c93f; } .cyber-desktop .url-bar { flex: 1; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 3px 10px; font-family: 'Inter', sans-serif; font-size: 8px; color: #9ca3af; margin-left: 8px; letter-spacing: 0.3px; } .cyber-desktop .screen { border-radius: 0 0 8px 8px; min-height: 260px; background: #f9fafb; } .cyber-desktop .dk-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 10px; border-bottom: 1px solid #e5e7eb; background: #ffffff; } .cyber-desktop .dk-header h4 { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #111827; letter-spacing: -0.2px; } .cyber-desktop .dk-add { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; background: #7c3aed; border: none; color: #ffffff; padding: 4px 12px; border-radius: 6px; } .cyber-desktop .dk-body { display: flex; } .cyber-desktop .dk-sidebar { width: 40px; background: #ffffff; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; border-right: 1px solid #f3f4f6; } .cyber-desktop .dk-sidebar .si { font-size: 14px; opacity: 0.3; color: #6b7280; } .cyber-desktop .dk-sidebar .si.active { opacity: 1; color: #7c3aed; } .cyber-desktop .dk-kanban { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; overflow: hidden; } .cyber-desktop .dk-col { min-width: 0; } .cyber-desktop .glass-col-header { font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; padding: 5px 6px; border-radius: 6px; margin-bottom: 5px; color: #6b7280; background: #f3f4f6; } .cyber-desktop .glass-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; margin-bottom: 5px; transition: box-shadow 0.2s, border-color 0.2s; } .cyber-desktop .glass-card:hover { border-color: #c4b5fd; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08); } .cyber-desktop .glass-name { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #111827; margin-bottom: 2px; } .cyber-desktop .glass-price { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: #7c3aed; margin-bottom: 2px; } .cyber-desktop .glass-sub { font-family: 'Inter', sans-serif; font-size: 7px; color: #9ca3af; } .cyber-desktop .glass-tag { display: inline-block; font-family: 'Inter', sans-serif; font-size: 6px; font-weight: 700; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.5px; margin-top: 3px; } .cyber-desktop .glass-tag-new { background: #ede9fe; color: #7c3aed; } .cyber-desktop .glass-tag-sale { background: #fce7f3; color: #db2777; } .cyber-desktop .glass-tag-pop { background: #fef3c7; color: #d97706; } .cyber-desktop .glass-tag-ok { background: #d1fae5; color: #059669; } .cyber-desktop .stand, .cyber-desktop .base { display: none; } /* ═══════════════════════════════════════ TABLET — Cyberpunk Neon (iPad style) ═══════════════════════════════════════ */ .cyber-tablet { position: absolute; top: 100px; right: 30px; width: 280px; z-index: 4; } .cyber-tablet .frame { background: linear-gradient(160deg, #d4d4d8, #a8a8ad, #c0c0c4, #d4d4d8); border-radius: 18px; padding: 10px; box-shadow: 0 0 30px rgba(255, 0, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255,255,255,0.5); position: relative; } .cyber-tablet .tb-camera { width: 5px; height: 5px; background: #1a1a2a; border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; margin: 0 auto 6px; } .cyber-tablet .screen { border-radius: 8px; min-height: 320px; font-family: 'Orbitron', monospace; background: #0a0a1a; position: relative; overflow: hidden; display: flex; flex-direction: column; } .cyber-tablet .screen::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 240, 255, 0.015) 2px, rgba(0, 240, 255, 0.015) 4px); pointer-events: none; z-index: 2; } .cyber-tablet .tb-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; border-bottom: 1px solid rgba(255, 0, 255, 0.1); position: relative; z-index: 3; } .cyber-tablet .tb-header h4 { font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700; color: #ff00ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.6); } .cyber-tablet .tb-header .neon-items { font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); } .cyber-tablet .tb-kanban { display: flex; gap: 6px; padding: 12px 10px; overflow: hidden; position: relative; z-index: 3; flex: 1; } .cyber-tablet .neon-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 240, 255, 0.08); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; } .cyber-tablet .neon-card .n-name { font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 3px; } .cyber-tablet .neon-card .n-amount { font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700; margin-bottom: 3px; } .cyber-tablet .neon-card .n-contact { font-size: 8px; color: rgba(255, 255, 255, 0.3); } .cyber-tablet .neon-cyan { color: #00f0ff; text-shadow: 0 0 6px rgba(0, 240, 255, 0.6); } .cyber-tablet .neon-magenta { color: #ff00ff; text-shadow: 0 0 6px rgba(255, 0, 255, 0.6); } .cyber-tablet .neon-gold { color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); } .cyber-tablet .tb-total-row { margin-top: 6px; padding: 8px 10px; border-top: 1px solid rgba(255, 0, 255, 0.15); text-align: right; position: relative; z-index: 3; } .cyber-tablet .tb-total-label { font-size: 9px; color: rgba(255, 255, 255, 0.4); font-family: 'Orbitron', monospace; } .cyber-tablet .tb-total-amount { font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700; color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); } .cyber-tablet .tb-nav { display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid rgba(255, 0, 255, 0.08); position: relative; z-index: 3; margin-top: auto; } .cyber-tablet .tb-nav span { font-size: 14px; opacity: 0.3; } .cyber-tablet .tb-nav span.active { opacity: 1; } .cyber-tablet .tb-home-bar { width: 40px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 3px; margin: 4px auto 2px; position: relative; z-index: 3; } /* ═══════════════════════════════════════ PHONE — Light Native App (iPhone style) ═══════════════════════════════════════ */ .cyber-phone { position: absolute; top: 190px; right: 10px; width: 180px; z-index: 5; } .cyber-phone .frame { background: linear-gradient(160deg, #d4d4d8, #a8a8ad, #bbbbbe, #d4d4d8); border-radius: 32px; padding: 3px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255,255,255,0.6), inset 0 -0.5px 0 rgba(0,0,0,0.1); position: relative; } .cyber-phone .frame::before { content: ''; position: absolute; right: -1.5px; top: 70px; width: 2px; height: 24px; background: linear-gradient(180deg, #b0b0b4, #909094, #b0b0b4); border-radius: 0 2px 2px 0; } .cyber-phone .frame::after { content: ''; position: absolute; left: -1.5px; top: 60px; width: 2px; height: 16px; background: linear-gradient(180deg, #b0b0b4, #909094, #b0b0b4); border-radius: 2px 0 0 2px; } .cyber-phone .screen-bezel { background: #000; border-radius: 29px; overflow: hidden; } .cyber-phone .dynamic-island { width: 40px; height: 10px; background: #000; border-radius: 10px; margin: 0 auto; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 5; } .cyber-phone .screen { border-radius: 29px; min-height: 300px; background: #ffffff; overflow: hidden; display: flex; flex-direction: column; position: relative; } .cyber-phone .native-status { display: flex; justify-content: space-between; padding: 6px 14px 0; font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 600; color: #1d1d1f; } .cyber-phone .native-header { padding: 10px 14px 8px; } .cyber-phone .native-header h4 { font-family: -apple-system, 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #111827; letter-spacing: -0.4px; margin: 0 0 2px; } .cyber-phone .native-header .native-accent { font-family: -apple-system, 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: #059669; } .cyber-phone .native-progress { display: flex; gap: 0; align-items: center; margin: 0 14px 4px; } .cyber-phone .progress-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cyber-phone .progress-line { flex: 1; height: 2px; border-radius: 1px; } .cyber-phone .native-progress-labels { display: flex; justify-content: space-between; padding: 0 14px 10px; } .cyber-phone .native-progress-labels span { font-family: -apple-system, 'Inter', sans-serif; font-size: 6px; color: #9ca3af; } .cyber-phone .native-progress-labels span.active { color: #059669; font-weight: 600; } .cyber-phone .native-content { padding: 0 10px; flex: 1; } .cyber-phone .native-card { background: #f9fafb; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; } .cyber-phone .native-label { font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; } .cyber-phone .native-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; } .cyber-phone .native-value { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #374151; } .cyber-phone .native-price { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 700; color: #374151; text-align: right; } .cyber-phone .native-success { color: #059669; } .cyber-phone .native-pill { display: inline-block; font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 700; padding: 3px 8px; border-radius: 10px; } .cyber-phone .pill-success { background: #d1fae5; color: #059669; } .cyber-phone .native-total { background: #059669; border-radius: 12px; padding: 10px 12px; margin: 2px 0 0; display: flex; justify-content: space-between; align-items: center; } .cyber-phone .native-total-label { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.8); } .cyber-phone .native-total-amount { font-family: -apple-system, 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #ffffff; } .cyber-phone .native-nav { display: flex; justify-content: space-around; padding: 8px 0 6px; margin-top: auto; } .cyber-phone .native-nav span { font-size: 13px; opacity: 0.2; color: #6b7280; } .cyber-phone .native-nav span.active { opacity: 1; color: #059669; } .cyber-phone .home-bar { width: 50px; height: 3px; background: #1d1d1f; border-radius: 3px; margin: 2px auto 4px; } .device-column { display: flex; flex-direction: column; } .store-badges { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; } .store-badges img { height: 40px; width: auto; opacity: 0.7; transition: opacity 0.3s; } .store-badges img:hover { opacity: 1; } .use-case-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 169, 150, 0.1); color: #00A695; border: none; padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } h1 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; background: linear-gradient(180deg, #006445, #00A695); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: slideUp 0.6s ease-out 0.2s both; } .hero-highlight { display: inline; } .hero-description { font-size: 16px; line-height: 1.5; margin-bottom: 36px; color: #000; } .hero-stats { display: flex; gap: 24px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; } .stat-value { font-family: 'Work Sans', sans-serif; font-size: 36px; font-weight: 800; color: #00A695; line-height: 1; margin-bottom: 8px; } .stat-label { font-size: 14px; color: #424242; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; } /* ── CTA BUTTONS ── */ .hero-buttons { display: flex; gap: 12px; margin-bottom: 16px; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; background: #00A695; color: white; border: 2px solid #00A898; } .btn-primary:hover { background: #00786A; border-color: #00786A; text-decoration: none; } .btn-outline-hero { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; border: 2px solid #424242; color: #424242; background: transparent; } .btn-outline-hero:hover { border-color: #00A695; color: #00A695; text-decoration: none; } .hero-sub { font-size: 13px; color: #424242; margin-bottom: 20px; } .perks { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; margin-top: 0; margin-bottom: 24px; } .perks li { display: flex; align-items: center; gap: 10px; font-family: 'Work Sans', sans-serif; font-size: 16px; color: #000; font-weight: 400; margin: 0; padding: 0; } .perks li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #0e9e82; flex-shrink: 0; } .arrow { transition: transform 0.3s ease; display: inline-block; } .btn-primary:hover .arrow { transform: translateX(4px); } @media (max-width: 768px) { .hero-buttons { flex-direction: column; } .hero-buttons a { text-align: center; justify-content: center; } } .section { padding: 80px 24px; } .section-light { background: var(--gray-50); } .section-header { max-width: 800px; margin-bottom: 60px; } .section-label { display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; } h2 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--navy); letter-spacing: -0.01em; } .section-description { font-size: 18px; color: var(--gray-600); line-height: 1.7; } .app-types-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; max-width: 1000px; margin-left: auto; margin-right: auto; } .app-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--gray-100); border-radius: 100px; padding: 12px 24px; font-size: 15px; font-weight: 600; color: var(--navy); transition: all 0.3s ease; cursor: default; } .app-chip:hover { border-color: var(--teal); background: rgba(0, 152, 133, 0.05); transform: translateY(-2px); } .chip-icon { font-size: 20px; } .chip-text { white-space: nowrap; } .problem-solution { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; } .problem-card, .solution-card { padding: 48px; border-radius: 24px; position: relative; } .problem-card { background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%); border: 2px solid #FFD5D5; } .problem-card::before { content: '\26A0\FE0F'; position: absolute; top: 24px; right: 24px; font-size: 32px; opacity: 0.3; } .solution-card { background: linear-gradient(135deg, #F0FFF4 0%, #E0F9E8 100%); border: 2px solid #B8F4CC; } .solution-card::before { content: '\2713'; position: absolute; top: 24px; right: 24px; font-size: 48px; color: #38A169; opacity: 0.2; font-weight: 700; } .card-title { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 16px; color: var(--navy); } .card-list { list-style: none; } .card-list li { padding: 12px 0 12px 32px; position: relative; color: var(--gray-800); line-height: 1.6; } .problem-card .card-list li::before { content: '\2715'; position: absolute; left: 0; color: #E53E3E; font-weight: 700; } .solution-card .card-list li::before { content: '\2713'; position: absolute; left: 0; color: #38A169; font-weight: 700; font-size: 18px; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; } .feature { background: var(--white); padding: 36px; border-radius: 20px; border: 2px solid var(--gray-100); transition: all 0.3s ease; } .feature:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 152, 133, 0.2); } .feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.35); } .feature h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--navy); } .feature p { color: var(--gray-600); line-height: 1.7; } .workflow { background: var(--white); } .workflow-steps { display: grid; gap: 0; margin-top: 48px; position: relative; } .workflow-step { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 32px 0; position: relative; } .workflow-step:not(:last-child)::after { content: ''; position: absolute; left: 39px; top: 80px; bottom: -32px; width: 2px; background: linear-gradient(to bottom, var(--teal) 0%, var(--gray-100) 100%); } .step-number { width: 80px; height: 80px; background: var(--teal); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Work Sans', sans-serif; font-size: 32px; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.4); position: relative; z-index: 2; } .step-content h3 { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--navy); } .step-content p { color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; } .step-details { background: var(--gray-50); padding: 24px; border-radius: 12px; margin-top: 16px; } .step-details-title { font-weight: 700; color: var(--navy); margin-bottom: 12px; font-size: 15px; } .columns-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .column-item { background: var(--white); padding: 12px 16px; border-radius: 8px; font-size: 14px; font-family: 'Courier New', monospace; color: var(--navy); border: 1px solid var(--gray-100); } .screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; } .screen-item { background: var(--white); padding: 16px; border-radius: 12px; border: 2px solid var(--gray-100); transition: border-color 0.2s; } .screen-item:hover { border-color: var(--teal); } .screen-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 15px; } .screen-desc { font-size: 14px; color: var(--gray-600); line-height: 1.5; } .benefits { background: var(--navy); color: var(--white); } .benefits h2 { color: var(--white); } .benefits .section-description { color: rgba(255, 255, 255, 0.8); } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 48px; } .benefit-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15); transition: all 0.3s ease; } .benefit-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); border-color: var(--gold); } .benefit-icon { font-size: 36px; margin-bottom: 16px; } .benefit-card h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--gold); } .benefit-card p { color: rgba(255, 255, 255, 0.85); line-height: 1.7; } /* === COMPARISON TABLE === */ .comparison { background: #faf6f0; } .comp-table { width: 100%; border-collapse: collapse; background: transparent; margin-top: 48px; } .comp-table th { background: transparent; padding: 18px 24px; text-align: left; font-weight: 700; font-size: 15px; color: var(--navy); border-bottom: 2px solid #e0d8ce; } .comp-table td { padding: 20px 24px; border-bottom: 1px solid #ebe5dc; font-size: 15px; line-height: 1.6; color: #555; vertical-align: top; } .comp-table tr:last-child td { border-bottom: none; } .comp-table td:first-child { font-weight: 700; color: var(--navy); width: 160px; } .best-practices { background: var(--gray-50); } .practices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; } .practice-card { background: var(--white); padding: 32px; border-radius: 16px; border-left: 4px solid var(--teal); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .practice-card h3 { font-family: 'Work Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--navy); display: flex; align-items: center; gap: 8px; } .practice-icon { font-size: 20px; } .practice-card p { color: var(--gray-600); line-height: 1.7; } .requirements { background: var(--white); } .requirements-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; } .requirement-card { background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%); padding: 32px; border-radius: 16px; border: 2px solid var(--gray-100); display: flex; gap: 20px; align-items: flex-start; } .requirement-icon { width: 48px; height: 48px; background: var(--teal); color: var(--white); border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; } .requirement-content h4 { font-weight: 700; color: var(--navy); margin-bottom: 8px; } .requirement-content p { color: var(--gray-600); font-size: 15px; line-height: 1.6; } /* Resources & Tutorials */ .resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .resource-card { display: block; background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; text-decoration: none; transition: all 0.3s ease; } .resource-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 152, 133, 0.1); } .resource-type { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); background: rgba(0, 152, 133, 0.08); padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; } .resource-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; } .resource-card p { font-size: 15px; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; } .resource-link { font-size: 14px; font-weight: 600; color: var(--teal); } @media (max-width: 768px) { .resources-grid { grid-template-columns: 1fr; } } .cta-section { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); padding: 100px 24px; text-align: center; color: var(--white); position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px ); } .cta-content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; } .cta-section h2 { color: var(--white); margin-bottom: 20px; } .cta-section p { font-size: 20px; margin-bottom: 40px; opacity: 0.95; line-height: 1.7; } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn { padding: 18px 40px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif; } .btn-white { background: var(--white); color: var(--teal); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .btn-white:hover { background: var(--gray-50); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); } .btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); } .btn-outline:hover { background: var(--white); color: var(--teal); transform: translateY(-2px); } .faq-container { max-width: 900px; margin: 0 auto; } .faq-item { background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; margin-bottom: 20px; transition: all 0.3s ease; } .faq-item:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(0, 152, 133, 0.1); } .faq-question { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 16px; } .faq-answer p { color: var(--gray-600); line-height: 1.7; margin: 0; } @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr 440px; } .device-cluster { height: 420px; } .cyber-desktop { width: 400px; } .cyber-tablet { width: 200px; } .cyber-phone { display: none; } } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-content { max-width: 100%; } .device-cluster { height: 360px; max-width: 480px; margin: 0 auto; } .cyber-desktop { width: 100%; max-width: 480px; position: relative; } .cyber-tablet, .cyber-phone { display: none; } .store-badges { justify-content: center; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .hero { padding: 60px 24px 80px; } .hero-inner { grid-template-columns: 1fr; text-align: center; } .device-cluster { display: none; } .hero-content { max-width: 100%; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } .comp-table th, .comp-table td { padding: 12px 14px; font-size: 13px; } .comp-table td:first-child { width: 100px; } .problem-solution { grid-template-columns: 1fr; gap: 24px; } .workflow-step { grid-template-columns: 60px 1fr; gap: 20px; } .step-number { width: 60px; height: 60px; font-size: 24px; } .workflow-step:not(:last-child)::after { left: 29px; } .screens-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; } .btn { width: 100%; justify-content: center; } .hero-stats { gap: 32px; } } .arrow { transition: transform 0.3s ease; } .btn:hover .arrow { transform: translateX(4px); } </style> <script type="application/ld+json"> { "@context": "https://schema.org", "@graph": [ { "@type": "WebPage", "@id": "https://www.adalo.com/solutions/fitness-app-builder/#webpage", "url": "https://www.adalo.com/solutions/fitness-app-builder", "name": "Fitness App Builder | Adalo", "description": "Build a custom fitness app for iOS, Android, and web with Adalo's no-code app builder. See every screen on one canvas, preview on any device, and visually direct the AI to create workout trackers, exercise libraries, and progress dashboards. Publish to the Apple App Store and Google Play.", "isPartOf": { "@id": "https://www.adalo.com/#website" }, "breadcrumb": { "@id": "https://www.adalo.com/solutions/fitness-app-builder/#breadcrumb" } }, { "@type": "BreadcrumbList", "@id": "https://www.adalo.com/solutions/fitness-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": "Fitness App Builder" } ] }, { "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What is Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project \u2014 no code, no developers required." } }, { "@type": "Question", "name": "Can I build a fitness app without coding?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's no-code app builder requires zero coding. Tell Ada (Adalo's AI builder) what your fitness app needs and Magic Start generates a complete app with a database, screens, and navigation. Then visually customize everything on the canvas by pointing at elements and directing changes." } }, { "@type": "Question", "name": "How much does a custom fitness app cost?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's paid plans start at $36/mo with unlimited usage\u2014no caps on users, records, actions, or storage. Compare that to white-label fitness platforms at $200\u2013$500+/mo with per-member pricing. The free plan includes 500 database records so you can prototype your fitness app before committing." } }, { "@type": "Question", "name": "Can members use the app during workouts at the gym?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo builds true native iOS and Android apps\u2014not web wrappers. Members download your fitness app from the Apple App Store or Google Play. Native apps mean fast performance between sets, push notifications for workout reminders, and a responsive experience that works reliably in gym environments." } }, { "@type": "Question", "name": "Can I track client progress and measurements?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's built-in relational database lets you store progress data (weight lifted, body measurements, workout frequency) linked to individual members. You can build progress charts, personal record displays, and streak counters." } }, { "@type": "Question", "name": "Does the app support workout videos?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo supports embedded video links in your exercise library. You can link to hosted videos (YouTube, Vimeo, or your own hosting) that play inline when members tap an exercise. For a Netflix-style streaming experience with DRM video protection, a custom development approach may be more suitable." } }, { "@type": "Question", "name": "How does Adalo compare to Appy Pie for fitness apps?", "acceptedAnswer": { "@type": "Answer", "text": "Appy Pie offers template-based app creation that can get a basic fitness app live quickly. However, templates constrain your workout flow and exercise database structure. Adalo gives you full control over every screen, database relationship, and user flow at $36/mo with unlimited usage." } }, { "@type": "Question", "name": "What can't Adalo do for fitness apps?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo excels at building custom fitness apps with workout tracking, exercise libraries, scheduling, and progress visualization. However, it doesn't include native integrations with fitness wearables (Apple Watch, Fitbit) or health data APIs (Apple HealthKit, Google Fit) out of the box. If your app requires real-time video streaming for live classes or complex rep-counting via camera AI, custom development is likely the better path." } } ] } ] } </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>Fitness App Builder</span> </div> <div class="hero-inner"> <div class="hero-content"> <div class="use-case-badge"> 🏋️ Fitness & Wellness </div> <h1> Build Custom <span class="hero-highlight">Fitness Apps</span> Without Code </h1> <p class="hero-description"> Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project — no code, no developers required. Build a workout tracker, exercise library, or complete fitness platform that your members actually want to use. </p> <div class="hero-buttons"> <a href="https://app.adalo.com/signup" class="btn-primary">Build Free <span class="arrow">→</span></a> <a href="https://www.adalo.com/pricing" class="btn-outline-hero">View Pricing</a> </div> <ul class="perks"> <li>No credit card required</li> <li>Hosted Postgres database included</li> <li>500 records on the free plan with no time limit</li> <li>Web publishing complimentary</li> <li>No overages or excess usage charges</li> </ul> <div class="hero-stats"> <div class="stat"> <div class="stat-value">3</div> <div class="stat-label">Platforms from One Build</div> </div> <div class="stat"> <div class="stat-value">$36/mo</div> <div class="stat-label">Unlimited Usage</div> </div> <div class="stat"> <div class="stat-value">500</div> <div class="stat-label">Free Records to Start</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/fitness</div> </div> <div class="screen"> <div class="dk-header"> <h4>Workout Plan</h4> <div class="dk-add">+ Add Exercise</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">Push</div> <div class="glass-card"> <div class="glass-name">Bench Press</div> <div class="glass-price">4 x 8 reps</div> <span class="glass-tag glass-tag-new">185 LB</span> </div> <div class="glass-card"> <div class="glass-name">OHP</div> <div class="glass-price">3 x 10 reps</div> <div class="glass-sub">95 lb</div> </div> <div class="glass-card"> <div class="glass-name">Incline DB</div> <div class="glass-price">3 x 12 reps</div> <span class="glass-tag glass-tag-pop">50 LB</span> </div> </div> <div class="dk-col"> <div class="glass-col-header">Pull</div> <div class="glass-card"> <div class="glass-name">Deadlift</div> <div class="glass-price">5 x 5 reps</div> <span class="glass-tag glass-tag-ok">PR</span> </div> <div class="glass-card"> <div class="glass-name">Pull-ups</div> <div class="glass-price">4 x 8 reps</div> <div class="glass-sub">Bodyweight</div> </div> <div class="glass-card"> <div class="glass-name">Barbell Row</div> <div class="glass-price">4 x 8 reps</div> <div class="glass-sub">135 lb</div> </div> </div> <div class="dk-col"> <div class="glass-col-header">Legs</div> <div class="glass-card"> <div class="glass-name">Squats</div> <div class="glass-price">4 x 6 reps</div> <span class="glass-tag glass-tag-pop">225 LB</span> </div> <div class="glass-card"> <div class="glass-name">Leg Press</div> <div class="glass-price">3 x 12 reps</div> <div class="glass-sub">360 lb</div> </div> </div> <div class="dk-col"> <div class="glass-col-header">Core</div> <div class="glass-card"> <div class="glass-name">Planks</div> <div class="glass-price">3 x 60s</div> <div class="glass-sub">Weighted</div> </div> <div class="glass-card"> <div class="glass-name">Cable Crunch</div> <div class="glass-price">3 x 15 reps</div> <span class="glass-tag glass-tag-new">80 LB</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>Bench Press</h4> <span class="neon-items">Set 3/4</span> </div> <div class="tb-kanban"> <div style="flex:1;"> <div class="neon-card"> <div class="n-name">Set 1</div> <div class="n-amount neon-cyan">8 reps @ 185</div> <div class="n-contact">Complete</div> </div> <div class="neon-card"> <div class="n-name">Set 2</div> <div class="n-amount neon-cyan">8 reps @ 185</div> <div class="n-contact">Complete</div> </div> <div class="neon-card"> <div class="n-name">Set 3</div> <div class="n-amount neon-gold">6 reps @ 185</div> <div class="n-contact">In progress</div> </div> <div class="tb-total-row"> <div class="tb-total-label">REST</div> <div class="tb-total-amount">1: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>Active Workout</h4> <span class="native-accent">Push Day</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>Warmup</span> <span class="active">Working</span> <span>Cooldown</span> <span>Done</span> </div> <div class="native-content"> <div class="native-card"> <div class="native-row"> <span class="native-label" style="margin:0;">Exercise</span> <span class="native-pill pill-success">Bench</span> </div> </div> <div class="native-card"> <div class="native-label">Current Set</div> <div class="native-row"> <span class="native-value">Weight</span> <span class="native-price">185 lb</span> </div> <div class="native-row"> <span class="native-value">Reps</span> <span class="native-price">8</span> </div> <div class="native-row"> <span class="native-value">Rest</span> <span class="native-price">90 sec</span> </div> </div> <div class="native-total"> <span class="native-total-label">Total Vol</span> <span class="native-total-amount">5,920</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 Fitness App You Can Imagine</h2> <p class="section-description"> From personal workout trackers to full gym management platforms—describe what you need and Ada, Adalo's AI builder, generates a working fitness 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">Workout Tracker</div> </div> <div class="app-chip"> <div class="chip-icon">🏋️</div> <div class="chip-text">Exercise Library</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">Running Log</div> </div> <div class="app-chip"> <div class="chip-icon">🥗</div> <div class="chip-text">Meal Planner</div> </div> <div class="app-chip"> <div class="chip-icon">📅</div> <div class="chip-text">Class Scheduler</div> </div> <div class="app-chip"> <div class="chip-icon">👥</div> <div class="chip-text">Personal Training</div> </div> <div class="app-chip"> <div class="chip-icon">🏢</div> <div class="chip-text">Gym Management</div> </div> </div> </div> </div> <div class="section"> <div class="container"> <div class="section-header"> <span class="section-label">The Challenge</span> <h2>Fitness Professionals Deserve Better Than Spreadsheets & Generic Apps</h2> <p class="section-description"> Most trainers and gym owners are stuck between expensive white-label fitness platforms and one-size-fits-all apps that don't match their training methodology. There's a better way to engage your members. </p> </div> <div class="problem-solution"> <div class="problem-card"> <h3 class="card-title">The Fitness App Problem</h3> <ul class="card-list"> <li>Workout plans tracked in PDFs, spreadsheets, or group chats</li> <li>White-label fitness platforms cost $200–$500+/mo with rigid templates</li> <li>Members can't access personalized programs on their phones during workouts</li> <li>No way to track individual client progress across exercises and measurements</li> <li>Class scheduling managed through separate apps that don't connect to your member data</li> <li>Generic fitness apps don't reflect your brand or training philosophy</li> </ul> </div> <div class="solution-card"> <h3 class="card-title">The Adalo Fitness Solution</h3> <ul class="card-list"> <li>Visual canvas lets you design workout flows, timers, and progress screens your way</li> <li>Built-in relational database connects exercises, workouts, members, and progress data</li> <li>Native iOS and Android apps give members real-time workout access at the gym</li> <li>$36/mo with unlimited users, records, and storage—no per-member charges</li> <li>Ada generates a working fitness app from a description—launch in days, not months</li> <li>Your training methodology becomes the app, branded to your gym or practice</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 Fitness App Needs in One Platform</h2> <p class="section-description"> Built for trainers, gym owners, and fitness entrepreneurs who need a custom app—on web, iOS, and Android from a single build. </p> </div> <div class="features"> <div class="feature"> <div class="feature-icon">💪</div> <h3>Workout Builder</h3> <p>Create structured workout plans with exercises, sets, reps, and rest timers. Store everything in Adalo's built-in relational database—exercises link to muscle groups, workouts link to programs, and programs link to members.</p> </div> <div class="feature"> <div class="feature-icon">📷</div> <h3>Exercise Library</h3> <p>Build a searchable exercise database with video thumbnails, difficulty levels, muscle group tags, and form instructions. Members browse by body part or search by name during their workout.</p> </div> <div class="feature"> <div class="feature-icon">📈</div> <h3>Progress Tracking</h3> <p>Track weight lifted, reps completed, body measurements, and workout streaks over time. Members see their improvement visually with charts and personal records on any device.</p> </div> <div class="feature"> <div class="feature-icon">⏱️</div> <h3>Workout Timer</h3> <p>Built-in rest timers, interval timers for HIIT sessions, and workout duration tracking. Members tap "Complete Set" and the app logs their data and starts the rest countdown automatically.</p> </div> <div class="feature"> <div class="feature-icon">🔔</div> <h3>Push Notifications</h3> <p>Native push notifications remind members about scheduled workouts, celebrate streaks, and alert trainers when clients complete sessions. Keeps engagement high without requiring members to open the app.</p> </div> <div class="feature"> <div class="feature-icon">📅</div> <h3>Class & Session Scheduling</h3> <p>Build booking screens for group classes or one-on-one training sessions. Members view available time slots, book directly from the app, and receive confirmation notifications.</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 Fitness 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 fitness 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 Fitness App to Ada</h3> <p>Tell Ada, Adalo's AI builder, what your fitness platform needs. Magic Start generates a complete 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 fitness app for a personal training business. I need an exercise library with muscle groups and difficulty levels, a workout builder where I assign programs to clients, a timer screen for active workouts, and a progress dashboard showing weight lifted and measurements over time." </div> </div> </div> </div> </div> <div class="workflow-step"> <div class="step-number">2</div> <div class="step-content"> <h3>Design Your Workout Experience</h3> <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust exercise cards, timer layouts, and progress charts. Add features with Magic Add using natural language.</p> <div class="step-details"> <div class="step-details-title">Core database collections:</div> <div class="columns-list"> <div class="column-item">Exercises</div> <div class="column-item">Workouts</div> <div class="column-item">Programs</div> <div class="column-item">Members</div> <div class="column-item">Progress Logs</div> <div class="column-item">Schedules</div> </div> </div> </div> </div> <div class="workflow-step"> <div class="step-number">3</div> <div class="step-content"> <h3>Connect Data Sources</h3> <p>Use Adalo's built-in relational database for your exercise and member data, or connect Google Sheets via SheetBridge if your team already tracks client programs in spreadsheets. Add Zapier or Make integrations for payment processing, email, and calendar sync.</p> <div class="step-details"> <div class="step-details-title">Common fitness app integrations:</div> <div class="screens-grid"> <div class="screen-item"> <div class="screen-title">SheetBridge</div> <div class="screen-desc">Import existing workout plans from Google Sheets as a relational database</div> </div> <div class="screen-item"> <div class="screen-title">Zapier / Make</div> <div class="screen-desc">Connect to Stripe for payments, calendar apps, and email marketing</div> </div> <div class="screen-item"> <div class="screen-title">Custom API</div> <div class="screen-desc">External Collections connect to wearable data or nutrition APIs</div> </div> <div class="screen-item"> <div class="screen-title">Webhooks</div> <div class="screen-desc">Trigger automations when workouts are completed or milestones are hit</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 fitness app on any device form factor directly from the canvas. Test the full workout flow—browsing exercises, starting a workout, logging sets, 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 fitness 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 members download the app and start working out 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 Fitness</span> <h2>The Fitness App That Fits Your Budget & Your Methodology</h2> <p class="section-description"> Stop paying per member for features you don't use. Build exactly the fitness experience your clients need. </p> </div> <div class="benefits-grid"> <div class="benefit-card"> <div class="benefit-icon">💸</div> <h3>Fraction of White-Label Costs</h3> <p>Adalo costs $36/mo with unlimited users, records, and storage. No per-member fees. White-label fitness platforms like Trainerize or PT Distinction charge $200–$500+/mo—Adalo is still $36/mo regardless of how many clients you serve.</p> </div> <div class="benefit-card"> <div class="benefit-icon">📱</div> <h3>Native Gym-Floor Experience</h3> <p>True native iOS and Android apps with push notifications and fast performance. Members use your app during workouts at the gym, between sets, with no loading delays or web browser frustration.</p> </div> <div class="benefit-card"> <div class="benefit-icon">🗄️</div> <h3>One Database for Everything</h3> <p>Adalo's built-in relational database connects exercises, workouts, members, progress logs, and schedules without configuring external services. No Firebase setup. No Supabase. It just works.</p> </div> <div class="benefit-card"> <div class="benefit-icon">🚀</div> <h3>Ship in Days, Not Months</h3> <p>Ada generates your fitness app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live fitness app in under a week.</p> </div> <div class="benefit-card"> <div class="benefit-icon">🔍</div> <h3>Design Every Workout Screen Visually</h3> <p>See exercise libraries, active workouts, progress charts, and member profiles simultaneously on Adalo's canvas. Visually direct the AI to refine layouts and flows—no chat prompts needed.</p> </div> <div class="benefit-card"> <div class="benefit-icon">📊</div> <h3>Scale with Your Member Base</h3> <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. Whether you have 50 members or 50,000, the app stays fast without infrastructure changes.</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 Fitness App vs. Appy Pie / FitBudd vs. Custom Development</h2> <p class="section-description"> See how building your own fitness app with Adalo compares to the alternatives. </p> </div> <table class="comp-table"> <thead> <tr> <th>Factor</th> <th>Adalo Fitness App</th> <th>Appy Pie / FitBudd</th> <th>Custom Development</th> </tr> </thead> <tbody> <tr> <td>Build Time</td> <td>✅ Days to weeks</td> <td>Hours (template), but limited customization</td> <td>3–6 months</td> </tr> <tr> <td>Monthly Cost</td> <td>✅ $36/mo flat (unlimited members)</td> <td>$200–$500+/mo (per-member pricing)</td> <td>$5,000–15,000/mo (hosting + team)</td> </tr> <tr> <td>Native Mobile App</td> <td>✅ iOS and Android (true native)</td> <td>Template-based native or PWA</td> <td>Yes (if budgeted separately)</td> </tr> <tr> <td>Workout Customization</td> <td>✅ Full — your screens, your flow</td> <td>Constrained by platform templates</td> <td>Full (at development cost)</td> </tr> <tr> <td>Branding</td> <td>✅ Fully custom — your brand throughout</td> <td>Limited — platform branding visible</td> <td>Full (at development cost)</td> </tr> <tr> <td>Database</td> <td>✅ Built-in relational database</td> <td>Platform-managed (limited access)</td> <td>Custom setup required</td> </tr> <tr> <td>Time to Change</td> <td>✅ Minutes</td> <td>Limited by template flexibility</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 Fitness App Success</h2> <p class="section-description"> Patterns from Makers who have built and shipped successful fitness apps with Adalo. </p> </div> <div class="practices-grid"> <div class="practice-card"> <h3><span class="practice-icon">💪</span> Start with the Exercise Library</h3> <p>Your exercise database is the foundation. Define exercises with muscle groups, equipment, difficulty, and video links first. Then build workouts by linking exercises from the library, and programs by linking workouts together.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">⏱️</span> Make the Active Workout Screen Minimal</h3> <p>During a workout, members need three things: current exercise, reps/weight, and a "Complete Set" button. Keep the active workout screen focused—move detailed stats and history to a separate progress screen.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">📊</span> Track Progress Visually</h3> <p>Members stay motivated when they can see improvement. Add progress charts for weight lifted, measurements, and workout frequency. Celebrate milestones with push notifications when members hit personal records.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">🔗</span> Add Integrations Gradually</h3> <p>Start with Adalo's built-in database for exercises, workouts, and members. Once your app is live, layer in Zapier automations for payment processing (Stripe), email marketing, and calendar sync for booking sessions.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">📋</span> Import Programs from Spreadsheets</h3> <p>If your workout programs or class schedules live in Google Sheets, use SheetBridge to connect them as a relational database. Migrate without rebuilding your content library from scratch.</p> </div> <div class="practice-card"> <h3><span class="practice-icon">🧪</span> Test on the Gym Floor</h3> <p>Have 5–10 members use the app during real workouts before launching broadly. Sweaty hands, gym lighting, and mid-set urgency expose UX issues that desktop testing misses.</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 Fitness 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 exercises, workouts, members, or progress logs. 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 workout reminders, streak celebrations, and session confirmations. Keeps members engaged and coming back without relying on email or SMS.</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 workout programs in Google Sheets? SheetBridge connects your spreadsheet as a relational database so you can migrate incrementally without disruption.</p> </div> </div> <div class="requirement-card"> <div class="requirement-icon">⚡</div> <div class="requirement-content"> <h4>Zapier & Make Integrations</h4> <p>Connect your fitness app to 6,000+ tools. Sync with Stripe for payments, Calendly for bookings, Mailchimp for member communications, and fitness wearable APIs via webhooks.</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 Fitness 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 build a fitness app without coding?</h3> <div class="faq-answer"> <p>Yes. Adalo's no-code app builder requires zero coding. Tell Ada (Adalo's AI builder) what your fitness app needs and Magic Start generates a complete app with a database, screens, and navigation. Then visually customize everything on the canvas by pointing at elements and directing changes. Makers routinely build and publish complete fitness apps to the App Store and Google Play without writing a single line of code.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">How much does a custom fitness app cost?</h3> <div class="faq-answer"> <p>Adalo's paid plans start at $36/mo with unlimited usage—no caps on users, records, actions, or storage. Compare that to white-label fitness platforms like FitBudd or Trainerize at $200–$500+/mo with per-member pricing, or custom development starting at $50,000+. The free plan includes 500 database records so you can prototype your fitness app before committing.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">Can members use the app during workouts at the gym?</h3> <div class="faq-answer"> <p>Yes. Adalo builds true native iOS and Android apps—not web wrappers. Members download your fitness app from the Apple App Store or Google Play like any other app. Native apps mean fast performance between sets, push notifications for workout reminders, and a responsive experience that works reliably in gym environments.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">Can I track client progress and measurements?</h3> <div class="faq-answer"> <p>Yes. Adalo's built-in relational database lets you store progress data (weight lifted, body measurements, workout frequency) linked to individual members. You can build progress charts, personal record displays, and streak counters. Trainers can view all client data from the web dashboard while clients see their own progress in the mobile app.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">Does the app support workout videos?</h3> <div class="faq-answer"> <p>Adalo supports embedded video links in your exercise library. You can link to hosted videos (YouTube, Vimeo, or your own hosting) that play inline when members tap an exercise. This is ideal for exercise demonstrations and form instruction. For a Netflix-style streaming experience with DRM video protection, a custom development approach may be more suitable.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">How does Adalo compare to Appy Pie for fitness apps?</h3> <div class="faq-answer"> <p>Appy Pie offers template-based app creation that can get a basic fitness app live quickly. However, templates constrain your workout flow, exercise database structure, and progress tracking to what the template allows. Adalo gives you full control over every screen, database relationship, and user flow—so your app matches your training methodology rather than forcing your methodology into a template. Adalo also costs $36/mo with unlimited usage, while Appy Pie's comparable plans with app store publishing start at $60/mo.</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">What can't Adalo do for fitness apps?</h3> <div class="faq-answer"> <p>Adalo excels at building custom fitness apps with workout tracking, exercise libraries, scheduling, and progress visualization. However, it doesn't include native integrations with fitness wearables (Apple Watch, Fitbit) or health data APIs (Apple HealthKit, Google Fit) out of the box—you'd need Custom Actions or API connections via Zapier. If your app requires real-time video streaming for live classes, advanced 3D exercise animations, or complex rep-counting via camera AI, custom development is likely the better path. For everything else—workout programs, progress tracking, scheduling, member management—Adalo delivers at a fraction of the cost.</p> </div> </div> </div> <div style="margin-top: 60px; text-align: center; padding: 40px; background: var(--gray-50); border-radius: 16px;"> <p style="font-size: 16px; color: var(--gray-600); margin-bottom: 20px;"> Explore more solutions: <a href="https://www.adalo.com/solutions/crm-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">CRM Apps</a>, <a href="https://www.adalo.com/solutions/booking-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Booking Apps</a>, <a href="https://www.adalo.com/solutions/healthcare-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Healthcare 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 Fitness Apps with Adalo</h2> <p class="section-description"> Step-by-step guides, video walkthroughs, and documentation to help you build and ship your fitness app. </p> </div> <div class="resources-grid"> <a href="https://www.adalo.com/posts/how-to-build-a-fitness-app" class="resource-card"> <div class="resource-type">Tutorial</div> <h3>How to Build a Fitness App Without Code</h3> <p>Full walkthrough: exercise database, workout screens, progress tracking, 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 fitness app to payment and scheduling 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 App via SheetBridge</h3> <p>Migrate your workout spreadsheet to a real fitness app without losing your existing program 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 fitness app 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 Fitness App?</h2> <p> Join Makers who have replaced spreadsheet workout plans and expensive white-label platforms with custom native fitness 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 Fitness 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>
Applications de fitness et bien-être