Add new components

esl · Jul 26, 2024 · 4d0a67f · 4d0a67f
1 parent e7d598e
commit 4d0a67f
Show file tree

Hide file tree

Showing 30 changed files with 671 additions and 112 deletions.
diff --git a/_config.yml b/_config.yml
@@ -33,6 +33,8 @@ permalink: pretty
 collections:
   participants:
     output: true
+  testimonials:
+    output: true
   keynotes:
     output: true
   trainers:

diff --git a/_data/gallery_images.yml b/_data/gallery_images.yml
@@ -0,0 +1,16 @@
+- src: 'https://codebeameurope.com/assets/images/CBE-23-pic-1.png'
+  alt: 'Code BEAM Europe 2024'
+- src: 'https://codebeameurope.com/assets/images/CBE-23-pic-2.png'
+  alt: 'Code BEAM Europe 2024'
+- src: 'https://codebeameurope.com/assets/images/CBE-23-pic-3.png'
+  alt: 'Code BEAM Europe 2024'
+- src: 'https://codebeameurope.com/assets/images/CBE-23-pic-4.png'
+  alt: 'Code BEAM Europe 2024'
+- src: 'https://codebeameurope.com/assets/images/CBE-23-pic-5.png'
+  alt: 'Code BEAM Europe 2024'
+- src: 'https://codebeameurope.com/assets/images/CBE-23-pic-6.png'
+  alt: 'Code BEAM Europe 2024'
+- src: 'https://codebeameurope.com/assets/images/CBE-23-pic-7.png'
+  alt: 'Code BEAM Europe 2024'
+- src: 'https://codebeameurope.com/assets/images/CBE-23-pic-8.png'
+  alt: 'Code BEAM Europe 2024'
diff --git a/_data/settings.yml b/_data/settings.yml
@@ -0,0 +1,14 @@
+homepage_settings:
+  countdown:
+    show: false
+    timezone: Europe/Berlin
+    deadline: 2024-10-14 12:00
+  modal:
+    show: false
+    delay: 5000
+  testimonials:
+    show: false
+    title: "Testimonials"
+  gallery:
+    show: false
+    title: "Code BEAM Europe 2024"
diff --git a/_includes/countdown.html b/_includes/countdown.html
@@ -0,0 +1,107 @@
+<div id="countdown" class="countdown-container">
+  <div class="countdown-row">
+    <div class="countdown-content">
+      <div class="countdown-title">Months</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-months"></div>
+      </div>
+    </div>
+
+    <div class="countdown-content">
+      <div class="countdown-title">Days</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-days"></div>
+      </div>
+    </div>
+
+    <div class="countdown-content">
+      <div class="countdown-title">Hours</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-hours"></div>
+      </div>
+    </div>
+
+    <div class="countdown-content">
+      <div class="countdown-title">Minutes</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-minutes"></div>
+      </div>
+    </div>
+
+    <div class="countdown-content">
+      <div class="countdown-title">Seconds</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-seconds"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="countdown-cta-container">
+    <a class="countdown-cta-button" target="_blank" href="https://codebeameurope.com/#newsletter">Ticket sale starts soon!</a>
+  </div>
+  <div class="dismiss-container">
+    <div class="countdown-dismiss">
+      <svg class="dismiss-icon" onclick="dismissCountdown()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path fill="#888" d="M19 13H5v-2h14v2z" />
+      </svg>
+    </div>
+  </div>
+</div>
+
+<script>
+  /*** Sample timezones: ***/
+  // "Europe/Lisbon"
+  // "Europe/London"
+  // "America/New_York"
+  // "Asia/Tokyo"
+  // "Australia/Sydney" 
+
+  let UTC = "UTC";
+
+  // Define the desired timezone here
+  let timezone = '{{ site.data.settings.homepage_settings.countdown.timezone }}';
+
+  // Set the target date for your conference with time zone
+  var targetDate = moment.tz('{{ site.data.settings.homepage_settings.countdown.deadline }}', timezone).valueOf();
+
+  // Update the countdown every second
+  var countdownInterval = setInterval(function () {
+    // Get the current date and time in UTC
+    var now = moment.utc().valueOf();
+
+    // Calculate the time remaining
+    var timeRemaining = targetDate - now;
+
+    // Check if the countdown is complete
+    if (timeRemaining <= 0) {
+      clearInterval(countdownInterval);
+      document.getElementById("countdown").innerHTML =
+        "Conference is happening now!";
+    } else {
+      // Calculate the months, days, hours, minutes, and seconds
+      var months = Math.floor(timeRemaining / (1000 * 60 * 60 * 24 * 30));
+      var days = Math.floor(
+        (timeRemaining % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24)
+      );
+      var hours = Math.floor(
+        (timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      var minutes = Math.floor(
+        (timeRemaining % (1000 * 60 * 60)) / (1000 * 60)
+      );
+      var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
+
+      // Update the countdown elements
+      document.getElementById("countdown-months").innerHTML = months;
+      document.getElementById("countdown-days").innerHTML = days;
+      document.getElementById("countdown-hours").innerHTML = hours;
+      document.getElementById("countdown-minutes").innerHTML = minutes;
+      document.getElementById("countdown-seconds").innerHTML = seconds;
+    }
+  }, 1000);
+
+  function dismissCountdown() {
+    clearInterval(countdownInterval);
+    document.getElementById("countdown").style.display = "none";
+  }
+</script>
diff --git a/_includes/gallery-grid.html b/_includes/gallery-grid.html
@@ -0,0 +1,13 @@
+<div class="gallery-wrapper section">
+  {% if site.data.settings.homepage_settings.gallery.title %}
+  <h3 class="title">{{ page.gallery.title }}</h3>
+  <hr />
+  {% endif %}
+  <div class="gallery-grid my-3">
+     {% for image in site.data.gallery_images %}
+    <a data-fslightbox="gallery" class="gallery-item" href="{{ image.src }}">
+      <img src="{{ image.src }}" alt="{{ image.alt }}">
+    </a>
+    {% endfor %}
+  </div>
+</div>
diff --git a/_includes/imports/head.html b/_includes/imports/head.html
@@ -50,7 +50,14 @@
     })(window, document, "script", "dataLayer", "GTM-NZK2LB5");
   </script>
   <!-- End Google Tag Manager -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.32/moment-timezone-with-data.min.js"></script>
+
+{% if site.data.settings.homepage_settings.testimonials.show %}
 
+<link rel="stylesheet" href="{{"/assets/css/owl.carousel.min.css" | prepend: site.baseurl }}">
+<link rel="stylesheet" href="{{"/assets/css/owl.theme.default.min.css" | prepend: site.baseurl }}">   
+ {% endif %} 
   {% seo %}
 
   <!--Remove image dragging -->

diff --git a/_includes/imports/js.html b/_includes/imports/js.html
@@ -13,15 +13,17 @@
 <script src="{{ "/assets/js/agency.js" | prepend: site.baseurl }}"></script>
 
 <!-- Owl Carousel -->
-<script src="{{ site.baseurl }}/assets/js/carousel.min.js" charset="utf-8"></script>
+<script src="{{ site.baseurl }}/assets/js/owl.carousel.min.js" charset="utf-8"></script>
 
 <!-- Parallaxing & SmoothScroll -->
 <script src="{{ site.baseurl }}/assets/js/scrollax.min.js" charset="utf-8"></script>
 
 {% if site.smooth-scroll %}
     <script src="{{ site.baseurl }}/assets/js/smoothscroll.js" charset="utf-8"></script>
 {% endif %}
-
+{% if  site.data.settings.homepage_settings.gallery.show %}
+<script src="{{ site.baseurl }}/assets/js/fslightbox.js" charset="utf-8"></script>
+{% endif %}
 <!-- Main JS -->
 <script src="{{ site.baseurl }}/assets/js/main.js" charset="utf-8"></script>
 <script type="text/javascript">

diff --git a/_includes/modal.html b/_includes/modal.html
@@ -5,22 +5,20 @@
     <!-- modal content here -->
     <h3 class="title">Expand your experience</h3>
     <p> Give yourself a chance to grow: add a comprehensive exploration of the topic that interests you the most to your Code BEAM experience. This year we offer you six training sessions.
