213 lines
No EOL
13 KiB
HTML
213 lines
No EOL
13 KiB
HTML
{% extends 'services/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Services{% 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">Discover Services</h2>
|
|
<div class="text-gray-300 w-lg-37 mx-auto">
|
|
<p class="mb-0">Explore all available Services on Servala, with new ones added regularly.</p>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
|
|
<div x-data="{ open: window.innerWidth > 1024 }"
|
|
@resize.window="open = window.innerWidth > 1024 ? open : true" class="d-lg-flex">
|
|
<!-- Filters -->
|
|
<div class="w-lg-20 flex-none">
|
|
<!-- Mobile Menu -->
|
|
<div class="page-action d-lg-none mb-40">
|
|
<button @click="open = !open"
|
|
class="btn btn-outline-primary btn-md w-100 d-flex justify-content-center align-items-center"
|
|
type="button">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<mask id="mask0_115_3182" 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_115_3182)">
|
|
<path d="M7 18V16H17V18H7ZM5 13V11H19V13H5ZM3 8V6H21V8H3Z" fill="#9A63EC" />
|
|
</g>
|
|
</svg>
|
|
<span class="ms-2">Filters</span>
|
|
</button>
|
|
</div>
|
|
<!-- Desktop View -->
|
|
<div x-cloak x-show="open || window.innerWidth >= 1024" class="w-lg-85" x-collapse>
|
|
<div class="d-flex d-lg-none justify-content-between align-items-center mb-24"
|
|
role="button">
|
|
<h3 class="sidebar-dropdown__title mb-0">Filters</h3>
|
|
<span @click="open = false">
|
|
<svg width="24" height="25" viewBox="0 0 24 25" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<mask id="mask0_115_3177" style="mask-type:alpha" maskUnits="userSpaceOnUse"
|
|
x="0" y="0" width="24" height="25">
|
|
<rect y="0.5" width="24" height="24" fill="#D9D9D9" />
|
|
</mask>
|
|
<g mask="url(#mask0_115_3177)">
|
|
<path
|
|
d="M6.4 19.5L5 18.1L10.6 12.5L5 6.9L6.4 5.5L12 11.1L17.6 5.5L19 6.9L13.4 12.5L19 18.1L17.6 19.5L12 13.9L6.4 19.5Z"
|
|
fill="#160037" />
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="search-form position-relative mb-24">
|
|
<form method="get" x-data="{submitForm() { $refs.filterForm.submit(); } }" x-ref="filterForm">
|
|
<!-- Search -->
|
|
<div class="mb-24">
|
|
<label for="search" class="d-none">Search</label>
|
|
<input type="text" id="search" class="input-search" placeholder="Search" name="search" value="{{ request.GET.search }}">
|
|
<button class="search-button position-absolute top-0 start-0 d-flex justify-content-center align-items-center border-0 bg-transparent p-0"
|
|
type="button" title="search">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.5 17.5L22 22" stroke="#9A63EC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
|
|
stroke="#9A63EC" stroke-width="1.5" stroke-linejoin="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Category Filter -->
|
|
<div class="pt-24 mb-24">
|
|
<div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
|
|
<h3 class="sidebar-title mb-0">Category</h3>
|
|
</div>
|
|
<div>
|
|
<select class="form-select" id="category" name="category" @change="submitForm()">
|
|
<option value="">All Categories</option>
|
|
{% for category in categories %}
|
|
<option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:'i' %}selected{% endif %}>
|
|
{{ category.name }}
|
|
</option>
|
|
{% if category.children.all %}
|
|
{% for subcategory in category.children.all %}
|
|
<option value="{{ subcategory.id }}" {% if request.GET.category == subcategory.id|stringformat:'i' %}selected{% endif %}>
|
|
{{ subcategory.name }}
|
|
</option>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Consulting Partners Filter -->
|
|
<div class="pt-24 mb-24">
|
|
<div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
|
|
<h3 class="sidebar-title mb-0">Consulting Partners</h3>
|
|
</div>
|
|
<div>
|
|
<select class="form-select" id="consulting_partner" name="consulting_partner" @change="submitForm()">
|
|
<option value="">All Partners</option>
|
|
{% for partner in consulting_partners %}
|
|
<option value="{{ partner.id }}" {% if request.GET.consulting_partner == partner.id|stringformat:'i' %}selected{% endif %}>
|
|
{{ partner.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cloud Providers Filter -->
|
|
<div class="pt-24 mb-24">
|
|
<div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
|
|
<h3 class="sidebar-title mb-0">Cloud Providers</h3>
|
|
</div>
|
|
<div>
|
|
<select class="form-select" id="cloud_provider" name="cloud_provider" @change="submitForm()">
|
|
<option value="">All Providers</option>
|
|
{% for provider in cloud_providers %}
|
|
<option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
|
|
{{ provider.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Actions -->
|
|
<div class="d-flex gap-2">
|
|
<a href="{% url 'services:service_list' %}" class="btn btn-outline-secondary btn-sm">Clear</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Listing -->
|
|
<div class="section__grid flex-1">
|
|
<div class="row">
|
|
{% for service in services %}
|
|
<div class="col-12 col-md-6 col-lg-4 mb-30">
|
|
<div class="card {% if service.is_featured %}card-featured{% endif %} h-100 d-flex flex-column">
|
|
{% if service.logo or service.is_featured %}
|
|
<div class="d-flex justify-content-between">
|
|
{% if service.logo %}
|
|
<div class="card__image flex-shrink-0">
|
|
<a href="{{ service.get_absolute_url }}">
|
|
<img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="img-fluid">
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% if service.is_featured %}
|
|
<div>
|
|
<a class="btn btn-primary btn-sm" href="">Featured</a>
|
|
</div>
|
|
{% elif service.is_coming_soon %}
|
|
<div>
|
|
<a class="btn btn-secondary btn-sm" href="">Coming Soon</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="card__content d-flex flex-column flex-grow-1">
|
|
<div class="card__header">
|
|
<h3 class="card__title"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h3>
|
|
<p class="card__subtitle">
|
|
{% for category in service.categories.all %}
|
|
<span>{{ category.full_path }}</span>
|
|
{% endfor %}
|
|
</p>
|
|
</div>
|
|
<div class="card__desc flex-grow-1">
|
|
<p class="mb-0">{{ service.description|safe|truncatewords:30 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<div class="col-12 col-md-6 col-lg-4 mb-30">
|
|
<div class="card h-100 d-flex flex-column">
|
|
<div class="d-flex justify-content-between">
|
|
<div class="card__image flex-shrink-0">
|
|
<a href="{% url 'services:contact' %}">
|
|
<img src="{% static "img/sir-vala.png" %}" alt="missing service logo" class="img-fluid">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card__content d-flex flex-column flex-grow-1">
|
|
<div class="card__header">
|
|
<h3 class="card__title"><a href="{% url 'services:contact' %}" class="text-decoration-none">Missing Service?</a></h3>
|
|
</div>
|
|
<div class="card__desc flex-grow-1">
|
|
<p class="mb-0">Your favorite service is missing? Let us know which one!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %} |