Add tickets block

_config.yml

@@ -49,6 +49,8 @@ collections:
     output: true
 #  archive:
 #    output: true
+  tickets:
+    output: true
 
 defaults:
   - scope:

_data/settings.yml

@@ -11,4 +11,5 @@ homepage_settings:
     title: "Testimonials"
   gallery:
     show: false
-    title: "Code BEAM Europe 2024"
+    title: "Code BEAM Europe 2024"
+  tickets: false

_includes/tickets-block.html

@@ -0,0 +1,38 @@
+<div class="section tickets-block" id="register">
+  <h2 class="title">Register</h2>
+<hr/>
+  <div class="items-container">
+    {% for item in site.tickets %}
+    <div class="ticket-item">
+      <div>
+        <h3>{{ item.title }}</h3>
+        <div class="price">
+          {{ item.price }}
+          {% if item.discount %}
+          <span>{{ item.discount }}</span>
+          {% endif %}
+        </div>
+
+        {% if item.description %}
+        <div class="description">
+          {{ item.description}}
+        </div>
+        {% endif %}
+        <a href="{{item.link}}" target="_blank" title="Register">Register</a>
+        <hr />
+        <div class="features">
+          {{ item.content | markdownify }}
+        </div>
+        {% if item.conditions %}
+        <div class="conditions">
+          <hr />
+          {% for condition in item.conditions %}
+          <p>{{ condition}}</p>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>

_sass/global.scss

@@ -17,6 +17,11 @@ $secondary-color-dark: #1b666e;
 $secondary-color-light: #5f61be;
 $background-color: rgb(4, 15, 12);
 $background-color-dark: #000;
