Fixed animations

.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

.gitignore

@@ -34,7 +34,4 @@ yarn-error.log*
 .vercel
 
 # gsap npmrc
-.npmrc
-
-#ecosystem
-ecosystem.config.js
+.npmrc

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}
                 />

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>

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,

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}
         />

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>