website/_includes/services-and-products.html

<section class="jumbotron jumbotron-fluid mb-0">
    <div class="container">
        <h1 class="text-center">{% t index.products_title %}</h1>
        <hr class="border-primary">

        <p class="mt-5 text-center text-lg-left">{% t index.products.introduction_description %}</p>
    </div>
</section>

<section class="bg-white pt-5 pb-5">
    <div class="container">
        <div class="row">
            {%- capture alt_technical_assistance_example %}
                {%- t meta.alt.technical_assistance_example %}
            {%- endcapture %}
            <div class="col text-center d-block d-lg-none">
                {% asset element-technical-assistance.webp alt="{{ alt_technical_assistance_example }}" class="mt-3 mt-lg-0" %}
            </div>
            <div class="col-lg-6 text-center text-lg-left mt-4 mt-lg-0">
                <h3>{% t index.products.technical_assistance %}</h3>
                <p>
                    {% t index.products.technical_assistance_text %}
                </p>
                <a class="btn btn-secondary" href="{% translate_link technical-assistance %}">{% t buttons.discover_our_services %}</a>
            </div>
            <div class="col text-right d-none d-lg-block">
                {% asset element-technical-assistance.webp alt="{{ alt_technical_assistance_example }}" class="mt-3 mt-lg-0" %}
            </div>
        </div>

        <br><br>
        <hr class="border-dark">
        <br><br>

        <div class="row">
            <div class="col text-center text-lg-left">
                {%- capture alt_cybersecurity_example %}
                    {%- t meta.alt.cybersecurity_example %}
                {%- endcapture %}
                {% asset element-cybersecurity.webp alt="{{ alt_cybersecurity_example }}" class="mb-3 mb-lg-0" %}
            </div>
            <div class="col-lg-6 text-center text-lg-left mt-4 mt-lg-0">
                <h3>{% t index.products.cybersecurity %}</h3>
                <p>
                    {% t index.products.cybersecurity_text %}
                </p>
                <a class="btn btn-secondary" href="{% translate_link cybersecurity %}">{% t buttons.go_to_cybersecurity %}</a>
            </div>
        </div>

        <br><br>
        <hr class="border-dark">
        <br><br>

        <div class="row">
            {%- capture alt_communications_example %}
                {%- t meta.alt.communications_example %}
            {%- endcapture %}
            <div class="col text-center text-lg-left d-block d-lg-none">
                {% asset element-communications.webp alt="{{ alt_communications_example }}" class="mt-3 mt-lg-0" %}
            </div>
            <div class="col-lg-6 text-center text-lg-left mt-4 mt-lg-0">
                <h3>{% t index.products.communications %}</h3>
                <p>
                    {% t index.products.communications_text %}
                </p>
                <a class="btn btn-secondary" href="{% translate_link communications %}">{% t buttons.go_to_communications %}</a>
            </div>
            <div class="col text-right d-none d-lg-block">
                {% asset element-communications.webp alt="{{ alt_communications_example }}" class="mt-3 mt-lg-0" %}
            </div>
        </div>

        <br><br>
        <hr class="border-dark">
        <br><br>

        <div class="row">
            <div class="col text-center text-lg-left">
                {%- capture alt_blackhole_example %}
                    {%- t meta.alt.blackhole_example %}
                {%- endcapture %}
                {% asset element-blackhole.webp alt="{{ alt_blackhole_example }}" class="mb-3 mb-lg-0" %}
            </div>
            <div class="col-lg-6 text-center text-lg-left mt-4 mt-md-0">
                <h3>{% t index.products.blackhole %}</h3>
                <p>
                    {% t index.products.blackhole_text %}
                </p>
                <a class="btn btn-secondary" href="{% translate_link contactus %}">{% t buttons.go_to_blackhole %}</a>
            </div>
        </div>
    </div>
</section>