Social Media App Builder

: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/social-media-app-builder/#webpage",
                "url": "https://www.adalo.com/solutions/social-media-app-builder",
                "name": "Social Media App Builder | Adalo",
                "description": "Build a custom social media 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 feeds, profiles, messaging, and engagement features\u2014then publish to the Apple App Store and Google Play.",
                "isPartOf": { "@id": "https://www.adalo.com/#website" }
            },
            {
                "@type": "BreadcrumbList",
                "itemListElement": [
                    {
                        "@type": "ListItem",
                        "position": 1,
                        "name": "Home",
                        "item": "https://www.adalo.com/"
                    },
                    {
                        "@type": "ListItem",
                        "position": 2,
                        "name": "Solutions",
                        "item": "https://www.adalo.com/solutions"
                    },
                    {
                        "@type": "ListItem",
                        "position": 3,
                        "name": "Social Media App Builder",
                        "item": "https://www.adalo.com/solutions/social-media-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 Adalo handle real-time features like feeds and notifications?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "Yes. Adalo's built-in relational database updates feeds when new posts, likes, and comments are created. Native push notifications alert users in real time when someone interacts with their content. Adalo 3.0 (launched late 2025) is 3\u20134x faster than previous versions and supports 1M+ monthly active users."
                        }
                    },
                    {
                        "@type": "Question",
                        "name": "How does user authentication work?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "Adalo includes built-in email/password authentication with account creation, login, and password reset screens. You can assign roles (admin, moderator, member) using database properties and control access to screens and actions based on those roles."
                        }
                    },
                    {
                        "@type": "Question",
                        "name": "Can I add content moderation to my social app?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "Yes. You can build moderation workflows directly in Adalo using role-based access. Create a reporting system where users flag content, and moderators review flagged posts from a dedicated admin screen. For automated moderation, connect to content moderation APIs via Zapier or Adalo's Custom Actions."
                        }
                    },
                    {
                        "@type": "Question",
                        "name": "Can users upload photos and videos?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "Adalo supports image uploads natively\u2014users can upload photos from their camera or gallery. For video, you can integrate with services like Cloudinary or Mux via Custom Actions. Image uploads work out of the box; video requires an external service integration."
                        }
                    },
                    {
                        "@type": "Question",
                        "name": "Do users receive push notifications on their phones?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "Yes. Adalo builds true native iOS and Android apps with full push notification support for new followers, likes, comments, and direct messages. Push notifications are the single biggest driver of daily active usage in social apps."
                        }
                    },
                    {
                        "@type": "Question",
                        "name": "Can a social app built with Adalo scale to thousands of users?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "Yes. Adalo 3.0 (launched late 2025) scales to 1M+ monthly active users. Paid plans include unlimited database records, users, and storage at $36/mo\u2014no per-user charges."
                        }
                    },
                    {
                        "@type": "Question",
                        "name": "What can't Adalo do for social media apps?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "Features like real-time video streaming, algorithmic feed ranking, stories that auto-expire, and native video editing are outside what Adalo provides today. Adalo also doesn't include built-in AI content moderation or end-to-end encrypted messaging. For communities that need a branded, purpose-built social platform with native mobile apps at a fraction of custom development cost, Adalo is the practical choice."
                        }
                    }
                ]
            }
        ]
    }
    </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>Social Media App Builder</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">
                        &#x1F4F1; Social &amp; Community
                    </div>
                    <h1>
                        Build Custom <span class="hero-highlight">Social Media Apps</span> for Any Community
                    </h1>
                    <p class="hero-description">
                        Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project &mdash; no code, no developers required. Build a social platform that fits your community, not the other way around.
                    </p>
                <div class="hero-buttons">
                    <a href="https://app.adalo.com/signup" class="btn-primary">Build Free <span class="arrow">&rarr;</span></a>
                    <a href="https://www.adalo.com/pricing" class="btn-outline-hero">View Pricing</a>
                </div>
                <ul class="perks">
                    <li>No credit card required</li>
                    <li>Hosted Postgres database included</li>
                    <li>500 records on the free plan with no time limit</li>
                    <li>Web publishing complimentary</li>
                    <li>No overages or excess usage charges</li>
                </ul>
                <div class="hero-stats">
                        <div class="stat">
                            <div class="stat-value">1,000+</div>
                            <div class="stat-label">Social 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>

