site-builder/templates/business-agency.html

<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#fff;border-bottom:1px solid #e2e8f0;">
    <div style="font-size:22px;font-weight:700;color:#0f172a;font-family:Inter,sans-serif;">Apex<span style="color:#0ea5e9;">Digital</span></div>
    <div style="display:flex;gap:32px;align-items:center;">
        <a href="#services" style="color:#64748b;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Services</a>
        <a href="#work" style="color:#64748b;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Work</a>
        <a href="#team" style="color:#64748b;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Team</a>
        <a href="#contact" style="display:inline-block;padding:10px 24px;background:#0ea5e9;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Let's Talk</a>
    </div>
</nav>

<!-- Hero -->
<section style="min-height:600px;display:flex;align-items:center;padding:80px 60px;background:#f8fafc;">
    <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;">
            <div style="display:inline-block;padding:8px 16px;background:#e0f2fe;border-radius:20px;margin-bottom:20px;">
                <span style="color:#0369a1;font-size:13px;font-weight:600;font-family:Inter,sans-serif;">Award-Winning Digital Agency</span>
            </div>
            <h1 style="font-size:52px;font-weight:800;color:#0f172a;line-height:1.1;margin-bottom:24px;font-family:Inter,sans-serif;letter-spacing:-1px;">We build brands that break through the noise.</h1>
            <p style="color:#64748b;font-size:18px;line-height:1.7;margin-bottom:36px;font-family:Inter,sans-serif;">Apex Digital is a full-service creative agency specializing in strategy, design, and technology. We help ambitious companies create meaningful digital experiences.</p>
            <div style="display:flex;gap:16px;flex-wrap:wrap;">
                <a href="#contact" style="display:inline-block;padding:16px 36px;background:#0ea5e9;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Start a Project</a>
                <a href="#work" style="display:inline-block;padding:16px 36px;background:#fff;color:#0f172a;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;">See Our Work</a>
            </div>
        </div>
        <div style="flex:1;min-width:340px;">
            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=700&h=500&fit=crop" style="width:100%;border-radius:16px;display:block;box-shadow:0 20px 60px rgba(0,0,0,0.1);" alt="Team collaboration">
        </div>
    </div>
</section>

<!-- Stats -->
<section style="padding:60px 20px;background:#0f172a;">
    <div style="max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:60px;text-align:center;">
        <div>
            <div style="font-size:48px;font-weight:800;color:#0ea5e9;font-family:Inter,sans-serif;">200+</div>
            <div style="font-size:15px;color:#94a3b8;font-family:Inter,sans-serif;margin-top:4px;">Projects Delivered</div>
        </div>
        <div>
            <div style="font-size:48px;font-weight:800;color:#0ea5e9;font-family:Inter,sans-serif;">50+</div>
            <div style="font-size:15px;color:#94a3b8;font-family:Inter,sans-serif;margin-top:4px;">Team Members</div>
        </div>
        <div>
            <div style="font-size:48px;font-weight:800;color:#0ea5e9;font-family:Inter,sans-serif;">12</div>
            <div style="font-size:15px;color:#94a3b8;font-family:Inter,sans-serif;margin-top:4px;">Years in Business</div>
        </div>
        <div>
            <div style="font-size:48px;font-weight:800;color:#0ea5e9;font-family:Inter,sans-serif;">98%</div>
            <div style="font-size:15px;color:#94a3b8;font-family:Inter,sans-serif;margin-top:4px;">Client Satisfaction</div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section id="services" 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:14px;font-weight:600;color:#0ea5e9;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">What We Do</h2>
            <h3 style="font-size:42px;font-weight:800;color:#0f172a;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Services tailored to your goals</h3>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
            <div style="flex:1;min-width:280px;max-width:380px;padding:40px;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0;">
                <div style="font-size:36px;margin-bottom:20px;">🎨</div>
                <h3 style="font-size:22px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Brand Strategy & Identity</h3>
                <p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">From market research to visual identity, we create brands that resonate with your target audience and stand the test of time.</p>
            </div>
            <div style="flex:1;min-width:280px;max-width:380px;padding:40px;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0;">
                <div style="font-size:36px;margin-bottom:20px;">💻</div>
                <h3 style="font-size:22px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Web Design & Development</h3>
                <p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Custom websites and web applications built with modern technologies. Fast, accessible, and optimized for conversion.</p>
            </div>
            <div style="flex:1;min-width:280px;max-width:380px;padding:40px;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0;">
                <div style="font-size:36px;margin-bottom:20px;">📱</div>
                <h3 style="font-size:22px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Digital Marketing</h3>
                <p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Data-driven marketing strategies that drive real results. SEO, content marketing, paid media, and social management.</p>
            </div>
        </div>
    </div>
