Add a description to the ticket page

content/english/tickets/index.md

@@ -16,6 +16,8 @@ features:
       img: "/images/devon_starfield.png"
       end_img: "/images/software-15.png"
       end_img_class: "relative h-96 bg-contain bg-bottom bg-repeat-x"
+    description: |
+      Handmade Seattle is a fully hybrid conference, and both physical and online tickets are available. Buying a ticket supports the conference and gains you access to the private chat server used for speaker Q&A, the virtual job fair, and more.
     tickets:
       - title: "Physical Track"
         title_class: "text-white"

layouts/partials/components/ticket_list.html

@@ -1,13 +1,18 @@
 {{ if .tickets }}
-<div class="container mx-auto px-4 py-12">
+<div class="container max-w-3xl mx-auto px-4 py-12">
   <div class="w-full">
+    {{ with .description }}
+      <div class="my-4">
+        {{ . | markdownify }}
+      </div>
+    {{ end }}
     {{ $tickets := .tickets }}
     {{ range $index, $ticket := $tickets }}
     <h2 class="text-3xl font-bold {{ $ticket.title_class }}">{{ $ticket.title }}</h2>
     <h4 class="text-xl {{ $ticket.subtitle_class }}">{{ $ticket.subtitle }}</h2>
     {{/*  <div class="columns-3s">  */}}
     <div id="pricing"
-        class="grid grid-cols-1 gap-4 mt-4 leading-7 text-gray-900 border-0 border-gray-200 sm:mt-6 sm:gap-6 md:mt-8 md:gap-4 lg:grid-cols-2 {{ $ticket.section_class }}">
+        class="grid grid-cols-1 gap-4 leading-7 text-gray-900 border-0 border-gray-200 py-4 sm:gap-6 md:gap-4 lg:grid-cols-2 {{ $ticket.section_class }}">
       {{ range $option_index, $option := $ticket.options }}
 
       <!-- Ticket options -->
@@ -34,7 +39,7 @@
         </ul>
       </div>  */}}
 
-    <div class="relative z-10 flex flex-col items-center max-w-md p-4 mx-auto my-0 border border-solid {{ $option.ticket_class }} rounded-lg sm:my-0 sm:p-6 md:my-4 md:p-6">
+    <div class="relative z-10 flex flex-col items-center max-w-md p-4 mx-auto border border-solid {{ $option.ticket_class }} rounded-lg sm:p-6 md:p-6">
     <p class="m-0 text-lg leading-tight tracking-tight border-0 border-gray-200 {{ $option.name_class }}">
       {{ $option.name | markdownify }}
     </p>