style service detail page
This commit is contained in:
parent
d42f59f982
commit
3efa5326c6
2 changed files with 54 additions and 73 deletions
|
|
@ -8,26 +8,26 @@
|
|||
<div class="col-12 col-lg-3">
|
||||
<div class="pr-lg-6">
|
||||
<!-- Logo -->
|
||||
<div class="mb-40">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- Highlights -->
|
||||
{% if service.highlights.exists %}
|
||||
<!-- Offerings -->
|
||||
{% if service.offerings.exists %}
|
||||
<div class="mb-40">
|
||||
<h3 class="fw-semibold mb-12">Highlights</h3>
|
||||
<h3 class="fw-semibold mb-12">Cloud Providers</h3>
|
||||
<ul class="list-unstyled space-y-12 fs-19 ps-0">
|
||||
{% for highlight in service.highlights.all %}
|
||||
{% for offering in service.offerings.all %}
|
||||
<li>
|
||||
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="">
|
||||
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{% url 'services:offering_detail' offering.slug %}">
|
||||
<span class="pr-10">
|
||||
<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0489 0.709522C12.3483 -0.211788 13.6517 -0.211789 13.9511 0.709521L16.1432 7.45623C16.2771 7.86825 16.661 8.14722 17.0943 8.14722H24.1882C25.1569 8.14722 25.5597 9.38683 24.7759 9.95623L19.0369 14.1259C18.6864 14.3806 18.5397 14.8319 18.6736 15.244L20.8657 21.9907C21.1651 22.912 20.1106 23.6781 19.3269 23.1087L13.5878 18.939C13.2373 18.6844 12.7627 18.6844 12.4122 18.939L6.67312 23.1087C5.88941 23.6781 4.83493 22.912 5.13428 21.9907L7.32642 15.244C7.46029 14.8319 7.31363 14.3806 6.96315 14.1259L1.22405 9.95623C0.440337 9.38683 0.843112 8.14722 1.81184 8.14722H8.90575C9.33897 8.14722 9.72293 7.86826 9.8568 7.45623L12.0489 0.709522Z" fill="#9A63EC"/>
|
||||
<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>{{ highlight.name }}</span>
|
||||
<span>{{ offering.cloud_provider.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
@ -35,15 +35,48 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Categories -->
|
||||
<div>
|
||||
<h3 class="fw-semibold mb-12">Categories</h3>
|
||||
<div>
|
||||
{% for category in service.categories.all %}
|
||||
<a class="btn btn-tertiary btn-sm mr-12" href="">{{ category.full_path }}</a>
|
||||
<!-- 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>
|
||||
|
||||
|
|
@ -54,10 +87,11 @@
|
|||
<div class="pt-60 pb-lg-60 w-lg-70">
|
||||
<header>
|
||||
<h2 class="fs-50 fw-semibold lh-1 mb-12">{{ service.name }}</h2>
|
||||
<h4 class="text-primary fs-24 fw-normal">by {{ service.provider.name }}</h4>
|
||||
</header>
|
||||
<div class="fs-19 text-gray-500">
|
||||
{{ service.short_description|safe }}
|
||||
{% for category in service.categories.all %}
|
||||
<button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -78,59 +112,6 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Offerings -->
|
||||
<div class="pt-24">
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Available Offerings</h3>
|
||||
<div class="row">
|
||||
{% for offering in service.offerings.all %}
|
||||
<div class="col-12 col-lg-6 {% if not forloop.last %}mb-20 mb-lg-0{% endif %}">
|
||||
<div class="bg-purple-50 rounded-16 border-all p-24">
|
||||
<div class="mb-6">
|
||||
{% if offering.cloud_provider.logo %}
|
||||
<img class="img-fluid" src="{{ offering.cloud_provider.logo.url }}" alt="{{ offering.cloud_provider.name }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-black mb-20">
|
||||
<p class="mb-0">{{ offering.description|safe|truncatewords_html:50 }}</p>
|
||||
</div>
|
||||
|
||||
{% for plan in offering.plans.all %}
|
||||
<div class="bg-white border-all rounded-7 p-20 {% if not forloop.last %}mb-12{% else %}mb-20{% endif %}">
|
||||
<h3 class="text-purple fs-22 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
|
||||
<div>
|
||||
<ul class="list-unstyled text-gray-500 fs-19 lh-1-7 ps-0 mb-0">
|
||||
{% for price in plan.prices.all %}
|
||||
<li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div>
|
||||
<a class="btn btn-primary btn-lg w-100" href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}">
|
||||
{% if offering.status == 'available' %}
|
||||
Order Now
|
||||
{% elif offering.status == 'planned' %}
|
||||
Show Interest
|
||||
{% else %}
|
||||
Request Information
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info d-flex justify-content-between align-items-center">
|
||||
<span>No offerings available yet.</span>
|
||||
<a href="{% url 'services:create_lead' service.slug %}" class="btn btn-primary">Show Interest</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@
|
|||
{% 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 }}">{{ service.name }}</a></h3>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue