website/hub/services/templates/services/service_detail.html

143 lines
No EOL
7.9 KiB
HTML

{% extends 'services/base.html' %}
{% block title %}Service {{ service.name }}{% endblock %}
{% block content %}
<section class="section">
<div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
<div class="row">
<!-- Left Sidebar -->
<div class="col-12 col-lg-3">
<div class="pr-lg-6">
<!-- Logo -->
<div class="mb-40 border rounded-4 p-4 d-flex align-items-center justify-content-center" style="min-height: 160px;">
{% if service.logo %}
<img class="img-fluid w-100 w-lg-auto" src="{{ service.logo.url }}" alt="{{ service.name }} logo" style="max-height: 120px; object-fit: contain;">
{% endif %}
</div>
<!-- Offerings -->
{% if service.offerings.exists %}
<div class="mb-40">
<h3 class="fw-semibold mb-12">Cloud Providers</h3>
<ul class="list-unstyled space-y-12 fs-19 ps-0">
{% for offering in service.offerings.all %}
<li>
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}">
<span class="pr-10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-fill" viewBox="0 0 16 16">
<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383" fill="#9A63EC"/>
</svg>
</span>
<span>{{ offering.cloud_provider.name }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- Consulting Partners -->
{% if service.consulting_partners.exists %}
<div class="mb-40">
<h3 class="fw-semibold mb-12">Consulting Partners</h3>
<ul class="list-unstyled space-y-12 fs-19 ps-0">
{% for partner in service.consulting_partners.all %}
<li>
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ partner.get_absolute_url }}">
<span class="pr-10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" fill="#9A63EC"/>
</svg>
</span>
<span>{{ partner.name }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- External Links -->
{% if service.external_links.exists %}
<div class="mb-40">
<h3 class="fw-semibold mb-12">External Links</h3>
<ul class="list-unstyled space-y-12 fs-19 ps-0">
{% for link in service.external_links.all %}
<li>
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ link.url }}" target="_blank">
<span class="pr-10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" fill="#9A63EC"/>
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" fill="#9A63EC"/>
</svg>
</span>
<span>{{ link.description }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
<!-- Main Content -->
<div class="col-12 col-lg-9">
<div class="pr-lg-32">
<!-- Header -->
<div class="pt-60 pb-lg-60 w-lg-70">
<header>
<h2 class="fs-50 fw-semibold lh-1 mb-12">{{ service.name }}</h2>
</header>
<div class="fs-19 text-gray-500">
{% for category in service.categories.all %}
<button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
{% endfor %}
</div>
</div>
<!-- Description -->
<div class="pt-40 pt-lg-34">
<h3 class="fs-24 fw-semibold lh-1 mb-12">Overview</h3>
<div class="fs-19 text-gray-500">
{{ service.description|safe }}
</div>
</div>
<!-- Features -->
{% if service.features %}
<div class="pt-24">
<h3 class="fs-24 fw-semibold lh-1 mb-12">Features</h3>
<div class="page-content fs-19 text-gray-500">
{{ service.features|safe }}
</div>
</div>
{% endif %}
<!-- CTA -->
{% if service.is_coming_soon %}
<div class="pt-24">
<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="{% url 'services:create_lead' service.slug %}"
role="button">I'm interested in this service</a>
</div>
</div>
{% endif %}
{% if service.offerings.exists %}
<div class="pt-24">
<div class="page-action">
{% for offering in service.offerings.all %}
<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="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}"
role="button">Get it on {{ offering.cloud_provider.name }}</a>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>
{% endblock %}