site-builder/templates/app-showcase.html

<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#0f172a;">
    <div style="font-size:22px;font-weight:700;color:#fff;font-family:Inter,sans-serif;">Flow<span style="color:#06b6d4;">App</span></div>
    <div style="display:flex;gap:32px;align-items:center;">
        <a href="#features" style="color:#94a3b8;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Features</a>
        <a href="#how" style="color:#94a3b8;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">How It Works</a>
        <a href="#download" style="display:inline-block;padding:10px 24px;background:#06b6d4;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Download App</a>
    </div>
</nav>

<!-- Hero -->
<section style="min-height:600px;display:flex;align-items:center;padding:80px 60px;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);position:relative;overflow:hidden;">
    <div style="position:absolute;top:50%;right:10%;width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,0.1) 0%,transparent 70%);border-radius:50%;transform:translateY(-50%);"></div>
    <div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;align-items:center;width:100%;">
        <div style="flex:1;min-width:340px;position:relative;z-index:1;">
            <div style="display:inline-block;padding:8px 16px;background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.2);border-radius:50px;margin-bottom:20px;">
                <span style="color:#22d3ee;font-size:13px;font-weight:600;font-family:Inter,sans-serif;">📱 Available on iOS & Android</span>
            </div>
            <h1 style="font-size:52px;font-weight:800;color:#fff;line-height:1.1;margin-bottom:24px;font-family:Inter,sans-serif;letter-spacing:-1px;">Your daily habits, beautifully organized.</h1>
            <p style="color:#94a3b8;font-size:18px;line-height:1.7;margin-bottom:36px;font-family:Inter,sans-serif;">FlowApp helps you build positive habits, track your goals, and stay focused — all with a gorgeous, distraction-free interface.</p>
            <div style="display:flex;gap:16px;flex-wrap:wrap;">
                <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#fff;color:#0f172a;font-size:15px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">
                    <span style="font-size:22px;">🍎</span> App Store
                </a>
                <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#fff;color:#0f172a;font-size:15px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">
                    <span style="font-size:22px;">▶</span> Google Play
                </a>
            </div>
            <div style="display:flex;gap:24px;margin-top:32px;flex-wrap:wrap;">
                <div style="display:flex;align-items:center;gap:8px;">
                    <span style="color:#fbbf24;font-size:16px;">★★★★★</span>
                    <span style="color:#94a3b8;font-size:14px;font-family:Inter,sans-serif;">4.9 rating</span>
                </div>
                <span style="color:#94a3b8;font-size:14px;font-family:Inter,sans-serif;">500K+ downloads</span>
            </div>
        </div>
        <div style="flex:1;min-width:300px;text-align:center;">
            <div style="width:280px;height:560px;background:linear-gradient(135deg,#06b6d4,#7c3aed);border-radius:40px;margin:0 auto;padding:12px;box-shadow:0 30px 80px rgba(6,182,212,0.2);">
                <div style="width:100%;height:100%;background:#0f172a;border-radius:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:32px;">
                    <div style="font-size:48px;margin-bottom:16px;">🎯</div>
                    <h3 style="color:#fff;font-size:22px;font-weight:700;margin-bottom:8px;font-family:Inter,sans-serif;">Today's Goals</h3>
                    <div style="width:100%;margin-top:20px;">
                        <div style="display:flex;align-items:center;gap:12px;padding:14px;background:rgba(6,182,212,0.1);border-radius:12px;margin-bottom:8px;">
                            <span style="color:#22d3ee;font-size:18px;">✓</span>
                            <span style="color:#e2e8f0;font-size:14px;font-family:Inter,sans-serif;">Morning meditation</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:12px;padding:14px;background:rgba(6,182,212,0.1);border-radius:12px;margin-bottom:8px;">
                            <span style="color:#22d3ee;font-size:18px;">✓</span>
                            <span style="color:#e2e8f0;font-size:14px;font-family:Inter,sans-serif;">Read 30 minutes</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,0.05);border-radius:12px;margin-bottom:8px;">
                            <span style="color:#475569;font-size:18px;">○</span>
                            <span style="color:#94a3b8;font-size:14px;font-family:Inter,sans-serif;">Exercise 30 min</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,0.05);border-radius:12px;">
                            <span style="color:#475569;font-size:18px;">○</span>
                            <span style="color:#94a3b8;font-size:14px;font-family:Inter,sans-serif;">Journal entry</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features -->
<section id="features" style="padding:100px 20px;background:#fff;">
    <div style="max-width:1200px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:60px;">
            <h2 style="font-size:42px;font-weight:800;color:#0f172a;margin-bottom:16px;font-family:Inter,sans-serif;">Why people love FlowApp</h2>
            <p style="font-size:18px;color:#64748b;font-family:Inter,sans-serif;">Simple tools, powerful results</p>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
            <div style="flex:1;min-width:280px;max-width:350px;text-align:center;padding:32px;">
                <div style="width:64px;height:64px;background:linear-gradient(135deg,#06b6d4,#0891b2);border-radius:16px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;">📊</div>
                <h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Smart Analytics</h3>
                <p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Visualize your progress with beautiful charts. Understand your patterns and optimize your routine.</p>
            </div>
            <div style="flex:1;min-width:280px;max-width:350px;text-align:center;padding:32px;">
                <div style="width:64px;height:64px;background:linear-gradient(135deg,#7c3aed,#6d28d9);border-radius:16px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;">🔔</div>
                <h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Gentle Reminders</h3>
                <p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Never miss a habit with customizable nudges. Smart timing that adapts to your schedule.</p>
            </div>
            <div style="flex:1;min-width:280px;max-width:350px;text-align:center;padding:32px;">
                <div style="width:64px;height:64px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:16px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;">🏆</div>
                <h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Streaks & Rewards</h3>
                <p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Stay motivated with daily streaks and achievement badges. Celebrate every milestone.</p>
            </div>
        </div>
    </div>
