all sections stubbed out; most styles in place; images not working;

.eleventy.js

@@ -28,6 +28,8 @@ module.exports = function (eleventyConfig) {
     files: './_site/assets/styles/main.css',
   });
 
+  eleventyConfig.addPassthroughCopy("styles/fonts");
+
   eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
     if (outputPath.endsWith('.html')) {
       const minified = htmlmin.minify(content, {
@@ -42,6 +44,18 @@ module.exports = function (eleventyConfig) {
     return content;
   });
 
+  // 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);
+
+  //Create collection of sponsor logos
+  eleventyConfig.addCollection('screenshots', function(collection) {
+    return galleryImages;
+  });
+
   return {
     dir: { input: 'src', output: '_site', data: '_data' },
   };

package.json

@@ -63,5 +63,8 @@
     "*.json": [
       "prettier --write"
     ]
+  },
+  "dependencies": {
+    "fast-glob": "^3.2.7"
   }
 }

public/admin/config.yml

@@ -3,8 +3,11 @@ backend:
   branch: master
 
 # publish_mode: editorial_workflow
-media_folder: 'src/assets/images/posts' # Media files will be stored in the repo under src/assets/images/posts
+media_folder: 'src/assets/images' # Media files will be stored in the repo under src/assets/images/posts
-public_folder: '/assets/images/posts' # The src attribute for uploaded media will begin with assets/images/posts
+public_folder: '/assets/images' # The src attribute for uploaded media will begin with assets/images/posts
+
+# media_folder: 'src/assets/images/posts' # Media files will be stored in the repo under src/assets/images/posts
+# public_folder: '/assets/images/posts' # The src attribute for uploaded media will begin with assets/images/posts
 
 collections:
   - name: "blog" # Used in routes, e.g., /admin/collections/blog

src/_data/site.json

@@ -1,6 +1,6 @@
 {
-  "site_name": "Starter",
+  "site_name": "Visual Anatomy 3d",
-  "title": "Eleventy Starter Boilerplate",
+  "title": "Visual Anatomy 3d",
   "description": "Starter code for your 11ty blog Boilerplate",
   "url": "https://example.com",
   "locale": "en",

src/_includes/blurb.ejs

@@ -0,0 +1,5 @@
+<article class="blurb__wrapper">
+    <p>
+        Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.
+    </p>
+</article>

src/_includes/download.ejs

@@ -0,0 +1,83 @@
+<article class="download__wrapper">
+    <header>
+        <h1 id="download">
+            download now
+        </h1>
+    </header>
+    <section class="download__content">
+        <div class="platform__wrapper">
+            <% include /store-icons/ios.svg %>
+                <h2>
+                    iOS
+                </h2>
+                <a class="btn btn--store" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
+                    go to store
+                </a>
+        </div>
+        <div class="platform__wrapper">
+            <% include /store-icons/android.svg %>
+                <h2>
+                    Android
+                </h2>
+                <a class="btn btn--store" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr">
+                    go to store
+                </a>
+        </div>
+        <div class="platform__wrapper">
+            <% include /store-icons/macos.svg %>
+                <h2>
+                    macOS
+                </h2>
+                <a class="btn btn--store" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
+                    go to store
+                </a>
+        </div>
+        <div class="platform__wrapper">
+            <% include /store-icons/windows.svg %>
+                <h2>
+                    Windows
+                </h2>
+                <a class="btn btn--store" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21">
+                    go to store
+                </a>
+        </div>
+    </section>
+</article>
+
+<style>
+    .btn--store {
+        text-align: center;
+        background: orangered;
+        padding: .25rem 1rem;
+        color: white;
+        display: block;
+        border-radius: 999px;
+        text-transform: uppercase;
+        font-size: 1rem;
+    }
+
+    .download__content {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        gap: 1rem;
+    }
+
+    .platform__wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: var(--p-1);
+        border-radius: var(--r-1);
+        background-color: var(--c-bkg);
+        gap: 1rem;
+    }
+
+    .platform__wrapper svg {
+        max-width: 100%;
+        height: 9rem;
+    }
+
+    .platform__wrapper h2 {
+        font-size: 2.2rem;
+    }
+</style>

src/_includes/hero.ejs

