Final touches for offers

templates/offers.html

@@ -3,7 +3,7 @@
 {% import "macros.html" as macros %}
 
 {% macro offer(image_filename, name, description) %}
-    <div class="grid grid-cols-1 gap-y-3 gap-x-8 items-center my-16 mb-5 md:grid-cols-2">
+    <div class="grid grid-cols-1 gap-x-8 items-center py-10 md:grid-cols-2">
         {% set dir = page.path | trim_start_matches(pat="/") %}
         {% set image_path = dir ~ image_filename %}
         {% set image = resize_image(path=image_path, width=400, height=400, op="fill") %}
@@ -18,7 +18,7 @@
 {% endmacro %}
 
 {% macro prices_table(caption, names, prices) %}
-    <div class="py-5 text-center">
+    <div class="pb-8 text-center">
         <h3>{{ caption }}</h3>
 
         <div class="flex justify-center text-center">
@@ -34,13 +34,12 @@
             </table>
         </div>
     </div>
-
-    <hr>
 {% endmacro %}
 
 {% block content %}
     <h1 class="text-center">Massagen</h1>
 
+    <div class="divide-y">
         {{ self::offer(image_filename="Rücken-_und_Nackenmassage.jpg",
                 name="Rücken- und Nackenmassage mit Öl",
                 description="Dieser zentrale Bereich des Körpers ist täglich vielen Belastungen ausgesetzt.
@@ -68,13 +67,14 @@
         {{ self::offer(image_filename="Fußmassage.jpg",
                 name="Fußmassage",
                 description="Eine Fußmassage kann eine wirkliche tiefgreifende Erfahrung sein. Sie werden merken, wie sehr sich Ihre Füße eine Massage verdient haben. Die Fußsohle wird als der Spiegel der Gesundheit des gesamten Körpers angesehen.") }}
+    </div>
 
     {{ self::prices_table(caption="Massage-Preise",
         names=["30 Minuten", "45 Minuten", "60 Minuten", "75 Minuten", "90 Minuten", "100 Minuten", "120 Minuten"],
         prices=["35€", "47€", "57€", "67€", "77€", "82€", "97€"]) }}
 
-
+    <div class="bg-gray-100 rounded-lg px-3">
-    <h1 class="text-center">Spezielle Massagen</h1>
+        <h1 class="text-center pt-5">Spezielle Massagen</h1>
 
         {{ self::offer(image_filename="Bambus-Massage.jpeg",
                 name="Bambus-Massage",
@@ -87,18 +87,20 @@
         {{ self::prices_table(caption="Bambus-Massage-Preise",
                 names=["60 Minuten", "90 Minuten"],
                 prices=["67€", "87€"]) }}
+    </div>
 
 
-    <h1 class="text-center">Fußpflege</h1>
+    <h1 class="text-center pt-5">Fußpflege</h1>
 
+    <div class="divide-y">
         {{ self::offer(image_filename="Medizinische_Fußpflege.jpg",
                 name="Medizinische Fußpflege",
                 description="Inkl. Fuß-Desinfektion, Nägel schneiden & bearbeiten, Hühneraugen-, Hornhaut- und Schwielenentfernung, Eincremen ab 33€") }}
 
-
         {{ self::offer(image_filename="Wellness_Fußpflege.jpg",
                 name="Wellness-Fußpflege",
                 description="Fußbad mit Kräuter, med. Pflege, Peeling, leichte Massage ab 57€") }}
+    </div>
 
     {{ self::prices_table(caption="Zusätzliche Fußpflege-Angebote",
         names=["Fußnägel lackieren", "Maniküre"],
@@ -108,7 +110,7 @@
         {{ macros::btn(link=get_url(path='@/termin/index.md') , text="Terminvereinbarung") }}
     </div>
 
-    <div class="my-6 text-xl font-bold text-center text-red-500">
+    <div class="mt-6 mb-4 text-xl font-bold text-center text-red-500">
         Wichtig: Jegliche Nachfrage nach Erotik ist unerwünscht und respektlos!
     </div>
 {% endblock %}