</section>

<!-- How It Works -->
<section id="how" style="padding:100px 20px;background:#f8fafc;">
    <div style="max-width:1000px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:60px;">
            <h2 style="font-size:42px;font-weight:800;color:#0f172a;margin-bottom:16px;font-family:Inter,sans-serif;">Start in 3 simple steps</h2>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:40px;justify-content:center;">
            <div style="flex:1;min-width:250px;max-width:300px;text-align:center;">
                <div style="width:60px;height:60px;background:#06b6d4;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:800;font-family:Inter,sans-serif;">1</div>
                <h3 style="font-size:20px;font-weight:700;margin-bottom:8px;color:#0f172a;font-family:Inter,sans-serif;">Download the App</h3>
                <p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">Free on iOS and Android. Set up your account in under a minute.</p>
            </div>
            <div style="flex:1;min-width:250px;max-width:300px;text-align:center;">
                <div style="width:60px;height:60px;background:#7c3aed;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:800;font-family:Inter,sans-serif;">2</div>
                <h3 style="font-size:20px;font-weight:700;margin-bottom:8px;color:#0f172a;font-family:Inter,sans-serif;">Choose Your Habits</h3>
                <p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">Pick from popular templates or create your own custom habits.</p>
            </div>
            <div style="flex:1;min-width:250px;max-width:300px;text-align:center;">
                <div style="width:60px;height:60px;background:#f59e0b;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:800;font-family:Inter,sans-serif;">3</div>
                <h3 style="font-size:20px;font-weight:700;margin-bottom:8px;color:#0f172a;font-family:Inter,sans-serif;">Track & Grow</h3>
                <p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">Check off habits daily and watch your streaks grow. It's that simple.</p>
            </div>
        </div>
    </div>
</section>

<!-- Social Proof -->
<section style="padding:80px 20px;background:#0f172a;">
    <div style="max-width:1000px;margin:0 auto;text-align:center;">
        <h2 style="font-size:32px;font-weight:800;color:#fff;margin-bottom:40px;font-family:Inter,sans-serif;">What our users say</h2>
        <div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
            <div style="flex:1;min-width:280px;max-width:340px;padding:28px;background:rgba(255,255,255,0.05);border-radius:16px;text-align:left;">
                <div style="color:#fbbf24;font-size:16px;margin-bottom:12px;">★★★★★</div>
                <p style="color:#e2e8f0;font-size:15px;line-height:1.7;margin-bottom:16px;font-family:Inter,sans-serif;">"FlowApp completely changed my morning routine. I've maintained a 90-day streak and feel more productive than ever."</p>
                <p style="color:#94a3b8;font-size:13px;font-family:Inter,sans-serif;">— Rachel M., Product Manager</p>
            </div>
            <div style="flex:1;min-width:280px;max-width:340px;padding:28px;background:rgba(255,255,255,0.05);border-radius:16px;text-align:left;">
                <div style="color:#fbbf24;font-size:16px;margin-bottom:12px;">★★★★★</div>
                <p style="color:#e2e8f0;font-size:15px;line-height:1.7;margin-bottom:16px;font-family:Inter,sans-serif;">"The most beautiful habit tracker I've used. Other apps feel cluttered in comparison. FlowApp is pure focus."</p>
                <p style="color:#94a3b8;font-size:13px;font-family:Inter,sans-serif;">— Tom K., Designer</p>
            </div>
        </div>
    </div>
</section>

<!-- Download CTA -->
<section id="download" style="padding:100px 20px;background:linear-gradient(135deg,#06b6d4,#7c3aed);text-align:center;">
    <div style="max-width:600px;margin:0 auto;">
        <h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:20px;font-family:Inter,sans-serif;">Start building better habits today</h2>
        <p style="font-size:18px;color:rgba(255,255,255,0.85);margin-bottom:40px;font-family:Inter,sans-serif;">Free to download. No credit card required.</p>
        <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
            <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:#fff;color:#0f172a;font-size:16px;font-weight:600;text-decoration:none;border-radius:12px;font-family:Inter,sans-serif;">
                <span style="font-size:24px;">🍎</span> Download for iOS
            </a>
            <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:rgba(255,255,255,0.15);color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:12px;font-family:Inter,sans-serif;border:1px solid rgba(255,255,255,0.3);">
                <span style="font-size:24px;">▶</span> Download for Android
            </a>
        </div>
    </div>
</section>

<!-- Footer -->
<footer style="padding:40px 20px;background:#0f172a;text-align:center;">
    <p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">© 2026 FlowApp. All rights reserved.</p>
</footer>