landing almost complete

src/assets/js/main.js

@@ -69,16 +69,49 @@ gsap.from("#pitch h1", {
 //     scrollTrigger: '#xyz'
 // })
 
-gsap.from("#xyz", {
-  drawSVG: 0,
-  ease: "none",
-  scrollTrigger: {
-    trigger: "#hero-to-pitch_1",
-    scrub: true,
-    start: "top center",
-    end: "bottom center",
-  },
-});
+gsap.from("#hero-to-pitch path:first-child", {
+    drawSVG: 0,
+    ease: "none",
+    scrollTrigger: {
+      trigger: "#hero-to-pitch",
+      scrub: true,
+      start: "top center",
+      end: "bottom center",
+    },
+  });
+
+  gsap.from("#products-to-info path:first-child", {
+    drawSVG: 0,
+    ease: "none",
+    scrollTrigger: {
+      trigger: "#products-to-info path:first-child",
+      scrub: true,
+      start: "top center",
+      end: "bottom center",
+    },
+  });
+
+  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 center",
+      end: "bottom center",
+    },
+  });
+
+  gsap.from("#bitcoin-to-be path", {
+    drawSVG: 0,
+    ease: "none",
+    scrollTrigger: {
+      trigger: "#bitcoin-to-be path",
+      scrub: true,
+      start: "top center",
+      end: "bottom center",
+    },
+  });
 
 let imgs = gsap.utils.toArray(".pseudoservice"),
     next = 1.5, // time to change

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

@@ -0,0 +1,70 @@
+#why {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rem;
+  margin: 6rem 0;
+  padding: 6rem;
+  box-sizing: border-box;
+  width: 100%;
+
+  --size: 3rem;
+  --p-t: calc(0.2 * var(--size));
+  --p-b: calc(0 * var(--size));
+  --p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size));
+  --line: calc(var(--p-t) + var(--p-b) + var(--size));
+
+  h2 {
+    text-align: center;
+  }
+
+
+    #ticker {
+      height: 50vh;
+      position: relative;
+      width: 100%;
+
+      #ticker__selected-frame {
+        outline: 1px solid white;
+        outline-offset: calc(0.1 * var(--size));
+        font-size: var(--size);
+        text-transform: uppercase;
+        line-height: var(--size);
+        position: absolute;
+        top: calc(5 * var(--line));
+        left: -.5ch;
+        right: 0;
+        display: flex;
+        align-items: center;
+        height: var(--size);
+        padding: var(--p);
+      }
+      #ticker__window {
+        height: 50vh;
+        width: calc(100vw - 12rem - 11.5ch);
+        overflow: hidden;
+        font-size: var(--size);
+        left: 11.5ch;
+        position: relative;
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+        li {
+          list-style: none;
+          font-size: var(--size);
+          line-height: 1;
+          display: flex;
+          align-items: center;
+          height: var(--size);
+          padding: var(--p);
+          white-space: nowrap;
+          overflow: hidden;
+        }
+      }
+    }
+  a.btn{
+    align-self: center;
+  }
+}

src/assets/styles/bitcoin.scss

@@ -0,0 +1,62 @@
+section#bitcoin {
+  background-image: linear-gradient(180deg, #f7931a 0%, #7b1af8 100%);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rem;
+
+  #grid-blend-top {
+    // mix-blend-mode: multiply;
+    width: 100vw;
+    rect {
+      fill: #fff;
+      stroke: #fff;
+      stroke-width: 2px;
+    }
+  }
+
+  #grid-blend-bottom {
+    width: 100vw;
+    rect {
+      fill: #222;
+      stroke: #222;
+      stroke-width: 2px;
+    }
+  }
+
+  p {
+    max-width: min(35ch, 50vw);
+    em{
+      color: var(--c-1);
+      font-weight: 700;
+    }
+  }
+
+  .subsection{
+    padding: 0 6rem;
+  }
+
+  .subsection:first-of-type {
+    place-self: flex-start;
+    margin-bottom: 6rem;
+  }
+  .subsection:last-of-type {
+    place-self: flex-end;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    h1, p{
+      text-align: right;
+    }
+  }
+
+  a.btn{
+    background-color: var(--c-1);
+    color:var(--c-6);
+    border-color: var(--c-6);
+    font-size: 1.2rem;
+  }
+}

