site-builder/templates/nonprofit-charity.html

<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#1e293b;">
    <div style="font-size:24px;font-weight:700;color:#ffffff;font-family:'Playfair Display',serif;letter-spacing:0.5px;">GreenHope Foundation</div>
    <div style="display:flex;gap:32px;align-items:center;">
        <a href="#mission" style="color:#cbd5e1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;font-weight:500;">Mission</a>
        <a href="#impact" style="color:#cbd5e1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;font-weight:500;">Impact</a>
        <a href="#help" style="color:#cbd5e1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;font-weight:500;">Get Involved</a>
        <a href="#help" style="display:inline-block;padding:10px 28px;background:#16a34a;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">Donate</a>
    </div>
</nav>

<!-- Hero -->
<section style="min-height:620px;display:flex;align-items:center;justify-content:center;background:#1e293b;position:relative;text-align:center;padding:80px 20px;">
    <div style="max-width:800px;">
        <div style="display:inline-block;padding:8px 20px;background:rgba(22,163,74,0.15);border-radius:50px;margin-bottom:28px;">
            <span style="color:#4ade80;font-size:14px;font-weight:600;font-family:Inter,sans-serif;letter-spacing:2px;text-transform:uppercase;">Making the world a better place</span>
        </div>
        <h1 style="color:#ffffff;font-size:60px;font-weight:700;margin-bottom:24px;font-family:'Playfair Display',serif;line-height:1.1;">Together, We Can Make a Difference</h1>
        <p style="color:#94a3b8;font-size:19px;line-height:1.7;margin-bottom:44px;font-family:Inter,sans-serif;max-width:640px;margin-left:auto;margin-right:auto;">We empower communities around the world through sustainable programs in clean water, education, and healthcare. Every action counts.</p>
        <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
            <a href="#help" style="display:inline-block;padding:16px 40px;background:#16a34a;color:#ffffff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Donate Now</a>
            <a href="#mission" style="display:inline-block;padding:16px 40px;background:transparent;color:#ffffff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;border:2px solid rgba(255,255,255,0.2);">Learn More</a>
        </div>
    </div>
</section>

<!-- Mission -->
<section id="mission" style="padding:100px 20px;background:#ffffff;">
    <div style="max-width:1200px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:60px;max-width:700px;margin-left:auto;margin-right:auto;">
            <p style="color:#16a34a;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Our Mission</p>
            <h2 style="font-size:42px;font-weight:700;color:#1e293b;margin-bottom:20px;font-family:'Playfair Display',serif;line-height:1.2;">Building a Sustainable Future for All</h2>
            <p style="color:#64748b;font-size:17px;line-height:1.8;font-family:Inter,sans-serif;">We believe that every person deserves access to life's essentials. Our programs address the root causes of poverty and create lasting change in communities worldwide.</p>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
            <div style="flex:1;min-width:280px;max-width:380px;background:#f0fdf4;padding:40px 32px;border-radius:12px;text-align:center;">
                <div style="width:56px;height:56px;background:#16a34a;border-radius:12px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;">
                    <span style="color:#ffffff;font-size:24px;font-weight:700;font-family:Inter,sans-serif;">W</span>
                </div>
                <h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Clean Water</h3>
                <p style="color:#64748b;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Providing safe, accessible drinking water to communities in need through well construction and filtration systems.</p>
            </div>
            <div style="flex:1;min-width:280px;max-width:380px;background:#f0fdf4;padding:40px 32px;border-radius:12px;text-align:center;">
                <div style="width:56px;height:56px;background:#16a34a;border-radius:12px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;">
                    <span style="color:#ffffff;font-size:24px;font-weight:700;font-family:Inter,sans-serif;">E</span>
                </div>
                <h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Education</h3>
                <p style="color:#64748b;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Building schools, training teachers, and providing scholarships so every child has the opportunity to learn and grow.</p>
            </div>
            <div style="flex:1;min-width:280px;max-width:380px;background:#f0fdf4;padding:40px 32px;border-radius:12px;text-align:center;">
                <div style="width:56px;height:56px;background:#16a34a;border-radius:12px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;">
                    <span style="color:#ffffff;font-size:24px;font-weight:700;font-family:Inter,sans-serif;">H</span>
                </div>
                <h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Healthcare</h3>
                <p style="color:#64748b;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Establishing clinics and mobile health units to deliver essential medical care and preventive health services.</p>
            </div>
        </div>
    </div>
</section>

<!-- Impact Statistics -->
<section id="impact" style="padding:100px 20px;background:#1e293b;">
    <div style="max-width:1100px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:60px;">
            <p style="color:#4ade80;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Our Impact</p>
            <h2 style="font-size:42px;font-weight:700;color:#ffffff;font-family:'Playfair Display',serif;">Numbers That Tell Our Story</h2>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
            <div style="flex:1;min-width:200px;max-width:260px;text-align:center;padding:40px 20px;">
                <p style="color:#4ade80;font-size:52px;font-weight:800;margin-bottom:8px;font-family:Inter,sans-serif;line-height:1;">50K+</p>
                <p style="color:#94a3b8;font-size:16px;font-weight:500;font-family:Inter,sans-serif;">Lives Changed</p>
            </div>
            <div style="flex:1;min-width:200px;max-width:260px;text-align:center;padding:40px 20px;">
                <p style="color:#4ade80;font-size:52px;font-weight:800;margin-bottom:8px;font-family:Inter,sans-serif;line-height:1;">120+</p>
                <p style="color:#94a3b8;font-size:16px;font-weight:500;font-family:Inter,sans-serif;">Communities</p>
            </div>
            <div style="flex:1;min-width:200px;max-width:260px;text-align:center;padding:40px 20px;">
                <p style="color:#4ade80;font-size:52px;font-weight:800;margin-bottom:8px;font-family:Inter,sans-serif;line-height:1;">$2M+</p>
                <p style="color:#94a3b8;font-size:16px;font-weight:500;font-family:Inter,sans-serif;">Raised</p>
            </div>
            <div style="flex:1;min-width:200px;max-width:260px;text-align:center;padding:40px 20px;">
                <p style="color:#4ade80;font-size:52px;font-weight:800;margin-bottom:8px;font-family:Inter,sans-serif;line-height:1;">500+</p>
                <p style="color:#94a3b8;font-size:16px;font-weight:500;font-family:Inter,sans-serif;">Volunteers</p>
            </div>
        </div>
    </div>
</section>

<!-- How to Help -->
<section id="help" style="padding:100px 20px;background:#f0fdf4;">
    <div style="max-width:1200px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:60px;">
            <p style="color:#16a34a;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Get Involved</p>
            <h2 style="font-size:42px;font-weight:700;color:#1e293b;font-family:'Playfair Display',serif;">How You Can Help</h2>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
            <div style="flex:1;min-width:280px;max-width:380px;background:#ffffff;padding:44px 32px;border-radius:12px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
                <div style="width:64px;height:64px;background:#dcfce7;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;">
                    <span style="color:#16a34a;font-size:28px;font-weight:700;font-family:Inter,sans-serif;">$</span>
                </div>
                <h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Donate</h3>
                <p style="color:#64748b;font-size:15px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Your financial support funds clean water projects, builds schools, and provides essential medical supplies to those in need.</p>
                <a href="#" style="display:inline-block;padding:12px 32px;background:#16a34a;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">Give Today</a>
            </div>
            <div style="flex:1;min-width:280px;max-width:380px;background:#ffffff;padding:44px 32px;border-radius:12px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
                <div style="width:64px;height:64px;background:#dcfce7;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;">
                    <span style="color:#16a34a;font-size:28px;font-weight:700;font-family:Inter,sans-serif;">V</span>
                </div>
                <h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Volunteer</h3>
                <p style="color:#64748b;font-size:15px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Join our team on the ground or remotely. We need educators, healthcare workers, engineers, and passionate individuals of all backgrounds.</p>
                <a href="#" style="display:inline-block;padding:12px 32px;background:#16a34a;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">Join Us</a>
            </div>
            <div style="flex:1;min-width:280px;max-width:380px;background:#ffffff;padding:44px 32px;border-radius:12px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
                <div style="width:64px;height:64px;background:#dcfce7;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;">
                    <span style="color:#16a34a;font-size:28px;font-weight:700;font-family:Inter,sans-serif;">S</span>
                </div>
                <h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Spread the Word</h3>
                <p style="color:#64748b;font-size:15px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Share our mission with your network. Follow us on social media, tell your friends, and help raise awareness for the communities we serve.</p>
                <a href="#" style="display:inline-block;padding:12px 32px;background:#16a34a;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">Share Now</a>
            </div>
        </div>
    </div>
</section>

<!-- Testimonial -->
<section style="padding:100px 20px;background:#ffffff;">
    <div style="max-width:750px;margin:0 auto;text-align:center;">
        <div style="width:56px;height:4px;background:#16a34a;border-radius:2px;margin:0 auto 32px;"></div>
        <p style="color:#1e293b;font-size:24px;line-height:1.8;margin-bottom:32px;font-family:'Playfair Display',serif;font-style:italic;font-weight:400;">"Because of GreenHope, my village now has clean water for the first time. My children no longer get sick, and I can focus on building a future for my family. This organization changed our lives forever."</p>
        <p style="color:#1e293b;font-size:16px;font-weight:700;margin-bottom:4px;font-family:Inter,sans-serif;">Amara Osei</p>
        <p style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;">Community Member, Ghana</p>
    </div>
</section>

<!-- Footer -->
<footer style="padding:60px 20px 32px;background:#1e293b;">
    <div style="max-width:1100px;margin:0 auto;">
        <div style="display:flex;flex-wrap:wrap;gap:48px;margin-bottom:48px;">
            <div style="flex:1;min-width:260px;">
                <p style="font-size:22px;font-weight:700;color:#ffffff;margin-bottom:16px;font-family:'Playfair Display',serif;">GreenHope Foundation</p>
                <p style="color:#94a3b8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Empowering communities through sustainable programs in clean water, education, and healthcare since 2015.</p>
            </div>
            <div style="flex:0 0 auto;min-width:180px;">
                <p style="color:#ffffff;font-size:14px;font-weight:700;margin-bottom:16px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Contact</p>
                <p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;">hello@greenhope.org</p>
                <p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;">+1 (555) 234-5678</p>
                <p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;">123 Hope Street, Portland, OR</p>
            </div>
            <div style="flex:0 0 auto;min-width:160px;">
                <p style="color:#ffffff;font-size:14px;font-weight:700;margin-bottom:16px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Follow Us</p>
                <p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;"><a href="#" style="color:#94a3b8;text-decoration:none;">Facebook</a></p>
                <p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;"><a href="#" style="color:#94a3b8;text-decoration:none;">Instagram</a></p>
                <p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;"><a href="#" style="color:#94a3b8;text-decoration:none;">Twitter / X</a></p>
                <p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;"><a href="#" style="color:#94a3b8;text-decoration:none;">LinkedIn</a></p>
            </div>
        </div>
        <div style="border-top:1px solid #334155;padding-top:24px;text-align:center;">
            <p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">2026 GreenHope Foundation. All rights reserved. A registered 501(c)(3) nonprofit organization.</p>
        </div>
    </div>
</footer>