first commit

package.json

@@ -1,7 +1,7 @@
 {
   "name": "graphicvizion",
   "version": "1.0.0",
-  "description": "Visual Anatomy 3D",
+  "description": "GraphicViZion",
   "scripts": {
     "build-dev:webpack": "webpack",
     "watch:webpack": "webpack --watch",

src/_data/reviews.js

@@ -19,5 +19,19 @@ module.exports = [
     stars: 5,
     site: 'App Store',
     link: ''
+  },
+  {
+    name: 'Lara T',
+    quote: 'Best acupuncture app on the market. Easy to work with and complete',
+    stars: 5,
+    site: 'App Store',
+    link: ''
+  },
+  {
+    name: 'johnson lawley',
+    quote: 'I had a little problem with the app (my own fault), graphicvizion responded very quickly and solved it right away.',
+    stars: 5,
+    site: 'App Store',
+    link: ''
   }
 ]

src/_data/sections.js

@@ -1,9 +1,7 @@
 module.exports = [ 
     //{ slug: 'home', name: 'Home' }, 
     { slug: 'info', name: 'Info' }, 
-    { slug: 'screenshots', name: 'Screenshots' }, 
-    { slug: 'systems', name: 'Systems' }, 
-    { slug: 'pricing', name: 'Pricing' }, 
+    { slug: 'showcase', name: 'Showcase' }, 
     { slug: 'download', name: 'Download' }, 
     { slug: 'reviews', name: 'Reviews' }, 
     { slug: 'contact', name: 'Contact' }

src/_data/showcase.js

@@ -0,0 +1,65 @@
+module.exports = [ 
+    { 
+        name: 'Visual Anatomy 3d', 
+        slug: 'visual-anatomy-3d',
+        url: 'https://visualanatomy3d.app', 
+        description: 
+        `
+            Complete and easy-to-use virtual guide for learning, understanding, and visualizing the complexities of human anatomy.<br>
+            Includes information and images for each part, multiple options to interact with the 3D models (hiding, fading, etc), and much more.
+        `,
+        order: 1
+    },
+    { 
+        name: 'Visual Acupuncture 3d', 
+        slug: 'visual-acupuncture-3d',
+        url: 'https://visualacupuncture3d.app', 
+        description: 
+        `
+            Study acupuncture visually and interactively.<br>
+            Get a good feel for the flow of meridian pathways and their (anatomical) point locations.
+        `,
+        order: 2
+    },
+    { 
+        name: 'Visual Anatomy Canine', 
+        slug: 'visual-anatomy-canine',
+        url: 'https://youtu.be/alb5UK6tY5E', 
+        description: 
+        `
+            An interactive visual guide for learning and understanding canine(dog) anatomy quickly get a clear and complete 3 dimensional understanding of all muscles, bones & organs.<br>
+            Includes the option to search, save/restore states, quality settings and more.
+        `,
+        order: 3
+    },
+    { 
+        name: 'Total Reflexology', 
+        slug: 'total-reflexology',
+        url: 'https://youtu.be/EANNJv0d2eI', 
+        description: 
+        `
+        Total Reflexology is aimed to create a more fun, easy and interactive way to learn, look up or share information and provides you with a portable reflexology guide (quickly and easily look up anything reflexology related from anywhere).
+        `,
+        order: 4
+    },
+    { 
+        name: 'Easy Acupuncture', 
+        slug: 'easy-acupuncture',
+        url: 'https://youtu.be/rtuRrrLPNvk', 
+        description: 
+        `
+            Simple and easy to use app to view all acupuncture points and meridians in both full interactive 3D(zoom, pan, rotate & touch) and with the help of 2D illustrated images, animations and detailed text.
+        `,
+        order: 5
+    },
+    { 
+        name: 'Diffriend', 
+        slug: 'diffriend',
+        url: '', 
+        description: 
+        `
+            Peer support app for people with physical or psychological ailments; get in touch with people who are 'different' themselves in an easy and convenient way.
+        `,
+        order: 6
+    },
+]

src/_data/site.json

@@ -1,8 +1,8 @@
 {
-  "site_name": "Visual Anatomy 3D",
-  "title": "Visual Anatomy 3D",
+  "site_name": "GraphicViZion",
+  "title": "GraphicViZion",
   "description": "Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.",
-  "url": "https://visualanatomy3d.app/",
+  "url": "https://graphicvizion.com/",
   "locale": "en",
   "author": "Spencer Flagg"
 }

src/_includes/blurb.ejs

@@ -1,43 +1,24 @@
 <article class="blurb__wrapper">
     <section>
         <p>
-            <em>Complete</em> and <em>easy-to-use</em> virtual guide for learning, understanding, and visualizing the complexities of human anatomy in 3D.
-            Includes information and images for each anatomical system and part, multiple options to interact with the <em>3D anatomy</em> models (hiding, fading, etc), and much more.
+          <%= site.site_name %> is here to help you <em>learn complex medical subjects</em> like anatomy and acupuncture in the easiest way possible: <em>VISUALLY.</em>
+          With our suite of slick, professional products you can focus on what's important to you, and spend less time searching through books and atlasses to find what you need.
         </p>
         <p class="hide-on-mobile">
-            The <%= site.site_name %> app can be downloaded and tested for free, which contains the skeleton and ligaments, other anatomical systems can be purchased separately.
-            The anatomy app is available on <em>most platforms</em> (android, iOS, windows and mac) and can be used on your phone, tablet or desktop pc.
+          Our goal is to bring you world-class, crystal clearest images, polished <em>interactive 3D models</em>, and an easy-to-use interface, suitable for all students of anatomy.
+          Through learning in a more visual and interactive way, we believe you will learn deeper, understand more, and excel faster.
         </p>
     </section>
     <section>
         <div class="before-and-after">
             <div class='img background-img'></div>
-            <div class='img foreground-img'></div>
-            <input type="range" min="1" max="100" value="59" class="slider" name='slider' id="before-and-after__slider">
-            <div class='slider-button'></div>
         </div>
     </section>
 </article>
 
-<script>
-  document.querySelector('#before-and-after__slider').addEventListener('input', (e) => {
-    const sliderPos = e.target.value;
-    // Update the width of the foreground image
-    document.querySelector('.foreground-img').style.width = `${sliderPos}%`;
-    // Update the position of the slider button
-    document.querySelector('.slider-button').style.left = `calc(${sliderPos}% - 18px)`;
-  });
-</script>
-
 <style>
   .before-and-after .background-img {
-    background-image: url('./assets/images/slider-1.png');
-    background-position-x: -1px;
-  }
-
-  .before-and-after .foreground-img {
-    background-image: url('./assets/images/slider-2.png');
+    background-image: url('./assets/images/intro.jpg');
     background-position-x: -1px;
-    width: 59%;
   }
 </style>

src/_includes/download.ejs

@@ -3,6 +3,10 @@
         <h1 id="download">
             download now
         </h1>
+        <aside>
+            Go to <a href=""><%= site.site_name %>'s app store page</a> to view and download our apps directly.
+            Most of our apps can be downloaded for free, however some will require in-app purchases to unlock all options and information.
+        </aside>
     </header>
     <section class="download__content">
         <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602" target="_blank">

src/_includes/hero.ejs

@@ -5,7 +5,7 @@
             <source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">
         </video> -->
         <img src="./assets/images/hero.png" class="hero__video">
-        <div class="hero__info">
+        <!-- <div class="hero__info">
             <a class="btn btn--hero" href="#download">
                 download now
             </a>
@@ -15,7 +15,7 @@
                 <% include /store-icons/macos.svg %>
                 <% include /store-icons/windows.svg %>
             </div>
-        </div>
+        </div> -->
         <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"
@@ -25,6 +25,6 @@
                 <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">Interactive human anatomy in real-time 3D</h1>
+            <h1 class="h1--hero">Interactive,<br>creative &<br>beautiful apps</h1>
         </div>
 </article>

src/_includes/layouts/home.ejs

@@ -2,29 +2,6 @@
 layout: layouts/base.ejs
 ---
 
-<span>asdf</span>
 <%= 'hello' | i18n %>
 
-<% include /hero %>
-
-<% include /blurb %>
-
-<div class="inset">
-
-  <% include /info %>
-
-</div>
-
-<% include /screenshots %>
-
-<% include /systems %>
-
-<div class="inset">
-
-  <% include /pricing %>
-
-  <% include /download %>
-
-</div>
-
-<% include /reviews %>
+<!-- for localization eventually -->

src/_includes/showcase.ejs

@@ -0,0 +1,41 @@
+<article class="showcase__wrapper max-w-screen-lg">
+    <header>
+        <h1 id="showcase">
+            our apps
+        </h1>
+        <aside>
+            Most of our apps are available for all platforms (iOS, Android, macOS and Microsoft).
+            Click on the link or the dots to get more information about a specific app.
+            Feel free to contact us for any questions or comments you might have.
+        </aside>
+    </header>
+    <section>
+        <ul>
+            <% showcase.forEach((product)=> { %>
+                <li>
+                    <header>
+                        <img class="icon" src="./assets/images/products/icons/<%= product.slug %>.png" alt="">
+                        <div>
+                            <h2><%= product.name %></h2>
+                            <a href="<%= product.url %>"><%= product.url %></a>
+                        </div>
+                    </header>
+                    <div class="product-hero__wrapper">
+                        <img class="hero" src="./assets/images/products/heros/<%= product.slug %>.jpg" alt="">
+                        <div class="product-hero__banner">
+                            <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>
+                            <svg class="banner-edge-bottom" 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>
+                            <%- product.description %>
+                        </div>
+                    </div>
+                </li>
+            <% }) %> 
+        </ul>
+    </section>
+</article>

src/assets/styles/_hero.css

@@ -42,13 +42,13 @@
 }
 
 .hero__info {
-position: absolute;
-top: 30%;
-right: 15%;
-display: flex;
-flex-direction: column;
-gap: 1rem;
-align-items: center;
+    position: absolute;
+    top: 30%;
+    right: 15%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
 }
 
 .no-flexbox-gap .hero__info > *:not(:last-child) {

src/assets/styles/_showcase.css

@@ -0,0 +1,79 @@
+article.showcase__wrapper {
+    flex-direction: column;
+    gap: 3rem;
+}
+
+.showcase__wrapper header {
+    display: flex;
+    gap: 1rem;
+    margin-left: var(--r-1);
+}
+
+.showcase__wrapper header h2 {
+    margin-top: 1rem;
+}
+
+.showcase__wrapper ul {
+    display: flex;
+    flex-direction: column;
+    gap: 5rem;
+}
+
+.showcase__wrapper ul li {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.showcase__wrapper .hero {
+    border-radius: var(--r-1);
+}
+.showcase__wrapper .icon {
+    height: 5rem;
+    width: 5rem;
+    transition: 0.2s all;
+    border: 3px solid var(--c-1);
+    border-radius: 1rem;
+}
+
+.product-hero__wrapper{
+    position: relative;
+    max-width: 880px;
+    --weird-gap: 0.04rem;
+    /* border-radius: var(--r-1);
+    background-color: var(--c-3); */
+}
+
+.product-hero__bkg{
+    width: 100%;
+    background-color: aqua;
+}
+.product-hero__banner{
+    background: var(--c-1);
+    border-radius: var(--r-1) 0 0 0;
+    padding: var(--p-1);
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 60ch;
+}
+
+.product-hero__banner .banner-edge-right {
+    right: 0;
+    top: calc(-1 * var(--r-1));
+    transform: scaleX(-1) rotate(90deg);
+}
+
+.product-hero__banner .banner-edge-bottom {
+    position: absolute;
+    left: calc(-1 * var(--r-1));
+    height: var(--r-1);
+    width: var(--r-1);
+    bottom: calc(-1 * var(--weird-gap));
+    transform: scaleX(-1) rotate(90deg);
+
+}
+
+.banner-edge-right path, .banner-edge-bottom path {
+    fill: var(--c-1) !important;
+}

src/assets/styles/main.css

@@ -148,7 +148,7 @@ body{
   /* --c-1: #00C2FF; */
   --c-1: #ececec;
   --c-2: black;
-  --c-3: #00C2FF;
+  --c-3: #0477d7;
   --viewportWidth: calc(100vw - var(--scrollbarWidth));
 }
 
@@ -168,14 +168,15 @@ body {
 .site-logo {
   height: 5rem;
   width: 5rem;
-  transform: rotateZ(0deg) translateY(0.4rem);
+  transform: rotateZ(0deg) translateY(1.2rem);
   transition: 0.2s all;
-  border: 3px solid var(--c-1);
+  /* border: 3px solid var(--c-1); */
   border-radius: 1rem;
+  z-index: 2;
 }
 
 .site-logo:hover {
-  transform: rotateZ(4deg) translateY(0.4rem) scale(1.1);
+  transform: rotateZ(4deg) translateY(1.2rem) scale(1.1);
 }
 
 .site-header {
@@ -316,7 +317,7 @@ h2 {
 
 @import '_blurb.css';
 
-@import '_info.css';
+@import '_showcase.css';
 
 @import '_screenshots.css';
 

src/index.ejs

@@ -15,17 +15,7 @@ eleventyComputed:
 
 <div class="inset">
 
-  <% include /info %>
-
-</div>
-
-<% include /screenshots %>
-
-<% include /systems %>
-
-<div class="inset">
-
-  <% include /pricing %>
+  <% include /showcase %>
 
   <% include /download %>
 

webpack.config.js

@@ -65,6 +65,18 @@ module.exports = {
               name: 'images/systems/[name].[ext]',
             },
           },
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'images/products/icons/[name].[ext]',
+            },
+          },
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'images/products/heros/[name].[ext]',
+            },
+          },
           {
             loader: 'image-webpack-loader',
             options: {