From d1b2652aaf8892dda6b1f4af6c944063f3e0b537 Mon Sep 17 00:00:00 2001
From: Christian Anetzberger <christian@canetzberger.design>
Date: Mon, 30 Jan 2023 18:36:24 +0100
Subject: [PATCH] Fixed animations

---
 .env.local.sample                     |  5 ++++
 .gitignore                            |  5 +---
 components/navbar.jsx                 |  8 ------
 components/productpage.jsx            |  2 +-
 pages/_app.js                         | 38 ++++++++++++++++++++++-----
 pages/fertigungsverfahren/[index].jsx |  1 +
 pages/index.js                        | 11 ++++----
 7 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 .env.local.sample

diff --git a/.env.local.sample b/.env.local.sample
new file mode 100644
index 0000000..ddb8919
--- /dev/null
+++ b/.env.local.sample
@@ -0,0 +1,5 @@
+MAIL_DOMAIN=mail.example.com
+MAIL_PORT=587
+MAIL_USER=user
+MAIL_PASS=password
+MAIL_TO=mailto@example.com
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 834b857..fa6baf1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,7 +34,4 @@ yarn-error.log*
 .vercel
 
 # gsap npmrc
-.npmrc
-
-#ecosystem
-ecosystem.config.js
\ No newline at end of file
+.npmrc
\ No newline at end of file
diff --git a/components/navbar.jsx b/components/navbar.jsx
index 776a60a..5cedb15 100644
--- a/components/navbar.jsx
+++ b/components/navbar.jsx
@@ -190,7 +190,6 @@ class Navbar extends React.Component {
                 <Image
                   src={laserteileImg}
                   alt="Laserteile Icon"
-                  layout="intrinsic"
                   width={50}
                   height={50}
                 />
@@ -208,7 +207,6 @@ class Navbar extends React.Component {
                 <Image
                   src={stanzteileImg}
                   alt="Stanzteile Icon"
-                  layout="intrinsic"
                   width={50}
                   height={50}
                 />
@@ -226,7 +224,6 @@ class Navbar extends React.Component {
                 <Image
                   src={biegeteileImg}
                   alt="Biegeteile Icon"
-                  layout="intrinsic"
                   width={50}
                   height={50}
                 />
@@ -244,7 +241,6 @@ class Navbar extends React.Component {
                 <Image
                   src={lasergravurImg}
                   alt="Lasergravur Icon"
-                  layout="intrinsic"
                   width={50}
                   height={50}
                 />
@@ -262,7 +258,6 @@ class Navbar extends React.Component {
                 <Image
                   src={blechkonstruktionImg}
                   alt="Blechkonstruktionen Icon"
-                  layout="intrinsic"
                   width={50}
                   height={50}
                 />
@@ -280,7 +275,6 @@ class Navbar extends React.Component {
                 <Image
                   src={baugruppenImg}
                   alt="Baugruppen Icon"
-                  layout="intrinsic"
                   width={50}
                   height={50}
                 />
@@ -298,7 +292,6 @@ class Navbar extends React.Component {
                 <Image
                   src={fuegeverfahrenImg}
                   alt="Fügeverfahren Icon"
-                  layout="intrinsic"
                   width={50}
                   height={50}
                 />
@@ -316,7 +309,6 @@ class Navbar extends React.Component {
                 <Image
                   src={entgrattechnikImg}
                   alt="Entgrattechnik Icon"
-                  layout="intrinsic"
                   width={50}
                   height={50}
                 />
diff --git a/components/productpage.jsx b/components/productpage.jsx
index c4a1f1d..f4fdde4 100644
--- a/components/productpage.jsx
+++ b/components/productpage.jsx
@@ -14,7 +14,7 @@ export default function Productpage(props) {
           >
             <div className="center-icon">
               {props.iconurl &&
-                <Image src={props.iconurl} width={300} height={300} alt={""} />
+                <Image src={props.iconurl} width={300} height={300} alt={props.iconalt} className="products-icon" />
               }
 
             </div>
diff --git a/pages/_app.js b/pages/_app.js
index 4788c98..ae9c9bc 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -105,6 +105,13 @@ export default class Site extends App {
     });
     this.tl.clear();
 
+    if (document.querySelector(".landing-img")) {
+      this.tl.to(".landing-img", {
+        scale: 0.9,
+        opacity: 0,
+      });
+    }
+
     if (document.querySelector(".mainheading")) {
       this.tl.to(".mainheading", {
         opacity: 0,
@@ -123,6 +130,30 @@ export default class Site extends App {
       );
     }
 
+    if (document.querySelector(".products-icon")) {
+      if (getWidth() > 1200) {
+        this.tl.to(
+          ".products-icon",
+          {
+            opacity: 0,
+            duration: 0.1,
+          },
+          0
+        );
+      } else {
+        this.tl.to(
+          ".products-icon",
+          {
+            opacity: 0,
+            height: 0,
+            minHeight: 0,
+            duration: 0.5,
+          },
+          0
+        );
+      }
+    }
+
     if (document.querySelector(".products-img")) {
       if (getWidth() > 1200) {
         this.tl.to(
@@ -148,13 +179,6 @@ export default class Site extends App {
       }
     }
 
-    if (document.querySelector(".landing-img")) {
-      this.tl.to(".landing-img", {
-        scale: 0.9,
-        opacity: 0,
-      });
-    }
-
     this.tl.to(node, {
       opacity: 0,
       duration: 0.1,
diff --git a/pages/fertigungsverfahren/[index].jsx b/pages/fertigungsverfahren/[index].jsx
index 3a1fc95..43c74b6 100644
--- a/pages/fertigungsverfahren/[index].jsx
+++ b/pages/fertigungsverfahren/[index].jsx
@@ -173,6 +173,7 @@ class Fertigungsverfahren extends React.Component {
         <Productpage
           bgurl={this.props.bgurl}
           iconurl={this.props.iconurl}
+          iconalt={this.props.iconalt}
           title={this.props.title}
           text={this.props.text}
         />
diff --git a/pages/index.js b/pages/index.js
index d616430..94badec 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -54,9 +54,8 @@ export default class Home extends React.Component {
           <div className="col text-center">
             <Image
               src={landinglogoImg}
-              className="products-img"
+              className="landing-logo"
               alt="Logo der Hans Prothmann GmbH"
-              layout="intrinsic"
               width={500}
               height={500}
             />
@@ -69,19 +68,19 @@ export default class Home extends React.Component {
               <p>
                 Seit 1971 ist die Hans Prothmann GmbH ihr verlässlicher Partner
                 für Blechverarbeitung in München. Unsere Produktion setzt auf
-                einen modernen Maschinenpark mit
+                einen modernen Maschinenpark mit {" "}
                 <Link href="/fertigungsverfahren/laserteile">
                   CNC Laser-
                 </Link>
-                ,
+                ,{" "}
                 <Link href="/fertigungsverfahren/stanzteile">
                   CNC Stanz-
                 </Link>
-                ,
+                ,{" "}
                 <Link href="/fertigungsverfahren/biegeteile">
                   CNC Biege-
                 </Link>{" "}
-                und
+                und{" "}
                 <Link href="/fertigungsverfahren/lasergravur">
                   Gravurtechnik
                 </Link>