From b396396c1fa31336ef45cffa3ae560ffecddf66b Mon Sep 17 00:00:00 2001
From: Spencer Flagg <work@spencerflagg.com>
Date: Fri, 7 Oct 2022 18:36:05 +0200
Subject: [PATCH] new "real" buy image

---
 src/_includes/components/landing/products.njk   | 6 +++---
 src/_includes/components/svg/buy-real-lines.svg | 3 +++
 src/assets/js/main.js                           | 2 +-
 src/assets/styles/main.scss                     | 2 +-
 src/assets/styles/products.scss                 | 2 ++
 5 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 src/_includes/components/svg/buy-real-lines.svg

diff --git a/src/_includes/components/landing/products.njk b/src/_includes/components/landing/products.njk
index 916f4f9..4b2b8fb 100644
--- a/src/_includes/components/landing/products.njk
+++ b/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">
diff --git a/src/_includes/components/svg/buy-real-lines.svg b/src/_includes/components/svg/buy-real-lines.svg
new file mode 100644
index 0000000..0b7d264
--- /dev/null
+++ b/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>
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index 29f95dd..324ac19 100644
--- a/src/assets/js/main.js
+++ b/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
   )
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index a11749d..b9b2ef7 100644
--- a/src/assets/styles/main.scss
+++ b/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;
   }
 
diff --git a/src/assets/styles/products.scss b/src/assets/styles/products.scss
index 4721116..37ecc21 100644
--- a/src/assets/styles/products.scss
+++ b/src/assets/styles/products.scss
@@ -73,6 +73,8 @@ section#products {
       svg {
         width: 27.5vw;
         position: absolute;
+        top: 20%;
+        left:22%;
       }
     }
     &.subsection--diy {