v1.0.0

src/_data/showcase.js

@@ -8,7 +8,8 @@ module.exports = [
             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
+        order: 1,
+        color: 'linear-gradient(#10506b, #4f99b7)'
     },
     { 
         name: 'Visual Acupuncture 3d', 
@@ -19,7 +20,8 @@ module.exports = [
             Study acupuncture visually and interactively.<br>
             Get a good feel for the flow of meridian pathways and their (anatomical) point locations.
         `,
-        order: 2
+        order: 2,
+        color: 'linear-gradient(#283738, #1fb1d7)'
     },
     { 
         name: 'Visual Anatomy Canine', 
@@ -30,7 +32,8 @@ module.exports = [
             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
+        order: 3,
+        color: 'linear-gradient(#3790b7, #7ebdbf)'
     },
     { 
         name: 'Total Reflexology', 
@@ -40,7 +43,8 @@ module.exports = [
         `
         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
+        order: 4,
+        color: 'linear-gradient(#e2b25f, #e47dcf)'
     },
     { 
         name: 'Easy Acupuncture', 
@@ -50,7 +54,8 @@ module.exports = [
         `
             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
+        order: 5,
+        color: 'linear-gradient(#27abec, #70d6f6)'
     },
     { 
         name: 'Diffriend', 
@@ -60,6 +65,7 @@ module.exports = [
         `
             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
+        order: 6,
+        color: 'linear-gradient(#6cd7fa, #bad32c)'
     },
 ]

src/_includes/download.ejs

@@ -9,7 +9,7 @@
         </aside>
     </header>
     <section class="download__content">
-        <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602" target="_blank">
+        <a class="platform__wrapper" href="https://apps.apple.com/us/developer/graphicvizion/id492668041" target="_blank">
             <% include /store-icons/ios.svg %>
                 <h2>
                     iOS
@@ -18,7 +18,7 @@
                     go to store
                 </div>
             </a>
-        <a class="platform__wrapper" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr" target="_blank">
+        <a class="platform__wrapper" href="https://play.google.com/store/apps/developer?id=GraphicViZion" target="_blank">
             <% include /store-icons/android.svg %>
                 <h2>
                     Android
@@ -27,7 +27,7 @@
                     go to store
                 </div>
             </a>
-        <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602" target="_blank">
+        <a class="platform__wrapper" href="https://apps.apple.com/us/developer/graphicvizion/id492668041" target="_blank">
             <% include /store-icons/macos.svg %>
                 <h2>
                     macOS
@@ -36,7 +36,7 @@
                     go to store
                 </div>
         </a>
-        <a class="platform__wrapper" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21" target="_blank">
+        <a class="platform__wrapper" href="https://apps.microsoft.com/store/search?hl=en-en&gl=EN&publisher=GraphicVizion" target="_blank">
             <% include /store-icons/windows.svg %>
                 <h2>
                     Windows

src/_includes/layouts/base.ejs

@@ -183,10 +183,10 @@
         emailError.classList.remove('form-alert--visible');
 
         var details = {
-          'hash': md5(fromEmail.value + 'erkbn234987kjs'),
+          'hash': md5(fromEmail.value + '192y34kjsdf32gt'),
           'fromEmail': fromEmail.value,
           'message': message.value,
-          'title': 'Support - Visual Anatomy 3D (site)'
+          'title': 'Support - GraphicViZion (site)'
         };
 
         var formBody = [];

src/_includes/showcase.ejs

@@ -13,27 +13,34 @@
         <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>
+                    <a href="<%= product.url %>">
+                        <header>
+                            <img class="product-icon" src="./assets/images/products/icons/<%= product.slug %>.png" alt="">
+                            <div>
+                                <h2><%= product.name %></h2>
+                                <span>more info</span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="100" height="100" viewBox="0 0 24 24" stroke-width="2" stroke="var(--c-3)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                    <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                                    <line x1="10" y1="14" x2="20" y2="4" />
+                                    <polyline points="15 4 20 4 20 9" />
+                                  </svg>
+                            </div>
+                        </header>
+                        <div class="product-hero__wrapper">
+                            <img class="hero" src="./assets/images/products/heros/<%= product.slug %>.png" alt="" style="background-image: <%= product.color %>">
+                            <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>
-                    </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>
+                    </a>
                 </li>
             <% }) %> 
         </ul>

src/assets/styles/_hero.css

@@ -8,6 +8,7 @@
 
 .hero__video {
     border-radius: var(--r-1);
+    background-color: var(--c-3);
 }
 
 .hero__banner {

src/assets/styles/_showcase.css

@@ -19,16 +19,30 @@ article.showcase__wrapper {
     gap: 5rem;
 }
 
-.showcase__wrapper ul li {
+.showcase__wrapper ul li a {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    position: relative;
+}
+
+/* .showcase__wrapper ul li a::before {
+    height: 100%;
+    width: 100%;
+    background-color: white;
+    content: '';
+    position: absolute;
+    opacity: 0;
 }
 
+.showcase__wrapper ul li a:hover::before {
+    opacity: 1;
+} */
+
 .showcase__wrapper .hero {
     border-radius: var(--r-1);
 }
-.showcase__wrapper .icon {
+.showcase__wrapper .product-icon {
     height: 5rem;
     width: 5rem;
     transition: 0.2s all;
@@ -36,6 +50,11 @@ article.showcase__wrapper {
     border-radius: 1rem;
 }
 
+.showcase__wrapper .icon {
+    height: 0.8em;
+    margin-left: 0.5em;
+}
+
 .product-hero__wrapper{
     position: relative;
     max-width: 880px;
@@ -44,6 +63,10 @@ article.showcase__wrapper {
     background-color: var(--c-3); */
 }
 
+.product-hero__wrapper .hero{
+    background-color: var(--c-3);
+}
+
 .product-hero__bkg{
     width: 100%;
     background-color: aqua;
@@ -56,6 +79,7 @@ article.showcase__wrapper {
     bottom: 0;
     right: 0;
     width: 60ch;
+    color: var(--c-2);
 }
 
 .product-hero__banner .banner-edge-right {

src/assets/styles/main.css

@@ -1,13 +1,5 @@
 @tailwind base;
 
-a {
-  @apply text-blue-700;
-}
-
-a:hover {
-  @apply underline;
-}
-
 /* @tailwind components; */
 
 /* @tailwind utilities; */
@@ -148,7 +140,7 @@ body{
   /* --c-1: #00C2FF; */
   --c-1: #ececec;
   --c-2: black;
-  --c-3: #0477d7;
+  --c-3: #40cbf2;
   --viewportWidth: calc(100vw - var(--scrollbarWidth));
 }
 
@@ -165,6 +157,10 @@ body {
   animation: pageload 1.5s 1;
 }
 
+a {
+  color: var(--c-3);
+}
+
 .site-logo {
   height: 5rem;
   width: 5rem;