{% extends "base.html" %}

{# Updated template with card blocks - 2025-04-22 #}
{% block title %}Home - Zanzibar Digital Freezone{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h1 class="card-title text-center mb-4">Zanzibar Digital Freezone</h1>
                <p class="card-text text-center lead mb-5">Convenience, Safety and Privacy</p>
                
                <style>
                    .compact-card {
                        max-height: 150px;
                        overflow-y: auto;
                    }
                </style>
                
                <div class="row g-3 mb-4">
                    <!-- Left Column (3 items) -->
                    <div class="col-md-6">
                        <!-- Card 1: Frictionless Collaboration -->
                        <div class="card shadow mb-3 border-primary">
                            <div class="card-header py-2 bg-primary bg-opacity-10 border-primary">
                                <h6 class="mb-0 text-primary"><i class="bi bi-people-fill me-2"></i>Frictionless Collaboration</h6>
                            </div>
                            <div class="card-body p-2 compact-card">
                                <p class="card-text small">Direct communication and transactions between individuals and organizations, making processes efficient and cost-effective.</p>
                            </div>
                        </div>
                        
                        <!-- Card 2: Frictionless Banking -->
                        <div class="card shadow mb-3 border-success">
                            <div class="card-header py-2 bg-success bg-opacity-10 border-success">
                                <h6 class="mb-0 text-success"><i class="bi bi-currency-exchange me-2"></i>Frictionless Banking</h6>
                            </div>
                            <div class="card-body p-2 compact-card">
                                <p class="card-text small">Simplified financial transactions without the complications and fees of traditional banking systems.</p>
                            </div>
                        </div>
                        
                        <!-- Card 3: Tax Efficiency -->
                        <div class="card shadow mb-3 border-info">
                            <div class="card-header py-2 bg-info bg-opacity-10 border-info">
                                <h6 class="mb-0 text-info"><i class="bi bi-graph-up-arrow me-2"></i>Tax Efficiency</h6>
                            </div>
                            <div class="card-body p-2 compact-card">
                                <p class="card-text small">Lower taxes making business operations more profitable and competitive in the global market.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Right Column (2 items) -->
                    <div class="col-md-6">
                        <!-- Card 4: Global Ecommerce -->
                        <div class="card shadow mb-3 border-warning">
                            <div class="card-header py-2 bg-warning bg-opacity-10 border-warning">
                                <h6 class="mb-0 text-warning"><i class="bi bi-globe me-2"></i>Global Ecommerce</h6>
                            </div>
                            <div class="card-body p-2 compact-card">
                                <p class="card-text small">Easily expand your business globally with streamlined operations and tools to reach customers worldwide.</p>
                            </div>
                        </div>
                        
                        <!-- Card 5: Clear Regulations -->
                        <div class="card shadow mb-3 border-danger">
                            <div class="card-header py-2 bg-danger bg-opacity-10 border-danger">
                                <h6 class="mb-0 text-danger"><i class="bi bi-shield-check me-2"></i>Clear Regulations</h6>
                            </div>
                            <div class="card-body p-2 compact-card">
                                <p class="card-text small">Clear regulations and efficient dispute resolution mechanisms providing a stable business environment.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <a href="/about" class="btn btn-primary btn-lg">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}