<div class="device-column">
                <div class="device-cluster">
                    
                    <div class="cyber-desktop">
                        <div class="frame">
                            <div class="toolbar">
                                <span class="dot dot-r"></span>
                                <span class="dot dot-y"></span>
                                <span class="dot dot-g"></span>
                                <div class="url-bar">app.adalo.com/social</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Content Feed</h4>
                                    <div class="dk-add">+ New Post</div>
                                </div>
                                <div class="dk-body">
                                    <div class="dk-sidebar">
                                        <span class="si active">&#x25A0;</span>
                                        <span class="si">&#x25CB;</span>
                                        <span class="si">&#x25A1;</span>
                                        <span class="si">&#x25B3;</span>
                                        <span class="si">&#x2699;</span>
                                    </div>
                                    <div class="dk-kanban">
                                        <div class="dk-col">
                                            <div class="glass-col-header">Published</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Product Launch</div>
                                                <div class="glass-price">2.4K likes</div>
                                                <span class="glass-tag glass-tag-sale">TRENDING</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Team Photo</div>
                                                <div class="glass-price">1.1K likes</div>
                                                <div class="glass-sub">89 comments</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">User Story</div>
                                                <div class="glass-price">876 likes</div>
                                                <span class="glass-tag glass-tag-new">FEATURED</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Scheduled</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Tutorial Video</div>
                                                <div class="glass-price">Mar 5, 2 PM</div>
                                                <span class="glass-tag glass-tag-new">VIDEO</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Blog Share</div>
                                                <div class="glass-price">Mar 6, 10 AM</div>
                                                <div class="glass-sub">Auto-post</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Poll</div>
                                                <div class="glass-price">Mar 7, 9 AM</div>
                                                <span class="glass-tag glass-tag-pop">ENGAGE</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Drafts</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Behind Scenes</div>
                                                <div class="glass-price">80% done</div>
                                                <span class="glass-tag glass-tag-pop">DRAFT</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Case Study</div>
                                                <div class="glass-price">40% done</div>
                                                <div class="glass-sub">Needs images</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Analytics</div>
                                            <div class="glass-card">
                                                <div class="glass-name">This Week</div>
                                                <div class="glass-price">+23% reach</div>
                                                <span class="glass-tag glass-tag-ok">UP</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Top Post</div>
                                                <div class="glass-price">8.2% engage</div>
                                                <span class="glass-tag glass-tag-ok">BEST</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="stand"></div>
                        <div class="base"></div>
                    </div>

<div class="cyber-tablet">
                        <div class="frame">
                            <div class="tb-camera"></div>
                            <div class="screen">
                                <div class="tb-header">
                                    <h4>Post Detail</h4>
                                    <span class="neon-items">2.4K</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Product Launch</div>
                                            <div class="n-amount neon-magenta">2,412 likes</div>
                                            <div class="n-contact">3h ago</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Comments</div>
                                            <div class="n-amount neon-cyan">147</div>
                                            <div class="n-contact">12 replies</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Shares</div>
                                            <div class="n-amount neon-gold">89</div>
                                            <div class="n-contact">Reach: 12.5K</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">ENGAGEMENT</div>
                                            <div class="tb-total-amount">8.2%</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tb-nav">
                                    <span>&#x25CB;</span>
                                    <span class="active" style="color:#ff00ff;">&#x25A0;</span>
                                    <span>&#x25A1;</span>
                                    <span>&#x2699;</span>
                                </div>
                                <div class="tb-home-bar"></div>
                            </div>
                        </div>
                    </div>

