fixed gsap warnings; added privacy hero; removed list.js reference;

src/_includes/components/landing/products.njk

@@ -1,7 +1,7 @@
 <section id="products">
         <div class="subsection subsection--buy">
             <a class="product product--buy" href="{{ site.products.buyUrl }}">
-                <img src="assets/images/embassy-pro-sketch.png" alt="prefab embassy, represented in voxels" title="prefab embassy, represented in voxels">
+                <img class="product__buy-image" src="assets/images/embassy-pro-sketch.png" alt="prefab embassy, represented in voxels" title="prefab embassy, represented in voxels">
                 <img class="img-shadow" src="assets/images/embassy-pro-sketch.png" alt="">
                 <div class="heading">
                     <h1 class="product__header">buy</h1>

src/_includes/layouts/peripheral.njk

@@ -11,7 +11,7 @@ layout: layouts/base.njk
 <script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
 <script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
 <script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
-<script defer src="{{ '/assets/js/list.min.js' | url }}"></script>
+{# <script defer src="{{ '/assets/js/list.min.js' | url }}"></script> #}
 <script defer src="{{ '/assets/js/_header.js' | url }}"></script>
 <script defer src="{{ '/assets/js/_menu.js' | url }}"></script>
 <script defer src="{{ '/assets/js/_hero.js' | url }}"></script>

src/assets/js/main.js

@@ -99,16 +99,16 @@ gsap.from("#pitch h1, #pitch p", {
   },
 });
 
-gsap.from("#pitch iframe", {
-  duration: 0.5,
-  opacity: 0,
-  filter: "blur(10px)",
-  scrollTrigger: {
-    trigger: "#pitch",
-    start: "top 75%", // "triggerElement page"
-    toggleActions: defaultActions,
-  },
-});
+// gsap.from("#pitch iframe", {
+//   duration: 0.5,
+//   opacity: 0,
+//   filter: "blur(10px)",
+//   scrollTrigger: {
+//     trigger: "#pitch",
+//     start: "top 75%", // "triggerElement page"
+//     toggleActions: defaultActions,
+//   },
+// });
 
 //////////////////////////////////////////
 // PRODUCTS
@@ -146,7 +146,7 @@ const buyTL = gsap
     0
   )
   .to(
-    ".product--buy img:first-child",
+    ".product__buy-image",
     { opacity: 0.4, ease: "none", duration: 0.25 },
     0
   );
@@ -154,23 +154,23 @@ const buyTL = gsap
 buyAnchor.onmouseenter = () => buyTL.play();
 buyAnchor.onmouseleave = () => buyTL.reverse();
 
-const diyAnchor = document.querySelector(".product--diy");
+// const diyAnchor = document.querySelector(".product--diy");
 
-const diyTL = gsap
-  .timeline({ paused: true })
-  .from(
-    "#diy-lines path:first-child",
-    { drawSVG: 0, ease: "none", duration: 0.75 },
-    0
-  )
-  .to(
-    ".product--diy img:first-child",
-    { opacity: 0.4, ease: "none", duration: 0.25 },
-    0
-  );
+// const diyTL = gsap
+//   .timeline({ paused: true })
+//   .from(
+//     "#diy-lines path:first-child",
+//     { drawSVG: 0, ease: "none", duration: 0.75 },
+//     0
+//   )
+//   .to(
+//     ".product--diy img:first-child",
+//     { opacity: 0.4, ease: "none", duration: 0.25 },
+//     0
+//   );
 
-diyAnchor.onmouseenter = () => diyTL.play();
-diyAnchor.onmouseleave = () => diyTL.reverse();
+// diyAnchor.onmouseenter = () => diyTL.play();
+// diyAnchor.onmouseleave = () => diyTL.reverse();
 
 gsap.from("#products-to-info path:first-child", {
   drawSVG: 0,
@@ -183,27 +183,27 @@ gsap.from("#products-to-info path:first-child", {
   },
 });
 
-gsap.from("#products-to-info path:nth-child(2)", {
-  drawSVG: 0,
-  ease: "none",
-  scrollTrigger: {
-    trigger: "#products-to-info path:nth-child(2)",
-    scrub: true,
-    start: "top 75%", // "triggerElement page"
-    end: "bottom 75%", // "triggerElement page"
-  },
-});
+// gsap.from("#products-to-info path:nth-child(2)", {
+//   drawSVG: 0,
+//   ease: "none",
+//   scrollTrigger: {
+//     trigger: "#products-to-info path:nth-child(2)",
+//     scrub: true,
+//     start: "top 75%", // "triggerElement page"
+//     end: "bottom 75%", // "triggerElement page"
+//   },
+// });
 
-gsap.from("#products-to-info path:nth-child(3)", {
-  drawSVG: 0,
-  ease: "none",
-  scrollTrigger: {
-    trigger: "#products-to-info path:nth-child(3)",
-    scrub: true,
-    start: "top 75%", // "triggerElement page"
-    end: "bottom 75%", // "triggerElement page"
-  },
-});
+// gsap.from("#products-to-info path:nth-child(3)", {
+//   drawSVG: 0,
+//   ease: "none",
+//   scrollTrigger: {
+//     trigger: "#products-to-info path:nth-child(3)",
+//     scrub: true,
+//     start: "top 75%", // "triggerElement page"
+//     end: "bottom 75%", // "triggerElement page"
+//   },
+// });
 
 //////////////////////////////////////////
 // INFOGRAPHICS

src/assets/styles/products.scss

@@ -5,7 +5,7 @@ section#products {
   align-items: flex-end;
   justify-content: center;
   gap: 3rem;
-  --img-width: 35vw;
+  --img-width: min(35vw,500px);
 
   .subsection {
     transform-style: preserve-3d;

src/index.njk

@@ -97,7 +97,7 @@ layout: layouts/base.njk
 <script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
 <script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
 <script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
-<script defer src="{{ '/assets/js/list.min.js' | url }}"></script>
+{# <script defer src="{{ '/assets/js/list.min.js' | url }}"></script> #}
 <script defer src="{{ '/assets/js/_header.js' | url }}"></script>
 <script defer src="{{ '/assets/js/_menu.js' | url }}"></script>
 <script defer src="{{ '/assets/js/_hero.js' | url }}"></script>

src/privacy.njk

@@ -7,10 +7,10 @@ layout: layouts/peripheral.njk
 <section id="hero">
     <div id="hero-image">
         <img
-            src="assets/images/about-hero.png"
-            alt="about page hero image: a robot emerging from the embasssy"
-            title="about page hero image: a robot emerging from the embasssy"/>
-        <img class="img-shadow" src="assets/images/about-hero.png" alt=""/>
+            src="assets/images/privacy-hero.png"
+            alt="about page hero image: a robot emerging from the embasssy and wearing a mask"
+            title="about page hero image: a robot emerging from the embasssy and wearing a mask"/>
+        <img class="img-shadow" src="assets/images/privacy-hero.png" alt=""/>
     </div>
     <div id="logo">
         <h1>