add about page

This commit is contained in:
Tobias Brunner 2025-03-07 10:53:07 +01:00
parent eb5e4b0534
commit 3c08d4c293
No known key found for this signature in database
8 changed files with 223 additions and 2 deletions

View file

@ -0,0 +1,214 @@
{% extends 'services/base.html' %}
{% load static %}
{% load contact_tags %}
{% block title %}About Open Cloud Native Services Hub{% endblock %}
{% block content %}
<section class="section bg-primary-subtle">
<div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
<header class="section-primary__header text-center">
<h2 class="section-h1 fs-40 fs-lg-64 mb-24">About Servala</h2>
<div class="text-gray-300 w-lg-37 mx-auto">
<p class="mb-0">Open Cloud Native Service Hub. Unlock the Power of Cloud Native Applications.</p>
</div>
</header>
</div>
</section>
<section class="section">
<div class="container mx-auto px-20 px-lg-0 pt-80 pb-40">
<div class="page-content w-lg-72 mx-auto">
<div class="d-lg-flex pb-60">
<div class="flex-1 pr-lg-50 d-lg-flex flex-column justify-content-between mb-60 mb-lg-0">
<div>
<header>
<h2 class="fs-32 fw-semibold mb-12">Overview</h2>
</header>
<div class="text-gray-500 fs-19 lh-1-7">
<p>Servala connects businesses, developers, and cloud service providers on one unique hub with secure, scalable, and easy-to-use cloud-native services.</p>
<p>With Servala, businesses can seamlessly access and deploy a vast range of software, databases, applications, and DevOps tools such as PostgreSQL, Red Hat OpenShift, Keycloak, GitLab or Forgejo across multiple cloud providers and regions. This ensures businesses can seamlessly access and deploy services, applications, and DevOps tools across different cloud environments without being tied to a single provider.</p>
<p>With Servala, businesses can stay agile, avoid vendor lock-in, optimize cloud costs, and ensure security and compliance. For Independent Software Vendors (ISVs), Servala opens up additional channels to offer their software products. At the same time, Cloud Service Providers (CSPs) can add value on top of their existing core offerings (compute, storage, network).</p>
</div>
</div>
<div class="page-action">
<a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-0 w-100 w-md-auto" href="{% static "servala-flyer.pdf" %}" role="button">Download Flyer</a>
<a class="btn btn-outline btn-lg w-100 w-md-auto" href="{% url 'services:service_list' %}" role="button">Discover Services</a>
</div>
</div>
<div class="w-lg-30">
<div class="page-header__image-wrapper">
<img class="page-header__image" src="{% static "img/about-image.png" %}" alt="About Servala">
</div>
</div>
</div>
<div>
<h2 class="fs-32 fw-semibold mt-3">Who benefits from using Servala?</h2>
<div class="text-gray-500 fs-19 lh-1-7">
<p>Servala is designed for CSPs, ISVs, and Enterprises and their users, enabling them to offer, integrate, and consume cloud-native services and applications and DevOps tools with ease. It bridges the gap between CSPs seeking value-added services, ISVs looking to distribute and monetize their applications and services, and Enterprises needing scalable, secure, and cost-efficient cloud solutions and their users who need to access those services easily - all within an open, cloud-agnostic ecosystem.</p>
</div>
<article class="pt-20">
<h3 class="fs-24 fw-semibold">Independent Software Vendors (ISVs)</h3>
<ul class="list-disc pl-8 text-gray-500 fs-19">
<li>Transform applications into SaaS offerings.</li>
<li>Leverage the Servala Hub to distribute, monetize, and efficiently operate your software.</li>
<li>Extend your reach to new markets and ecosystems.</li>
</ul>
</article>
<article class="pt-20">
<h3 class="fs-24 fw-semibold">Cloud Service Providers (CSPs)</h3>
<ul class="list-disc pl-8 text-gray-500 fs-19">
<li>Offer value-added services and applications to end users.</li>
<li>Respond effectively to fast-paced market changes.</li>
<li>Gain tools to enhance operational efficiency and market relevance.</li>
</ul>
</article>
<article class="pt-20">
<h3 class="fs-24 fw-semibold">Enterprises and Their Users</h3>
<ul class="list-disc pl-8 text-gray-500 fs-19">
<li>Access scalable, secure, and cost-efficient services.</li>
<li>Enable self-service installation of trusted applications without managing infrastructure.</li>
<li>Benefit from built-in compliance, developer productivity boosts, and operational simplicity.</li>
</ul>
</article>
</div>
<div>
<h2 class="fs-32 fw-semibold mt-5">Why Choose Servala?</h2>
<div class="row row-cols-1 row-cols-md-3 g-4 pt-3">
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-lightning-charge-fill fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Agility &amp; Faster Time-to-Market</h3>
</div>
<p class="text-gray-500 fs-19 card-text">Access a vast catalog of services and applications for rapid deployment and
innovation.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-cloud-check-fill fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Cloud-Agnostic &amp; Vendor-Independent</h3>
</div>
<p class="text-gray-500 fs-19 card-text">Deploy services on any cloud or on-premises, ensuring maximum
flexibility.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-shield-check fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Secure &amp; Compliant</h3>
</div>
<p class="text-gray-500 fs-19 card-text">Built to meet rigorous industry standards (GDPR, ISO, ISAE) to ensure data
protection and regulatory compliance.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-cash-coin fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Cost Optimization</h3>
</div>
<p class="text-gray-500 fs-19 card-text">Transparent pricing to manage and reduce cloud expenses efficiently.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-puzzle-fill fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Seamless Integration</h3>
</div>
<p class="text-gray-500 fs-19 card-text">Pre-configured solutions and Kubernetes-native tools integrate smoothly into
existing workflows.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-graph-up-arrow fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Scalable &amp; DevOps-Ready</h3>
</div>
<p class="text-gray-500 fs-19 card-text">Cloud-native services that scale automatically, keeping up with your business
growth.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-gear-wide-connected fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Fully Managed &amp; Hassle-Free Operations</h3>
</div>
<p class="text-gray-500 fs-19 card-text">VSHN takes care of maintenance, monitoring, and updates - so you can focus on
innovation.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-code-square fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Open Source &amp; Beyond</h3>
</div>
<p class="text-gray-500 fs-19 card-text">Access both Open Source and commercial editions to suit your needs.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-people-fill fs-2 text-primary me-3"></i>
<h3 class="fs-24 fw-semibold card-title mb-0">Expert Network &amp; Consulting</h3>
</div>
<p class="text-gray-500 fs-19 card-text">Tap into a network of consulting partners who understand and optimize available
services.</p>
</div>
</div>
</div>
</div>
</div>
<div class="d-lg-flex mt-5">
<div class="flex-1 pr-lg-50 d-lg-flex flex-column justify-content-between mb-60 mb-lg-0">
<div>
<h2 class="fs-32 fw-semibold mb-12">Our Mascot</h2>
<div class="text-gray-500 fs-19 lh-1-7">
<p>Say Hi! to Sir Vala 👋</p>
<p>Did you know? The <a href="https://en.wikipedia.org/wiki/Serval" target="_blank">serval (Leptailurus serval)</a> is a wild cat native to Africa, found in grasslands, wetlands, and forests across sub-Saharan regions. It is protected in many areas, with hunting regulated or prohibited.</p>
</div>
</div>
</div>
<div class="w-lg-30">
<div class="page-header__image-wrapper">
<img class="page-header__image" src="{% static "img/sir-vala-text.png" %}" alt="Servala Mascot Sir Vala">
</div>
</div>
</div>
<div>
<h2 class="fs-32 fw-semibold mt-5">Contact Us</h2>
{% embedded_contact_form source="About Us" %}
</div>
</div>
</div>
</section>
{% endblock %}

