landing graphics, line animations, 'fixed' menu, css tweaks

src/assets/js/main.js

@@ -3,39 +3,59 @@ gsap.registerPlugin(CustomEase);
 
 var bodyRect = document.body.getBoundingClientRect();
 
-var sections = [
-    "pitch",
-    "products",
-    "infographics",
-    "bitcoin",
-    "be-your-own",
-    "powered-by",
-    "support",
-    "dev",
-    "community"
-]
+const sections = [
+  "pitch",
+  "products",
+  "infographics",
+  "bitcoin",
+  "be-your-own",
+  "powered-by",
+  "support",
+  "dev",
+  "community",
+];
+
+const bitcoinServices = [
+  "balanceofsatoshis",
+  "bitcoind",
+  "btc-rpc-proxy",
+  "btcpayserver",
+  "c-lightning",
+  "electrs",
+  "lightning-jet",
+  "lnd",
+  "lightning-terminal",
+  "lndg",
+  "mempool",
+  "ride-the-lightning",
+  "spark-wallet",
+  "specter",
+  "sphinx-relay",
+  "thunderhub",
+];
 
 //////////////////////////////////////////
 // AUTO APPLY URL ANCHORS
 
-setTimeout(function() {
-
-    // timeout to allow initial load to redirect to anchor
-    // TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout
-
-    sections.forEach(slug => {
-        ScrollTrigger.create({
-            trigger: "#" + slug,
-            start: "top center",
-            end: "bottom center",
-            markers: {startColor: "white", endColor: "white"},
-            onEnter: () => { window.location.href = "#" + slug; },
-            onEnterBack: () => { window.location.href = "#" + slug; }
-          });
-    });
-    
-  }, 2000);
+// setTimeout(function () {
+//   // timeout to allow initial load to redirect to anchor
+//   // TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout
 
+//   sections.forEach((slug) => {
+//     ScrollTrigger.create({
+//       trigger: "#" + slug,
+//       start: "top center",
+//       end: "bottom center",
+//       //markers: { startColor: "white", endColor: "white" },
+//       onEnter: () => {
+//         window.location.href = "#" + slug;
+//       },
+//       onEnterBack: () => {
+//         window.location.href = "#" + slug;
+//       },
+//     });
+//   });
+// }, 2000);
 
 //////////////////////////////////////////
 // MENU
@@ -45,22 +65,24 @@ let menuOpen = document.getElementById("menu-open"),
   openedMenuArray = gsap.utils.toArray(".opened-menu"),
   closedMenuArray = gsap.utils.toArray(".closed-menu");
 
-menuOpen.addEventListener("click", () => openMenu());
-menuClose.addEventListener("click", () => closeMenu());
+menuOpen.addEventListener("click", (e) => openMenu(e));
+menuClose.addEventListener("click", (e) => closeMenu(e));
 
