Initial

2022-01-29 20:48:35 +01:00
commit 01907eb338
144 changed files with 11275 additions and 0 deletions
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -0,0 +1,224 @@
+import App, { Container } from "next/app";
+import Router from "next/router";
+import Head from "next/head";
+
+import { gsap } from "gsap/dist/gsap";
+import { SplitText } from "gsap/dist/SplitText";
+import { Transition, SwitchTransition } from "react-transition-group";
+
+// component imports
+import Footer from "../components/footer.jsx";
+import Navbar from "../components/navbar.jsx";
+
+import { getWidth } from "../components/utils.jsx";
+// css imports
+import "bootstrap/dist/css/bootstrap.css";
+import "../styles/globals.scss";
+import "../styles/footer.scss";
+import "../styles/navbar.scss";
+import "../styles/darkmode.scss";
+
+gsap.registerPlugin(SplitText);
+
+export default class Site extends App {
+  constructor(props) {
+    super(props);
+
+    this.handleEnter = this.handleEnter.bind(this);
+    this.handleExit = this.handleExit.bind(this);
+    this.initTl = this.initTl.bind(this);
+
+    this.tl = gsap.timeline();
+
+    this.state = {
+      isReady: true,
+    };
+  }
+
+  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", {
+          opacity: 0,
+          width: "100vw",
+        });
+      } else {
+        this.tl.from(".products-img", {
+          opacity: 0,
+          height: "100vh",
+        });
+      }
+    }
+
+    if (document.querySelector(".mainheading")) {
+      this.tl.from(".mainheading", {
+        opacity: 0,
+        y: 5,
+      });
+    }
+
+    if (document.querySelector(".subheading")) {
+      this.tl.from(".subheading", {
+        opacity: 0,
+        y: 5,
+      });
+    }
+
+    if (document.querySelector(".description")) {
+      this.tl.from(
+        ".description",
+        {
+          opacity: 0,
+          y: 5,
+        },
+        0.6
+      );
+    }
+
+    if (document.querySelector(".quicknav")) {
+      this.tl.from(".quicknav", {
+        opacity: 0,
+        x: -50,
+      });
+    }
+  }
+
+  handleEnter() {
+    this.initTl();
+    this.tl.play();
+    this.setState({
+      isReady: true,
+    });
+  }
+
+  handleExit(node, done) {
+    this.setState({
+      isReady: false,
+    });
+    this.tl.clear();
+
+    if (document.querySelector(".mainheading")) {
+      this.tl.to(".mainheading", {
+        opacity: 0,
+        duration: 0.2,
+      });
+    }
+
+    if (document.querySelector(".description")) {
+      this.tl.to(
+        ".description",
+        {
+          opacity: 0,
+          duration: 0.2,
+        },
+        0
+      );
+    }
+
+    if (document.querySelector(".products-img")) {
+      if (getWidth() > 1200) {
+        this.tl.to(
+          ".products-img",
+          {
+            opacity: 0,
+            width: 0,
+            duration: 0.5,
+          },
+          0
+        );
+      } else {
+        this.tl.to(
+          ".products-img",
+          {
+            opacity: 0,
+            height: 0,
+            minHeight: 0,
+            duration: 0.5,
+          },
+          0
+        );
+      }
+    }
+
+    if (document.querySelector(".landing-img")) {
+      this.tl.to(".landing-img", {
+        scale: 0.9,
+        opacity: 0,
+      });
+    }
+
+    this.tl.to(node, {
+      opacity: 0,
+      duration: 0.1,
+      onComplete: done,
+    });
+  }
+
+  render() {
+    const { Component, pageProps, router } = this.props;
+    let path = router.asPath;
+    return (
+      <>
+        <Head>
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/site.webmanifest" />
+          <meta name="msapplication-TileColor" content="#da532c" />
+          <meta name="theme-color" content="#ffffff" />
+          <meta httpEquiv="content-language" content="de" />
+        </Head>
+        <Navbar />
+        <SwitchTransition mode="out-in">
+          <Transition
+            timeout={1000}
+            addEndListener={(node, done) => {
+              this.handleExit.bind(this);
+            }}
+            key={path}
+            onEnter={this.handleEnter.bind(this)}
+            onExit={(node, done) => this.handleExit(node, done)}
+          >
+            <Component {...pageProps} className="component" />
+          </Transition>
+        </SwitchTransition>
+        <Footer />
+
+        <script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-504FPVG74X"
+        ></script>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'G-504FPVG74X');
+`,
+          }}
+        />
+      </>
+    );
+  }
+}