complete rework of offerings
This commit is contained in:
parent
84e25c82d1
commit
20f27bd6b5
16 changed files with 313 additions and 294 deletions
|
|
@ -33,7 +33,6 @@
|
|||
<ul class="navbar__menu menu mr-lg-27">
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:homepage' %}">Home</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:service_list' %}">Services</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:offering_list' %}">Offerings</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:provider_list' %}">Cloud Providers</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:partner_list' %}">Consulting Partners</a></li>
|
||||
</ul>
|
||||
|
|
@ -125,7 +124,6 @@
|
|||
<ul class="list-unstyled space-y-20 fs-15 fw-medium ps-0">
|
||||
<li><a href="{% url 'services:homepage' %}">Home</a></li>
|
||||
<li><a href="{% url 'services:service_list' %}">Services</a></li>
|
||||
<li><a href="{% url 'services:offering_list' %}">Offerings</a></li>
|
||||
<li><a href="{% url 'services:provider_list' %}">Cloud Providers</a></li>
|
||||
<li><a href="{% url 'services:partner_list' %}">Consulting Partners</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -91,15 +91,6 @@
|
|||
<div class="mb-24">
|
||||
<div class="bg-white border-all rounded-7 p-20">
|
||||
<h3 class="text-purple fs-18 fw-semibold lh-1-7 mb-0">{{ selected_plan.name }}</h3>
|
||||
{% if selected_plan.prices.exists %}
|
||||
<div>
|
||||
<ul class="list-unstyled text-gray-500 fs-14 lh-1-7 ps-0 mb-0">
|
||||
{% for price in selected_plan.prices.all %}
|
||||
<li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -12,25 +12,28 @@
|
|||
<!-- Logo -->
|
||||
<div class="mb-40 border rounded-4 p-4 d-flex align-items-center justify-content-center" style="min-height: 160px;">
|
||||
{% if offering.service.logo %}
|
||||
<img class="img-fluid w-100 w-lg-auto" src="{{ offering.service.logo.url }}"
|
||||
alt="{{ offering.service.name }} logo" style="max-height: 120px; object-fit: contain;">
|
||||
<a href="{{ offering.service.get_absolute_url }}">
|
||||
<img class="img-fluid w-100 w-lg-auto" src="{{ offering.service.logo.url }}"
|
||||
alt="{{ offering.service.name }} logo" style="max-height: 120px; object-fit: contain;">
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Highlights -->
|
||||
{% if offering.highlights.exists %}
|
||||
<!-- External Links for Offering -->
|
||||
{% if offering.external_links.exists %}
|
||||
<div class="mb-40">
|
||||
<h3 class="fw-semibold mb-12">Highlights</h3>
|
||||
<h3 class="fw-semibold mb-12">External Links</h3>
|
||||
<ul class="list-unstyled space-y-12 fs-19 ps-0">
|
||||
{% for highlight in offering.highlights.all %}
|
||||
{% for link in offering.external_links.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="{{ 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-star-fill" viewBox="0 0 16 16">
|
||||
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" fill="#9A63EC"/>
|
||||
</svg>
|
||||
<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>{{ highlight.name }}</span>
|
||||
<span>{{ link.description }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
@ -58,28 +61,6 @@
|
|||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- External Links -->
|
||||
{% if offering.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 offering.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>
|
||||
|
||||
|
|
@ -90,12 +71,12 @@
|
|||
<div class="pt-60 pb-lg-60 w-lg-70">
|
||||
<header>
|
||||
{% if offering.cloud_provider.logo %}
|
||||
<p class="mb-6"><a href="{{ offering.cloud_provider.website }}" target="_blank">
|
||||
<p class="mb-6"><a href="{{ offering.cloud_provider.get_absolute_url }}">
|
||||
<img class="img-fluid" src="{{ offering.cloud_provider.logo.url }}"
|
||||
alt="{{ offering.cloud_provider.name }} logo" style="max-height: 40px;"></a>
|
||||
</p>
|
||||
{% endif %}
|
||||
<h2 class="fs-50 fw-semibold lh-1 mb-12">{{ offering.service.name }}</h2>
|
||||
<h2 class="fs-50 fw-semibold lh-1 mb-12"><a href="{{ offering.service.get_absolute_url }}" class="text-decoration-none">{{ offering.service.name }}</a></h2>
|
||||
</header>
|
||||
<div class="fs-19 text-gray-500">
|
||||
{% for category in offering.service.categories.all %}
|
||||
|
|
@ -107,12 +88,29 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<!-- Service Description -->
|
||||
{% if offering.service.description %}
|
||||
<div>
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Service Overview</h3>
|
||||
<div class="fs-19 text-gray-500">
|
||||
{{ offering.service.description|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Offering Description -->
|
||||
<div class="pt-40 pt-lg-34">
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Overview</h3>
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Offering</h3>
|
||||
{% if offering.description %}
|
||||
<div class="fs-19 text-gray-500">
|
||||
{{ offering.description|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if offering.offer_description %}
|
||||
<div class="fs-19 text-gray-500">
|
||||
{{ offering.offer_description.get_full_text|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Plans -->
|
||||
|
|
@ -122,18 +120,18 @@
|
|||
{% for plan in offering.plans.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="text-black mb-20">
|
||||
<p class="mb-0">{{ plan.description|safe }}</p>
|
||||
</div>
|
||||
<div class="bg-white border-all rounded-7 p-20 mb-20">
|
||||
<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>
|
||||
{% if plan.plan_description %}
|
||||
<div class="text-black mb-20">
|
||||
{{ plan.plan_description.text|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if plan.description %}
|
||||
<div class="text-black mb-20">
|
||||
{{ plan.description|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<a class="btn btn-primary btn-lg w-100"
|
||||
|
|
|
|||
|
|
@ -184,10 +184,6 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card__desc flex-grow-1 rich-text-content">
|
||||
{{ offering.description|safe|truncatewords_html:30 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,53 +30,14 @@
|
|||
</svg>
|
||||
</div>
|
||||
<header class="mb-20">
|
||||
<h2 class="fs-32 fs-lg-40 fw-semibold mb-20">Inquiry Received Successfully!</h2>
|
||||
<h2 class="fs-32 fs-lg-40 fw-semibold mb-20">Inquiry received successfully!</h2>
|
||||
<div class="fs-base text-gray-600 w-lg-75 mx-auto">
|
||||
<p class="mb-0">Thank you for your interest in {{ service.name }}! We have received your inquiry and our team will contact you shortly. A confirmation email will be sent to your provided email address.</p>
|
||||
<p class="mb-0">Thank you for your interest in {{ service.name }}. We have received your inquiry and our team will contact you shortly. A confirmation email will be sent to your provided email address.</p>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<a href="{% url 'services:service_list' %}" class="btn btn-primary btn-lg w-100 w-md-auto" role="button">Browse More Services</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-lg-34 bg-purple-50 rounded-16 p-24 d-flex flex-column justify-content-between">
|
||||
<div class="d-flex align-items-center mb-24">
|
||||
<div class="card__image mb-0">
|
||||
{% if service.image %}
|
||||
<img class="img-fluid" src="{{ service.image.url }}" alt="{{ service.name }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card__header ps-16">
|
||||
<h3 class="card__title">{{ service.name }}</h3>
|
||||
<p class="card__subtitle mb-0">{{ service.category }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% if service.description %}
|
||||
<div class="mb-24">
|
||||
<div class="text-black">
|
||||
<p class="mb-0">{{ service.description|safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if service.pricing_plans %}
|
||||
<div>
|
||||
{% for plan in service.pricing_plans %}
|
||||
<div class="bg-white border-all rounded-7 p-20 {% if not forloop.last %}mb-12{% endif %}">
|
||||
<h3 class="text-purple fs-18 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
|
||||
<div>
|
||||
<ul class="list-unstyled text-gray-500 fs-14 lh-1-7 ps-0 mb-0">
|
||||
{% for price in plan.prices %}
|
||||
<li>{{ price.amount }} {{ price.currency }} per {{ price.interval }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue