website/hub/services/templates/services/homepage.html

{% extends 'services/base.html' %}
{% load static %}

{% block content %}
<section class="section section-hero bg-primary-subtle">
  <div class="section-wrapper container mx-auto position-relative">
    <div class="section-hero-mask"></div>
    <div class="px-3 px-lg-0 pt-80 pb-120 position-relative">
      <header class="section-hero__header">
        <h1 class="section-h1 fs-40 fs-lg-64">Servala - The Cloud Native Service Hub</h1>
        <div class="section-hero__desc">
          <p>Unlock the Power of Cloud Native Applications.</p>
          <p>Servala connects businesses, developers, and cloud service providers on one unique hub with secure, scalable, and easy-to-use cloud-native services.</p>
        </div>
        <div>
          <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:service_list' %}" role="button">Discover
            Services</a>
        </div>
      </header>
    </div>
  </div>
</section>

<section class="section">
  <div class="container mx-auto px-20 px-lg-0 pt-80 pb-40">
    <div class="">
      <header class="section__header w-100 d-flex justify-content-between align-items-center">
        <div class="section__header-text">
          <h2 class="section__header-h2">Services</h2>
          <div class="section__desc">
            <p>Explore all available Services on Servala, with new ones added regularly.</p>
          </div>
        </div>
        <div class="d-none d-lg-block">
          <a class="section__header-link" href="{% url 'services:service_list' %}">See All</a>
        </div>
      </header>
      <div class="section__grid">
        <div class="row">
          {% for service in featured_services %}
          <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
            <div class="card">
              <div class="card__image">
                  <a href="{{ service.get_absolute_url }}"><img class="img-fluid" src="{{ service.logo.url }}" alt="{{ service.name }} logo"></a>
              </div>
              <div class="card__header">
                <h3 class="card__title"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h3>
                {% for category in service.categories.all|slice:":1" %}
                  <p class="card__subtitle">{{ category.name }}</p>
                {% endfor %}
              </div>
              <div class="card__desc">
                <p>{{ service.description|safe|truncatewords:15 }}</p>
              </div>
            </div>
          </div>
          {% empty %}
          <div class="col-12">
            <p class="text-center">No featured services available at the moment.</p>
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="page-action d-lg-none">
        <a class="btn btn-outline-primary btn-lg w-100" href="#" role="button">See All</a>
      </div>
    </div>
  </div>
</section>
<section class="section">
  <div class="container mx-auto px-20 px-lg-0 pt-40 pb-40">
    <div class="">
      <header class="section__header w-100 d-flex justify-content-between align-items-center">
        <div class="section__header-text">
          <h2 class="section__header-h2">Cloud Providers</h2>
          <div class="section__desc">
            <p>Explore all available Cloud Providers on Servala, with new ones added regularly.</p>
          </div>
        </div>
        <div class="d-none d-lg-block">
          <a class="section__header-link" href="{% url 'services:provider_list' %}">See All</a>
        </div>
      </header>
      <div class="section__grid">
        <div class="row">
          <div class="section__grid">
            <div class="row">
              {% for provider in featured_providers %}
              <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
                <div class="card">
                  <div class="card__image__wide mb-4">
                      <a href="{{ provider.get_absolute_url }}"><img class="img-fluid" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo"></a>
                  </div>
                  <div class="card__header">
                    <h3 class="card__title"><a href="{{ provider.get_absolute_url }}" class="text-decoration-none">{{ provider.name }}</a></h3>
                  </div>
                  <div class="card__desc">
                    <p>{{ provider.description|safe|truncatewords:15 }}</p>
                  </div>
                </div>
              </div>
              {% empty %}
              <div class="col-12">
                <p class="text-center">No featured provider available at the moment.</p>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      <div class="page-action d-lg-none">
        <a class="btn btn-outline-primary btn-lg w-100" href="#" role="button">See All</a>
      </div>
    </div>
  </div>
</section>
<section class="section">
  <div class="container mx-auto px-20 px-lg-0 pt-40 pb-80">
    <div class="">
      <header class="section__header w-100 d-flex justify-content-between align-items-center">
        <div class="section__header-text">
          <h2 class="section__header-h2">Consulting Partners</h2>
          <div class="section__desc">
            <p>Explore all available Consulting Partners on Servala, with new ones added regularly.</p>
          </div>
        </div>
        <div class="d-none d-lg-block">
          <a class="section__header-link" href="{% url 'services:partner_list' %}">See All</a>
        </div>
      </header>
      <div class="section__grid">
        <div class="row">
          {% for partner in featured_partners %}
          <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
            <div class="card">
              <div class="card__image__wide mb-4">
                  <a href="{{ partner.get_absolute_url }}"><img class="img-fluid" src="{{ partner.logo.url }}" alt="{{ partner.name }} logo"></a>
              </div>
              <div class="card__header">
                <h3 class="card__title"><a href="{{ partner.get_absolute_url }}" class="text-decoration-none">{{ partner.name }}</a></h3>
              </div>
              <div class="card__desc">
                <p>{{ partner.description|safe|truncatewords:15 }}</p>
              </div>
            </div>
          </div>
          {% empty %}
          <div class="col-12">
            <p class="text-center">No featured partner available at the moment.</p>
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="page-action d-lg-none">
        <a class="btn btn-outline-primary btn-lg w-100" href="#" role="button">See All</a>
      </div>
    </div>
  </div>
</section>
<section class="section bg-primary-subtle">
  <div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
    <div class="row">
      <div class="col-12 col-lg-4 mb-30 mb-lg-0">
        <div class="section-logo mx-auto">
          <img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="">
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <header class="section-primary__header">
          <h2 class="section-h1 fs-40 fs-lg-60">Servala - The Cloud Native Service Hub</h2>
          <div class="section-primary__desc">
            <p>Servala connects businesses, developers, and cloud service providers on one unique hub with secure, scalable, and easy-to-use cloud-native services.</p>
          </div>
          <div>
            <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:offering_list' %}" role="button">Discover
              Services</a>
          </div>
        </header>
      </div>
    </div>
  </div>
</section>
{% endblock %}