first good build; wouter images and l10n pending;

.eleventy.js

@@ -12,16 +12,16 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight);
 
   // does not work with background images
-  // eleventyConfig.addPlugin(lazyImagesPlugin, {
-  //   transformImgPath: (imgPath) => {
-  //     if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
-  //       // Handle remote file
-  //       return imgPath;
-  //     } else {
-  //       return `./src/${imgPath}`;
-  //     }
-  //   },
-  // });
+  eleventyConfig.addPlugin(lazyImagesPlugin, {
+    transformImgPath: (imgPath) => {
+      if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
+        // Handle remote file
+        return imgPath;
+      } else {
+        return `./src/${imgPath}`;
+      }
+    },
+  });
 
   eleventyConfig.addPlugin(i18n, {
     translations,
@@ -60,8 +60,8 @@ module.exports = function (eleventyConfig) {
   // });
 
   eleventyConfig.addPassthroughCopy("styles/fonts");
-  eleventyConfig.addPassthroughCopy("**/*.png");
-  eleventyConfig.addPassthroughCopy("**/*.svg");
+  eleventyConfig.addPassthroughCopy("src/assets/images/**/*.png");
+  eleventyConfig.addPassthroughCopy("src/assets/images/**/*.svg");
   eleventyConfig.addPassthroughCopy("node_modules/@glidejs/glide/dist");
 
   eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
@@ -81,11 +81,10 @@ module.exports = function (eleventyConfig) {
   // Import fast-glob package
   const fg = require('fast-glob');
 
-  // Run search for images in /gallery and /sponsors
-  const galleryImages = fg.sync(['**/images/screenshots/*', '!**/_site']);
-  console.log(galleryImages);
+  // Run search for images in /screenshots
+  const galleryImages = fg.sync(['**/images/screenshots/*resized*', '!**/_site']);
 
-  //Create collection of sponsor logos
+  //Create collection of screenshots
   eleventyConfig.addCollection('screenshots', function (collection) {
     return galleryImages.map(url => {
       return url.replace('src/', '');

src/_data/reviews.js

@@ -0,0 +1,6 @@
+module.exports = [ 
+    { name: 'Bob S', quote: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', stars: 3, site: 'Google Play', link: '' }, 
+    { name: 'Phil C', quote: 'otam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt', stars: 3.5, site: 'App Store', link: '' }, 
+    { name: 'Henk W', quote: 'Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id', stars: 4, site: 'App Store', link: '' }, 
+    { name: 'Jaap M', quote: 'Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit', stars: 5, site: 'Google Play', link: '' } 
+  ]

src/_data/sections.js

@@ -1,5 +1,4 @@
-module.exports = {
-  sections: [ 
+module.exports = [ 
     { slug: 'home', name: 'Home' }, 
     { slug: 'info', name: 'Info' }, 
     { slug: 'screenshots', name: 'Screenshots' }, 
@@ -7,5 +6,4 @@ module.exports = {
     { slug: 'pricing', name: 'Pricing' }, 
     { slug: 'download', name: 'Download' }, 
     { slug: 'reviews', name: 'Reviews' }
-  ]
-}
+]

src/_data/systems.js

@@ -0,0 +1,12 @@
+module.exports = [ 
+    { slug: 'skeletal', name: 'Skeletal', status: 'free', order: 1 }, 
+    { slug: 'ligamentous', name: 'Ligamentous', status: 'free', order: 1 },
+    { slug: 'muscular', name: 'Muscular', status: 'pro', order: 1 }, 
+    { slug: 'digestive', name: 'Digestive', status: 'pro', order: 1 },
+    { slug: 'respiratory', name: 'Respiratory', status: 'pro', order: 1 }, 
+    { slug: 'urogenital', name: 'Urogenital', status: 'pro', order: 1 },
+    { slug: 'endocrine', name: 'Endocrine', status: 'pro', order: 1 }, 
+    { slug: 'circulatory', name: 'Circulatory', status: 'soon', order: 1 },
+    { slug: 'nervous', name: 'Nervous', status: 'soon', order: 1 }, 
+    { slug: 'limphatic', name: 'Limphatic', status: 'soon', order: 1 }
+  ]

src/_includes/download.ejs

@@ -70,12 +70,12 @@
         border-radius: var(--r-1);
         background-color: var(--c-bkg);
         gap: 1rem;
-        border: 0.3rem solid var(--c-bkg);
+        border: 0.3rem solid transparent;
         transition: all 0.2s;
     }
 
     .platform__wrapper:hover {
-        border: 0.3rem solid orangered;
+        border-color: orangered;
     }
 
     .platform__wrapper:hover .btn--store {

src/_includes/footer.ejs

@@ -0,0 +1,152 @@
+<footer class="text-center">
+    <section>
+        <h3>
+            GraphicViZion
+        </h3>
+        <div class="copywrite">
+            © 2021 by GraphicViZion
+        </div>
+        <div class="credit">
+            this site was hand-crafted by <a href="https://spencerflagg.com">Spencer Flagg</a>
+        </div>
+    </section>
+    <section>
+        <ul>
+            <li>
+                <a href="https://twitter.com/graphicvizion">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter"
+                        width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
+                    </svg>
+                    @graphicvizion
+                </a>
+            </li>
+            <li>
+                <a href="https://www.youtube.com/user/GraphicVizion">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-youtube"
+                        width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <rect x="3" y="5" width="18" height="14" rx="4" />
+                        <path d="M10 9l5 3l-5 3z" />
+                    </svg>
+                    YouTube
+                </a>
+            </li>
+            <li>
+                <a href="https://itunes.apple.com/us/artist/graphicvizion/id492668041">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-apple" width="32"
+                        height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M9 7c-3 0 -4 3 -4 5.5c0 3 2 7.5 4 7.5c1.088 -.046 1.679 -.5 3 -.5c1.312 0 1.5 .5 3 .5s4 -3 4 -5c-.028 -.01 -2.472 -.403 -2.5 -3c-.019 -2.17 2.416 -2.954 2.5 -3c-1.023 -1.492 -2.951 -1.963 -3.5 -2c-1.433 -.111 -2.83 1 -3.5 1c-.68 0 -1.9 -1 -3 -1z" />
+                        <path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2" />
+                    </svg>
+                    App Store
+                </a>
+            </li>
+            <li>
+                <a href="https://play.google.com/store/apps/developer?id=Graphic-ViZion">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-google-play"
+                        width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M4 3.71v16.58a0.7 .7 0 0 0 1.05 .606l14.622 -8.42a0.55 .55 0 0 0 0 -.953l-14.622 -8.419a0.7 .7 0 0 0 -1.05 .607z" />
+                        <line x1="15" y1="9" x2="4.5" y2="20.5" />
+                        <line x1="4.5" y1="3.5" x2="15" y2="15" />
+                    </svg>
+                    Play Store
+                </a>
+            </li>            
+            <% sections.forEach((link)=> { %>
+                <li>
+                    <a href="#<%= link.slug %>">
+                        <%= link.name %>
+                    </a>
+                </li>
+            <% }) %>
+        </ul>
+    </section>
+</footer>
+
+<style>
+    footer {
+        display: flex;
+        color: var(--c-bkg);
+        gap: 3rem;
+        background: black;
+        width: var(--viewportWidth);
+        margin-top: 2rem;
+        padding: 4rem 2rem 6rem 2rem;
+    }
+
+    footer section {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    footer h3 {
+        font-size: 2rem;
+    }
+
+    footer ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        max-height: 8.5rem;
+        row-gap: 0.5rem;
+        column-gap: 3rem;
+    }
+
+    footer li {
+        line-height: 1;
+        font-size: 1rem;
+    }
+
+    footer li svg {
+        max-height: 1.7rem;
+        transition: .2s all;
+    }
+
+    footer li a {
+        display: flex;
+        align-items: center;
+        color: var(--c-bkg);
+        gap: 0.5rem;
+        transition: .2s all;
+    }
+
+    footer li a:hover {
+        color: var(--c-1);
+    }
+
+    footer li a:hover svg {
+        stroke: var(--c-1);
+    }
+
+    .copywrite {
+        margin-bottom: 3rem;
+    }
+
+    .credit {
+        opacity: 0.5;
+        font-size: 0.75rem;
+    }
+
+    .credit a {
+        color: var(--c-1);
+    }
+
+    .credit a:hover {
+        text-decoration: underline;
+    }
+</style>

src/_includes/hero.ejs

@@ -6,7 +6,7 @@
             <source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">https://thumbs.gfycat.com/EthicalMagnificentHart-mobile.mp4
         </video>
         <div class="hero__info">
-            <a class="btn btn--hero">
+            <a class="btn btn--hero" href="#download">
                 download now
             </a>
             <div class="platform-list">
@@ -35,6 +35,7 @@
         margin-bottom: var(--offset);
         padding: 0 2rem;
         --weird-gap: 0.04rem;
+        z-index: 1; /* temp, to overlap slider */
     }
 
     .hero__video {
@@ -51,7 +52,7 @@
     }
 
     .hero__banner h1 {
-        width: 16ch;
+        width: 15ch;
     }
 
     .banner-edge-left {

src/_includes/layouts/base.ejs

@@ -5,15 +5,15 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-  <!-- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> -->
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
   <link rel="icon" href="/favicon.ico" />
 
   <!-- Required Core Stylesheet -->
-  <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.core.css">
+  <!-- <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.core.css"> -->
 
   <!-- Optional Theme Stylesheet -->
-  <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.theme.css">
+  <!-- <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.theme.css"> -->
 
   <title>
     <%= site.title %>
@@ -102,10 +102,8 @@
       <%- content %>
     </main>
 
-    <footer class="text-center">
-      Made with <span role="img" aria-label="Love">♥</span> by
-      <a href="https://creativedesignsguru.com">CreativeDesignsGuru</a>
-    </footer>
+    <% include /footer %>
+
   </div>
 
   <script>
@@ -126,14 +124,15 @@
   <!-- <script src="/js/eleventy.js" type="module" async></script> -->
 
   <script>
-    new Glide('.glide').mount({
-      type: 'carousel',
-      startAt: 0,
-      perView: 1,
-      autoplay: 1000,
-      bound: true,
-      rewind: false
-    })
+    // new Glide('.glide').mount({
+    //   type: 'carousel',
+    //   startAt: 0,
+    //   perView: 1,
+    //   autoplay: 1000,
+    //   bound: true,
+    //   rewind: false
+    // })    
+    // new Glide('.glide').mount()
   </script>
 
 
@@ -185,10 +184,4 @@
     align-items: center;
   }
 
-  footer {
-    background: black;
-    width: var(--viewportWidth);
-    margin-top: 2rem;
-    padding: 4rem 2rem 6rem 2rem;
-  }
 </style>

src/_includes/pricing.ejs

@@ -44,7 +44,7 @@
             </header>
             <div class="level__content">
                 <div class="level__price-wrapper">
-                    <h2 class="level__price">
+                    <h2 class="level__price" style="align-items: center;">
                         free
                         <span>
                             with paid add-ons
@@ -90,9 +90,9 @@
                 <div class="level__price-wrapper">
                     <h2 class="level__price">
                         $9.95
-                    <span>
-                        paid monthly
-                    </span>
+                        <span>
+                            paid monthly
+                        </span>
                     </h2>
                 </div>
                 <ul>
@@ -128,9 +128,9 @@
                 <div class="level__price-wrapper">
                     <h2 class="level__price">
                         $3.95
-                    <span>
-                        paid monthly
-                    </span>
+                        <span>
+                            paid monthly
+                        </span>
                     </h2>
                 </div>
                 <ul>
@@ -166,9 +166,9 @@
                 <div class="level__price-wrapper">
                     <h2 class="level__price">
                         $39.95
-                    <span>
-                        one time fee
-                    </span>
+                        <span>
+                            one time fee
+                        </span>
                     </h2>
                 </div>
                 <ul>
@@ -231,7 +231,7 @@
     .level__content {
         border-radius: var(--r-1);
         background: var(--c-bkg);
-        padding: 2rem 1rem;
+        padding: 2rem 0;
         display: grid;
         grid-template-rows: 3rem auto;
     }
@@ -259,16 +259,16 @@
         text-align: center;
     }
 
-.level__price-wrapper h2 {
-    display: inline-flex;
+    .level__price-wrapper h2 {
+        display: inline-flex;
         flex-direction: column;
         align-items: end;
-}
+    }
 
-.level__price-wrapper span {
-    font-size: 0.75rem;
-    font-family: Nunito, sans-serif;
-}
+    .level__price-wrapper span {
+        font-size: 0.75rem;
+        font-family: Nunito, sans-serif;
+    }
 
     .level__wrapper .note {
         color: var(--c-bkg);
@@ -279,12 +279,15 @@
     }
 
     .level-wrapper--heading ul {
-        justify-items: start;
+        justify-items: end;
         align-items: center;
     }
 
     .level-wrapper--heading ul li {
-        color: black;
+        color: white;
+        font-weight: 600;
+        text-transform: uppercase;
+        text-align: right;
         font-size: 1rem;
     }
 

src/_includes/screenshots.ejs

@@ -12,10 +12,12 @@
             <div data-glide-el="track" class="glide__track">
                 <ul class="glide__slides">
                     <% collections.screenshots.forEach((screenshot, index)=> { %>
-                        <li class="glide__slide">
-                            <img width="300" src="<%= screenshot %>" alt="">
-                        </li>
-                    <% }) %>
+                        <% if (screenshot.includes('--en')) { %>
+                            <li class="glide__slide">
+                                <img src="<%= screenshot %>" alt="">
+                            </li>
+                            <% } %>
+                                <% }) %>
                 </ul>
             </div>
         </div>
@@ -23,11 +25,44 @@
 </article>
 
 <style>
-    .glide__slide {
-        max-width: 10rem;
+    .glide {
+        overflow-x: scroll;
+    }
+
+    .glide::-webkit-scrollbar {
+  width: 1rem;
+}
+
+/* Track */
+.glide::-webkit-scrollbar-track {
+  background: transparent; 
+}
+ 
+/* Handle */
+.glide::-webkit-scrollbar-thumb {
+  background-color: var(--c-1); 
+  border-radius: 999px;
+  transition: .2s all;
+}
+
+/* Handle on hover */
+.glide::-webkit-scrollbar-thumb:hover {
+  background-color: orangered; 
+}
+
+    .glide__slides {
+        display:flex;
+        flex-wrap: nowrap;
+        gap: 1rem;
+        padding-bottom: 2rem;
+    }
+
+    .glide__slide img {
+        max-width: 12rem;
     }
 
     .glide__slide img {
         border-radius: 2rem;
+        pointer-events: none;
     }
 </style>

src/_includes/systems.ejs

@@ -9,35 +9,53 @@
     </header>
     <section>
         <ul class="system__list">
-            <% systems.forEach((system)=> { %>
-                <li class="system--<%= system.status %>">
-                  <button onclick="zoom('<%= system.slug %>')">
-                    <img src="/assets/images/systems/icons/<%= system.slug %>.png" alt="<%= system.name %>" title="<%= system.name %>">
-                  </button>
+            <% systems.forEach((system, index)=> { %>
+                <li onclick="zoom('<%= system.slug %>')"
+                    class="system system--<%= system.slug %> system--<%= system.status %> <%= index === 0 ? 'system--selected' : '' %>">
+                    <img src="/assets/images/systems/icons/<%= system.slug %>.png" alt="<%= system.name %>"
+                        title="<%= system.name %>">
+                    <span>
+                        <%= system.name %>
+                    </span>
                 </li>
-            <% }) %>
+                <% }) %>
         </ul>
         <div class="system__zoom-wrapper">
-            <% systems.forEach((system)=> { %>
-                <img class="zoom__image zoom__image--<%= system.slug %>" src="/assets/images/systems/layers/<%= system.slug %>.png" alt="<%= system.name %>" title="<%= system.name %>">
-            <% }) %>
+            <% systems.forEach((system, index)=> { %>
+                <img class="zoom__image zoom__image--<%= system.slug %> <%= index === 0 ? 'zoom__image--visible' : '' %>"
+                    src="/assets/images/systems/layers/<%= system.slug %>.png" alt="<%= system.name %>"
+                    title="<%= system.name %>">
+                <% }) %>
         </div>
     </section>
 </article>
 
 <script>
 
-    function zoom (slug) {
+    function zoom(slug) {
 
-        const thisClass = 'zoom__image--' + slug;
-        let thisImage = document.querySelector('.' + thisClass);
+        const thisIconClass = 'system--' + slug;
+        let thisIconImage = document.querySelector('.' + thisIconClass);
 
-        thisImage.classList.add('zoom__image--visible')
+        thisIconImage.classList.add('system--selected')
 
-        let allImages = document.querySelectorAll('.zoom__image');
+        let allIconImages = document.querySelectorAll('.system');
 
-        for (let elem of allImages) {
-            if(!elem.classList.contains(thisClass)) {
+        for (let elem of allIconImages) {
+            if (!elem.classList.contains(thisIconClass)) {
+                elem.classList.remove('system--selected')
+            }
+        }
+
+        const thisZoomClass = 'zoom__image--' + slug;
+        let thisZoomImage = document.querySelector('.' + thisZoomClass);
+
+        thisZoomImage.classList.add('zoom__image--visible')
+
+        let allZoomImages = document.querySelectorAll('.zoom__image');
+
+        for (let elem of allZoomImages) {
+            if (!elem.classList.contains(thisZoomClass)) {
                 elem.classList.remove('zoom__image--visible')
             }
         }
@@ -48,50 +66,85 @@
 </script>
 
 <style>
+    .system__wrapper section {
+        display: grid;
+        grid-template-columns: 30rem auto;
+    }
 
-.system__wrapper section {
-    display: grid;
-    grid-template-columns: 40rem auto;
-}
+    .system__wrapper {
+        display: flex;
+        flex-direction: column;
+    }
 
-.system__wrapper {
-  display: flex;
-  flex-direction: column;
-}
+    .system__list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
 
-.system__list { 
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
+    .system__list li {
+        aspect-ratio: 1;
+        height: 9rem;
+        background-color: var(--c-1);
+        border-radius: var(--r-1);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: 0.3rem solid transparent;
+        transition: all 0.2s;
+        cursor: pointer;
+    }
 
-.system__list li {
-  aspect-ratio: 1;
-  height: 9rem;
-  background: var(--c-1);
-  border-radius: var(--r-1);
-}
+    .system__list li:hover {
+        border-color: orangered;
+    }
 
-.system__zoom-wrapper {
-    position: relative;
-}
+    .system__list li:hover img,
+    .system__list li:hover span {
+        transform: scale(1.05);
+    }
 
-li.system--soon {
-    background: lightgray;
-    color: gray;
-    pointer-events: none;
-}
+    .system__list li img {
+        width: 4rem;
+        transition: all 0.2s;
+    }
 
-.zoom__image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    transition: opacity 0.2s;
-}
+    .system__list li span {
+        color: var(--c-bkg);
+        transition: all 0.2s;
+    }
 
-.zoom__image--visible {
-    opacity: 1;
-}
+    .system__list li.system--selected {
+        background-color: orangered;
+    }
 
+    .system__zoom-wrapper {
+        position: relative;
+        background-color: var(--c-1);
+        padding: var(--p-1);
+        border-radius: var(--r-1);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    li.system--soon {
+        background: lightgray;
+        color: gray;
+        pointer-events: none;
+    }
+
+    .zoom__image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .zoom__image--visible {
+        opacity: 1;
+    }
 </style>

src/assets/images/screenshots/br.svg

@@ -1,10 +0,0 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_42:3)">
-<path d="M0 -50H-50V0V100H0V150C82.8427 150 150 82.8427 150 0H100V-50H0Z" stroke="white" stroke-width="100"/>
-</g>
-<defs>
-<clipPath id="clip0_42:3">
-<rect width="100" height="100" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/index.ejs

@@ -7,34 +7,6 @@ pagination:
 permalink: '<% if (pagination.pageNumber > 0) { %><%= `page${pagination.pageNumber + 1}/index.html` %><% } else { %>index.html<% } %>'
 eleventyComputed:
   title: '<% if (pagination.pageNumber > 0) { %><%= `Page ${pagination.pageNumber + 1} | ${site.title}` %><% } else { %><%= site.title %><% } %>'
-links: [ { url: 'a', data: { title: 'b' } } ]
-sections: [ 
-  { slug: 'home', name: 'Home' }, 
-  { slug: 'info', name: 'Info' }, 
-  { slug: 'screenshots', name: 'Screenshots' }, 
-  { slug: 'systems', name: 'Systems' }, 
-  { slug: 'pricing', name: 'Pricing' }, 
-  { slug: 'download', name: 'Download' }, 
-  { slug: 'reviews', name: 'Reviews' }
-]
-systems: [ 
-  { slug: 'skeletal', name: 'Skeletal', status: 'free', order: 1 }, 
-  { slug: 'ligamentous', name: 'Ligamentous', status: 'free', order: 1 },
-  { slug: 'muscular', name: 'Muscular', status: 'pro', order: 1 }, 
-  { slug: 'digestive', name: 'Digestive', status: 'pro', order: 1 },
-  { slug: 'respiratory', name: 'respiratory', status: 'pro', order: 1 }, 
-  { slug: 'urogenital', name: 'Urogenital', status: 'pro', order: 1 },
-  { slug: 'endocrine', name: 'Endocrine', status: 'pro', order: 1 }, 
-  { slug: 'circulatory', name: 'Circulatory', status: 'soon', order: 1 },
-  { slug: 'nervous', name: 'Nervous', status: 'soon', order: 1 }, 
-  { slug: 'limphatic', name: 'Limphatic', status: 'soon', order: 1 }
-]
-reviews: [ 
-  { name: 'Bob S', quote: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', stars: 3, site: 'Google Play', link: '' }, 
-  { name: 'Phil C', quote: 'otam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt', stars: 3.5, site: 'App Store', link: '' }, 
-  { name: 'Henk W', quote: 'Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id', stars: 4, site: 'App Store', link: '' }, 
-  { name: 'Jaap M', quote: 'Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit', stars: 5, site: 'Google Play', link: '' } 
-]
 ---
 
 <% include /hero %>
@@ -59,34 +31,4 @@ reviews: [
 
 </div>
 
-<% include /reviews %>
-
-<!--
-<nav>
-  <% links.forEach((link) => { %>
-    <a href="<%= link.url %>"><%= link.data.title %></a>
-  <% }) %>
-</nav>
-
-<ul>
-  <% list.forEach((post) => { %>
-  <li class="mb-3 flex justify-between">
-    <a href="<%= post.url %>"><%= post.data.title %></a>
-
-    <div><%= this.dateFns.format(new Date(post.data.date), 'LLLL d, yyyy') %></div>
-  </li>
-  <% }) %>
-</ul>
-
-<div class="text-sm flex justify-between">
-  <% if (pagination.previous) { %>
-  <div>
-    <a href="<%= pagination.previous.replace(/index.html$/, "") %>">← Newer Posts</a>
-  </div>
-  <% } %> <% if (pagination.next) { %>
-  <div class="text-right ml-auto">
-    <a href="<%= pagination.next.replace(/index.html$/, "") %>">Older Posts →</a>
-  </div>
-  <% } %>
-</div>
--->
+<% include /reviews %>