From cbb5a4a1cb48413c19c52164357be58611990f2a Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Wed, 7 May 2025 09:32:06 +0200
Subject: [PATCH 1/3] add more prominent cta to service detail

---
 .../templates/services/offering_detail.html   |  2 +-
 .../templates/services/service_detail.html    | 42 ++++++++++++-------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/hub/services/templates/services/offering_detail.html b/hub/services/templates/services/offering_detail.html
index a7c34cc..6951f75 100644
--- a/hub/services/templates/services/offering_detail.html
+++ b/hub/services/templates/services/offering_detail.html
@@ -143,7 +143,7 @@
                     {% endif %}
 
                     <!-- Plans -->
-                    {% if  offering.plans.all %}
+                    {% if offering.plans.all %}
                     <div class="pt-24" id="plans" style="scroll-margin-top: 30px;">
                         <h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
                         <div class="row">
diff --git a/hub/services/templates/services/service_detail.html b/hub/services/templates/services/service_detail.html
index 6de1e86..ac7f104 100644
--- a/hub/services/templates/services/service_detail.html
+++ b/hub/services/templates/services/service_detail.html
@@ -100,22 +100,32 @@
             <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 class="pt-60 pb-lg-60">
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <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>
+                                {% if service.tagline %}
+                                <div class="mt-3">
+                                    <p class="fst-italic text-muted fs-19">
+                                        "{{ service.tagline }}"
+                                    </p>
+                                </div>
+                                {% endif %}
+                            </div>
+
+                            <div class="col-lg-4 d-flex align-items-center justify-content-lg-end mt-4 mt-lg-0">
+                                <a href="#getit" class="btn btn-primary btn-lg px-4 py-2 fw-semibold d-flex align-items-center">
+                                    <i class="bi bi-cart me-2"></i>Get It
+                                </a>
+                            </div>
                         </div>
-                        {% if service.tagline %}
-                        <div class="mt-3">
-                            <p class="fst-italic text-muted fs-19">
-                                "{{ service.tagline }}"
-                            </p>
-                        </div>
-                        {% endif %}
                     </div>
 
                     <!-- Description -->
@@ -137,7 +147,7 @@
                     {% endif %}
 
                     <!-- CTA -->
-                    <div class="pt-24">
+                    <div class="pt-24" id="getit">
                         <div class="page-action">
                             {% if service.offerings.exists %}
                                 <h3 class="fs-24 fw-semibold lh-1 mb-12">Get it on</h3>

From c22d75fe2b6c002bad9a3114e855ae80650988f8 Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Wed, 7 May 2025 09:48:17 +0200
Subject: [PATCH 2/3] style get it on buttons with csp logo as card

---
 .../templates/services/service_detail.html    | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/hub/services/templates/services/service_detail.html b/hub/services/templates/services/service_detail.html
index ac7f104..2672e32 100644
--- a/hub/services/templates/services/service_detail.html
+++ b/hub/services/templates/services/service_detail.html
@@ -150,17 +150,36 @@
                     <div class="pt-24" id="getit">
                         <div class="page-action">
                             {% if service.offerings.exists %}
-                                <h3 class="fs-24 fw-semibold lh-1 mb-12">Get it on</h3>
-                                <p>Choose one of our trusted service providers</p>
-                                <div class="d-flex flex-wrap gap-3">
-                                    {% for offering in service.offerings.all %}
-                                    {% if not offering.cloud_provider.disable_listing %}
-                                        <a class="btn btn-primary btn-lg w-auto" 
-                                            href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}"
-                                            role="button">{{ offering.cloud_provider.name }}</a>
-                                    {% endif %}
-                                    {% endfor %}
-                                </div>
+                            <h3 class="fs-24 fw-semibold lh-1 mb-12">Get it on</h3>
+                            <p>Choose one of our trusted service providers</p>
+                            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+                                {% for offering in service.offerings.all %}
+                                {% if not offering.cloud_provider.disable_listing %}
+                                    <div class="col">
+                                        <a href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}" 
+                                           class="text-decoration-none" style="display: block;">
+                                            <div class="card h-100 clickable-card">
+                                                <div class="card-body text-center">
+                                                    {% if offering.cloud_provider.logo %}
+                                                        <div class="mb-3 d-flex align-items-center justify-content-center" style="height: 80px;">
+                                                            <img src="{{ offering.cloud_provider.logo.url }}" alt="{{ offering.cloud_provider.name }} logo" 
+                                                                 class="img-fluid" style="max-height: 60px; object-fit: contain;">
+                                                        </div>
+                                                    {% else %}
+                                                        <div class="mb-3 d-flex align-items-center justify-content-center" style="height: 80px;">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-cloud-fill text-primary" 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"/>
+                                                            </svg>
+                                                        </div>
+                                                    {% endif %}
+                                                    <h5 class="card-title mb-0 fw-semibold">{{ offering.cloud_provider.name }}</h5>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </div>
+                                {% endif %}
+                                {% endfor %}
+                            </div>
                             {% else %}
                                 <div class="pt-40">
                                     <h3 class="fs-24 fw-semibold lh-1 mb-12">Contact Us About This Service</h3>

