added the demo gif

_includes/demo.html

@@ -0,0 +1,31 @@
+<div id="demo" class="bg-light {{ section.background_style }}">
+  <div class="container text-center">
+    <h2 class="mb-4">A quick demo</h2>
+
+    <div class="container-fluid p-0">
+      <div class="row no-gutters">
+        {% for proj in section.projects %}
+        <div class="offset-lg-2 col-lg-8 col-sm-12">
+          <a class="portfolio-box" href="assets/img/{{ proj.icon }}">
+            <img class="img-fluid" src="assets/img/{{ proj.icon }}" alt="">
+            <div class="portfolio-box-caption">
+              <div class="project-title">
+                {{ proj.title }}
+              </div>
+              <div class="project-description">
+                {{ proj.text }}
+              </div>
+            </div>
+          </a>
+        </div>
+        {% endfor %}
+      </div>
+      {% if section.action %}
+      <div class="row justify-content-center mt-4">
+        <a class="btn btn-xl btn-secondary js-scroll-trigger" href="{{ section.action.url }}">{{
+          section.action.label }}</a>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>

_layouts/home.html

@@ -12,15 +12,16 @@ <h1 class="text-white font-weight-bold">{{ page.header.title }}</h1>
       <div class="col-lg-8 align-self-baseline">
         <p class="text-white-75 font-weight-light mb-5">{{ page.header.text }}</p>
         {% if page.header.action %}
-        <a class="btn btn-light btn-xl js-scroll-trigger" href="{{ page.header.action.url }}">{{ page.header.action.label }}</a>
+        <a class="btn btn-light btn-xl js-scroll-trigger" href="{{ page.header.action.url }}">{{
+          page.header.action.label }}</a>
         {% endif %}
       </div>
     </div>
   </div>
 </header>
 
 {% for section in page.sections %}
-    {% include {{ section.type }} section=section site=site page=page %}
+{% include {{ section.type }} section=section site=site page=page %}
 {% endfor %}
 
-{{ content }}
+{{ content }}

assets/css/creative.scss

@@ -10009,7 +10009,6 @@ hr.light {
   padding: 1.25rem 2.25rem;
   font-size: 0.85rem;
   font-weight: 700;
-  text-transform: uppercase;
   border: none;
   border-radius: 10rem;
 }
@@ -10151,6 +10150,48 @@ header.masthead h1 {
   opacity: 1;
 }
 
+
+#demo {
+  padding: 8rem 0;
+}
+#demo .container-fluid, #demo .container-sm, #demo .container-md, #demo .container-lg, #demo .container-xl {
+  max-width: 1920px;
+}
+#demo .container-fluid .portfolio-box, #demo .container-sm .portfolio-box, #demo .container-md .portfolio-box, #demo .container-lg .portfolio-box, #demo .container-xl .portfolio-box {
+  position: relative;
+  display: block;
+}
+#demo .container-fluid .portfolio-box .portfolio-box-caption, #demo .container-sm .portfolio-box .portfolio-box-caption, #demo .container-md .portfolio-box .portfolio-box-caption, #demo .container-lg .portfolio-box .portfolio-box-caption, #demo .container-xl .portfolio-box .portfolio-box-caption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  text-align: center;
+  opacity: 0;
+  color: #fff;
+  background: rgba(19, 47, 76, 0.9);
+  transition: opacity 0.25s ease;
+  text-align: center;
+  padding: 4px;
+}
+#demo .container-fluid .portfolio-box .portfolio-box-caption .project-title, #demo .container-sm .portfolio-box .portfolio-box-caption .project-title, #demo .container-md .portfolio-box .portfolio-box-caption .project-title, #demo .container-lg .portfolio-box .portfolio-box-caption .project-title, #demo .container-xl .portfolio-box .portfolio-box-caption .project-title {
+  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-weight: 600;
+  color: #99CCF3;
+}
+#demo .container-fluid .portfolio-box .portfolio-box-caption .project-description, #demo .container-sm .portfolio-box .portfolio-box-caption .project-description, #demo .container-md .portfolio-box .portfolio-box-caption .project-description, #demo .container-lg .portfolio-box .portfolio-box-caption .project-description, #demo .container-xl .portfolio-box .portfolio-box-caption .project-description {
+  font-size: 1.2rem;
+  font-size: 0.85rem;
+  color: #CDD2D7;
+}
+#demo .container-fluid .portfolio-box:hover .portfolio-box-caption, #demo .container-sm .portfolio-box:hover .portfolio-box-caption, #demo .container-md .portfolio-box:hover .portfolio-box-caption, #demo .container-lg .portfolio-box:hover .portfolio-box-caption, #demo .container-xl .portfolio-box:hover .portfolio-box-caption {
+  opacity: 1;
+}
+
 .text-white-75 {
   color: rgba(255, 255, 255, 0.75);
 }

