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] 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>