Add tickets

Author: LMBishop

_includes/nav.html

@@ -4,6 +4,7 @@
     <a href="/#sponsors">Sponsors</a>
     <a href="/#partners">Partners</a>
     <a href="/#faqs">FAQs</a>
+    <a class="tickets" href="/#tickets">Tickets</a>
   </nav>
   {% if include.logo %}
   <a href="/">

_redirects

@@ -2,3 +2,4 @@
 /privacy /privacy-policy
 /conduct /code-of-conduct
 /coc     /code-of-conduct
+/tickets https://ti.to/birminghack/1

css/main.scss

@@ -4,6 +4,7 @@
 @import url("/css/reset.css");
 @import url("/assets/fonts/iosevka/IosevkaSs08Web.css");
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
 
 :root {
     // --font-sans-serif: 'Hind', 'Noto Sans', 'Segoe UI', 'Chivo', sans-serif;
@@ -18,6 +19,7 @@
     --color-line: #3a3533;
 
     --color-primary: #50c878;
+    --color-primary-alt: #359f58;
     --color-heading: #eee;
     --color-text: #fff;
     --color-text-muted: #666;
@@ -183,19 +185,25 @@ nav {
     gap: 1rem;
     flex-wrap: wrap;
     justify-content: flex-end;
+
 }
 
 a:link, a:visited {
-    color: var(--color-primary)
+    color: var(--color-primary);
+    text-decoration: none;
 }
 
 nav a:link, nav a:visited  {
     color: var(--color-text);
-    font-weight: 700;
     text-decoration: none;
+
+    &.tickets {
+        font-weight: 700;
+        color: var(--color-primary);
+    }
 }
 
-nav a:hover {
+nav a:hover, a:hover {
     text-decoration: underline;
 }
 
@@ -256,6 +264,35 @@ div.schedule {
     }
 }
 
+div.tickets {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 2px solid var(--color-line);
+    border-bottom: 2px solid var(--color-line);
+    
+    div.tickets-description {
+        display: flex;
+        flex-direction: column;
+
+        p.tickets-title {
+            font-size: var(--text-large);
+            font-family: var(--font-monospace);
+            font-weight: 500;
+        }
+    }
+    a {
+        font-family: var(--font-monospace);
+        font-weight: 700;
+        font-size: var(--text-larger);
+        flex-shrink: 0;
+        background-color: var(--color-primary-alt);
+        color: var(--color-text);
+        padding: 0.5rem;
+    }
+}
+
 div.partners-container {
     width: 100%;
     padding: 1rem 0 0 0;
@@ -345,6 +382,7 @@ div.footer-content {
 
         a {
             color: var(--color-text-muted);
+            text-decoration: underline;
         }
 
         .organised-by {
@@ -367,7 +405,6 @@ div.footer-content {
 
         a {
             color: var(--color-text);
-            text-decoration: none;
         }
 
         span {
@@ -409,6 +446,10 @@ div.footer-content {
     div.navbar {
         padding: 1rem 1rem 0 1rem;
     }
+
+    div.tickets {
+        flex-direction: column;
+    }
 
     div.schedule {
         div.days {

index.html

@@ -51,6 +51,9 @@
         title: Doors close
   final: false
   notes: "birmingHack takes place over both days of the weekend. The event will end no later than 5pm on Sunday."
+tickets:
+  released: true
+  link: https://ti.to/birminghack/1
 sponsors:
   - name: Me
     logo: asdf
@@ -102,7 +105,7 @@
 
   - question: When will tickets be available?
     answer: |
-      Tickets will be available soon! When they do so, we will post an update on Discord and Instagram.
+      Tickets are now available!
 
   - question: Why should I attend?
     answer: |
@@ -166,6 +169,18 @@ <h3>Welcome to birmingHack!</h3>
   have fun!</p> 
 </div>
 
+{% if page.tickets %}
+<div id="tickets" class="tickets section">
+  <div class="tickets-description">
+    <p class="tickets-title"><i class="fa-solid fa-ticket"></i> Tickets now available!</p>
+    <p>
+      You can now register for birmingHack 2025! Please note that tickets are limited, so make sure to register as soon as possible.
+    </p>
+  </div>
+  <a href="/tickets">Register <i class="fa-solid fa-arrow-right-long"></i></a>
+</div>
+{% endif %}
+
 <div id="sponsors" class="sponsors section">
   <h2 class="section-title">Sponsors</h2>
   <div class="partners-container">
@@ -243,7 +258,6 @@ <h3 class="header">{{ day.day }}</h3>
 <div id="partners" class="partners section">
   <h2 class="section-title">Partners</h2>
   <div class="partners-container">
-    <!-- TBA -->
     {% for partner in page.partners %}
       <div class="partner" style="{{ 'background-color: #' | append: partner.colour }}">
         <a href="{{ partner.url }}" target="_blank" title="{{ partner.name }}">