+$primary: blue;
+$light-blue: #543462;
+$white: #fff;
+$brand: #4eb913;
+$secondary: #15e6ff;
 
 a {
   -webkit-transition: all 300ms ease-in-out;
@@ -55,7 +60,7 @@ a {
 
 .page-loader .load-icon:before,
 .page-loader .load-icon:after {
-  content: "";
+  content: '';
   display: block;
   position: absolute;
   background: rgba(151, 33, 248, 0.2);

_sass/tickets-block.scss

@@ -0,0 +1,130 @@
+.tickets-block {
+  font-family: 'Montserrat', sans-serif;
+  .items-container {
+    margin: 30px auto;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 1em;
+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 1.5em;
+    }
+  }
+  .ticket-item {
+    // background: linear-gradient(to left, $brand 50%, #e32dfd 50%);
+    padding: 3.5px;
+    text-align: center;
+    font-family: 'Lato';
+    border-radius: 8px;
+    background: linear-gradient(
+      -45deg,
+      $brand,
+      $secondary-color-light,
+      $secondary,
+      $secondary-color-light
+    );
+    background-size: 400% 400%;
+    position: relative;
+    z-index: 1;
+    animation: gradientAnimation 9s linear infinite;
+    @media screen and (min-width: 768px) {
+      flex: 0 1 25%;
+    }
+    &:nth-child(even) {
+      background: linear-gradient(
+        -45deg,
+        $secondary-color-light,
+        $secondary,
+        $secondary-color-light,
+        $brand
+      );
+    }
+    > div {
+      background-color: #fff;
+      padding: 30px 20px;
+      border-radius: 8px;
+    }
+
+    h3 {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 1em;
+    }
+    .price {
+      margin: 0.75em auto;
+      font-size: 35px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      align-items: center;
+      span {
+        display: inline-block;
+        width: auto;
+        font-size: 1rem;
+
+        background-color: $secondary;
+        padding: 3px 8px;
+      }
+    }
+    .description {
+      margin: 1em auto;
+    }
+    a {
+      align-items: center;
+      border: 1px solid $brand;
+      color: $brand;
+      border-radius: 0.3em;
+      margin: 1em auto;
+      font-size: 0.75em;
+      font-weight: 500;
+      letter-spacing: 0.16em;
+      padding: 0.5em 2.7em;
+      display: inline-block;
+      transition: all 0.3s linear;
+      &:hover {
+        background-color: $brand;
+        color: #ffffffff;
+      }
+    }
+
+    hr {
+      margin: 1em auto !important;
+      height: 1px;
+      background: lightgray;
+    }
+    .features {
+      padding: 18px 30px;
+      ul {
+        text-align: left;
+        margin: 20px 0;
+        list-style-type: '👉';
+        padding-inline-start: 1em;
+        li {
+          margin-bottom: 10px;
+          padding-left: 0.5em;
+        }
+      }
+    }
+    .conditions p {
+      font-size: 0.7rem;
+      margin-bottom: 8px;
+      opacity: 0.86;
+      color: #000;
+    }
+  }
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

_tickets/example copy 2.md

@@ -0,0 +1,22 @@
+---
+title: 'This is the ticket title'
+price: '1000$'
+discount: '15% off until dec 2025'
+description: 'Solis 39 urbanitas utuntur explicari adiungimus efficeretur delicata faciam errorem atomos adiungimus Albucius acri intelleges.'
+link: 'www.link.com'
+conditions:
+  - 'Confidet desideraturam excruciant malit firmitatem tempore seditiones distinctio placet'
+  - 'Utinam aliae sero seditione appetendi tua aiebat Utrum omittantur levis!'
+  - 'Ei modum sublatum ipsius puto civitatis vellem significet consule suavitate iudicem miserum locis aliquo officiis.'
+---
+
+### FEATURES
+
+- Feature 01
+- Solis 39 urbanitas utuntur explicari adiungimus efficeretur delicata
+- Faciam errorem atomos adiungimus Albucius acri intelleges
+- Lorem ipsum dolor sit
+- Feature 01
+- Solis 39 urbanitas utuntur explicari adiungimus efficeretur delicata
+- Faciam errorem atomos adiungimus Albucius acri intelleges
+- Lorem ipsum dolor sit

_tickets/example copy.md

@@ -0,0 +1,16 @@
+---
+title: 'This is the ticket title'
+price: '1000$'
+discount: '15% off until dec 2025'
+description: 'Solis 39 urbanitas utuntur explicari adiungimus efficeretur delicata faciam errorem atomos adiungimus Albucius acri intelleges.'
+link: 'www.link.com'
+conditions:
+  - 'Confidet desideraturam excruciant malit firmitatem tempore seditiones distinctio placet'
+---
+
+### FEATURES
+
+- Feature 01
+- Solis 39 urbanitas utuntur explicari adiungimus efficeretur delicata
+- Faciam errorem atomos adiungimus Albucius acri intelleges
+- Lorem ipsum dolor sit

_tickets/example.md

@@ -0,0 +1,18 @@
+---
+title: 'This is the ticket title'
+price: '1000$'
+discount: '15% off until dec 2025'
+description: 'Solis 39 urbanitas utuntur explicari adiungimus efficeretur delicata faciam errorem atomos adiungimus Albucius acri intelleges.'
+link: 'www.link.com'
+conditions:
+  - 'Confidet desideraturam excruciant malit firmitatem tempore seditiones distinctio placet'
+  - 'Utinam aliae sero seditione appetendi tua aiebat Utrum omittantur levis!'
+  - 'Ei modum sublatum ipsius puto civitatis vellem significet consule suavitate iudicem miserum locis aliquo officiis.'
+---
+
+### FEATURES
+
+- Feature 01
+- Solis 39 urbanitas utuntur explicari adiungimus efficeretur delicata
+- Faciam errorem atomos adiungimus Albucius acri intelleges
+- Lorem ipsum dolor sit

assets/css/styles.scss

@@ -26,6 +26,7 @@
 @import 'gallery-grid';
 @import 'testimonials';
 @import '_countdown';
+@import 'tickets-block';
 
 @import '_animations';
 @import '_owl-carousel';

index.html

@@ -26,7 +26,10 @@
 
 <!-- end of welcome -->
 {% comment %} {% include travelling.html %} {% endcomment %}
-<!-- end of travelling -->
+{% if site.data.settings.homepage_settings.tickets %}
+{% include tickets-block.html %}
+{% endif %}
+<!-- end of tickets -->
 {% include register.html %}
 <!-- end of register -->
 {% comment %} {% include cft.html %} {% endcomment %}