<div class="cyber-phone">
                        <div class="frame">
                            <div class="screen-bezel">
                            <div class="dynamic-island"></div>
                            <div class="screen">
                                <div class="native-status">
                                    <span>9:41</span>
                                    <span>&#x25CF;&#x25CF;&#x25CF;</span>
                                </div>
                                <div class="native-header">
                                    <h4>Profile</h4>
                                    <span class="native-accent">@myapp</span>
                                </div>
                                <div class="native-progress">
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;box-shadow:0 0 6px rgba(5,150,105,0.3);"></div>
                                    <div class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                </div>
                                <div class="native-progress-labels">
                                    <span>Create</span>
                                    <span>Post</span>
                                    <span class="active">Engage</span>
                                    <span>Grow</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Status</span>
                                            <span class="native-pill pill-success">Active</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Stats</div>
                                        <div class="native-row">
                                            <span class="native-value">Followers</span>
                                            <span class="native-price">12.4K</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Posts</span>
                                            <span class="native-price">234</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Engagement</span>
                                            <span class="native-price">8.2%</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Reach</span>
                                        <span class="native-total-amount">45K</span>
                                    </div>
                                </div>
                                <div class="native-nav">
                                    <span>&#x2302;</span>
                                    <span>&#x1F50D;</span>
                                    <span class="active">&#x1F4E6;</span>
                                    <span>&#x2699;</span>
                                </div>
                                <div class="home-bar"></div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="store-badges">
                    
                    
                    
                </div>
            </div>
            </div>

</div>
            </div>

</div>
    </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 Social App You Can Imagine</h2>
                <p class="section-description">
                    From niche community platforms to full-featured social networks&mdash;describe what you need and Ada, Adalo's AI builder, generates a working social app with Magic Start in minutes.
                </p>
            </div>

<div class="app-types-grid">
                <div class="app-chip">
                    <div class="chip-icon">&#x1F4F1;</div>
                    <div class="chip-text">Community Feed</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F464;</div>
                    <div class="chip-text">User Profiles</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F4AC;</div>
                    <div class="chip-text">Messaging App</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F4F8;</div>
                    <div class="chip-text">Photo Sharing</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F465;</div>
                    <div class="chip-text">Group Platform</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F3E2;</div>
                    <div class="chip-text">Alumni Network</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F3AF;</div>
                    <div class="chip-text">Interest-Based Hub</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F4E2;</div>
                    <div class="chip-text">Forum App</div>
                </div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Building a Social App Shouldn't Require a Dev Team &amp; Millions in Funding</h2>
                <p class="section-description">
                    Most communities are stuck using generic platforms that don't match their identity, or facing six-figure development costs to build something custom. There's a better path.
                </p>
            </div>

<div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Social App Problem</h3>
                    <ul class="card-list">
                        <li>Custom social apps cost $50K&ndash;$500K+ to build with a development team</li>
                        <li>Generic platforms (Facebook Groups, Discord) dilute your brand and own your data</li>
                        <li>No control over feed algorithms, notifications, or user experience</li>
                        <li>Web-only tools can't deliver push notifications or native mobile performance</li>
                        <li>Building separate iOS, Android, and web versions triples cost and timeline</li>
                        <li>Maintaining engagement features (likes, comments, follows) requires backend expertise</li>
                    </ul>
                </div>

<div class="solution-card">
                    <h3 class="card-title">The Adalo Social App Solution</h3>
                    <ul class="card-list">
                        <li>Visual canvas lets you design feeds, profiles, and messaging screens exactly how you want them</li>
                        <li>Built-in relational database connects users, posts, likes, comments, and follows automatically</li>
                        <li>Native iOS and Android apps with push notifications for real-time engagement</li>
                        <li>$36/mo with unlimited users, records, and storage&mdash;no per-user pricing</li>
                        <li>Ada generates a working social app from a description&mdash;ship in days, not months</li>
                        <li>One build deploys to web, iOS, and Android simultaneously</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 Community Needs in One App</h2>
                <p class="section-description">
                    Built for communities that deserve their own branded platform&mdash;on web, iOS, and Android from a single build.
                </p>
            </div>