-function openMenu() {
+function openMenu(e) {
+  e.preventDefault();
   gsap.to("#menu", { y: "0vh" });
-  gsap.to("main", { y: "0vh" });
+  gsap.to("main", { y: "100vh" });
   gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
   gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
-  gsap.to("html", { overflow: "hidden"});
+  gsap.to("html", { overflow: "hidden" });
 }
-function closeMenu() {
+function closeMenu(e) {
+  e.preventDefault();
   gsap.to("#menu", { y: "-100vh" });
-  gsap.to("main", { y: "-100vh" });
+  gsap.to("main", { y: "0vh" });
   gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
   gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
-  gsap.to("html", { overflow: "overlay"});
+  gsap.to("html", { overflow: "overlay" });
 }
 
 //////////////////////////////////////////
@@ -86,20 +108,17 @@ gsap.from("#logo", { duration: 0.5, y: "-5rem", opacity: 0, delay: 0.75 });
 // backdrop-filter: blur(10px);
 //background-color: rgba(0,0,0,0.1);
 
-gsap.to(
-  "header",
-  {
-    duration: 0.5,
-    backgroundColor: "rgba(0,0,0,0.1)",
-    backdropFilter: "blur(10px)",
-    scrollTrigger: {
-        trigger: "#hero-image",
-        scrub: true,
-        start: "center top", // "triggerElement page"
-        end: "bottom top", // "triggerElement page"
-    },
-  }
-);
+gsap.to("header", {
+  duration: 0.5,
+  backgroundColor: "rgba(0,0,0,0.1)",
+  backdropFilter: "blur(10px)",
+  scrollTrigger: {
+    trigger: "#hero-image",
+    scrub: true,
+    start: "center top", // "triggerElement page"
+    end: "bottom top", // "triggerElement page"
+  },
+});
 
 //////////////////////////////////////////
 // PITCH
@@ -124,8 +143,8 @@ gsap.from("#hero-to-pitch path:first-child", {
   scrollTrigger: {
     trigger: "#hero-to-pitch",
     scrub: true,
-    start: "top center",
-    end: "bottom center",
+    start: "top center", // "triggerElement page"
+    end: "bottom center", // "triggerElement page"
   },
 });
 
@@ -135,8 +154,8 @@ gsap.from("#products-to-info path:first-child", {
   scrollTrigger: {
     trigger: "#products-to-info path:first-child",
     scrub: true,
-    start: "top center",
-    end: "bottom center",
+    start: "top center", // "triggerElement page"
+    end: "bottom center", // "triggerElement page"
   },
 });
 
@@ -146,11 +165,81 @@ gsap.from("#products-to-info path:nth-child(2)", {
   scrollTrigger: {
     trigger: "#products-to-info path:nth-child(2)",
     scrub: true,
-    start: "top center",
-    end: "bottom center",
+    start: "top center", // "triggerElement page"
+    end: "bottom center", // "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 center", // "triggerElement page"
+    end: "bottom center", // "triggerElement page"
+  },
+});
+
+// BITCOIN
+
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function getRandomNumber(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+bitcoinServices.forEach((service) => {
+  const serviceElement = document.querySelector(".service-icon--" + service);
+  const bitcoinSectionElement = document.querySelector("#bitcoin");
+  const upOrDown = getRandomInt(0, 1);
+  const bitcoinHeight = bitcoinSectionElement.clientHeight;
+
+  serviceElement
+    ? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
+    : "";
+
+  if (upOrDown) {
+    gsap.set(".service-icon--" + service, {
+      y: getRandomInt(0, bitcoinHeight / 2) + "px",
+    });
+    gsap.to(".service-icon--" + service, {
+      y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
+      //x: getRandomInt(0, 100) + "vw",
+      ease: "in",
+      delay: getRandomNumber(0, 1),
+      scrollTrigger: {
+        trigger: "#bitcoin",
+        scrub: true,
+        start: "top 25%", // "triggerElement page"
+        end: "90% center", // "triggerElement page"
+        //markers: { startColor: "lime", endColor: "lime" },
+      },
+    });
+  } else {
+    gsap.set(".service-icon--" + service, {
+      y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
+    });
+    gsap.to(".service-icon--" + service, {
+      y: getRandomInt(0, bitcoinHeight / 2) + "px",
+      //x: getRandomInt(0, 100) + "vw",
+      ease: "in",
+      delay: getRandomNumber(0, 1),
+      scrollTrigger: {
+        trigger: "#bitcoin",
+        scrub: true,
+        start: "top bottom", // "triggerElement page"
+        end: "90% center", // "triggerElement page"
+        //markers: { startColor: "orange", endColor: "orange" },
+      },
+    });
+  }
+});
+
 gsap.from("#bitcoin-to-be path", {
   drawSVG: 0,
   ease: "none",
@@ -162,8 +251,10 @@ gsap.from("#bitcoin-to-be path", {
   },
 });
 
-let imgs = gsap.utils.toArray(".pseudoservice"),
-  next = 1.5, // time to change
+// BE YOUR OWN
+
+let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"),
+  next = 3, // time to change
   itemHeight = document
     .querySelector(".pseudoservice")
     .getBoundingClientRect().height,
@@ -183,20 +274,187 @@ let imgs = gsap.utils.toArray(".pseudoservice"),
 function crossfade() {
   var action = gsap
     .timeline()
-    .to(imgs, { y: "-=" + itemHeight, duration: 1, ease: kerplunk2 })
-    .to(imgs[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
+    .to(pseudoserviceArray, {
+      y: "-=" + itemHeight,
+      duration: 1,
+      ease: kerplunk2,
+    })
+    .to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
 
-  imgs.push(imgs.shift()); // the first (shift) to the end (push) from the array
-  //console.log(imgs);
+  pseudoserviceArray.push(pseudoserviceArray.shift()); // the first (shift) to the end (push) from the array
+  //console.log(pseudoserviceArray);
   //console.log(itemHeight);
 
   // start endless run
   gsap.delayedCall(next, crossfade);
+
+  var thisPseudoservice = pseudoserviceArray[2].innerHTML,
+    thisElement = document.querySelector(
+      ".slides-container--" + thisPseudoservice.toLowerCase()
+    );
+
+  var slidesContainerArray = document.querySelectorAll(".slides-container");
+  slidesContainerArray.forEach((thisContainer) => {
+    thisContainer.style.display = "none";
+  });
+
+  if (thisElement) {
+    thisElement.style.display = "flex";
+  }
 }
 
 // start the crossfade after next = 3 sec
 gsap.delayedCall(next, crossfade);
 
+// CAROUSEL
+
+var slideDelay = 1.5;
+var slideDuration = 0.3;
+var wrap = true;
+
+var slides = document.querySelectorAll(".slide");
+var prevButton = document.querySelector("#prevButton");
+var nextButton = document.querySelector("#nextButton");
+var progressWrap = gsap.utils.wrap(0, 1);
+
+var numSlides = slides.length;
+
+gsap.set(slides, {
+  xPercent: (i) => i * 100,
+});
+
+var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
+
+var animation = gsap.to(slides, {
+  xPercent: "+=" + numSlides * 100,
+  duration: 1,
+  ease: "none",
+  paused: true,
+  repeat: -1,
+  modifiers: {
+    xPercent: wrapX,
+  },
+});
+
+var proxy = document.createElement("div");
+var slideAnimation = gsap.to({}, {});
+var slideWidth = 0;
+var wrapWidth = 0;
+
+resize();
+
+window.addEventListener("resize", resize);
+
+prevButton.addEventListener("click", function () {
+  animateSlides(1);
+});
+
+nextButton.addEventListener("click", function () {
+  animateSlides(-1);
+});
+
+function updateDraggable() {
+  slideAnimation.kill();
+  this.update();
+}
+
+function animateSlides(direction) {
+  slideAnimation.kill();
+  var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
+
+  slideAnimation = gsap.to(proxy, {
+    x: x,
+    duration: slideDuration,
+    onUpdate: updateProgress,
+  });
+}
+
+function updateProgress() {
+  animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
+}
+
+function snapX(value) {
+  let snapped = gsap.utils.snap(slideWidth, value);
+  return wrap
+    ? snapped
+    : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
+}
+
+function resize() {
+  var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
+
+  slideWidth = slides[0].offsetWidth;
+  wrapWidth = slideWidth * numSlides;
+
+  wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
+
+  gsap.set(proxy, {
+    x: norm * wrapWidth,
+  });
+
+  animateSlides(0);
+  slideAnimation.progress(1);
+}
+
+
+
+gsap.from("#bitcoin-to-be path", {
+  drawSVG: 0,
+  ease: "none",
+  scrollTrigger: {
+    trigger: "#bitcoin-to-be path",
+    scrub: true,
+    start: "top center",
+    end: "bottom center",
+  },
+});
+
+gsap.from("#be-to-powered path", {
+  drawSVG: 0,
+  ease: "none",
+  scrollTrigger: {
+    trigger: "#be-to-powered path",
+    scrub: true,
+    start: "top center",
+    end: "bottom center",
+  },
+});
+
+gsap.from("#powered-to-support path", {
+  drawSVG: 0,
+  ease: "none",
+  scrollTrigger: {
+    trigger: "#powered-to-support path",
+    scrub: true,
+    start: "top center",
+    end: "bottom center",
+  },
+});
+
+gsap.from("#support-to-dev path", {
+  drawSVG: 0,
+  ease: "none",
+  scrollTrigger: {
+    trigger: "#support-to-dev path",
+    scrub: true,
+    start: "top center",
+    end: "bottom center",
+  },
+});
+
+gsap.from("#dev-to-contact path", {
+  drawSVG: 0,
+  ease: "none",
+  scrollTrigger: {
+    trigger: "#dev-to-contact path",
+    scrub: true,
+    start: "top center",
+    end: "bottom center",
+  },
+});
+
+
+
 //Librarys
 
 /*

src/assets/js/peripheral.js

@@ -0,0 +1,14 @@
+gsap.to(
+    "header",
+    {
+      duration: 0.5,
+      backgroundColor: "rgba(0,0,0,0.1)",
+      backdropFilter: "blur(10px)",
+      scrollTrigger: {
+          trigger: "#hero-image",
+          scrub: true,
+          start: "center top", // "triggerElement page"
+          end: "bottom top", // "triggerElement page"
+      },
+    }
+  );

src/assets/styles/be-your-own.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   gap: 6rem;
-  margin: 0 0 6rem 0;
+  //margin: 0 0 6rem 0;
   padding: 0 6rem 6rem 6rem;
   box-sizing: border-box;
   width: 100%;
@@ -66,7 +66,7 @@
         }
       }
 
-      ul.services{
+      .services{
         position: absolute;
         top: calc(3 * var(--line));
         background-color: #353535;
@@ -74,9 +74,73 @@
         width: calc(11.5ch - 4rem);
         font-size: var(--size);
         left: -1rem;
+
+        img{
+          border-radius: 100%;
+          width: 5rem;
+        }
+        
+        .service{
+          display: flex;
+          align-items: center;
+
+          .service__link{
+            color: var(--c-1);
+            font-size: 1rem;
+            font-weight: 400;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+          }
+        }
       }
     }
   a.btn{
     align-self: center;
   }
 }
+
+.slides-controls {
+  padding: 10px;  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70px;
+  min-height: 70px;
+  gap: 2rem;
+
+  button{
+    background: none;
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+  }
+}
+
+.slides-container {
+  position: relative;
+  overflow: hidden;  
+  display: none;
+  flex: 1;
+}
+
+.slide {
+  position: absolute;
+  font-size: 90px;
+  font-weight: 700;
+  color: rgba(255,255,255,0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  
+  width: calc(100% / 3);
+  width: 100%;
+}
+
+.slides-inner {
+  position: relative;
+  height: 7rem;
+  width: 100%;  
+  overflow: hidden;
+}

src/assets/styles/bitcoin.scss

@@ -11,20 +11,20 @@ section#bitcoin {
   z-index: -1;
   margin-bottom: -10rem;
 
-  &::before{
-    content: '';
+  &::before {
+    content: "";
     width: 100%;
     height: 100vh;
-    background-image: linear-gradient(#33333300,var(--c-bkg));
+    background-image: linear-gradient(#33333300, var(--c-bkg));
     position: absolute;
     top: -100vh;
   }
 
-  &::after{
-    content: '';
+  &::after {
+    content: "";
     width: 100%;
     height: 100vh;
-    background-image: linear-gradient(var(--c-bkg),#33333300);
+    background-image: linear-gradient(var(--c-bkg), #33333300);
     position: absolute;
     bottom: -100vh;
   }
@@ -50,13 +50,13 @@ section#bitcoin {
 
   p {
     max-width: min(35ch, 50vw);
-    em{
+    em {
       color: var(--c-1);
       font-weight: 700;
     }
   }
 
-  .subsection{
+  .subsection {
     padding: 0 6rem;
   }
 
@@ -69,15 +69,94 @@ section#bitcoin {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    h1, p{
+    h1,
+    p {
       text-align: right;
     }
   }
 
-  a.btn{
+  a.btn {
     background-color: var(--c-1);
-    color:var(--c-6);
+    color: var(--c-6);
     border-color: var(--c-6);
     font-size: 1.2rem;
   }
+
+  #flying-icons{
+    position: absolute;
+    top: 0;
+    left:0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+  }
+
+  .service-icon {
+    border-radius: 100%;
+    position: absolute;
+    top:0;
+    left:0;
+    z-index: -2;
+    backdrop-filter: blur(48px);
+    mix-blend-mode: soft-light;
+    box-shadow: 0 37px 50px rgb(0 0 0 / 20%);
+
+    &.service-icon--spectre {
+      background-color: var(--c-1);
+    }
+
+    &.service-icon--electrs {
+      background-color: var(--c-1);
+      padding: 1rem;
+    }
+
+    &.service-icon--balanceofsatoshis {
+      width: 5rem;
+    }
+    &.service-icon--bitcoind {
+      width: auto;
+    }
+    &.service-icon--btc-rpc-proxy {
+      width: 9rem;
+    }
+    &.service-icon--btcpay-server {
+      width: 6rem;
+    }
+    &.service-icon--c-lightning {
+      width: auto;
+    }
+    &.service-icon--electrs {
+      width: 7rem;
+    }
+    &.service-icon--lightning-jet {
+      width: 6rem;
+    }
+    &.service-icon--lnd {
+      width: 10rem;
+    }
+    &.service-icon--lightning-terminal {
+      width: 7rem;
+    }
+    &.service-icon--lndg {
+      width: 9rem;
+    }
+    &.service-icon--mempool {
+      width: 8rem;
+    }
+    &.service-icon--ride-the-lightning {
+      width: 8rem;
+    }
+    &.service-icon--spark-wallet {
+      width: 7rem;
+    }
+    &.service-icon--specter {
+      width: 5rem;
+    }
+    &.service-icon--sphinx-relay {
+      width: 6rem;
+    }
+    &.service-icon--thunderhub {
+      width: 5rem;
+    }
+  }
 }

src/assets/styles/dev.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  min-height: calc(100vh - 2 * var(--section-padding));
+  //min-height: calc(100vh - 2 * var(--section-padding));
   padding: var(--section-padding) 6rem;
   h2{
     margin: 0;

src/assets/styles/footer.scss

@@ -1,7 +1,9 @@
 footer{
     //position: absolute;
     padding: 0;
-    .footer-content{
+    font-weight: 400;
+    color: gray;
+    .footer__content{
         display: flex;
         .header{
             align-self: flex-start;
@@ -91,6 +93,11 @@ footer{
     }
 }
 
+.footer__canary{
+    text-align: center;
+    padding: 2rem;
+}
+
 @media only screen and (max-width: 1200px) {
     footer .groups li > a {
       font-size: 2.2vw;

src/assets/styles/infographics.scss

@@ -10,13 +10,16 @@ section#infographics{
     gap: 3rem;
     padding: 6rem;
     svg{
-      width: 100%;
+      width: 110%;
     }
     &:first-child{
       background-color: black;
     }
     &:last-child{
       background-color: white;
+      svg{
+        width: 80%;
+      }
     }
   }
 }

src/assets/styles/landing.scss

@@ -78,24 +78,6 @@ section {
   max-height: 75vh;
 }
 
-.img-shadow {
-  filter: blur(2rem) brightness(0);
-  z-index: -1;
-  position: absolute;
-  top: 5rem;
-  opacity: .5;
-}
-
-#hero-image {
-  position: relative;
-  display: flex;
-  img {
-    width: 50rem;
-    max-width: 90vw;
-    margin-top: 4rem;
-  }
-}
-
 nav {
   color: var(--c-text-primary);
 }
@@ -183,6 +165,7 @@ p {
   em {
     font-style: normal;
     color: var(--c-text-accent);
+    font-weight: 400;
   }
 }
 

src/assets/styles/main.scss

@@ -79,7 +79,7 @@ body{
 }
 
 main{
-    transform: translateY(-100vh);
+    //transform: translateY(-100vh);
 }
 
 a {
@@ -106,7 +106,7 @@ ul {
 header{
     position: fixed;
     width: 100vw;
-    z-index: 1;
+    z-index: 2;
 }
 nav{
     --padding: 1rem;
@@ -130,9 +130,16 @@ nav{
                 color: var(--c-text-bright);
                 font-size: 1.5rem;
                 padding: 0em 0.5em 0em 0.5em;
+
                 &.em{
                     background-color: var(--c-text-accent);
-                    
+                    &:hover{
+                        color: var(--c-text-accent);
+                        background-color: var(--c-text-bright);
+                    }
+                }
+                &:hover{
+                    color: var(--c-text-accent);
                 }
             }
         }
@@ -163,4 +170,22 @@ nav{
 .closed-menu {
     //overflow: hidden;
     white-space: nowrap;
-}
+}
+
+#hero-image {
+    position: relative;
+    display: flex;
+    img {
+      width: 50rem;
+      max-width: 90vw;
+      margin-top: 4rem;
+    }
+  }
+
+.img-shadow {
+    filter: blur(2rem) brightness(0);
+    z-index: -1;
+    position: absolute;
+    top: 5rem;
+    opacity: .5;
+  }

src/assets/styles/menu.scss

@@ -1,5 +1,6 @@
 #menu{
-    //position: absolute;
+    position: fixed;
+    z-index: 1;
     padding: 0;
     width: 100vw;
     height:100vh;

src/assets/styles/peripheral.scss

@@ -1,97 +1,172 @@
-main{
-    margin-top: 10rem;
+main {
+  margin-top: 7rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-x: clip;
+}
+
+section {
+  --width: 42ch;
+  --side-padding: 3rem;
+  font-family: "Montserrat";
+  font-weight: 300;
+  font-size: 1rem;
+  width: var(--width);
+  padding: 7rem var(--side-padding);
+  position: relative;
+  overflow: visible;
+  &:nth-of-type(2n + 3) {
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
+      width: 100vw;
+      background-color: #212121;
+      z-index: -1;
+    }
+  }
+  .section__image {
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin: 2rem 0;
+    position: relative;
+    img {
+      width: 50%;
+    }
+    .img-shadow {
+      top: 3rem;
+      filter: blur(1rem) brightness(0);
+    }
+  }
+
+  display: flex;
+  flex-direction: column;
+  //align-items: center;
+  //outline: 1px solid orange;
 }
 
-section{
-    --width: 42ch;
-    --side-padding: 3rem;
-    font-family: "Montserrat";
-    font-weight: 300;
-    font-size: 1rem;
-    width: var(--width);
-    padding: 10rem var(--side-padding);
-    position: relative;
-    overflow:visible;
-    &:nth-of-type(even){
-        &::before{
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
-            width: 100vw;
-            background-color: #212121;
-            z-index: -1;
-        }
+section#hero {
+  display: flex;
+  align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  gap: 5rem;
+  width: calc(100vw - (2 * var(--side-padding)));
+  justify-content: center;
+  flex-direction: row;
+
+  &::before {
+    content: none;
+  }
+
+  h1 {
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 1245px) {
+    section#hero {
+        flex-direction: column;
     }
+  }
+
+section#virtues {
+  .section__image img {
+    width: 75%;
+  }
+}
+
+.section__double-image {
+  position: relative;
+  .section__image{
+    position: absolute;
+    top:-140%;
+    width:100%;
+  }
+  .section__image--left{
+    left:-105%;
+    align-items: flex-end;
+  }
+  .section__image--right{
+    right:-105%;
+
+    align-items: flex-start;
+  }
+}
+
+#hero-image img {
+  margin-top: 0;
+  width: 28rem;
 }
 
 h1 {
-    font-family: var(--f-hero);
-    font-size: 4.4rem;
-    width: 110%;
-    line-height: 1;
+  font-family: var(--f-hero);
+  font-size: 4.2rem;
+  width: 110%;
+  line-height: 1;
 }
 
 h2 {
-    font-family: var(--f-hero);
-    font-size: 3.7rem;
-    text-align: center;
+  font-family: var(--f-hero);
+  font-size: 3.7rem;
+  text-align: center;
 }
 
 section#blurb h2 {
-    font-size: 2.5rem;
-    color: var(--c-text-accent);
-    width: 110%;
-    line-height: 1;
-    text-align: left;
-    margin-bottom: 2rem;
+  font-size: 2.5rem;
+  color: var(--c-text-accent);
+  width: 110%;
+  line-height: 1;
+  text-align: left;
+  margin-bottom: 2rem;
 }
 
 h3 {
-    font-family: var(--f-hero);
-    font-size: 1.8rem;
-    width: 112%;
+  font-family: var(--f-hero);
+  font-size: 1.8rem;
+  width: 112%;
 }
 
 h4 {
-    font-weight: 800;
+  font-weight: 800;
 }
 
-h3, h4 {
-    color: var(--c-text-accent);
+h3,
+h4 {
+  color: var(--c-text-accent);
 }
 
-ul#sub-menu{
-    display: flex;
-    justify-content: space-between;
-    width: 107%;
-    li a{
-        font-family: var(--f-hero);
-        font-size: 1.2rem;
-        color: var(--c-text-primary);
-        text-transform: uppercase;
-        font-weight: 900;
-        white-space: nowrap;
-        transition: var(--t-simple);
-        &:hover{
-            color: var(--c-text-accent);
-        }
+ul#sub-menu {
+  display: flex;
+  justify-content: space-between;
+  width: 33rem;
+  li a {
+    font-family: var(--f-hero);
+    font-size: 1.2rem;
+    color: var(--c-text-primary);
+    text-transform: uppercase;
+    font-weight: 900;
+    white-space: nowrap;
+    transition: var(--t-simple);
+    &:hover {
+      color: var(--c-text-accent);
     }
+  }
 }
 
-p{
-    font-family: "Montserrat";
-    font-weight: 300;
-    line-height: 1.9rem;
-    font-size: 1rem;
-    margin-top: 0.5rem;
-    margin-bottom: 2.5rem;
+p {
+  font-family: "Montserrat";
+  font-weight: 300;
+  line-height: 1.9rem;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 2.5rem;
 
-    strong{
-        font-weight: 700;
-    }
-}
+  strong {
+    font-weight: 700;
+  }
+}

src/assets/styles/powered-by.scss

@@ -50,7 +50,8 @@ section#powered-by {
       }
     }
   }
-  img {
-    width: 20rem;
+  svg {
+    width: 45rem;
+    margin-top: 6rem;
   }
 }

src/assets/styles/support.scss

@@ -4,7 +4,7 @@ section#support {
   align-items: center;
   padding: 6rem;
   background: var(--c-1);
-  margin-bottom: 6rem;
+  //margin-bottom: 6rem;
   .cols {
     display: flex;
     align-items: center;
@@ -16,10 +16,18 @@ section#support {
   }
   img {
     max-height: 40vh;
+    max-width: 100%;
+    transform: rotateZ(5deg);
   }
   @media only screen and (max-width: 1200px) {
     .cols{
       flex-direction: column;
+      .col:nth-child(1){
+        order: 2;
+      }
+      .col:nth-child(2){
+        order: 1;
+      }
     }
   }
 }