{% load static %}
{% load canonical_tags %}
{% load social_meta_tags %}
{% load json_ld_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{% block meta_description %}Servala connects businesses, developers, and cloud service providers on one unique hub with secure, scalable, and easy-to-use cloud-native services.{% endblock %}">
    <title>Servala - {% block title %}{% endblock %}</title>
    <link rel="canonical" href="{% canonical_url %}" />
    <link rel="icon" type="image/x-icon" href="{% static "img/favicon.ico" %}">
    <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
    {% social_meta_tags %}
    {% json_ld_structured_data %}

    <link rel="stylesheet" href='{% static "css/bootstrap-icons.min.css" %}'>
    <link rel="stylesheet" type="text/css" href='{% static "css/servala-main.css" %}'>
    {% block extra_css %}{% endblock %}

    {% if not debug %}
    <script defer data-api="/api/event" data-domain="servala.com" src="/js/script.js"></script>
    {% endif %}
    <script defer src="{% static "js/htmx204.min.js" %}"></script>
    <script defer src="{% static "js/alpine-collapse.min.js" %}"></script>
    <script defer src="{% static "js/servala-main.js" %}"></script>
    <script defer src="{% static "js/servala-addons.js" %}"></script>
    {% block extra_js %}{% endblock %}
</head>
<body>
    <div class="overflow-hidden">
        <!-- Announcement Bar -->
        <div class="bg-primary text-white py-2 text-center">
          <div class="container">
              <a href="https://www.vshn.ch/en/blog/vshn-launches-servala-open-cloud-native-service-hub/" class="text-white text-decoration-none" target="_blank">
                  VSHN launches Servala – Open Cloud Native Service Hub
              </a>
              <i class="bi bi-box-arrow-up-right"></i>
          </div>
        </div>
        
        <header x-data="{sideNav: false, atTop: true}" class="site-header position-relative">
          <div class="header-nav" :class="{ 'header-nav--top': atTop, 'header-nav--fixed': !atTop }"
            x-on:scroll.window="atTop = (window.pageYOffset > 200) ? false : true;">
            <div class="container-xl mx-auto px-3 px-lg-0 position-relative">
              <div class="nav__wrapper d-flex justify-content-between align-items-center">
                <div class="nav__brand logo">
                  <a class="navbar__logo" href="{% url 'services:homepage' %}" title="logo">
                    <img src="{% static "img/header-logo.png" %}" alt="Servala Logo" width="191" height="43">
                  </a>
                </div>
                <div x-cloak class="nav__menu" :class="sideNav ? 'nav__menu-active' : 'nav__menu-hidden'">
                  <nav class="navbar d-lg-flex justify-content-lg-end align-items-lg-center">
                    <ul class="navbar__menu menu mr-lg-27">
                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:homepage' %}">Home</a></li>
                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:service_list' %}">Services</a></li>
                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:provider_list' %}">Cloud Providers</a></li>
                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:partner_list' %}">Consulting Partners</a></li>
                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:about' %}">About</a></li>
                    </ul>
                    <ul class="menu-cta mb-0">
                      <li class="mr-17"><a class="btn btn-outline-light btn-outline-primary" href="{% url 'services:contact' %}" role="button">Contact</a></li>
                    </ul>
                  </nav>
                </div>
                <div class="nav__toggle">
                  <button @click="sideNav = !sideNav" name="menu" class="nav__button" role="button">
                    <svg class="nav__button-svg" width="22" height="24">
                      <line class="button-svg__line" :class="{ 'svg-line-top': sideNav === true }" id="top" x1="0" x2="22"
                        y1="6" y2="6"></line>
                      <line class="button-svg__line" :class="{ 'svg-line-center': sideNav === true }" id="middle" x1="0"
                        x2="22" y1="12" y2="12">
                      </line>
                      <line class="button-svg__line" :class="{ 'svg-line-bottom': sideNav === true }" id="bottom" x1="0"
                        x2="22" y1="18" y2="18"></line>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </header>
    
        {% block content %}
        {% endblock %}

        <section class="section">
            <div class="section-wrapper container mx-auto px-20 px-lg-0 pt-60 pb-60">
              <div class="bg-primary-subtle rounded-40 py-100 px-20 px-lg-0">
                <header class="section-primary__header text-center">
                  <div class="d-inline-flex position-relative">
                    <div class="section-title-svg position-absolute d-none d-lg-block">
                      <svg width="45" height="50" viewBox="0 0 45 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M29.9436 46.0084C34.2405 44.8026 38.7391 44.1943 43.1031 43.6371C44.0431 43.5203 44.9157 44.1722 44.9829 45.0906C45.1171 46.0097 44.4454 46.8503 43.5726 46.9671C39.3428 47.5036 34.9793 48.0776 30.8838 49.2384C30.011 49.4902 29.0707 48.9719 28.8021 48.0803C28.5336 47.1894 29.0708 46.2608 29.9436 46.0084Z"
                          fill="#9A63EC" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M16.9192 28.9129C23.8344 21.856 31.6225 15.7075 38.4034 8.46126C39.0077 7.78451 40.0819 7.74825 40.7533 8.38002C41.4247 9.01246 41.4915 10.0759 40.8202 10.7527C34.0392 18.0197 26.2512 24.1884 19.3359 31.2661C18.6645 31.9268 17.5906 31.9362 16.9192 31.2863C16.3149 30.637 16.2478 29.5736 16.9192 28.9129Z"
                          fill="#9A63EC" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M3.9606 1.7696C3.75918 5.80864 3.55816 9.84768 3.35675 13.8874C3.35675 14.8126 2.55069 15.5269 1.61076 15.4819C0.670821 15.4363 -0.000168324 14.6487 -0.000168324 13.7229C0.201247 9.67715 0.402268 5.63207 0.603683 1.58699C0.670821 0.661821 1.47661 -0.0478314 2.41655 0.00252227C3.28935 0.052876 4.02774 0.84511 3.9606 1.7696Z"
                          fill="#9A63EC" />
                      </svg>
                    </div>
                    <h2 class="section-h1 fs-40 fs-lg-60 d-inline-block mb-24">Ready to Get Started?</h2>
                  </div>
                  <div class="text-gray-300 w-lg-37 mx-auto mb-24">
                    <p class="mb-0">Subscribe to our newsletter to stay informed.</p>
                  </div>
                  <div class="mt-4">
                    <form hx-post="{% url 'services:subscribe' %}" hx-target="#signup-form-container" hx-swap="outerHTML">
                      {% csrf_token %}
                      <div id="signup-form-container" class="d-flex justify-content-center">
                        <div class="input-group" style="max-width: 500px;">
                          <input type="email" name="email" class="form-control" id="email-input" placeholder="Your email address" required>
                          <button type="submit" class="btn btn-primary plausible-event-name=Newsletter+Sign-Up">Subscribe to updates</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </header>
              </div>
            </div>
          </section>

        <footer>
          <section>
            <div class="container mx-auto px-20 px-lg-0 py-36 border-y">
              <div class="row">
                <div class="col-12 col-lg-4 mb-60 mb-lg-0">
                  <div class="mb-10">
                    <a href="">
                      <img class="img-fluid" src="{% static "img/footer-logo.png" %}" alt="Servala by VSHN Logo">
                    </a>
                  </div>
                  <div class="fs-14 fw-semibold">
                    <p>Unlock the Power of Cloud Native Applications</p>
                  </div>
                  <div class="d-flex align-items-center space-x-20">
                    <a href="https://www.linkedin.com/company/5395280/">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M20.5831 0.631348C21.2609 0.631348 21.9109 0.900593 22.3902 1.37985C22.8694 1.85911 23.1387 2.50913 23.1387 3.1869V21.0758C23.1387 21.7536 22.8694 22.4036 22.3902 22.8828C21.9109 23.3621 21.2609 23.6313 20.5831 23.6313H2.69423C2.01645 23.6313 1.36644 23.3621 0.887177 22.8828C0.407917 22.4036 0.138672 21.7536 0.138672 21.0758V3.1869C0.138672 2.50913 0.407917 1.85911 0.887177 1.37985C1.36644 0.900593 2.01645 0.631348 2.69423 0.631348H20.5831ZM19.9442 20.4369V13.6647C19.9442 12.5599 19.5054 11.5004 18.7242 10.7192C17.943 9.93799 16.8834 9.49912 15.7787 9.49912C14.6926 9.49912 13.4276 10.1636 12.8142 11.1602V9.7419H9.24923V20.4369H12.8142V14.1375C12.8142 13.1536 13.6065 12.3486 14.5903 12.3486C15.0648 12.3486 15.5198 12.537 15.8553 12.8725C16.1908 13.208 16.3792 13.663 16.3792 14.1375V20.4369H19.9442ZM5.09645 7.73579C5.66578 7.73579 6.21179 7.50963 6.61437 7.10705C7.01695 6.70447 7.24312 6.15846 7.24312 5.58913C7.24312 4.40079 6.28478 3.42968 5.09645 3.42968C4.52373 3.42968 3.97447 3.65719 3.56949 4.06217C3.16452 4.46714 2.93701 5.01641 2.93701 5.58913C2.93701 6.77746 3.90812 7.73579 5.09645 7.73579ZM6.87256 20.4369V9.7419H3.33312V20.4369H6.87256Z"
                          fill="#4B5563" />
                      </svg>
                    </a>
                  </div>
                </div>
    
                <div class="col-12 col-lg-2 mb-60 mb-lg-0">
                  <div class="space-y-20">
                    <h4 class="fs-base fw-semibold">Contents</h4>
                    <ul class="list-unstyled space-y-20 fs-15 fw-medium ps-0">
                      <li><a href="{% url 'services:homepage' %}">Home</a></li>
                      <li><a href="{% url 'services:about' %}">About</a></li>
                      <li><a href="{% url 'services:service_list' %}">Services</a></li>
                      <li><a href="{% url 'services:provider_list' %}">Cloud Providers</a></li>
                      <li><a href="{% url 'services:partner_list' %}">Consulting Partners</a></li>
                    </ul>
                  </div>
                </div>
    
                <div class="col-12 col-lg-2 mb-60 mb-lg-0">
                  <div class="space-y-20">
                    <h4 class="fs-base fw-semibold">Company</h4>
                    <ul class="list-unstyled space-y-20 fs-15 fw-medium ps-0">
                      <li><a href="https://www.vshn.ch/en/about/">About Us</a></li>
                      <li><a href="https://products.vshn.ch/legal/gtc_en.html">Terms & Conditions</a></li>
                      <li><a href="https://products.vshn.ch/legal/privacy_policy_en.html">Privacy Policy</a></li>
                      <li><a href="https://products.vshn.ch/legal/dpa_en.html">Data Processing Agreement</a></li>
                    </ul>
                  </div>
                </div>
    
                <div class="col-12 col-lg-4">
                  <div class="space-y-20 w-lg-90">
                    <h4 class="fs-base fw-semibold">Contact</h4>
                    <ul class="list-unstyled space-y-20 fs-base fw-medium ps-0">
                      <li>
                        <a class="d-flex align-items-center" href="tel:+41445455300">
                          <span class="pr-10">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path
                                d="M18.984 15.5283C17.8172 14.5982 16.6332 14.0349 15.4808 14.9635L14.7927 15.5248C14.2892 15.9322 13.3531 17.8358 9.73382 13.9555C6.11531 10.0801 8.26863 9.47668 8.77286 9.07277L9.46475 8.51081C10.6111 7.58006 10.1785 6.40838 9.3517 5.20228L8.85275 4.47173C8.02217 3.26844 7.11773 2.47818 5.96834 3.40752L5.3473 3.91328C4.8393 4.25819 3.41933 5.37929 3.07489 7.50912C2.66036 10.0646 3.96803 12.991 6.96398 16.2019C9.95617 19.4142 12.8858 21.0277 15.6609 20.9996C17.9672 20.9765 19.3601 19.823 19.7957 19.4037L20.419 18.8972C21.5654 17.9686 20.8531 17.0231 19.6857 16.0909L18.984 15.5283Z"
                                fill="#9A63EC" />
                            </svg>
                          </span>
                          <span>+41 44 545 53 00</span>
                        </a>
                      </li>
                      <li>
                        <a class="d-flex align-items-center" href="mailto:hi@servala.com">
                          <span class="pr-10">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <mask id="mask0_3315_428" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
                                width="24" height="24">
                                <rect width="24" height="24" fill="#D9D9D9" />
                              </mask>
                              <g mask="url(#mask0_3315_428)">
                                <path
                                  d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L20 8V6L12 11L4 6V8L12 13Z"
                                  fill="#9A63EC" />
                              </g>
                            </svg>
                          </span>
                          <span>hi@servala.com</span>
                        </a>
                      </li>
                      <li>
                        <a class="d-flex align-items-center" href="https://www.openstreetmap.org/node/3666762517">
                          <span class="pr-10">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <g clip-path="url(#clip0_3315_433)">
                                <path
                                  d="M12 0C7.038 0 3 4.066 3 9.065C3 16.168 11.154 23.502 11.501 23.81C11.644 23.937 11.822 24 12 24C12.178 24 12.356 23.937 12.499 23.811C12.846 23.502 21 16.168 21 9.065C21 4.066 16.962 0 12 0ZM12 14C9.243 14 7 11.757 7 9C7 6.243 9.243 4 12 4C14.757 4 17 6.243 17 9C17 11.757 14.757 14 12 14Z"
                                  fill="#9A63EC" />
                              </g>
                              <defs>
                                <clipPath id="clip0_3315_433">
                                  <rect width="24" height="24" fill="white" />
                                </clipPath>
                              </defs>
                            </svg>
                          </span>
                          <span>Neugasse 10, 8005 Zurich, Switzerland</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
    
              </div>
            </div>
          </section>
          <div class="container mx-auto px-20 px-lg-0 pt-36 pb-40">
            <div class="text-center fs-base fw-medium">
              <p class="mb-0">© 2025 VSHN. All rights reserved.</p>
            </div>
          </div>
        </footer>
      </div>
</body>
</html>