<div class="features">
                <div class="feature">
                    <div class="feature-icon">&#x1F4F1;</div>
                    <h3>Social Feed &amp; Posts</h3>
                    <p>Build feeds with text posts, image uploads, likes, and comments. Adalo's built-in relational database handles the relationships between users, posts, and interactions&mdash;no external backend required.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F464;</div>
                    <h3>User Profiles &amp; Following</h3>
                    <p>Custom user profiles with avatars, bios, follower counts, and post history. Build follow/unfollow functionality that updates feeds in real time using Adalo's database relationships.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F514;</div>
                    <h3>Push Notifications</h3>
                    <p>Native push notifications alert users when someone likes their post, comments on their content, or starts following them. Critical for driving daily engagement on mobile.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F4AC;</div>
                    <h3>Direct Messaging</h3>
                    <p>One-to-one messaging between users with conversation threads. Build message lists, chat screens, and notification badges for unread messages&mdash;all within a single Adalo app.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F50D;</div>
                    <h3>Search &amp; Discovery</h3>
                    <p>Search users, posts, and topics with Adalo's built-in filtering. Add category tags, hashtags, or interest-based feeds so members can find relevant content and connect with like-minded people.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F512;</div>
                    <h3>User Authentication</h3>
                    <p>Built-in email signup and login with password reset. Add role-based access for admins, moderators, and members to control who can post, comment, or manage community content.</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 Social App in Five Steps</h2>
                <p class="section-description">
                    Adalo 3.0's infrastructure (launched late 2025) is 3&ndash;4x faster and scales to 1M+ monthly active users. Here's how to build your social 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 Social App to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, what your community needs. Magic Start generates a complete social app with screens, database, and navigation from your description&mdash;typically in under two minutes.</p>

<div class="step-details">
                            <div class="step-details-title">Example prompt:</div>
                            <div style="margin-top: 8px; padding: 16px; background: var(--white); border-radius: 8px; border-left: 3px solid var(--teal);">
                                <div style="font-size: 14px; color: var(--gray-600); line-height: 1.6; font-style: italic;">
                                    "Build me a social community app for a photography club. I need user profiles with photo galleries, a main feed with image posts and likes, a commenting system, direct messaging between members, and a discover page to find photographers by specialty."
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Customize Your Feed &amp; Profiles</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your feed layout, profile cards, and engagement features. Add new capabilities with Magic Add using natural language.</p>

<div class="step-details">
                            <div class="step-details-title">Typical social app screens:</div>
                            <div class="columns-list">
                                <div class="column-item">News Feed</div>
                                <div class="column-item">User Profile</div>
                                <div class="column-item">Post Detail</div>
                                <div class="column-item">Messages</div>
                                <div class="column-item">Notifications</div>
                                <div class="column-item">Discover</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Set Up Data &amp; Integrations</h3>
                        <p>Use Adalo's built-in relational database for users, posts, comments, likes, and follows. Connect Google Sheets via SheetBridge if you're migrating an existing member list. Add Zapier or Make integrations for email notifications and analytics.</p>

<div class="step-details">
                            <div class="step-details-title">Common social app integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item">
                                    <div class="screen-title">SheetBridge</div>
                                    <div class="screen-desc">Import existing member lists from Google Sheets as a relational database</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Zapier / Make</div>
                                    <div class="screen-desc">Connect to email marketing, analytics, and notification services</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Cloudinary</div>
                                    <div class="screen-desc">Image uploads, optimization, and media storage for user-generated content</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Custom API</div>
                                    <div class="screen-desc">External Collections connect to any REST API endpoint</div>
                                </div>
                            </div>
                        </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 social app on any device form factor directly from the canvas. Test the full user flow&mdash;creating posts, liking content, following users, sending messages&mdash;on iPhone, Android, tablet, and desktop before publishing.</p>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <h3>Publish to App Stores</h3>
                        <p>Deploy your social app as a native iOS app on the Apple App Store, a native Android app on Google Play, and a web app&mdash;all from a single build. Your community downloads the app and starts connecting 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 Social Apps</span>
                <h2>Your Community Deserves Its Own Platform</h2>
                <p class="section-description">
                    Stop renting space on generic platforms. Build a branded social experience your members actually own.
                </p>
            </div>