@@ -0,0 +1,63 @@
+<div class="hero__wrapper">
+    <% include /nav %>
+        <video autoplay loop muted class="hero__video" id="video-bg">
+            <!--this id is only used for the toggle function; can be removed if you don't need an event -->
+            <!-- whatever video you put here will be (effectively) cropped to fit container size; make sure you're okay with it shrinking to the top left corner of the video at your specified minimum dimensions -->
+            <source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">
+        </video>
+        <button class="btn btn--hero">
+
+        </button>
+        <div class="hero__banner">
+            <svg class="banner-edge-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+                <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
+                    d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
+            </svg>
+            <svg class="banner-edge-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+                <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
+                    d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
+            </svg>
+            <h1 class="h1--hero">muscles, skeleton, organs and blood vessels in 3D</h1>
+        </div>
+</div>
+
+<style>
+    .hero__wrapper {
+        --offset: 8rem;
+        margin-bottom: var(--offset);
+    }
+
+    .hero__video {
+        border-radius: var(--r-1);
+    }
+
+    .hero__banner {
+        background: var(--c-bkg);
+        border-radius: var(--r-1) var(--r-1) 0 0;
+        padding: var(--p-1);
+        position: absolute;
+        bottom: calc(-1 * var(--offset));
+        left: 4rem;
+    }
+
+    .hero__banner h1 {
+        width: 16ch;
+    }
+
+    .banner-edge-left {
+        position: absolute;
+        left: calc(-1 * var(--r-1));
+        height: var(--r-1);
+        width: var(--r-1);
+        bottom: var(--offset);
+    }
+
+    .banner-edge-right {
+        position: absolute;
+        right: calc(-1 * var(--r-1));
+        height: var(--r-1);
+        width: var(--r-1);
+        bottom: var(--offset);
+        transform: scaleX(-1);
+    }
+</style>

src/_includes/info.ejs