</section>

<!-- Case Studies -->
<section id="work" style="padding:100px 20px;background:#f8fafc;">
    <div style="max-width:1200px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:60px;">
            <h2 style="font-size:14px;font-weight:600;color:#0ea5e9;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Case Studies</h2>
            <h3 style="font-size:42px;font-weight:800;color:#0f172a;font-family:Inter,sans-serif;">Recent projects</h3>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
            <div style="flex:1;min-width:340px;max-width:580px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,0.06);">
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=340&fit=crop" style="width:100%;height:280px;object-fit:cover;display:block;" alt="Case study">
                <div style="padding:32px;">
                    <p style="color:#0ea5e9;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Brand & Web</p>
                    <h4 style="font-size:22px;font-weight:700;color:#0f172a;margin-bottom:12px;font-family:Inter,sans-serif;">NovaTech Brand Launch</h4>
                    <p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">Complete brand identity and website for a B2B tech startup, resulting in 3x lead generation in the first quarter.</p>
                </div>
            </div>
            <div style="flex:1;min-width:340px;max-width:580px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,0.06);">
                <img src="https://images.unsplash.com/photo-1556761175-4b46a572b786?w=600&h=340&fit=crop" style="width:100%;height:280px;object-fit:cover;display:block;" alt="Case study">
                <div style="padding:32px;">
                    <p style="color:#0ea5e9;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Digital Marketing</p>
                    <h4 style="font-size:22px;font-weight:700;color:#0f172a;margin-bottom:12px;font-family:Inter,sans-serif;">GreenLife E-commerce Growth</h4>
                    <p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">SEO and paid media strategy for a sustainable products company, achieving 250% revenue growth year-over-year.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section id="team" 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:14px;font-weight:600;color:#0ea5e9;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Our Team</h2>
            <h3 style="font-size:42px;font-weight:800;color:#0f172a;font-family:Inter,sans-serif;">The people behind the work</h3>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
            <div style="text-align:center;width:250px;">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&h=300&fit=crop" style="width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;" alt="Team member">
                <h4 style="font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px;font-family:Inter,sans-serif;">Emily Carter</h4>
                <p style="color:#0ea5e9;font-size:14px;font-family:Inter,sans-serif;">Creative Director</p>
            </div>
            <div style="text-align:center;width:250px;">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop" style="width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;" alt="Team member">
                <h4 style="font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px;font-family:Inter,sans-serif;">James Park</h4>
                <p style="color:#0ea5e9;font-size:14px;font-family:Inter,sans-serif;">Lead Developer</p>
            </div>
            <div style="text-align:center;width:250px;">
                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop" style="width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;" alt="Team member">
                <h4 style="font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px;font-family:Inter,sans-serif;">Sofia Reyes</h4>
                <p style="color:#0ea5e9;font-size:14px;font-family:Inter,sans-serif;">Marketing Strategist</p>
            </div>
            <div style="text-align:center;width:250px;">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop" style="width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;" alt="Team member">
                <h4 style="font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px;font-family:Inter,sans-serif;">David Kim</h4>
                <p style="color:#0ea5e9;font-size:14px;font-family:Inter,sans-serif;">UX Designer</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section id="contact" style="padding:100px 20px;background:linear-gradient(135deg,#0ea5e9,#0369a1);text-align:center;">
    <div style="max-width:700px;margin:0 auto;">
        <h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:20px;font-family:Inter,sans-serif;">Have a project in mind?</h2>
        <p style="font-size:18px;color:rgba(255,255,255,0.85);margin-bottom:40px;line-height:1.7;font-family:Inter,sans-serif;">We'd love to hear about your next big idea. Get in touch and let's create something extraordinary together.</p>
        <a href="mailto:hello@apexdigital.com" style="display:inline-block;padding:18px 48px;background:#fff;color:#0369a1;font-size:18px;font-weight:700;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">hello@apexdigital.com</a>
    </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 Apex Digital. All rights reserved.</p>
</footer>