<div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4B8;</div>
                    <h3>Fraction of Custom Dev Cost</h3>
                    <p>Custom social apps typically cost $50K&ndash;$500K+ to develop. Adalo costs $36/mo with unlimited users, records, and storage. No per-user pricing, no usage caps&mdash;whether you have 100 members or 100,000.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4F1;</div>
                    <h3>Native Mobile Experience</h3>
                    <p>True native iOS and Android apps with push notifications, smooth scrolling, and fast performance. Your members get the app store experience they expect from any social platform.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F5C4;&#xFE0F;</div>
                    <h3>One Database for Everything</h3>
                    <p>Adalo's built-in relational database connects users, posts, comments, likes, follows, and messages without configuring external services. No Firebase setup. No Supabase. It just works.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F680;</div>
                    <h3>Ship in Days, Not Months</h3>
                    <p>Ada generates your social app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live community app in under a week.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Every Screen on One Canvas</h3>
                    <p>See feeds, profiles, messaging, notifications, and settings simultaneously. Adalo's multi-screen canvas lets you design social flows visually and direct the AI to refine any element.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Infrastructure That Scales</h3>
                    <p>Adalo 3.0 delivers 3–4× faster performance and handles 1M+ monthly active users. As your community grows from early adopters to mainstream, the platform scales with you.</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 Social App vs. Bubble vs. Custom Development</h2>
                <p class="section-description">
                    See how building your own social platform with Adalo compares to the alternatives.
                </p>
            </div>
            <table class="comp-table">
                <thead>
                    <tr>
                        <th>Factor</th>
                        <th>Adalo Social App</th>
                        <th>Bubble</th>
                        <th>Custom Development</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Build Time</td>
                        <td>&#x2705; Days to weeks</td>
                        <td>Weeks to months</td>
                        <td>4&ndash;12 months</td>
                    </tr>
                    <tr>
                        <td>Monthly Cost</td>
                        <td>&#x2705; $36/mo flat (unlimited users)</td>
                        <td>$69+/mo (Workload Unit caps)</td>
                        <td>$10,000&ndash;50,000/mo (hosting + team)</td>
                    </tr>
                    <tr>
                        <td>Native Mobile App</td>
                        <td>&#x2705; iOS and Android (true native)</td>
                        <td>Web wrapper or PWA</td>
                        <td>Yes (if budgeted separately)</td>
                    </tr>
                    <tr>
                        <td>Push Notifications</td>
                        <td>&#x2705; Built-in</td>
                        <td>Plugin required</td>
                        <td>Custom implementation required</td>
                    </tr>
                    <tr>
                        <td>Real-Time Feed</td>
                        <td>&#x2705; Database-driven feeds</td>
                        <td>Possible with workflows</td>
                        <td>Full (at development cost)</td>
                    </tr>
                    <tr>
                        <td>Maintenance</td>
                        <td>&#x2705; Adalo handles infrastructure</td>
                        <td>You manage Workload Units</td>
                        <td>Your dev team handles</td>
                    </tr>
                    <tr>
                        <td>Scalability</td>
                        <td>&#x2705; Adalo 3.0 supports 1M+ MAU</td>
                        <td>Performance degrades at scale</td>
                        <td>Scales with architecture (and budget)</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 Social App Success</h2>
                <p class="section-description">
                    Patterns from Makers who have built and shipped successful community apps with Adalo.
                </p>
            </div>

