2nd pass

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "graphicvizion",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "graphicvizion",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "license": "ISC",
       "dependencies": {
         "@glidejs/glide": "^3.4.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphicvizion",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "GraphicViZion",
   "scripts": {
     "build-dev:webpack": "webpack",

src/_data/reviews.js

@@ -1,7 +1,7 @@
 module.exports = [
   {
     name: 'Andre Taris',
-    quote: 'I am a designer and researcher and as part of TU Delft’s medical design major you get to do a surgical level anatomy class at Erasmus hospital. A world first and leader in this type of collab this involved full dissection training of us medical designers and common procedure run throughs. Laparoscopic training and this is more thorough than most doctors gets hands on. This app aids at that level',
+    quote: 'I am a visual learner and through the years purchased many apps from graphicvizion, their apps make it so much easier for me to understand complex subjects, thank you!',
     stars: 5,
     site: 'App Store',
     link: ''

src/_includes/blurb.ejs

@@ -18,7 +18,9 @@
 
 <style>
   .before-and-after .background-img {
-    background-image: url('./assets/images/intro.jpg');
-    background-position-x: -1px;
+    background-image: url('./assets/images/intro.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
   }
 </style>

src/_includes/contact.ejs

@@ -20,5 +20,6 @@
             <span class="alert form-alert alert--failure" id="otherError">Something went wrong. Try us on <a href="https://twitter.com/graphicvizion" target="_blank" style="font-weight: 600; color: #eee; text-decoration: underline;">Twitter</a> instead.</span>
             <span class="alert form-alert alert--success" id="success">Thanks! We'll contact you shortly.</span>
         </div>
+        <img class="hide-on-mobile" src="./assets/images/map.png" alt="Map of Utrecht, Netherlands showing GraphicViZion's office" title="Map of Utrecht, Netherlands showing GraphicViZion's office">
     </section>
 </article>

src/_includes/footer.ejs

@@ -72,6 +72,17 @@
                     YouTube
                 </a>
             </li>
+            <li>
+                <a href="https://pinterest.com/Graphic_ViZion/" target="_blank">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-pinterest" 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"/>
+                        <line x1="8" y1="20" x2="12" y2="11" />
+                        <path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" />
+                        <circle cx="12" cy="12" r="9" />
+                      </svg>
+                    Pinterest
+                </a>
+            </li>
             <li>
                 <a href="https://itunes.apple.com/us/artist/graphicvizion/id492668041" target="_blank">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-apple" width="32"
@@ -99,28 +110,6 @@
                     Play Store
                 </a>
             </li>
-            <li><a href="<%= site.url %>app/policies/privacypolicy.html" target="_blank">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-off" 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" />
-                        <line x1="3" y1="3" x2="21" y2="21" />
-                        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83" />
-                        <path
-                            d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341" />
-                    </svg>
-                    Privacy Policy</a></li>
-            <li><a href="<%= site.url %>app/policies/termsofuse.html" target="_blank"><svg
-                        xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-news" 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="M16 6h3a1 1 0 0 1 1 1v11a2 2 0 0 1 -4 0v-13a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1v12a3 3 0 0 0 3 3h11" />
-                        <line x1="8" y1="8" x2="12" y2="8" />
-                        <line x1="8" y1="12" x2="12" y2="12" />
-                        <line x1="8" y1="16" x2="12" y2="16" />
-                    </svg>Terms of Use</a></li>
             <% sections.forEach((link)=> { %>
                 <li class="menu-item">
                     <a href="#<%= link.slug %>">

src/_includes/layouts/base.ejs

@@ -145,7 +145,7 @@
 
     var siteUrl = "<%= site.url %>";
 
-    console.log(siteUrl);
+    //console.log(siteUrl);
 
     document.getElementById('fromEmail').addEventListener('input', function () {
 
@@ -199,7 +199,7 @@
 
         try {
           
-        fetch(siteUrl + 'app/php/email/v1/SendSupportMail.php', {
+        fetch(siteUrl + 'apps/php/email/v1/SendSupportMail.php', {
           method: 'POST',
           //mode: 'no-cors',
           headers: {
@@ -271,7 +271,7 @@
       return isSupported;
     }
 
-    console.log(checkFlexGap());
+    //console.log(checkFlexGap());
 
     if (checkFlexGap()) {
       document.documentElement.classList.add("flexbox-gap");

src/_includes/showcase.ejs

@@ -13,7 +13,7 @@
         <ul>
             <% showcase.forEach((product)=> { %>
                 <li>
-                    <a href="<%= product.url %>">
+                    <a href="<%= product.url %>" target="_blank">
                         <header>
                             <img class="product-icon" src="./assets/images/products/icons/<%= product.slug %>.png" alt="">
                             <div>

src/assets/images/check.svg

@@ -1,10 +0,0 @@
-<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_51:52)">
-<path d="M28.0029 14.3048C28.0029 18.0987 26.5278 21.7372 23.902 24.4198C21.2762 27.1025 17.7149 28.6096 14.0014 28.6096C10.288 28.6096 6.72671 27.1025 4.10093 24.4198C1.47515 21.7372 0 18.0987 0 14.3048C0 10.5109 1.47515 6.87245 4.10093 4.18978C6.72671 1.50711 10.288 0 14.0014 0C17.7149 0 21.2762 1.50711 23.902 4.18978C26.5278 6.87245 28.0029 10.5109 28.0029 14.3048V14.3048ZM21.0547 8.88686C20.9297 8.75958 20.7808 8.65937 20.617 8.59221C20.4532 8.52505 20.2779 8.49233 20.1014 8.49601C19.9249 8.49968 19.751 8.53967 19.59 8.61358C19.4291 8.6875 19.2843 8.79383 19.1645 8.9262L13.0861 16.8385L9.42298 13.0943C9.17414 12.8574 8.84503 12.7284 8.50497 12.7345C8.1649 12.7407 7.84045 12.8814 7.59995 13.1271C7.35945 13.3728 7.22169 13.7043 7.21569 14.0518C7.20969 14.3992 7.33592 14.7354 7.56778 14.9897L12.1988 19.7228C12.3235 19.85 12.4721 19.9502 12.6356 20.0175C12.7991 20.0848 12.9742 20.1178 13.1504 20.1145C13.3267 20.1111 13.5004 20.0715 13.6614 19.9981C13.8223 19.9247 13.9672 19.8189 14.0872 19.687L21.0739 10.7644C21.3121 10.5114 21.4437 10.173 21.4404 9.82196C21.4372 9.47093 21.2993 9.1352 21.0564 8.88686H21.0547Z" fill="#00C2FF"/>
-</g>
-<defs>
-<clipPath id="clip0_51:52">
-<rect width="28" height="29" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/assets/styles/_blurb.css

@@ -48,6 +48,7 @@ article.blurb__wrapper {
     border-radius: var(--r-1);
     overflow: hidden;
     background: var(--c-1);
+    width: 100%;
 }
 
 .before-and-after .img {
@@ -56,7 +57,8 @@ article.blurb__wrapper {
     left: 0;
     width: 100%;
     height: 100%;
-    background-size: cover;
+    background-size: contain;
+    background-position: center bottom;
 }
 
 .before-and-after .slider {

src/assets/styles/_contact.css

@@ -15,7 +15,9 @@
 
 .contact__wrapper section {
     display: flex;
-    flex-direction: column;
+    gap:4rem;
+    align-items: flex-start;
+    justify-content: center;
 }
 
 .contact__wrapper .form {
@@ -33,6 +35,12 @@
     text-align: center;
 }
 
+.contact__wrapper img{
+    width: min(35ch + 2rem, 90vw + 2rem);
+    border-radius: var(--r-1);
+    max-width: 34%;
+}
+
 .contact__wrapper input {
     border-radius: max(1rem, 16pt);
     padding: 0.5em 1em;

src/assets/styles/_showcase.css

@@ -3,9 +3,12 @@ article.showcase__wrapper {
     gap: 3rem;
 }
 
-.showcase__wrapper header {
+.showcase__wrapper section header {
     display: flex;
     gap: 1rem;
+}
+
+.showcase__wrapper section header {
     margin-left: var(--r-1);
 }
 
@@ -31,6 +34,15 @@ article.showcase__wrapper {
     flex-direction: column;
     gap: 1rem;
     position: relative;
+    
+}
+
+.showcase__wrapper ul li img{
+    transition:all .2s ease-in-out;
+}
+
+.showcase__wrapper ul li a:hover img{
+    filter: brightness(1.15);
 }
 
 /* .showcase__wrapper ul li a::before {
@@ -65,12 +77,16 @@ article.showcase__wrapper {
 
 .product-hero__wrapper{
     position: relative;
-    max-width: 880px;
+    /*max-width: 880px;*/
     --weird-gap: 0.04rem;
     /* border-radius: var(--r-1);
     background-color: var(--c-3); */
 }
 
+.product-hero__wrapper img{
+    width: 100%;
+}
+
 .product-hero__wrapper .hero{
     background-color: var(--c-3);
 }