Bigger redesign

pages/_app.js

@@ -1,7 +1,11 @@
+// React, NextJS
 import App from "next/app";
 import Script from 'next/script'
 import Head from "next/head";
 
+import { setCookie, getCookie } from 'cookies-next';
+
+// GSAP
 import { gsap } from "gsap/dist/gsap";
 import { SplitText } from "gsap/dist/SplitText";
 import { Transition, SwitchTransition } from "react-transition-group";
@@ -10,14 +14,17 @@ import { Transition, SwitchTransition } from "react-transition-group";
 import Footer from "../components/footer.jsx";
 import Navbar from "../components/navbar.jsx";
 
+// helper functions
 import { getWidth } from "../components/utils.jsx";
+
 // css imports
-import "bootstrap/dist/css/bootstrap.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
 import "../styles/globals.scss";
 import "../styles/footer.scss";
 import "../styles/navbar.scss";
 import "../styles/darkmode.scss";
 
+// Register plugin only on client
 if (typeof window !== "undefined") {
   gsap.registerPlugin(SplitText);
 }
@@ -39,48 +46,126 @@ export default class Site extends App {
 
   initTl() {
     if (document.querySelector(".landing-img")) {
-      this.tl.from(".landing-img", {
-        opacity: 0,
-      });
-    }
-
-    if (document.querySelector(".products-img")) {
       if (getWidth() > 1200) {
-        this.tl.from(".products-img", {
+        this.tl.from(".landing-img", {
           opacity: 0,
-          width: "100vw",
+          scale: 1.1
         });
       } else {
-        this.tl.from(".products-img", {
+        this.tl.from(".landing-img", {
           opacity: 0,
-          height: "100vh",
         });
       }
     }
 
-    if (document.querySelector(".mainheading")) {
-      this.tl.from(".mainheading", {
+    if (document.querySelector(".landing-logo")) {
+      if (getWidth() > 1200) {
+        this.tl.from(".landing-logo", {
+          opacity: 0,
+          y: 10,
+          scale: 0.9
+        }, "<");
+      } else {
+        this.tl.from(".landing-logo", {
+          opacity: 0,
+          y: 10,
+          scale: 0.9
+        }, "<");
+      }
+    }
+
+
+
+
+
+
+    if (document.querySelector(".products-img-container")) {
+      if (getWidth() > 1200) {
+        this.tl.from(".products-img-container", {
+          opacity: 0,
+          width: "75vw",
+        });
+      } else {
+        this.tl.from(".products-img-container", {
+          opacity: 0,
+          height: "75vh",
+        });
+      }
+    }
+
+    if (document.querySelector(".products-img-icon-wrapper")) {
+      if (getWidth() > 1200) {
+        this.tl.from(".products-img-icon-wrapper", {
+          backdropFilter: "blur(0px)",
+          backgroundColor: "rgba(13, 13, 13, 0)",
+          width: "75vw"
+        });
+      }
+      else {
+        {
+          this.tl.from(".products-img-icon-wrapper", {
+            backdropFilter: "blur(0px)",
+            backgroundColor: "rgba(13, 13, 13, 0)",
+            width: "75vh"
+          }, ">-0.35");
+        }
+      }
+    }
+
+    if (document.querySelector(".products-icon")) {
+      this.tl.from(".products-icon", {
         opacity: 0,
-        y: 5,
-      });
+      }, ">-0.25");
+    }
+
+    if (document.querySelector(".mainheading")) {
+      if (getWidth() > 1200) {
+        this.tl.from(".mainheading", {
+          opacity: 0,
+          x: 10,
+        }, ">");
+      } else {
+        this.tl.from(".mainheading", {
+          opacity: 0,
+          y: 10,
+        }, ">");
+      }
     }
 
     if (document.querySelector(".subheading")) {
-      this.tl.from(".subheading", {
-        opacity: 0,
-        y: 5,
-      });
+      if (getWidth() > 1200) {
+        this.tl.from(".subheading", {
+          opacity: 0,
+          x: 10,
+        }, ">-0.25");
+      } else {
+        this.tl.from(".subheading", {
+          opacity: 0,
+          y: 10,
+        }, ">-0.25");
+      }
     }
 
     if (document.querySelector(".description")) {
-      this.tl.from(
-        ".description",
-        {
-          opacity: 0,
-          y: 5,
-        },
-        0.6
-      );
+      if (getWidth() > 1200) {
+        this.tl.from(
+          ".description",
+          {
+            opacity: 0,
+            x: 10,
+          },
+          ">-0.25"
+        );
+      } else {
+        this.tl.from(
+          ".description",
+          {
+            opacity: 0,
+            y: 10,
+          },
+          ">-0.25"
+        );
+      }
     }
 
     if (document.querySelector(".quicknav")) {
@@ -154,10 +239,10 @@ export default class Site extends App {
       }
     }
 
-    if (document.querySelector(".products-img")) {
+    if (document.querySelector(".products-img-container")) {
       if (getWidth() > 1200) {
         this.tl.to(
-          ".products-img",
+          ".products-img-container",
           {
             opacity: 0,
             width: 0,
@@ -167,7 +252,7 @@ export default class Site extends App {
         );
       } else {
         this.tl.to(
-          ".products-img",
+          ".products-img-container",
           {
             opacity: 0,
             height: 0,
@@ -232,19 +317,22 @@ export default class Site extends App {
         </main>
         <Footer />
 
-        <Script
-          src="https://www.googletagmanager.com/gtag/js?id=G-504FPVG74X"
-          strategy="afterInteractive"
-        />
-        <Script id="google-analytics" strategy="afterInteractive">
-          {`
+
+        <>
+          <Script
+            src="https://www.googletagmanager.com/gtag/js?id=G-504FPVG74X"
+            strategy="afterInteractive"
+          />
+          <Script id="google-analytics" strategy="afterInteractive">
+            {`
           window.dataLayer = window.dataLayer || [];
           function gtag(){window.dataLayer.push(arguments);}
           gtag('js', new Date());
 
           gtag('config', 'G-504FPVG74X');
         `}
-        </Script>
+          </Script>
+        </>
       </>
     );
   }