-</p>
-
+    </p>
     <a id="btn-modal" class="page-scroll btn-outline btn-orange mb-4 mt-4 btn-orange inline-block" href="#training" target="_blank">
       Check now
     </a>
   </div>
 </div>
-</div>
 
 <script>
   // Get the modal element
   var modal = document.getElementById("myModal");
 
   // Get the <span> element that closes the modal
   var closeBtn = document.getElementsByClassName("close")[0];
-  var btn = document.getElementById('btn-modal')
+  var btn = document.getElementById('btn-modal');
 
   // Function to open the modal
   function openModal() {
@@ -50,6 +48,6 @@ <h3 class="title">Expand your experience</h3>
     }
   });
 
-  // Open the modal after given modal seconds
-  setTimeout(openModal, '{{page.modal.delay}}');
+  // Open the modal after given delay seconds
+  setTimeout(openModal, "{{ site.data.settings.homepage_settings.modal.delay }}");
 </script>
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,24 +1,46 @@
 <nav class="navbar-fixed-top nav-menu" id="navMenu">
-    <a class="logo" href="#cover"></a>
-    <div class="toggle-menu">
-        <!-- Burger -->
-        <div class="navTrigger">
-            <i class="fa fa-bars"></i>
-        </div>
+   <a class="logo" href="#cover"></a>
+  <div class="toggle-menu">
+    <!-- Burger -->
+    <div class="navTrigger">
+      <i class="fa fa-bars"></i>
     </div>
-    <ul class="nav navigation-bar">
-        {% for item in site.data.navigation.items %}
-            <li>
-                <a class="page-scroll" href="#{{ item.link }}">
-                    {% if page.path == "es/index.html" %}
-                        {{ item.es }}
-                    {% else %}
-                        {{ item.name }}
-                    {% endif %}
-                </a>
-            </li>
-        {% endfor %}
-    </ul>
+  </div>
+  <ul class="nav navigation-bar">
+    {% for item in site.data.navigation %}
+    {% if item.children %}
+    <li>
+      <div class="dropdown">
+        <a class="dropbtn">{{item.name}}
+          <i class="fa fa-caret-down"></i>
+        </a>
+        <div class="dropdown-content">
+          {% for child in item.children %}
+            <a class="page-scroll" href="#{{ child.link }}">{{ child.name }}</a>
+          {% endfor %}
+        </div>
+      </div>
+    </li>
+    {% else %}
+    <li>
+      <a class="page-scroll" href="#{{ item.link }}">{{ item.name }}</a>
+    </li>
+    {% endif %}
+    {% endfor %}
+    <li>
+      <div class="dropdown">
+        <a class="dropbtn">Archives
+          <i class="fa fa-caret-down"></i>
+        </a>
+        <div class="dropdown-content">
+          {% for conf in site.data.archive-links %}
+          <a href="{{conf.link}}" target="_blank">{{conf.name}}</a>
+          {% endfor %}
+
+        </div>
+      </div>
+    </li>
+  </ul>
     <ul class="lang">
         <li>
             <a href="/">en</a> / <a href="/es/">es</a>

diff --git a/_includes/testimonials.html b/_includes/testimonials.html
@@ -0,0 +1,26 @@
+{% assign testimonials = site.testimonials %}
+{{ testimonial | json }}
+{% if testimonials != null %}
+<!-- Slider main container -->
+<div class="section section--carousel">
+<div class="carousel-wrapper">
+ <h3 class="title">{{ site.data.settings.homepage_settings.testimonials.title }}</h3>
+<hr/>
+  <div id="testimonials-carousel-quotes" class="owl-carousel owl-theme"> 
+    {% for testimonial in site.testimonials %}
+<figure class="testimonial-item item">
+  <blockquote>
+   {{ testimonial.content | markdownify }}
+    <div class="arrow"></div>
+  </blockquote>
+    <img src="{{ testimonial.profile_pic }}" alt="{{ testimonial.name }}">
+  <div class="author">
+    <h5>{{ testimonial.name }} <span> {{ testimonial.role }}</span></h5>
+  </div>
+</figure>
+
+    {% endfor %}
+
+  </div></div>
+</div>
+{% endif %}