From 290c4fb63eaa5831faad47e030d4d2b034841924 Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Wed, 7 May 2025 09:53:34 +0200
Subject: [PATCH 3/3] get it button on offering details

---
 .../templates/services/offering_detail.html   | 42 ++++++++++++-------
 .../templates/services/service_detail.html    |  2 +-
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/hub/services/templates/services/offering_detail.html b/hub/services/templates/services/offering_detail.html
index 6951f75..5d71aa8 100644
--- a/hub/services/templates/services/offering_detail.html
+++ b/hub/services/templates/services/offering_detail.html
@@ -96,23 +96,33 @@
             <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"><a href="{{ offering.service.get_absolute_url }}" class="text-decoration-none">Managed {{ offering.service.name }}</a></h2>
-                        </header>
-                        <div class="fs-19 text-gray-500">
-                            {% for category in offering.service.categories.all %}
-                                <button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
-                            {% endfor %}
-                            <button class="btn btn-tertiary btn-sm mr-12">Managed by VSHN</button>
-                            <button class="btn btn-tertiary btn-sm mr-12">Running on {{ offering.cloud_provider.name }}</button>
+                    <div class="pt-60 pb-lg-60">
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <header>
+                                    <h2 class="fs-50 fw-semibold lh-1 mb-12"><a href="{{ offering.service.get_absolute_url }}" class="text-decoration-none">Managed {{ offering.service.name }}</a></h2>
+                                </header>
+                                <div class="fs-19 text-gray-500">
+                                    {% for category in offering.service.categories.all %}
+                                        <button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
+                                    {% endfor %}
+                                    <button class="btn btn-tertiary btn-sm mr-12">Managed by VSHN</button>
+                                    <button class="btn btn-tertiary btn-sm mr-12">Running on {{ offering.cloud_provider.name }}</button>
+                                </div>
+                    
+                                {% if offering.short_description %}
+                                <div class="fs-19 text-gray-500">
+                                    {{ offering.short_description|safe }}
+                                </div>
+                                {% endif %}
+                            </div>
+                    
+                            <div class="col-lg-4 d-flex align-items-center justify-content-lg-end mt-4 mt-lg-0">
+                                <a href="#plans" class="btn btn-primary btn-lg px-4 py-2 fw-semibold d-flex align-items-center">
+                                    <i class="bi bi-cart me-2"></i>Get It
+                                </a>
+                            </div>
                         </div>
-
-                        {% if offering.short_description %}
-                        <div class="fs-19 text-gray-500">
-                            {{ offering.short_description|safe }}
-                        </div>
-                        {% endif %}
                     </div>
 
                     {% if offering.service.description %}
diff --git a/hub/services/templates/services/service_detail.html b/hub/services/templates/services/service_detail.html
index 2672e32..ca73351 100644
--- a/hub/services/templates/services/service_detail.html
+++ b/hub/services/templates/services/service_detail.html
@@ -156,7 +156,7 @@
                                 {% for offering in service.offerings.all %}
                                 {% if not offering.cloud_provider.disable_listing %}
                                     <div class="col">
-                                        <a href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}" 
+                                        <a href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}#plans"
                                            class="text-decoration-none" style="display: block;">
                                             <div class="card h-100 clickable-card">
                                                 <div class="card-body text-center">