<div class="practices-grid">
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4F1;</span> Start with the Feed</h3>
                    <p>Your feed is the heartbeat of any social app. Get the post creation, display, and engagement flow (likes, comments) working before expanding to profiles, messaging, and discovery.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F514;</span> Enable Push Notifications Early</h3>
                    <p>Push notifications drive daily active usage. Set up alerts for new followers, likes, and comments early in development. Social apps without notifications struggle to retain users beyond the first week.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F512;</span> Plan Your Moderation</h3>
                    <p>Build an admin role with the ability to flag and remove content from day one. Use Adalo's role-based access to create moderator accounts that can review reported posts and manage community standards.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F465;</span> Launch with a Core Group</h3>
                    <p>Invite 20&ndash;50 engaged members before opening registration broadly. A community with active early content feels alive. An empty social app feels dead. Seed your feed before the public launch.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Define Your Content Model First</h3>
                    <p>Posts, comments, likes, follows, reports—map these relationships in Adalo's relational database before building screens. A solid data model prevents expensive restructuring later.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Stress-Test with Active Users</h3>
                    <p>Before public launch, run a private beta with 50–100 active users posting, commenting, and messaging daily. Real social behavior reveals performance and moderation 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 &amp; Run a Social App</h2>
            </div>

<div class="requirements-cards">
                <div class="requirement-card">
                    <div class="requirement-icon">&#x267E;&#xFE0F;</div>
                    <div class="requirement-content">
                        <h4>Unlimited Records on Paid Plans</h4>
                        <p>No caps on users, posts, comments, or messages. 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">&#x1F514;</div>
                    <div class="requirement-content">
                        <h4>Push Notifications</h4>
                        <p>Native push notifications for new followers, likes, comments, and messages. Keeps your community engaged without requiring members to open the app.</p>
                    </div>
                </div>

<div class="requirement-card">
                    <div class="requirement-icon">&#x1F4C4;</div>
                    <div class="requirement-content">
                        <h4>Google Sheets via SheetBridge</h4>
                        <p>Already tracking members 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">&#x26A1;</div>
                    <div class="requirement-content">
                        <h4>Zapier &amp; Make Integrations</h4>
                        <p>Connect your social app to 6,000+ tools. Sync with email marketing platforms, analytics services, and content moderation APIs 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 Social Media Apps</h2>
            </div>