@@ -0,0 +1,69 @@
+<article class="info__wrapper">
+    <section>
+        <h1>
+            Designed for anatomy students
+        </h1>
+        <p>
+            We believe that learning by interaction is the best and easiest way to study human anatomy.
+        </p>
+        <h1>
+            Perfect for professionals
+        </h1>
+        <p>
+            When discussing anatomy with a patient it can help as an visual aid.
+        </p>
+    </section>
+    <section>
+        <ul>
+            <li>
+                over 1200 body parts!
+            </li>
+            <li>
+                highly detailed
+            </li>
+            <li>
+                zoom, pan, and rotate in real time
+            </li>
+            <li>
+                show and hide layers
+            </li>
+            <li>
+                get details for each body part
+            </li>
+        </ul>
+    </section>
+</article>
+
+<style>
+
+.info__wrapper {
+    display: flex;
+    gap: 1rem;
+}
+
+.info__wrapper section {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.info__wrapper p {
+    font-family: Nunito, sans-serif;
+    font-size: 1.15rem;
+}
+
+.info__wrapper section p:first-of-type{
+    margin-bottom: 3rem;
+}
+
+.info__wrapper ul li{
+    font-size: 1.5rem;
+    font-weight: 700;
+    font-style: italic;
+    list-style-image: url('starsolid.gif');
+    line-height: 1;
+    margin-bottom: 2rem;
+}
+
+</style>

src/_includes/layouts/base.ejs

@@ -63,13 +63,14 @@
   </head>
 
   <body class="antialiased w-full text-gray-700">
-    <div class="max-w-screen-md mx-auto">
+    <div class="max-w-screen-lg mx-auto">
-      <div class="border-b border-gray-300">
+      <div class="">
-        <div class="pt-16 pb-8">
+        <header class="site-header ">
-          <h1 class="font-semibold text-3xl text-gray-800"><%= site.title %></h1>
+          <img src="<%= `${site.url}/assets/images/logo.png` %>" alt="">
-          <div class="text-xl"><%= site.description %></div>
+          <h1 class="site-title font-semibold text-3xl text-gray-800"><%= site.title %></h1>
-        </div>
+          <!-- <div class="text-xl"><%= site.description %></div> -->
-        <nav>
+        </header>
+        <!-- <nav>
           <ul class="flex flex-wrap text-xl">
             <li class="mr-6">
               <a class="text-gray-700 border-none hover:no-underline hover:text-gray-800" href="/"
@@ -85,10 +86,10 @@
               </a>
             </li>
           </ul>
-        </nav>
+        </nav> -->
       </div>
       
-      <div class="text-xl py-5"><%- content %></div>
+      <div class="text-xl py-4"><%- content %></div>
 
       <div class="border-t border-gray-300 text-center py-8">
         Made with <span role="img" aria-label="Love">♥</span> by
@@ -97,3 +98,23 @@
     </div>
   </body>
 </html>
+
+
+<style>
+  .site-header{
+    display: flex;
+    justify-content: center;
+  }
+
+.site-title {
+  font-family: Bebas Neue;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 52.72px;
+  line-height: 63px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  width: auto;
+}
+
+</style>

src/_includes/nav.ejs

@@ -1,9 +1,59 @@
+<div class="nav__wrapper">
   <nav>
     <ul>
-    <% list.forEach((link) => { %>
+      <% sections.forEach((link)=> { %>
         <li class="">
-        <a href="<%= link.url %>"><%= link.data.title %></a>
+          <a href="#<%= link.slug %>">
+            <%= link.name %>
+          </a>
         </li>
         <% }) %>
     </ul>
   </nav>
+  <svg class="nav-edge-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+    <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0"
+      d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
+  </svg>
+  <svg class="nav-edge-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+    <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0"
+      d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
+  </svg>
+</div>
+
+<style>
+  .nav__wrapper {
+    border-radius: 0 0 var(--r-1) var(--r-1);
+    padding: 0.5rem var(--p-1) 1.5rem var(--p-1);
+    background: var(--c-bkg);
+    position: absolute;
+    z-index: 1;
+  }
+
+  nav ul {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  nav ul li {
+    white-space: nowrap;
+  }
+
+  .nav-edge-left {
+    position: absolute;
+    left: calc(-1 * var(--r-1));
+    height: var(--r-1);
+    width: var(--r-1);
+    top: 0;
+    transform: scaleY(-1);
+  }
+
+  .nav-edge-right {
+    position: absolute;
+    right: calc(-1 * var(--r-1));
+    height: var(--r-1);
+    width: var(--r-1);
+    top: 0;
+    transform: scaleX(-1) scaleY(-1);
+  }
+</style>

src/_includes/pricing.ejs

@@ -0,0 +1,226 @@
+<article class="pricing__wrapper">
+    <header>
+        <h1 id="pricing">
+            flexible pricing options
+        </h1>
+    </header>
+    <section class="pricing__content">
+        <div class="level__wrapper level-wrapper--trial">
+            <header>
+                <h2>
+                    
+                </h2>
+                <span>
+                    
+                </span>
+            </header>
+            <div class="level__content">
+                <div class="level__price-wrapper">
+                    <h2 class="level__price">
+                        
+                    </h2>
+                    <span>
+
+                    </span>
+                </div>
+                <ul>
+                    <% systems.forEach((system)=> { %>
+                        <li class="">
+                          <%= system.name %>
+                        </li>
+                    <% }) %>
+                </ul>
+            </div>
+            <div></div>
+        </div>
+        <div class="level__wrapper level-wrapper--trial">
+            <header>
+                <h2>
+                    starter
+                </h2>
+                <span>
+                    limited
+                </span>
+            </header>
+            <div class="level__content">
+                <div class="level__price-wrapper">
+                    <h2 class="level__price">
+                        free
+                    </h2>
+                    <span>
+                        purchase advanced systems separately
+                    </span>
+                </div>
+                <ul>
+                    <li>2 systems included</li>
+                    <li>purchase advanced systems separately</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✖<span>(in-app purchase)</span></li>
+                    <li>✖<span>(in-app purchase)</span></li>
+                    <li>✖<span>(in-app purchase)</span></li>
+                    <li>✖<span>(in-app purchase)</span></li>
+                    <li>✖<span>(in-app purchase)</span></li>
+                </ul>
+            </div>
+            <a class="btn btn--level" href="#download">
+                download now
+            </a>
+        </div>
+        <div class="level__wrapper">
+            <header>
+                <h2>
+                    monthly
+                </h2>
+                <span>
+                    subscription
+                </span>
+            </header>
+            <div class="level__content">
+                <div class="level__price-wrapper">
+                    <h2 class="level__price">
+                        $9.95
+                    </h2>
+                    <span>
+                        paid monthly
+                    </span>
+                </div>
+                <ul>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                </ul>
+            </div>
+            <a class="btn btn--level btn--disabled">
+                coming soon
+            </a>
+        </div>
+        <div class="level__wrapper">
+            <header>
+                <h2>
+                    yearly
+                </h2>
+                <span>
+                    subscription
+                </span>
+            </header>
+            <div class="level__content">
+                <div class="level__price-wrapper">
+                    <h2 class="level__price">
+                        $3.95
+                    </h2>
+                    <span>
+                        paid monthly
+                    </span>
+                </div>
+                <ul>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                </ul>
+            </div>
+            <a class="btn btn--level btn--disabled">
+                coming soon
+            </a>
+        </div>
+        <div class="level__wrapper">
+            <header>
+                <h2>
+                    lifetime
+                </h2>
+                <span>
+                    Š
+                </span>
+            </header>
+            <div class="level__content">
+                <div class="level__price-wrapper">
+                    <h2 class="level__price">
+                        $39.95
+                    </h2>
+                    <span>
+                        one time fee
+                    </span>
+                </div>
+                <ul>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                    <li>✔</li>
+                </ul>
+            </div>
+            <a class="btn btn--level" href="#download">
+                download now
+            </a>
+        </div>
+    </section>
+</article>
+
+<style>
+    .pricing__content {
+        display: grid;
+        grid-template-columns: 0.75fr 1fr 1fr 1fr 1fr;
+        gap: 1rem;
+    }
+
+    .level__wrapper {
+        display: grid;
+        grid-template-rows: 3rem auto auto;
+        gap: 1rem;
+    }
+
+    .level__wrapper header {
+        text-align: center;
+    }
+
+    .level__wrapper header h2 {
+        color: var(--c-bkg);
+    }
+
+    .level__content {
+        border-radius: var(--r-1);
+        background: var(--c-bkg);
+        padding: 2rem 1rem;
+    }
+
+    .level__price-wrapper h2 {
+        text-align: center;
+    }
+
+    .level__wrapper span {
+        color: var(--c-bkg);
+    }
+
+    .level-wrapper--trial .level__content {
+        background: #DBDBDB;
+    }
+
+.btn--level {
+    text-align: center;
+    background: orangered;
+    padding: .25rem 1rem;
+    color: white;
+    display: block;
+    border-radius: 999px;
+    text-transform: uppercase;
+    font-size: 1rem;
+}
+
+.btn--disabled {
+    background: var(--c-bkg);
+    color: var(--c-1);
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+</style>

src/_includes/reviews.ejs

@@ -0,0 +1,93 @@
+<article class="reviews-wrapper">
+    <header>
+        <h1 id="reviews">
+            Glowing reviews
+        </h1>
+    </header>
+    <section>
+        <ul class="reviews">
+            <% reviews.forEach((review)=> { %>
+                <li class="review">
+                    <div class="rating-wrapper">
+                        <div class="rating">
+                            <% for (let step=0; step <=review.stars * 10; step +=5) { %>
+                                <% if (step> 0) { %>
+                                    <label class="<%= (step % 2 == 0) ? 'full' : 'half' %> <%= step %>"></label>
+                                    <% } %>
+                                        <% } %>
+                                            <% if (review.stars * 10 % 2 !==0) { %>
+                                                <label class="full" style="color: transparent"></label>
+                                                <% } %>
+                        </div>
+                        <a href="<%= review.link %>">
+                            <%= review.site %>
+                        </a>
+                    </div>
+                    <blockquote>
+                        <%= review.quote %>
+                    </blockquote>
+                    <label class="review__name">
+                        <%= review.name %>
+                    </label>
+                </li>
+                <% }) %>
+        </ul>
+    </section>
+</article>
+
+<style>
+
+    /****** Style Star Rating Widget *****/
+
+
+    .reviews-wrapper blockquote {
+        font-family: 'DM Serif Display', serif;
+        font-size: 59px;
+        line-height: .9;
+        margin: 0 2rem;
+    }
+
+    .rating-wrapper {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+    }
+
+    .reviews {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem
+    }
+
+    .review {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .review__name {
+        align-self: flex-end;
+    }
+
+    .rating {
+        border: none;
+        display: flex;
+    }
+
+    .rating>label:before {
+        margin: 5px;
+        font-size: 1.25em;
+        font-family: FontAwesome;
+        display: inline-block;
+        content: "\f005";
+    }
+
+    .rating>.half:before {
+        content: "\f089";
+        position: absolute;
+        color: var(--c-1);
+    }
+
+    .rating>label {
+        color: var(--c-1);
+    }
+</style>

src/_includes/screenshots.ejs

@@ -0,0 +1,322 @@
+<article class="screenshots__wrapper">
+    <header>
+    <h1 id="screenshots">
+        Hi-res imagery everywhere you need it
+    </h1>
+    <aside>
+        Visual Anatomy 3d runs portrait and landscape, on all your devices.
+    </aside>
+    </header>
+    <!-- <img src="assets/images/posts/error.png" alt="">
+    <img src="assets/images/posts/error2.png" alt="">
+    <img src="assets/images/posts/1.png" alt="">
+    <img src="assets/images/posts/2.png" alt=""> -->
+    <!-- <img src="assets/images/screenshots/Simulator Screen Shot - iPhone 12 Pro Max - 2021-10-14 at 14.37.14.png" alt="">
+    <img src="assets/images/posts/1.png" alt="">
+    <img src="assets/images/screenshots/1.png" alt="">
+    <img src="assets/images/screenshots/mu.png" alt=""> -->
+    <div class="test-images">
+    <!-- <% collections.screenshots.forEach((screenshot, index)=> { %>
+        <%= screenshot.replace('src/','') %>
+        <img style="width:50px;" src="<%= screenshot.replace('src/','') %>" alt="">
+    <% }) %> -->
+    </div> 
+    <section class="carousel" aria-label="Gallery">
+        <ol class="carousel__viewport">
+            <% collections.screenshots.forEach((screenshot, index)=> { %>
+                <li id="carousel__slide<%= index %>" tabindex="0" class="carousel__slide" style="background-image: url(<%= screenshot.replace('src/','') %>);">
+                    <div class="carousel__snapper">
+                        <!-- <label for="">
+                            <%= screenshot.replace('src/','') %>
+                        </label> -->
+                        <a href="#carousel__slide<%= (index == 0) ? collections.screenshots.length - 1 : index - 1 %>" class="carousel__prev">Go to last slide</a>
+                        <a href="#carousel__slide<%= index + 1 %>" class="carousel__next">Go to next slide</a>
+                    </div>
+                </li>
+            <% }) %>
+            <!-- 
+            <li id="carousel__slide1" tabindex="0" class="carousel__slide">
+                <div class="carousel__snapper">
+                    <a href="#carousel__slide4" class="carousel__prev">Go to last slide</a>
+                    <a href="#carousel__slide2" class="carousel__next">Go to next slide</a>
+                </div>
+            </li>
+            <li id="carousel__slide2" tabindex="0" class="carousel__slide">
+                <div class="carousel__snapper"></div>
+                <a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a>
+                <a href="#carousel__slide3" class="carousel__next">Go to next slide</a>
+            </li>
+            <li id="carousel__slide3" tabindex="0" class="carousel__slide">
+                <div class="carousel__snapper"></div>
+                <a href="#carousel__slide2" class="carousel__prev">Go to previous slide</a>
+                <a href="#carousel__slide4" class="carousel__next">Go to next slide</a>
+            </li>
+            <li id="carousel__slide4" tabindex="0" class="carousel__slide">
+                <div class="carousel__snapper"></div>
+                <a href="#carousel__slide3" class="carousel__prev">Go to previous slide</a>
+                <a href="#carousel__slide1" class="carousel__next">Go to first slide</a>
+            </li> 
+            -->
+        </ol>
+        <aside class="carousel__navigation">
+            <ol class="carousel__navigation-list">
+                <% collections.screenshots.forEach((screenshot, index)=> { %>
+                    <li class="carousel__navigation-item">
+                        <a href="#carousel__slide<%= index %>" class="carousel__navigation-button">Go to slide 1</a>
+                    </li>
+                <% }) %>
+            </ol>
+        </aside>
+    </section>
+</article>
+
+<style>
+    @keyframes tonext {
+        75% {
+            left: 0;
+        }
+
+        95% {
+            left: 100%;
+        }
+
+        98% {
+            left: 100%;
+        }
+
+        99% {
+            left: 0;
+        }
+    }
+
+    @keyframes tostart {
+        75% {
+            left: 0;
+        }
+
+        95% {
+            left: -300%;
+        }
+
+        98% {
+            left: -300%;
+        }
+
+        99% {
+            left: 0;
+        }
+    }
+
+    @keyframes snap {
+        96% {
+            scroll-snap-align: center;
+        }
+
+        97% {
+            scroll-snap-align: none;
+        }
+
+        99% {
+            scroll-snap-align: none;
+        }
+
+        100% {
+            scroll-snap-align: center;
+        }
+    }
+
+    .test-images {
+        display: flex;
+        flex-wrap: wrap;
+        font-size: .5rem;
+    }
+
+    /* body {
+        max-width: 37.5rem;
+        margin: 0 auto;
+        padding: 0 1.25rem;
+        font-family: 'Lato', sans-serif;
+    } */
+
+    .carousel * {
+        box-sizing: border-box;
+        scrollbar-color: transparent transparent;
+        /* thumb and track color */
+        scrollbar-width: 0px;
+    }
+
+    .carousel *::-webkit-scrollbar {
+        width: 0;
+    }
+
+    .carousel *::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .carousel *::-webkit-scrollbar-thumb {
+        background: transparent;
+        border: none;
+    }
+
+    .carousel * {
+        -ms-overflow-style: none;
+    }
+
+    .carousel ol,
+    .carousel li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .carousel {
+        position: relative;
+        padding-top: 75%;
+        filter: drop-shadow(0 0 10px #0003);
+        perspective: 100px;
+    }
+
+    .carousel__viewport {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        overflow-x: scroll;
+        counter-reset: item;
+        scroll-behavior: smooth;
+        scroll-snap-type: x mandatory;
+        gap: 1rem;
+    }
+
+    .carousel__slide {
+        position: relative;
+        flex: 0 0 25%;
+        width: 25%;
+        background-color: #f99;
+        counter-increment: item;
+        border-radius: var(--r-1);
+        background-size: cover;
+    }
+
+    .carousel__slide:nth-child(even) {
+        background-color: #99f;
+    }
+
+    .carousel__slide:before {
+        /* content: counter(item); */
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate3d(-50%, -40%, 70px);
+        color: #fff;
+        font-size: 2em;
+    }
+
+    .carousel__snapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        scroll-snap-align: center;
+    }
+
+    @media (hover: hover) {
+        .carousel__snapper {
+            animation-name: tonext, snap;
+            animation-timing-function: ease;
+            animation-duration: 4s;
+            animation-iteration-count: infinite;
+        }
+
+        .carousel__slide:last-child .carousel__snapper {
+            animation-name: tostart, snap;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .carousel__snapper {
+            animation-name: none;
+        }
+    }
+
+    .carousel:hover .carousel__snapper,
+    .carousel:focus-within .carousel__snapper {
+        animation-name: none;
+    }
+
+    .carousel__navigation {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        text-align: center;
+    }
+
+    .carousel__navigation-list,
+    .carousel__navigation-item {
+        display: inline-block;
+    }
+
+    .carousel__navigation-button {
+        display: inline-block;
+        width: 1.5rem;
+        height: 1.5rem;
+        background-color: #333;
+        background-clip: content-box;
+        border: 0.25rem solid transparent;
+        border-radius: 50%;
+        font-size: 0;
+        transition: transform 0.1s;
+    }
+
+    .carousel::before,
+    .carousel::after,
+    .carousel__prev,
+    .carousel__next {
+        position: absolute;
+        top: 0;
+        margin-top: 37.5%;
+        width: 4rem;
+        height: 4rem;
+        transform: translateY(-50%);
+        border-radius: 50%;
+        font-size: 0;
+        outline: 0;
+    }
+
+    .carousel::before,
+    .carousel__prev {
+        left: -1rem;
+    }
+
+    .carousel::after,
+    .carousel__next {
+        right: -1rem;
+    }
+
+    .carousel::before,
+    .carousel::after {
+        content: '';
+        z-index: 1;
+        background-color: #333;
+        background-size: 1.5rem 1.5rem;
+        background-repeat: no-repeat;
+        background-position: center center;
+        color: #fff;
+        font-size: 2.5rem;
+        line-height: 4rem;
+        text-align: center;
+        pointer-events: none;
+    }
+
+    .carousel::before {
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
+    }
+
+    .carousel::after {
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
+    }
+</style>

src/_includes/store-icons/android.svg

@@ -0,0 +1,3 @@
+<svg width="88" height="97" viewBox="0 0 88 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.9932 46.3913L63.8426 30.4439L12.6495 1.49383C9.25667 -0.350607 6.07821 -0.609474 3.29102 1.40754L47.9932 46.3913ZM66.544 65.0621L83.0206 55.7375C86.2366 53.9254 88 51.3583 88 48.5108C88 45.6686 86.2366 43.0961 83.0259 41.284L68.1092 32.8546L51.3164 49.7458L66.544 65.0621ZM0.535997 5.32831C0.192958 6.39075 0 7.57723 0 8.87696V88.1823C0 90.2371 0.450238 92.006 1.26495 93.4136L44.6646 49.7404L0.535997 5.32831ZM47.9932 53.0841L4.83469 96.5146C5.66013 96.8328 6.54988 97 7.48788 97C9.16019 97 10.9022 96.5038 12.6763 95.5115L62.2829 67.4836L47.9932 53.0841Z" fill="#00C2FF"/>
+</svg>

src/_includes/store-icons/ios.svg

@@ -0,0 +1,3 @@
+<svg width="109" height="108" viewBox="0 0 109 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.5 0C84.6003 0 109 24.1758 109 54C109 83.8242 84.6003 108 54.5 108C24.3997 108 0 83.8242 0 54C0 24.1758 24.3997 0 54.5 0ZM37.1853 72.0522C35.0326 69.4764 32.3566 68.5584 29.1248 69.3036L28.3073 69.525L25.0918 75.0114C24.4854 75.9896 24.2845 77.1624 24.5313 78.284C24.7781 79.4057 25.4533 80.3892 26.4156 81.0286C27.3779 81.668 28.5526 81.9136 29.6936 81.714C30.8346 81.5144 31.8534 80.885 32.5365 79.9578L32.8744 79.4556L37.1799 72.0522H37.1853ZM61.0945 35.964C58.4349 38.1456 55.7535 44.5878 59.514 51.0138L76.082 79.4502C76.6557 80.4163 77.5763 81.1322 78.6597 81.4548C79.7431 81.7775 80.9095 81.6832 81.9257 81.1906C82.9419 80.6981 83.7331 79.8437 84.1411 78.7982C84.549 77.7527 84.5437 76.5932 84.1262 75.5514L83.8591 75.0114L79.4882 67.4946H85.9737C86.5629 67.496 87.1466 67.382 87.6911 67.1591C88.2356 66.9362 88.7303 66.6088 89.1467 66.1958C89.563 65.7827 89.8928 65.2922 90.1171 64.7524C90.3414 64.2126 90.4558 63.6342 90.4536 63.0504C90.4565 61.9676 90.0588 60.9212 89.3357 60.1093C88.6126 59.2973 87.6144 58.7761 86.5296 58.644L85.9683 58.6116H74.3053L62.348 38.1078L61.0945 35.9694V35.964ZM62.6096 19.5264C61.6684 18.9908 60.5635 18.8105 59.4987 19.0189C58.4339 19.2274 57.4811 19.8104 56.8162 20.6604L56.4783 21.1572L54.4782 24.5754L52.5216 21.1572C51.9479 20.1911 51.0273 19.4752 49.9439 19.1526C48.8605 18.8299 47.6941 18.9243 46.6779 19.4168C45.6617 19.9093 44.8705 20.7637 44.4626 21.8092C44.0546 22.8547 44.0599 24.0142 44.4775 25.056L44.7445 25.596L49.3116 33.4638L34.6783 58.59H23.2497C22.661 58.5886 22.0778 58.7024 21.5336 58.925C20.9894 59.1476 20.495 59.4745 20.0787 59.8869C19.6624 60.2994 19.3325 60.7893 19.1079 61.3285C18.8833 61.8676 18.7684 62.4455 18.7698 63.0288C18.7698 65.3022 20.4702 67.1652 22.6884 67.4406L23.2497 67.473H64.0157C65.8687 64.017 63.6887 59.1084 59.6012 58.6278L58.9417 58.59H45.0279L64.2555 25.596C64.8495 24.5749 65.0099 23.3617 64.7012 22.2235C64.3925 21.0852 63.6402 20.115 62.6096 19.5264Z" fill="#00C2FF"/>
+</svg>

src/_includes/store-icons/macos.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="116" viewBox="0 0 100 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 85.1098C97.2652 91.1454 95.9573 93.8441 92.4451 99.1777C87.5381 106.627 80.6098 115.922 72.0443 115.985C64.4254 116.049 62.4589 111.03 52.119 111.112C41.7791 111.162 39.6251 116.077 31.9971 115.999C23.4316 115.922 16.8737 107.547 11.9621 100.112C-1.77107 79.2565 -3.22076 54.8131 5.26702 41.8073C11.2716 32.5851 20.7746 27.1695 29.6968 27.1695C38.7837 27.1695 44.4956 32.1475 52.0093 32.1475C59.2989 32.1475 63.7394 27.1558 74.2485 27.1558C82.1967 27.1558 90.6021 31.4728 96.6067 38.9216C76.9604 49.6527 80.1525 77.6245 100 85.1098ZM66.2729 18.8317C70.0961 13.9403 72.9955 7.03854 71.9436 0C65.7059 0.423953 58.4117 4.39453 54.1495 9.53667C50.2898 14.2184 47.0885 21.1749 48.337 27.9034C55.1419 28.1222 62.1845 24.0787 66.2729 18.8317Z" fill="#00C2FF"/>
+</svg>

src/_includes/store-icons/windows.svg

@@ -0,0 +1,3 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.5745 8.93049L0 14.5291V49.9263H42.5745V8.93049ZM0 89.5972L42.5745 95.6569V53.9921H0V89.5972ZM47.2704 54.5247L47.4392 95.9492L103.919 103.918V54.5247H47.2704ZM103.919 0L47.6081 8.07966V49.738H103.919V0Z" fill="#00C2FF"/>
+</svg>

src/_includes/systems.ejs

@@ -0,0 +1,79 @@
+<article class="system__wrapper">
+    <header>
+        <h1>
+            6 detailed body systems
+        </h1>
+        <aside>
+            Switch between all systems of the body with the push of a button
+        </aside>
+    </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>
+                </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 %>">
+            <% }) %>
+        </div>
+    </section>
+</article>
+
+<script>
+
+    function zoom (slug) {
+
+        const thisClass = 'zoom__image--' + slug;
+        let thisImage = document.querySelector('.' + thisClass);
+
+        thisImage.classList.add('zoom__image--visible')
+
+        let allImages = document.querySelectorAll('.zoom__image');
+
+        for (let elem of allImages) {
+            if(!elem.classList.contains(thisClass)) {
+                elem.classList.remove('zoom__image--visible')
+            }
+        }
+    }
+
+
+
+</script>
+
+<style>
+
+.system__zoom-wrapper {
+    position: relative;
+}
+
+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;
+}
+
+.system__wrapper section {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+}
+
+</style>

src/assets/images/screenshots/br.svg

@@ -0,0 +1,10 @@
+<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/assets/styles/main.css

@@ -84,3 +84,130 @@ a:hover {
 .content th {
   @apply bg-gray-100;
 }
+
+/*************************************/
+
+/* latin-ext */
+
+/* @font-face {
+  font-family: 'Bebas Neue';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/bebas-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+
+@font-face {
+  font-family: 'Bebas Neue';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/bebas-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+} */
+
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
+@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
+
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
+
+html {
+  font-size: 2vmin;
+  scroll-behavior: smooth;
+}
+
+:root{
+  --r-1: 2rem;
+  --p-1: 1.5rem;
+  --c-bkg: white;
+  --c-1: #00C2FF;
+  --c-2: black;
+}
+
+article {
+  padding: 2rem;
+}
+
+.inset {
+  background: var(--c-1);
+  padding: 4rem 0;
+  position: relative;
+}
+
+.inset::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--r-1);
+  border-radius: 0 0 var(--r-1) var(--r-1);
+  background: var(--c-bkg);
+}
+
+.inset::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--r-1);
+  border-radius: var(--r-1) var(--r-1) 0 0;
+  background: var(--c-bkg);
+}
+
+h1 {
+  font-family: Bebas Neue;
+  font-size: 3.5rem;
+  color: var(--c-2);
+  line-height: 0.77;
+  width: 17ch;
+  margin-bottom: 1rem;
+}
+
+h1.h1--hero {
+  font-size: 4.2rem;
+  width: auto;
+}
+
+h2 {
+  font-family: Bebas Neue;
+  font-size: 3rem;
+  color: var(--c-2);
+  line-height: 0.85;
+}
+
+.hero__wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.blurb__wrapper {
+  border-radius: var(--radius);
+  background: var(--c-bkg);
+}
+
+.system__wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.system__list { 
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.system__list li {
+  aspect-ratio: 1;
+  height: 5rem;
+  background: var(--c-1);
+  border-radius: var(--r-1);
+}

src/index.ejs

@@ -8,10 +8,61 @@ permalink: '<% if (pagination.pageNumber > 0) { %><%= `page${pagination.pageNumb
 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 %>
+
+<% include /blurb %>
+
+<div class="inset">
+
+  <% include /info %>
+
+</div>
+
+<% include /screenshots %>
+
+<% include /systems %>
+
+<div class="inset">
+
+  <% include /pricing %>
+
+  <% include /download %>
+
+</div>
+
+<% include /reviews %>
+
+<!--
 <nav>
-  <% include /nav %>
   <% links.forEach((link) => { %>
     <a href="<%= link.url %>"><%= link.data.title %></a>
   <% }) %>
@@ -38,3 +89,4 @@ links: [ { url: 'a', data: { title: 'b' } } ]
   </div>
   <% } %>
 </div>
+-->

webpack.config.js

@@ -49,7 +49,7 @@ module.exports = {
           {
             loader: 'file-loader',
             options: {
-              name: 'images/posts/[name].[ext]',
+              name: 'images/screenshots/[name].[ext]',
             },
           },
           {