assets/js/creative.js

@@ -59,5 +59,19 @@
       tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
     }
   });
+   $('#demo').magnificPopup({
+    delegate: 'a',
+    type: 'image',
+    tLoading: 'Loading image #%curr%...',
+    mainClass: 'mfp-img-mobile',
+    gallery: {
+      enabled: false,
+      navigateByImgClick: true,
+      preload: [0]
+    },
+    image: {
+      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
+    }
+  });
 
 })(jQuery); // End of use strict

assets/js/creative.min.js

@@ -1 +1,14 @@
-!function(e){"use strict";e('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=e(this.hash);if((a=a.length?a:e("[name="+this.hash.slice(1)+"]")).length)return e("html, body").animate({scrollTop:a.offset().top-72},1e3,"easeInOutExpo"),!1}}),e(".js-scroll-trigger").click(function(){e(".navbar-collapse").collapse("hide")}),e("body").scrollspy({target:"#mainNav",offset:75});function a(){100<e("#mainNav").offset().top?e("#mainNav").addClass("navbar-scrolled"):e("#mainNav").removeClass("navbar-scrolled")}a(),e(window).scroll(a),e("#portfolio").magnificPopup({delegate:"a",type:"image",tLoading:"Loading image #%curr%...",mainClass:"mfp-img-mobile",gallery:{enabled:!0,navigateByImgClick:!0,preload:[0,1]},image:{tError:'<a href="%url%">The image #%curr%</a> could not be loaded.'}})}(jQuery);
+!function(e){"use strict";e('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=e(this.hash);if((a=a.length?a:e("[name="+this.hash.slice(1)+"]")).length)return e("html, body").animate({scrollTop:a.offset().top-72},1e3,"easeInOutExpo"),!1}}),e(".js-scroll-trigger").click(function(){e(".navbar-collapse").collapse("hide")}),e("body").scrollspy({target:"#mainNav",offset:75});function a(){100<e("#mainNav").offset().top?e("#mainNav").addClass("navbar-scrolled"):e("#mainNav").removeClass("navbar-scrolled")}a(),e(window).scroll(a),e('#demo').magnificPopup({
+    delegate: 'a',
+    type: 'image',
+    tLoading: 'Loading image #%curr%...',
+    mainClass: 'mfp-img-mobile',
+    gallery: {
+      enabled: false,
+      navigateByImgClick: true,
+      preload: [0]
+    },
+    image: {
+      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
+    }
+  }),e("#portfolio").magnificPopup({delegate:"a",type:"image",tLoading:"Loading image #%curr%...",mainClass:"mfp-img-mobile",gallery:{enabled:!0,navigateByImgClick:!0,preload:[0,1]},image:{tError:'<a href="%url%">The image #%curr%</a> could not be loaded.'}})}(jQuery);

index.md

@@ -5,16 +5,27 @@ header:
   text: >
     Neo Navigator allows you to view multiple web pages side by side in one window and multitask easily, it has build-in password manager, multi-workspace support, dark theme and (a lot) more.
   action: # action button is optional
-    label: Find Out More
-    url: '#features'
+    label: Watch a quick demo
+    url: '#demo'
     class: btn-light
 
-
 sections:
+  - type: demo.html
+    # background_style: bg-light
+    projects:
+      - title: A quick demo
+        text: Click to see the full size demo
+        icon: neonav-demo.gif
+        url: '#'
+    action: # action button is optional
+      label: Download
+      url: '#download'
+      class: btn-secondary
+
   - type: services.html
     section_id: features
     # background_style: bg-info
-    title: Feature Summary
+    title: Feature summary
     services:
       - title: Tiled Panes
         text: Use tiling panes to view websites instead of tabs. Split them vertically and horizontally with one click
@@ -76,7 +87,7 @@ sections:
 
   - type: contact.html
     section_id: contacts
-    title: Let's Get in Touch!
+    title: Let's get in touch!
     text: >-
       Want more features or need some help? Send us an email
       and we will get back to you as soon as possible!