new "real" buy image

src/_includes/components/landing/products.njk

@@ -1,13 +1,13 @@
 <section id="products">
         <div class="subsection subsection--buy">
             <a class="product product--buy" href="{{ site.products.buyUrl }}">
-                <img src="assets/images/buy-centered.png" alt="prefab embassy, represented in voxels" title="prefab embassy, represented in voxels">
-                <img class="img-shadow" src="assets/images/buy-centered.png" alt="">
+                <img src="assets/images/pro-1_no_background.png" alt="prefab embassy, represented in voxels" title="prefab embassy, represented in voxels">
+                <img class="img-shadow" src="assets/images/pro-1_no_background.png" alt="">
                 <div class="heading">
                     <h1 class="product__header">buy</h1>
                     <span class="product__subheader">your embassy</span>
                 </div>
-                {% include "components/svg/buy-lines.svg" %}
+                {% include "components/svg/buy-real-lines.svg" %}
             </a>
         </div>
         <div class="subsection subsection--diy">

src/_includes/components/svg/buy-real-lines.svg

@@ -0,0 +1,3 @@
+<svg id="buy-real-lines" class="line-primary" viewBox="0 0 620 351" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 55.5C6 45 20 40 34 36.5L318 1H346.5L605 83.5C608 85 607.5 90.0235 605 90.5C441.783 121.606 370.263 143.505 215.5 173C183 182.5 168.5 180 157 173L24 63L14.5 69L1.5 58.5L13 166.5L26 183L22.4706 152.5M18.7059 103.5L15.5 70C19.2059 68 20.8976 67.5746 26 72L123 154C120.35 155.662 118.5 154.5 118.5 159.5L121.5 202.5L18.7059 103.5ZM18.7059 103.5L22.4706 152.5M22.4706 152.5L125.5 264.5L127.5 304L153.5 335.5C185.719 354.85 203.789 352.54 236 340L585 232.5C600.157 228.095 604.702 223.904 604 210.5L618.5 103.5L619 91C618.389 86.835 614.5 86.5 608 85C609.056 86.9759 609.279 87.854 609 89C612.757 88.876 615.971 89.2137 617.5 91C618.324 93.9378 615.041 93.4882 609 94.5L245.5 173L246.455 201M246.455 201L309 188V244.5L248.5 261L247.477 231M246.455 201L247.477 231M247.477 231L375 201V173L320 186V241.5L375 227V206.5" vector-effect="non-scaling-stroke"/>
+</svg>

src/assets/js/main.js

@@ -141,7 +141,7 @@ const buyAnchor = document.querySelector(".product--buy");
 const buyTL = gsap
   .timeline({ paused: true })
   .from(
-    "#buy-lines path:first-child",
+    "#buy-real-lines path:first-child",
     { drawSVG: 0, ease: "none", duration: 0.75 },
     0
   )

src/assets/styles/main.scss

@@ -320,7 +320,7 @@ nav {
   section#support, section#be-your-own{
     transform: translate(0,0);
   }
-  section#supprt img{
+  section#support img{
     max-width: 40vh !important;
   }
 

src/assets/styles/products.scss

@@ -73,6 +73,8 @@ section#products {
       svg {
         width: 27.5vw;
         position: absolute;
+        top: 20%;
+        left:22%;
       }
     }
     &.subsection--diy {