View file

@ -0,0 +1,222 @@
{% extends 'services/base.html' %}
{% load static %}
{% block title %}Open Cloud Native Services Hub{% endblock %}
{% 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 - Open 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 h-100 d-flex flex-column">
<div class="card__image">
<a href="{{ service.get_absolute_url }}"><img class="img-fluid" src="{{ service.logo.url }}" alt="{{ service.name }} logo" style="max-height: 80px; max-width: 250px; object-fit: contain;"></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 flex-grow-1">
<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 h-100 d-flex flex-column">
<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" style="max-height: 80px; max-width: 250px; object-fit: contain;"></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 flex-grow-1">
<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 h-100 d-flex flex-column">
<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" style="max-height: 80px; max-width: 250px; object-fit: contain;"></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 flex-grow-1">
<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 - Open 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>
<p>Discover:</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">Services</a>
<a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:provider_list' %}" role="button">Cloud Providers</a>
<a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:partner_list' %}" role="button">Consulting Partners</a>
</div>
</header>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
<header class="section__header text-center mb-30">
<h2 class="section-heading-h2 fs-40 fs-lg-64">Frequenty Asked Questions</h2>
<div class="section__desc fw-medium fs-20 w-lg-40 mx-auto">
<p>Still need more information? Read our FAQ or contact us to learn more about the Servala.</p>
</div>
</header>
<div x-data="{ open: null }" class="section__faq">
{% for faq in websitefaqs %}
<div class="section__faq-item">
<div class="faq-item__header">
<button @click="open === {{ faq.id }} ? open = null : open = {{ faq.id }}"
class="faq-item__button w-100 d-flex justify-content-between align-items-center px-0" type="button">
<span class="faq-item__title fw-semibold mb-0">{{ faq.question }}</span>
<div class="faq-icon">
<svg width="16" height="16" class="svg-icon transition-all duration-200"
:class="{'svg-active rotate-180': open === 0 }" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.64592 4.64592C1.69236 4.59935 1.74754 4.56241 1.80828 4.5372C1.86903 4.512 1.93415 4.49902 1.99992 4.49902C2.06568 4.49902 2.13081 4.512 2.19155 4.5372C2.2523 4.56241 2.30747 4.59935 2.35392 4.64592L7.99992 10.2929L13.6459 4.64592C13.6924 4.59943 13.7476 4.56255 13.8083 4.53739C13.8691 4.51223 13.9342 4.49929 13.9999 4.49929C14.0657 4.49929 14.1308 4.51223 14.1915 4.53739C14.2522 4.56255 14.3074 4.59943 14.3539 4.64592C14.4004 4.6924 14.4373 4.74759 14.4624 4.80833C14.4876 4.86907 14.5005 4.93417 14.5005 4.99992C14.5005 5.06566 14.4876 5.13076 14.4624 5.1915C14.4373 5.25224 14.4004 5.30743 14.3539 5.35392L8.35392 11.3539C8.30747 11.4005 8.2523 11.4374 8.19155 11.4626C8.1308 11.4878 8.06568 11.5008 7.99992 11.5008C7.93415 11.5008 7.86903 11.4878 7.80828 11.4626C7.74754 11.4374 7.69236 11.4005 7.64592 11.3539L1.64592 5.35392C1.59935 5.30747 1.56241 5.2523 1.5372 5.19155C1.512 5.13081 1.49902 5.06568 1.49902 4.99992C1.49902 4.93415 1.512 4.86903 1.5372 4.80828C1.56241 4.74754 1.59935 4.69236 1.64592 4.64592Z"
fill="#3C4043" />
</svg>
</div>
</button>
</div>
<div x-cloak x-show="open === {{ faq.id }}" class="pt-2" x-collapse>
<p class="faq-description lh-base">{{ faq.answer|safe }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endblock %}