src/assets/styles/dev.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 6rem;
   h2{
     margin: 0;
     text-align: center;
@@ -11,20 +12,22 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap:2rem;
+    gap:1rem;
   }
   .wrapper{
-    border: var(--b-primary);
+    background-color: var(--c-1);
     max-width: 35ch;
     .content {
       padding: 1rem;
       h3{
         margin: 0;
-        font-family: 'Tusker Grotesk 5500';
-        font-weight: 100;
-        font-size: 3.5rem;
+        font-family: var(--f-accent);
+        font-weight: 300;
+        font-size: 2rem;
         line-height: 1.1em;
-        text-transform: uppercase;
+        color: var(--c-3);
+        text-transform: none;
+        padding-bottom: 1rem;
       }
     }
     .footer{
@@ -32,23 +35,25 @@
       background: var(--c-spacer);
       display: flex;
       justify-content: center;
-      border-top: var(--b-primary);
-
-      a{
-        padding: 0.4rem 2rem;
-        background-color: var(--c-text-accent);
-        color: var(--c-text-bright);
-        border-color: var(--c-3d-shadow);
-        border-width: 1px 1px 15px 1px;
-        border-style: solid;
-        font-family: 'Tusker Grotesk 5500';
-        font-weight: 100;
-        text-transform: uppercase;
-        font-size: 2rem;
-        text-decoration: none;
-      }
     }
   }
+  .code-wrapper{
+    position: relative;
+    &::before{
+      position: absolute;
+      top: 17rem;
+      left: -4rem;
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 2rem transparent solid;
+    border-right: 2rem #1e1e1e solid;
+    border-bottom: 2rem transparent solid;
+    border-left: 2rem transparent solid;
+
+  }
+}
   img {
     width: 20rem;
   }

src/assets/styles/fonts.scss

@@ -555,3 +555,135 @@
     font-style: normal;
     font-display: swap;
 }
