{{ define "main" }}
    <!-- Hero Section - Bloc1 -->
    <div id="bloc1" class="container-fluid">
        <div class="row" align="center" width="100%">
            <div class="col-md-12 col-sm-12">
                <div class="row" align="center">
                    <div class="col-12" align="center">
                        <img src="{{ .Site.BaseURL }}img/home.png" style="width:65%;" alt="{{ .Site.Title }}">
                    </div>
                </div>
                <div class="row" style="padding-top:10px;" align="center">
                    <div class="col-6" align="center">
                        <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/nos-offres" class="btn btn-primary">
                            {{ i18n "offers" }}
                        </a>
                    </div>
                    <div class="col-6" align="center">
                        <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/commande-sim" class="btn btn-primary">
                            {{ i18n "buySim" }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section - Bloc2 -->
    <div id="bloc2" class="container-fluid">
        <div class="row icons">
            <div class="col offset-sm-0 offset-md-1 col-md-2 col-sm-12">
                <img src="{{ .Site.BaseURL }}img/icon-transfert.svg" alt="{{ i18n "creditTransfer" }}">
                <span>{{ i18n "creditTransferSimple" }}</span>
            </div>
            <div class="col col-md-2 col-sm-12">
                <img src="{{ .Site.BaseURL }}img/icon-tarif-mayotte.svg" alt="{{ i18n "uniqueRates" }}">
                <span>{{ i18n "uniqueRatesText" }}</span>
            </div>
            <div class="col col-md-2 col-sm-12">
                <img src="{{ .Site.BaseURL }}img/icon-credit.svg" alt="{{ i18n "includedCredit" }}">
                <span>{{ i18n "includedCreditText" }}</span>
            </div>
            <div class="col col-md-2 col-sm-12">
                <img src="{{ .Site.BaseURL }}img/icon-no-engage.svg" alt="{{ i18n "noCommitment" }}">
                <span>{{ i18n "noCommitmentText" }}</span>
            </div>
            <div class="col col-md-2 col-sm-12">
                <img src="{{ .Site.BaseURL }}img/icon-no-limit.svg" alt="{{ i18n "unlimitedValidity" }}">
                <span>{{ i18n "unlimitedValidityText" }}</span>
            </div>
        </div>
    </div>

    <!-- Cards Section - Bloc3 -->
    <div id="bloc3" class="container-fluid">
        <h2 class="text-center">
            {{ i18n "dedicatedAdvantages" }}
        </h2>
        <div class="row display-flex">
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <img class="card-img-top" src="{{ .Site.BaseURL }}img/recharge-card.svg" alt="{{ i18n "rechargeCardAlt" }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ i18n "rechargeFromOneEuro" }}</h5>
                        <p class="card-text">{{ i18n "rechargeFromOneEuroText" }}</p>
                        <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/acheter-credit" class="btn btn-primary">
                            {{ i18n "rechargeMySim" }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <img class="card-img-top" src="{{ .Site.BaseURL }}img/transfert-card.svg" alt="{{ i18n "transferCardAlt" }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ i18n "exchangeCreditTitle" }}*</h5>
                        <p class="card-text">{{ i18n "exchangeCreditText" }}<br/><small>*{{ i18n "maoreUsersOnly" }}</small></p>
                        <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/transfert-credit" class="btn btn-primary">
                            {{ i18n "transferCredit" }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <img class="card-img-top" src="{{ .Site.BaseURL }}img/rappellemoi-card.svg" alt="{{ i18n "callMeBackCardAlt" }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ i18n "noCreditTitle" }}*</h5>
                        <p class="card-text">{{ i18n "noCreditText" }}<br/><small>*{{ i18n "maoreUsersOnly" }}</small></p>
                        <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/rappelle-moi" class="btn btn-primary">
                            {{ i18n "learnMore" }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <img class="card-img-top" src="{{ .Site.BaseURL }}img/noengage-card.svg" alt="{{ i18n "noCommitmentCardAlt" }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ i18n "noCommitmentTitle" }}</h5>
                        <p class="card-text">{{ i18n "noCommitmentCardText" }}</p>
                        <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/commande-sim" class="btn btn-primary">
                            {{ i18n "orderSim" }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Environmental Section - Bloc4 -->
    <div id="bloc4" class="container-fluid">
        <div class="row" width="100%">
            <div class="col-lg-5 col-md-12">
                <h3 class="text-white">{{ i18n "loveMayotte" }}</h3>
                <p class="text-white" style="padding-top: 15px; line-height:29px">{{ i18n "environmentalCommitment" }}</p>
                <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/commande-sim" class="btn btn-primary">
                    {{ i18n "buySim" }}
                </a>
            </div>
            <div class="col-lg-7 col-md-12 right">
                <img src="{{ .Site.BaseURL }}img/welovemayotte.svg" alt="{{ i18n "loveMayotteAlt" }}">
            </div>
        </div>
    </div>
{{ end }}