<div class="faq-container">
                <div class="faq-item">
                    <h3 class="faq-question">What is Adalo?</h3>
                    <div class="faq-answer">
                        <p>Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project &mdash; no code, no developers required.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can Adalo handle real-time features like feeds and notifications?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo's built-in relational database updates feeds when new posts, likes, and comments are created. Native push notifications alert users in real time when someone interacts with their content. Adalo 3.0 (launched late 2025) is 3&ndash;4x faster than previous versions and supports 1M+ monthly active users, making it practical for social apps with active communities.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How does user authentication work?</h3>
                    <div class="faq-answer">
                        <p>Adalo includes built-in email/password authentication with account creation, login, and password reset screens. You can assign roles (admin, moderator, member) using database properties and control access to screens and actions based on those roles. For social apps, this means admins can moderate content, moderators can flag posts, and regular members see only their appropriate permissions.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can I add content moderation to my social app?</h3>
                    <div class="faq-answer">
                        <p>Yes. You can build moderation workflows directly in Adalo using role-based access. Create a reporting system where users flag content, and moderators review flagged posts from a dedicated admin screen. For automated moderation, connect to content moderation APIs via Zapier or Adalo's Custom Actions. While Adalo doesn't include built-in AI content filtering, the integration options let you add external moderation services.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can users upload photos and videos?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo supports image uploads natively&mdash;users can upload photos from their camera or gallery, and images are stored and displayed in feeds, profiles, and post detail screens. For video, you can integrate with services like Cloudinary or Mux via Custom Actions to handle video upload, processing, and playback. Image uploads work out of the box; video requires an external service integration.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Do users receive push notifications on their phones?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo builds true native iOS and Android apps&mdash;not web wrappers. This means full push notification support for new followers, likes, comments, and direct messages. Push notifications are the single biggest driver of daily active usage in social apps, and Adalo supports them natively without plugins or third-party services.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can a social app built with Adalo scale to thousands of users?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo 3.0 (launched late 2025) is 3&ndash;4x faster than previous versions and scales to 1M+ monthly active users. Paid plans include unlimited database records, users, and storage at $36/mo&mdash;no per-user charges. For social apps generating high volumes of posts and interactions, the built-in relational database handles the data relationships efficiently. The free plan includes 500 records, which is enough to prototype your social app before committing.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">What can't Adalo do for social media apps?</h3>
                    <div class="faq-answer">
                        <p>Adalo excels at building custom social apps with feeds, profiles, messaging, and engagement features, but it's not a drop-in replacement for platforms like Instagram or TikTok. Features like real-time video streaming, algorithmic feed ranking, stories that auto-expire, and native video editing are outside what Adalo provides today. Adalo also doesn't include built-in AI content moderation or end-to-end encrypted messaging. For communities that need a branded, purpose-built social platform with native mobile apps at a fraction of custom development cost, Adalo is the practical choice. For consumer-scale social networks competing directly with established platforms, custom development is the better path.</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/marketplace-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Marketplace Apps</a>, <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/restaurant-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Restaurant Apps</a>, and <a href="https://www.adalo.com/solutions/internal-tools-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Internal Tools</a>. Learn more about <a href="https://www.adalo.com/" style="color: var(--teal); font-weight: 600; text-decoration: none;">Adalo's no-code app builder</a>.
                </p>
            </div>
        </div>
    </div>

<div class="section section-light resources">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Resources &amp; Tutorials</span>
                <h2>Learn How to Build Social Apps with Adalo</h2>
                <p class="section-description">
                    Step-by-step guides, video walkthroughs, and documentation to help you build and ship your social platform.
                </p>
            </div>

<div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-a-social-media-app" class="resource-card">
                    <div class="resource-type">Tutorial</div>
                    <h3>How to Build a Social Media App Without Code</h3>
                    <p>Full walkthrough: database schema, feed screens, user profiles, and publishing to app stores.</p>
                    <span class="resource-link">Read guide &rarr;</span>
                </a>

<a href="https://help.adalo.com/integrations/external-collections" class="resource-card">
                    <div class="resource-type">Documentation</div>
                    <h3>Connecting External Data Sources</h3>
                    <p>How to use External Collections and Custom Actions to connect your app to media storage, analytics, and moderation APIs.</p>
                    <span class="resource-link">View docs &rarr;</span>
                </a>

<a href="https://www.adalo.com/posts/google-sheets-app-builder" class="resource-card">
                    <div class="resource-type">Tutorial</div>
                    <h3>Google Sheets to App via SheetBridge</h3>
                    <p>Migrate your member list from spreadsheets to a real community app without losing your existing data.</p>
                    <span class="resource-link">Read guide &rarr;</span>
                </a>

<a href="https://help.adalo.com/building-your-app/database" class="resource-card">
                    <div class="resource-type">Documentation</div>
                    <h3>Relational Database Basics</h3>
                    <p>Understand collections, relationships, and record linking &mdash; the foundation of any social app data model.</p>
                    <span class="resource-link">View docs &rarr;</span>
                </a>
            </div>
        </div>
    </div>

<div class="cta-section">
        <div class="cta-content">
            <h2>Ready to Build Your Community's Social App?</h2>
            <p>
                Join Makers who have replaced generic platforms with custom branded social apps built on Adalo&mdash;native on iOS, Android, and web 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 Social App Free
                    <span class="arrow">&rarr;</span>
                </a>
                <a href="https://www.adalo.com/solutions" class="btn btn-outline">
                    Explore More Solutions
                </a>
            </div>
        </div>
    </div>