+
+@font-face {
+    font-family: 'Basis Grotesque Pro';
+    font-weight: 300;
+    font-style: normal;
+    src: url('../fonts/BasisGrotesquePro-Light.eot');
+    src: url('../fonts/BasisGrotesquePro-Light.eot?#iefix') format('embedded-opentype'),
+      url('../fonts/BasisGrotesquePro-Light.woff2') format('woff2'),
+      url('../fonts/BasisGrotesquePro-Light.woff') format('woff'),
+      url('../fonts/BasisGrotesquePro-Light.ttf') format('truetype'),
+      url('../fonts/BasisGrotesquePro-Light.svg#BasisGrotesquePro-Light') format('svg');
+  }
+  
+  @font-face {
+    font-family: 'Basis Grotesque Pro';
+    font-weight: normal;
+    font-style: normal;
+    src: url('../fonts/BasisGrotesquePro-Regular.eot');
+    src: url('../fonts/BasisGrotesquePro-Regular.eot?#iefix') format('embedded-opentype'),
+      url('../fonts/BasisGrotesquePro-Regular.woff2') format('woff2'),
+      url('../fonts/BasisGrotesquePro-Regular.woff') format('woff'),
+      url('../fonts/BasisGrotesquePro-Regular.ttf') format('truetype'),
+      url('../fonts/BasisGrotesquePro-Regular.svg#BasisGrotesquePro-Regular') format('svg');
+  }
+  
+  @font-face {
+    font-family: 'Basis Grotesque Pro';
+    font-weight: bold;
+    font-style: normal;
+    src: url('../fonts/BasisGrotesquePro-Bold.eot');
+    src: url('../fonts/BasisGrotesquePro-Bold.eot?#iefix') format('embedded-opentype'),
+      url('../fonts/BasisGrotesquePro-Bold.woff2') format('woff2'),
+      url('../fonts/BasisGrotesquePro-Bold.woff') format('woff'),
+      url('../fonts/BasisGrotesquePro-Bold.ttf') format('truetype'),
+      url('../fonts/BasisGrotesquePro-Bold.svg#BasisGrotesquePro-Bold') format('svg');
+  }
+
+  @font-face {
+    font-family: 'Basis Grotesque Mono Pro';
+    src: url('../fonts/BasisGrotesqueMonoPro-It.eot');
+    src: local('../fonts/Basis Grotesque Mono Pro Italic'), local('../fonts/BasisGrotesqueMonoPro-It'),
+        url('../fonts/BasisGrotesqueMonoPro-It.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/BasisGrotesqueMonoPro-It.woff2') format('woff2'),
+        url('../fonts/BasisGrotesqueMonoPro-It.woff') format('woff'),
+        url('../fonts/BasisGrotesqueMonoPro-It.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Basis Grotesque Mono Pro';
+    src: url('../fonts/BasisGrotesqueMonoPro-LightIt.eot');
+    src: local('../fonts/Basis Grotesque Mono Pro Light Italic'), local('../fonts/BasisGrotesqueMonoPro-LightIt'),
+        url('../fonts/BasisGrotesqueMonoPro-LightIt.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/BasisGrotesqueMonoPro-LightIt.woff2') format('woff2'),
+        url('../fonts/BasisGrotesqueMonoPro-LightIt.woff') format('woff'),
+        url('../fonts/BasisGrotesqueMonoPro-LightIt.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Basis Grotesque Mono Pro';
+    src: url('../fonts/BasisGrotesqueMonoPro-MediumIt.eot');
+    src: local('../fonts/Basis Grotesque Mono Pro Medium Italic'), local('../fonts/BasisGrotesqueMonoPro-MediumIt'),
+        url('../fonts/BasisGrotesqueMonoPro-MediumIt.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/BasisGrotesqueMonoPro-MediumIt.woff2') format('woff2'),
+        url('../fonts/BasisGrotesqueMonoPro-MediumIt.woff') format('woff'),
+        url('../fonts/BasisGrotesqueMonoPro-MediumIt.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Basis Grotesque Mono Pro';
+    src: url('../fonts/BasisGrotesqueMonoPro-Bold.eot');
+    src: local('../fonts/Basis Grotesque Mono Pro Bold'), local('../fonts/BasisGrotesqueMonoPro-Bold'),
+        url('../fonts/BasisGrotesqueMonoPro-Bold.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/BasisGrotesqueMonoPro-Bold.woff2') format('woff2'),
+        url('../fonts/BasisGrotesqueMonoPro-Bold.woff') format('woff'),
+        url('../fonts/BasisGrotesqueMonoPro-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Basis Grotesque Mono Pro';
+    src: url('../fonts/BasisGrotesqueMonoPro-BoldIt.eot');
+    src: local('../fonts/Basis Grotesque Mono Pro Bold Italic'), local('../fonts/BasisGrotesqueMonoPro-BoldIt'),
+        url('../fonts/BasisGrotesqueMonoPro-BoldIt.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/BasisGrotesqueMonoPro-BoldIt.woff2') format('woff2'),
+        url('../fonts/BasisGrotesqueMonoPro-BoldIt.woff') format('woff'),
+        url('../fonts/BasisGrotesqueMonoPro-BoldIt.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Basis Grotesque Mono Pro';
+    src: url('../fonts/BasisGrotesqueMonoPro-Light.eot');
+    src: local('../fonts/Basis Grotesque Mono Pro Light'), local('../fonts/BasisGrotesqueMonoPro-Light'),
+        url('../fonts/BasisGrotesqueMonoPro-Light.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/BasisGrotesqueMonoPro-Light.woff2') format('woff2'),
+        url('../fonts/BasisGrotesqueMonoPro-Light.woff') format('woff'),
+        url('../fonts/BasisGrotesqueMonoPro-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Basis Grotesque Mono Pro';
+    src: url('../fonts/BasisGrotesqueMonoPro-Medium.eot');
+    src: local('../fonts/Basis Grotesque Mono Pro Medium'), local('../fonts/BasisGrotesqueMonoPro-Medium'),
+        url('../fonts/BasisGrotesqueMonoPro-Medium.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/BasisGrotesqueMonoPro-Medium.woff2') format('woff2'),
+        url('../fonts/BasisGrotesqueMonoPro-Medium.woff') format('woff'),
+        url('../fonts/BasisGrotesqueMonoPro-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Basis Grotesque Mono Pro';
+    src: url('../fonts/BasisGrotesqueMonoPro-Regular.eot');
+    src: local('../fonts/Basis Grotesque Mono Pro Regular'), local('../fonts/BasisGrotesqueMonoPro-Regular'),
+        url('../fonts/BasisGrotesqueMonoPro-Regular.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/BasisGrotesqueMonoPro-Regular.woff2') format('woff2'),
+        url('../fonts/BasisGrotesqueMonoPro-Regular.woff') format('woff'),
+        url('../fonts/BasisGrotesqueMonoPro-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}

src/assets/styles/infographics.scss

@@ -0,0 +1,22 @@
+section#infographics{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 6rem;
+  .subsection{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3rem;
+    padding: 6rem;
+    svg{
+      width: 100%;
+    }
+    &:first-child{
+      background-color: black;
+    }
+    &:last-child{
+      background-color: white;
+    }
+  }
+}

src/assets/styles/landing.scss

@@ -6,12 +6,14 @@
 */
 
 @use 'pitch';
-@use 'highlights';
-@use 'why';
-@use 'how';
 @use 'products';
-@use 'community';
+@use 'infographics';
+@use 'bitcoin';
+@use 'be-your-own';
+@use 'powered-by';
+@use 'support';
 @use 'dev';
+@use 'community';
 
 
 body, .ScrollSmoother-wrapper {
@@ -24,10 +26,49 @@ body, .ScrollSmoother-wrapper {
   width: 100vw;
 }
 
+main{
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 section {
   --section-padding: 2vh;
-  min-height: calc(100vh - 2 * var(--section-padding));
-  padding: var(--section-padding);
+  // min-height: calc(100vh - 2 * var(--section-padding));
+  // padding: 0 var(--section-padding);
+  // outline: 1px solid orange;
+}
+
+.subsection{
+  
+}
+
+.svg-primary{
+  fill: var(--c-text-primary);
+}
+
+.svg-secondary{
+  fill: var(--c-bkg);
+}
+
+.inverse{
+  h1, p {
+    color: var(--c-bkg);
+  }
+  .svg-primary{
+    fill: var(--c-bkg);
+  }
+  .svg-secondary{
+    fill: var(--c-text-primary);
+  }
+}
+
+
+
+.line svg{
+  width: calc(100vw - (2 * 6rem));
+  max-width: 50vw;
+  max-height: 75vh;
 }
 
 #hero-image img {
@@ -47,6 +88,11 @@ nav {
   img {
     width: 15rem;
   }
+  span{
+    text-transform: uppercase;
+    font-weight: 400;
+    letter-spacing: .1ch;
+  }
 }
 
 #hero {
@@ -58,7 +104,7 @@ nav {
 
 h1 {
   font-family: var(--f-hero);
-  font-size: min(9rem,171px);
+  font-size: min(5rem,171px);
   text-transform: uppercase;
   line-height: 1;
   color: var(--c-text-primary);
@@ -109,9 +155,11 @@ h2 {
 
 p {
   font-family: var(--f-accent);
-  font-weight: 200;
-  font-size: 2rem;
+  font-weight: 300;
+  font-size: 1.3rem;
+  line-height: 1.4;
   color: var(--c-text-primary);
+  max-width: min(50ch, 73vw);
 
   em {
     font-style: normal;
@@ -120,7 +168,19 @@ p {
 }
 
 
-
+a.btn {
+  padding: 0.4rem 2rem;
+  background-color: var(--c-text-accent);
+  color: var(--c-text-bright);
+  border-color: var(--c-3d-shadow);
+  border-width: 1px 1px 15px 1px;
+  border-style: solid;
+  font-family: var(--f-accent);
+  font-weight: 500;
+  text-transform: uppercase;
+  font-size: 1.6rem;
+  text-decoration: none;
+}
 
 
 .nodes {

src/assets/styles/main.scss

@@ -7,7 +7,7 @@
     background-attachment: fixed; 
     --viewportWidth: calc(100vw - var(--scrollbarWidth));
 
-    --c-1: rgba(255,255,255,.7);
+    --c-1: rgba(255,255,255);
     --c-text-primary: var(--c-1);
     --c-line-primary: var(--c-1);
 
@@ -24,15 +24,19 @@
     --c-5: rgba(255,255,255,1);
     --c-text-bright: var(--c-5);
 
+    --c-6: rgb(194, 194, 194);
+
     --c-spacer: rgba(255,255,255,.05);
     --s-primary: 0.5;
     --b-primary: 1px solid var(--c-line-primary);
     --b-secondary: 1px dashed var(--c-line-primary);
 
-    --f-hero: "Tusker Grotesk 3600";
+    --f-hero: "Basis Grotesque Pro";
     --f-bold: "Tusker Grotesk 5500";
-    --f-accent: 'Arkibal Mono';
-    --f-accent-bold: 'Arkibal Mono Rg';
+    --f-accent: 'Montserrat';
+    --f-accent2: 'Arkibal Mono';
+    --f-accent-bold: 'Montserrat';
+    --f-accent2-bold: 'Arkibal Mono Rg';
     --f-copy: 'Liberation Mono';
 }
 
@@ -43,6 +47,27 @@ html {
     color: var(--c-text-primary);
     font-family: var(--f-accent);
     font-weight: 200;
+    overflow: overlay;
+
+    /* width */
+::-webkit-scrollbar {
+    width: 1rem;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: var(--c-2);
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--c-1);
+  }
 }
 
 main{

src/assets/styles/menu.scss

@@ -19,7 +19,6 @@
     }
     background-color: var(--c-bkg);
     .groups{
-        max-width: 70vw;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: 1fr 1fr;
@@ -58,6 +57,7 @@
         display: flex;
         flex-direction: column;
         display: inline-block;
+        white-space: nowrap;
         &::after{
             content: '';
             position: absolute;
@@ -94,4 +94,36 @@
         }
 
     }
-}
+}
+
+@media only screen and (max-width: 1200px) {
+    #menu .groups li > a {
+      font-size: 2.2vw;
+    }
+  }
+
+  @media only screen and (max-width: 650px) {
+    #menu .groups li > a {
+      font-size: 3.5vmin;
+    }
+    #menu .groups{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+    }
+
+    #menu .groups li {
+        border: 0 !important;
+    }
+  }
+
+  @media only screen and (max-width: 500px) {
+    #menu .groups li > a {
+      font-size: 4vmin;
+    }
+    #menu .groups{
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+  }

src/assets/styles/pitch.scss

@@ -1,5 +1,6 @@
-#pitch {
+section#pitch {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
   
@@ -8,4 +9,7 @@
       display: inline-block;
       max-width: 73vw;
     }
+    p{
+      max-width: min(50ch, 73vw);
+    }
   }

src/assets/styles/powered-by.scss

@@ -0,0 +1,56 @@
+section#powered-by {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6rem;
+  h2{
+    margin: 0;
+    text-align: center;
+  }
+  .cols{
+    margin-top: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap:2rem;
+  }
+  .wrapper{
+    border: var(--b-primary);
+    max-width: 35ch;
+    .content {
+      padding: 1rem;
+      h3{
+        margin: 0;
+        font-family: 'Tusker Grotesk 5500';
+        font-weight: 100;
+        font-size: 3.5rem;
+        line-height: 1.1em;
+        text-transform: uppercase;
+      }
+    }
+    .footer{
+      padding: 1rem;
+      background: var(--c-spacer);
+      display: flex;
+      justify-content: center;
+      border-top: var(--b-primary);
+
+      a{
+        padding: 0.4rem 2rem;
+        background-color: var(--c-text-accent);
+        color: var(--c-text-bright);
+        border-color: var(--c-3d-shadow);
+        border-width: 1px 1px 15px 1px;
+        border-style: solid;
+        font-family: 'Tusker Grotesk 5500';
+        font-weight: 100;
+        text-transform: uppercase;
+        font-size: 2rem;
+        text-decoration: none;
+      }
+    }
+  }
+  img {
+    width: 20rem;
+  }
+}

src/assets/styles/products copy.scss

@@ -0,0 +1,118 @@
+#products {
+  .product-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7rem;
+    .product {
+      perspective: 630px;
+      perspective-origin: 50% 50%;
+      .product__box {
+        position: relative;
+        transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(-45deg)
+          rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px)
+          skewX(0deg) skewY(0deg);
+        margin: auto;
+        position: relative;
+        --height: 400px;
+        --width: calc(var(--height) / 2);
+        height: var(--height);
+        width: var(--width);
+        --halfwidth: calc(var(--width) / 2);
+        --neghalfwidth: calc(var(--halfwidth) * -1);
+        -webkit-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        transition: all .5s ease-in-out .3s;
+  
+        &:hover{
+          transform: rotate3d(0, 0, 0, 45deg) !important;
+        }
+      }
+  
+      &.product--pro {
+        z-index: 2;
+        perspective: 830px;
+        .product__box{
+          // --height: 500px;
+          --scale: 1.3;
+          transform: scaleX(var(--scale)) scaleY(var(--scale)) scaleZ(var(--scale)) rotateX(0deg) rotateY(-45deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
+          &:hover{
+            transform: scale3d(var(--scale),var(--scale),var(--scale)) rotate3d(0, 0, 0, 45deg) !important;
+          }
+          .front {
+            background-color: #EF4B63;
+          }
+          .right {
+            background-color: #BA1930;
+          }
+        }
+      }
+  
+      .product__box > div {
+        position: absolute;
+        box-sizing: border-box;
+        padding: 10px;
+        line-height: 1;
+        text-align: left;
+        height: 100%;
+        width: 100%;
+        opacity: 1;
+        // border: 1px solid #000;
+        font-weight: bold;
+  
+        h1{
+          font-size: 3.8rem;
+        }
+      }
+  
+      .front {
+        background-color: #575757;
+        transform: translateZ(var(--halfwidth));
+      }
+      .back {
+        background-color: #313131;
+        transform: translateZ(var(--neghalfwidth)) rotateY(180deg);
+      }
+      .top {
+        transform: rotateX(-270deg) translateY(var(--neghalfwidth));
+        transform-origin: top center;
+        background-color: #666;
+        height: 50% !important;
+      }
+      .bottom {
+        -webkit-transform: rotateX(270deg) translateY(var(--halfwidth));
+        transform: rotateX(270deg) translateY(var(--halfwidth));
+        transform-origin: bottom center;
+        background-color: #666;
+        height: 50% !important;
+      }
+      .left {
+        -webkit-transform: rotateY(270deg) translateX(var(--neghalfwidth));
+        transform: rotateY(270deg) translateX(var(--neghalfwidth));
+        transform-origin: center left;
+        background-color: #575757;
+      }
+      .right {
+        -webkit-transform: rotateY(-270deg) translateX(var(--halfwidth));
+        transform: rotateY(-270deg) translateX(var(--halfwidth));
+        transform-origin: top right;
+        background-color: #313131;
+      }
+    }
+  
+    .product-box {
+      .front,
+      .back {
+        width: 10rem;
+        height: 20rem;
+      }
+    }
+  }
+  aside {
+    margin: 20rem 5rem;
+    display: flex;
+    justify-content: center;
+    font-size: 3rem;
+    text-align: center;
+  }
+}

src/assets/styles/products.scss

@@ -1,118 +1,69 @@
-#products {
-  .product-group {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 7rem;
-    .product {
-      perspective: 630px;
-      perspective-origin: 50% 50%;
-      .product__box {
-        position: relative;
-        transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(-45deg)
-          rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px)
-          skewX(0deg) skewY(0deg);
-        margin: auto;
-        position: relative;
-        --height: 400px;
-        --width: calc(var(--height) / 2);
-        height: var(--height);
-        width: var(--width);
-        --halfwidth: calc(var(--width) / 2);
-        --neghalfwidth: calc(var(--halfwidth) * -1);
-        -webkit-transform-style: preserve-3d;
-        transform-style: preserve-3d;
-        transition: all .5s ease-in-out .3s;
-  
-        &:hover{
-          transform: rotate3d(0, 0, 0, 45deg) !important;
+section#products {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0rem;
+  .subsection {
+    .product__subheader{
+      font-weight: 500;
+      color: var(--c-text-primary);
+      text-transform: uppercase;
+    }
+    img {
+      transition: all ease-in-out .2s;
+      width: 42vw;
+    }
+    a {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      padding: 2rem;
+      transition: all ease-in-out .2s;
+      .heading h1 {
+        line-height: .8;
+      }
+      &:hover{
+        .heading h1, .heading span {
+          color: var(--c-text-accent);
+        }
+        img{
+          transform: scale(1.1);
+          opacity: 0;
         }
       }
-  
-      &.product--pro {
-        z-index: 2;
-        perspective: 830px;
-        .product__box{
-          // --height: 500px;
-          --scale: 1.3;
-          transform: scaleX(var(--scale)) scaleY(var(--scale)) scaleZ(var(--scale)) rotateX(0deg) rotateY(-45deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
-          &:hover{
-            transform: scale3d(var(--scale),var(--scale),var(--scale)) rotate3d(0, 0, 0, 45deg) !important;
-          }
-          .front {
-            background-color: #EF4B63;
-          }
-          .right {
-            background-color: #BA1930;
-          }
-        }
-      }
-  
-      .product__box > div {
+    }
+    &:first-of-type a {
+      align-items: flex-end;
+      .heading {
+        left: 6rem;
+        top: 6rem;
         position: absolute;
-        box-sizing: border-box;
-        padding: 10px;
-        line-height: 1;
-        text-align: left;
-        height: 100%;
-        width: 100%;
-        opacity: 1;
-        // border: 1px solid #000;
-        font-weight: bold;
-  
-        h1{
-          font-size: 3.8rem;
-        }
+        align-self: flex-end;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
       }
-  
-      .front {
-        background-color: #575757;
-        transform: translateZ(var(--halfwidth));
-      }
-      .back {
-        background-color: #313131;
-        transform: translateZ(var(--neghalfwidth)) rotateY(180deg);
-      }
-      .top {
-        transform: rotateX(-270deg) translateY(var(--neghalfwidth));
-        transform-origin: top center;
-        background-color: #666;
-        height: 50% !important;
-      }
-      .bottom {
-        -webkit-transform: rotateX(270deg) translateY(var(--halfwidth));
-        transform: rotateX(270deg) translateY(var(--halfwidth));
-        transform-origin: bottom center;
-        background-color: #666;
-        height: 50% !important;
-      }
-      .left {
-        -webkit-transform: rotateY(270deg) translateX(var(--neghalfwidth));
-        transform: rotateY(270deg) translateX(var(--neghalfwidth));
-        transform-origin: center left;
-        background-color: #575757;
-      }
-      .right {
-        -webkit-transform: rotateY(-270deg) translateX(var(--halfwidth));
-        transform: rotateY(-270deg) translateX(var(--halfwidth));
-        transform-origin: top right;
-        background-color: #313131;
+      .product__subheader{
+
       }
     }
-  
-    .product-box {
-      .front,
-      .back {
-        width: 10rem;
-        height: 20rem;
+    &:last-of-type a {
+      align-items: flex-start;
+      .heading {
+        display: inline-block;
+        right: 6rem;
+        top: 6rem;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+      }
+      h1{
+        letter-spacing: .5rem;
+      }
+      .product__subheader{
+
       }
     }
   }
-  aside {
-    margin: 20rem 5rem;
-    display: flex;
-    justify-content: center;
-    font-size: 3rem;
-    text-align: center;
-  }
-}
+}

src/assets/styles/support.scss

@@ -0,0 +1,7 @@
+section#support {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6rem;
+  background: var(--c-1);
+}