WIP: initial styling for service detail page
This commit is contained in:
parent
4e2935da1a
commit
56dc88bab4
1 changed files with 114 additions and 140 deletions
|
|
@ -1,91 +1,117 @@
|
|||
{% extends 'services/base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-start mb-4">
|
||||
<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">
|
||||
{% if service.logo %}
|
||||
<img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="me-4"
|
||||
style="max-height: 120px; max-width: 240px; object-fit: contain;">
|
||||
<img class="img-fluid w-100 w-lg-auto" src="{{ service.logo.url }}" alt="{{ service.name }} logo">
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Highlights -->
|
||||
{% if service.highlights.exists %}
|
||||
<div class="mb-40">
|
||||
<h3 class="fw-semibold mb-12">Highlights</h3>
|
||||
<ul class="list-unstyled space-y-12 fs-19 ps-0">
|
||||
{% for highlight in service.highlights.all %}
|
||||
<li>
|
||||
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="">
|
||||
<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>
|
||||
</span>
|
||||
<span>{{ highlight.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Categories -->
|
||||
<div>
|
||||
<h3 class="fw-semibold mb-12">Categories</h3>
|
||||
<div>
|
||||
<h2 class="card-title mb-3">{{ service.name }}</h2>
|
||||
<div class="mb-3">
|
||||
{% for category in service.categories.all %}
|
||||
<span class="badge bg-secondary me-1">{{ category.full_path }}</span>
|
||||
<a class="btn btn-tertiary btn-sm mr-12" href="">{{ category.full_path }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-content mb-4">
|
||||
<!-- 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>
|
||||
<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 }}
|
||||
</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 %}
|
||||
<h3>Features</h3>
|
||||
<div class="rich-text-content mb-4">
|
||||
<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>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Cloud Provider Offerings -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="mb-4">Available Offerings</h3>
|
||||
<div class="row row-cols-1 row-cols-md-2 g-4">
|
||||
<!-- 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">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<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 src="{{ offering.cloud_provider.logo.url }}"
|
||||
alt="{{ offering.cloud_provider.name }} logo"
|
||||
class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
|
||||
{% endif %}
|
||||
<div>
|
||||
<h5 class="card-title mb-0">
|
||||
<a href="{{ offering.cloud_provider.get_absolute_url }}" class="text-decoration-none">
|
||||
{{ offering.cloud_provider.name }}
|
||||
</a>
|
||||
</h5>
|
||||
{% if offering.cloud_provider.website %}
|
||||
<a href="{{ offering.cloud_provider.website }}" class="text-muted small" target="_blank">
|
||||
Visit Provider Website
|
||||
</a>
|
||||
<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>
|
||||
|
||||
<div class="rich-text-content mb-3">
|
||||
{{ offering.description|safe|truncatewords_html:50 }}
|
||||
</div>
|
||||
|
||||
{% if offering.plans.exists %}
|
||||
<div class="mb-3">
|
||||
<h6>Plans:</h6>
|
||||
{% for plan in offering.plans.all %}
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">{{ plan.name }}</h6>
|
||||
<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 %}
|
||||
<div class="small text-muted">
|
||||
{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}
|
||||
</div>
|
||||
<li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}"
|
||||
class="btn btn-success">
|
||||
<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
|
||||
Order Now
|
||||
{% elif offering.status == 'planned' %}
|
||||
Show Interest
|
||||
{% else %}
|
||||
|
|
@ -99,67 +125,15 @@
|
|||
<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-success">Show Interest</a>
|
||||
<a href="{% url 'services:create_lead' service.slug %}" class="btn btn-primary">Show Interest</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consulting Partners -->
|
||||
{% if service.consulting_partners.exists %}
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="mb-4">Consulting Partners</h3>
|
||||
<div class="row row-cols-1 row-cols-md-3 g-4">
|
||||
{% for partner in service.consulting_partners.all %}
|
||||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
{% if partner.logo %}
|
||||
<img src="{{ partner.logo.url }}"
|
||||
alt="{{ partner.name }} logo"
|
||||
class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
|
||||
{% endif %}
|
||||
<div>
|
||||
<h5 class="card-title mb-0">
|
||||
<a href="{{ partner.get_absolute_url }}" class="text-decoration-none">
|
||||
{{ partner.name }}
|
||||
</a>
|
||||
</h5>
|
||||
{% if partner.website %}
|
||||
<a href="{{ partner.website }}" class="text-muted small" target="_blank">
|
||||
Visit Website
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- External Links -->
|
||||
{% if service.external_links.exists %}
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h3>Additional Information</h3>
|
||||
<div class="list-group">
|
||||
{% for link in service.external_links.all %}
|
||||
<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer"
|
||||
class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
{{ link.description }}
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue