{% extends 'base.html' %}

{% block content %}
<!-- Hero Section -->
<div class="container-fluid bg-primary text-white py-5">
    <div class="container">
        <h1 class="display-4">Our Projects</h1>
        <p class="lead">Making lasting impact through sustainable initiatives</p>
    </div>
</div>

<!-- Eco-Tourism Section -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Eco-Tourism</h2>
        <div class="row align-items-center">
            <div class="col-lg-6">
                <img src="/static/images/eco-tourism.jpg" alt="Eco-Tourism" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h3 class="mt-4 mt-lg-0">Sustainable Tourism Initiative</h3>
                <p>Our eco-tourism project focuses on preserving and showcasing the natural and cultural heritage of Rabai while creating sustainable economic opportunities for the local community.</p>
                <div class="card bg-light mt-3">
                    <div class="card-body">
                        <h5 class="card-title">Key Features</h5>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-primary me-2"></i> Cultural heritage tours</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Nature trails and bird watching</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Community-led experiences</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Local artisan workshops</li>
                        </ul>
                    </div>
                </div>
                <a href="#" class="btn btn-primary mt-3">Learn More</a>
            </div>
        </div>
    </div>
</section>

<!-- Restoration Project Section -->
<section class="bg-light py-5">
    <div class="container">
        <h2 class="mb-4">Restoration Project</h2>
        <div class="row align-items-center">
            <div class="col-lg-6 order-lg-2">
                <img src="/static/images/restoration.jpg" alt="Restoration Project" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6 order-lg-1">
                <h3 class="mt-4 mt-lg-0">Environmental Conservation</h3>
                <p>Our restoration project aims to protect and restore the natural environment of Rabai, with a focus on indigenous species and traditional conservation methods.</p>
                <div class="row g-3 mt-2">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">Forest Restoration</h5>
                                <p class="card-text">Reforestation of indigenous tree species and habitat restoration.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">Community Involvement</h5>
                                <p class="card-text">Local participation in conservation and monitoring.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Agri-business Projects Section -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Agri-business Projects</h2>
        <div class="row">
            <div class="col-lg-6">
                <img src="/static/images/agri-business.jpg" alt="Agri-business" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h3 class="mt-4 mt-lg-0">Sustainable Agriculture</h3>
                <p>Our agri-business projects support local farmers in adopting sustainable farming practices and accessing markets for their produce.</p>
                <div class="card bg-light mt-3">
                    <div class="card-body">
                        <h5 class="card-title">Project Components</h5>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-primary me-2"></i> Farmer training programs</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Market linkages</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Value addition support</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Agricultural innovation</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Financial Literacy Section -->
<section class="bg-light py-5">
    <div class="container">
        <h2 class="mb-4">Community Financial Literacy</h2>
        <div class="row align-items-center">
            <div class="col-lg-6 order-lg-2">
                <img src="/static/images/financial-literacy.jpg" alt="Financial Literacy" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6 order-lg-1">
                <h3 class="mt-4 mt-lg-0">Financial Education</h3>
                <p>Our financial literacy program empowers community members with essential financial management skills and knowledge.</p>
                <div class="card mt-3">
                    <div class="card-body">
                        <h5 class="card-title">Program Highlights</h5>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-primary me-2"></i> Basic financial management</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Savings and investment</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Business planning</li>
                            <li><i class="fas fa-check text-primary me-2"></i> Access to financial services</li>
                        </ul>
                        <a href="#" class="btn btn-primary mt-3">Join Program</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Project Impact Section -->
<section class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Project Impact</h2>
        <div class="row g-4">
            <div class="col-md-3">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-users fa-3x text-primary mb-3"></i>
                        <h3 class="card-title">5,000+</h3>
                        <p class="card-text">Community Members Impacted</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-tree fa-3x text-primary mb-3"></i>
                        <h3 class="card-title">10,000+</h3>
                        <p class="card-text">Trees Planted</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-hand-holding-usd fa-3x text-primary mb-3"></i>
                        <h3 class="card-title">200+</h3>
                        <p class="card-text">Farmers Supported</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-graduation-cap fa-3x text-primary mb-3"></i>
                        <h3 class="card-title">1,000+</h3>
                        <p class="card-text">Training Participants</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}