Fixed Image Loading

components/images/fertigungsverfahren/baugruppen.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <style>
+    .baugruppe_csl-1 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: white;
+    stroke-width: 15px;
+    }
+  </style>
+  <title>Baugruppe Icon</title>
+  <g>
+    <path class="baugruppe_csl-1" d="M9,9H293.5a50,50,0,0,1,50,50V340h-188V121.84a50,50,0,0,0-50-50H9Z"></path>
+    <polygon class="baugruppe_csl-1" points="271.44 211.5 227.56 211.5 205.62 249.5 227.56 287.5 271.44 287.5 293.38 249.5 271.44 211.5"></polygon>
+    <path class="baugruppe_csl-1" d="M489.5,490H205a50,50,0,0,1-50-50V340H343v37.16a50,50,0,0,0,50,50h96.5Z"></path>
+  </g>
+</svg>

components/images/fertigungsverfahren/biegeteile.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <style>
+    .biegeteile_csl-1 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: white;
+    stroke-width: 15px;
+    }
+  </style>
+  <title>Biegeteile Icon</title>
+  <g>
+    <line class="biegeteile_csl-1" x1="9.5" y1="490.5" x2="490.5" y2="490.5"></line>
+    <line class="biegeteile_csl-1" x1="249.5" y1="9.5" x2="490.5" y2="9.5"></line>
+    <line class="biegeteile_csl-1" x1="9.5" y1="9.5" x2="203.5" y2="9.5"></line>
+  </g>
+  <line class="biegeteile_csl-1" x1="249.5" y1="250.5" x2="231.5" y2="232.5"></line>
+  <path class="biegeteile_csl-1" d="M203.5,98.5l6.13,6.13A105.76,105.76,0,0,1,238.17,202L231.5,232.5"></path>
+  <line class="biegeteile_csl-1" x1="203.5" y1="9.5" x2="203.5" y2="98.5"></line>
+  <path class="biegeteile_csl-1" d="M299.5,9.5l.86,78.29a75.23,75.23,0,0,0,3.22,21l6,19.86A79.23,79.23,0,0,1,308,179.86a98.35,98.35,0,0,1-22.33,34.45L249.5,250.5"></path>
+  <line class="biegeteile_csl-1" x1="249.5" y1="408.5" x2="203.5" y2="362.5"></line>
+  <line class="biegeteile_csl-1" x1="249.5" y1="408.5" x2="295.5" y2="362.5"></line>
+  <line class="biegeteile_csl-1" x1="203.5" y1="362.5" x2="9.5" y2="362.5"></line>
+  <line class="biegeteile_csl-1" x1="295.5" y1="362.5" x2="490.5" y2="362.5"></line>
+  <line class="biegeteile_csl-1" x1="249.5" y1="348.5" x2="163" y2="262"></line>
+  <line class="biegeteile_csl-1" x1="250" y1="348.5" x2="336.5" y2="262"></line>
+</svg>

components/images/fertigungsverfahren/blechkonstruktion.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <style>
+    .blechkonstruktion_csl-1 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: white;
+    stroke-width: 15px;
+    }
+  </style>
+  <title>Blechkonstruktion Icon</title>
+  <g>
+    <g>
+      <polyline class="blechkonstruktion_csl-1" points="329.67 190.33 329.67 169.33 308.67 169.33"></polyline>
+      <line class="cls-2" x1="269.22" y1="169.33" x2="210.06" y2="169.33"></line>
+      <polyline class="blechkonstruktion_csl-1" points="190.33 169.33 169.33 169.33 169.33 190.33"></polyline>
+      <line class="cls-2" x1="169.33" y1="229.78" x2="169.33" y2="288.94"></line>
+      <polyline class="blechkonstruktion_csl-1" points="169.33 308.67 169.33 329.67 190.33 329.67"></polyline>
+      <line class="cls-2" x1="229.78" y1="329.67" x2="288.94" y2="329.67"></line>
+      <polyline class="blechkonstruktion_csl-1" points="308.67 329.67 329.67 329.67 329.67 308.67"></polyline>
+      <line class="cls-2" x1="329.67" y1="269.22" x2="329.67" y2="210.06"></line>
+    </g>
+    <polygon class="blechkonstruktion_csl-1" points="169.33 169.33 9 169.33 9 329.67 169.33 329.67 169.33 490 329.67 490 329.67 329.67 490 329.67 490 169.33 329.67 169.33 329.67 9 169.33 9 169.33 169.33"></polygon>
+  </g>
+</svg>

components/images/fertigungsverfahren/entgrattechnik.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <style>
+    .entgraten_csl-1 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: white;
+    stroke-width: 15px;
+    }
+  </style>
+  <title>Entgraten Icon</title>
+  <g>
+    <rect class="entgraten_csl-1" x="9" y="105.44" width="481" height="193.13" rx="96.56"></rect>
+    <circle class="entgraten_csl-1" cx="103.74" cy="201.39" r="53.44"></circle>
+    <circle class="entgraten_csl-1" cx="396.47" cy="201.39" r="53.44"></circle>
+    <circle class="entgraten_csl-1" cx="249.5" cy="342.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="299.5" cy="342.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="149.5" cy="342.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="349.5" cy="342.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="99.5" cy="342.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="399.5" cy="342.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="274.5" cy="382.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="199.5" cy="342.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="324.5" cy="382.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="374.5" cy="382.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="224.5" cy="382.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="174.5" cy="382.5" r="11"></circle>
+    <circle class="entgraten_csl-1" cx="124.5" cy="382.5" r="11"></circle>
+  </g>
+</svg>

components/images/fertigungsverfahren/fuegeverfahren.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <style>
+    .fuegeverfahren_csl-1 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: white;
+    stroke-width: 15px;
+    }
+  </style>
+  <title>Fügeverfahren Icon</title>
+  <g>
+    <rect class="fuegeverfahren_csl-1" x="123.5" y="93.5" width="252" height="70" rx="12" ry="12"></rect>
+    <path
+      class="fuegeverfahren_csl-1"
+      d="M297.45,356.06a15.68,15.68,0,0,1,0-22.17l3.33-3.32a15.68,15.68,0,0,1,22.17,0l77.75,77.75a179.9,179.9,0,0,0,29.57-99.09V59a50,50,0,0,0-50-50H118.73a50,50,0,0,0-50,50V307.25c0,105.61,86.36,188.75,191.78,182.42a180.17,180.17,0,0,0,117.37-53.18Z"></path>
+    <polyline class="fuegeverfahren_csl-1" points="298.03 331.14 240.26 273.37 221.97 291.66"></polyline>
+    <path class="fuegeverfahren_csl-1" d="M188.11,297.16,144,370l72.81-44.11a8,8,0,0,0,3.11-1.89c4.9-4.9,2.17-15.57-6.09-23.83s-18.94-11-23.83-6.1A7.92,7.92,0,0,0,188.11,297.16Z"></path>
+  </g>
+</svg>

components/images/fertigungsverfahren/lasergravur.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <style>
+    .lasergravur_csl-1 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: white;
+    stroke-width: 15px;
+    }
+  </style>
+  <title>Lasergravur Icon</title>
+  <g>
+    <path
+      class="lasergravur_csl-1"
+      d="M189.76,184.55,86.4,421.15a23.84,23.84,0,0,1-18.18,14L45.6,438.68v51.64l135.93.18V440.11l-4-.44a23.83,23.83,0,0,1-19.82-31.77l8.2-22.71h88.67l9.56,21.09a23.85,23.85,0,0,1-19.85,33.6h0V490.5H401.12V439.41l-22.7-1.61a23.85,23.85,0,0,1-20.18-14.29L300.91,291.27M192,333.65l23.26-55.44,23.23,55.44Z"></path>
+    <line class="lasergravur_csl-1" x1="307.01" y1="265.68" x2="307.01" y2="202.95"></line>
+    <line class="lasergravur_csl-1" x1="307.01" y1="119.29" x2="307.01" y2="56.55"></line>
+    <line class="lasergravur_csl-1" x1="380.94" y1="229.82" x2="339.11" y2="187.99"></line>
+    <line class="lasergravur_csl-1" x1="280.14" y1="129.02" x2="233.08" y2="81.96"></line>
+    <line class="lasergravur_csl-1" x1="411.58" y1="155.89" x2="348.52" y2="155.89"></line>
+    <line class="lasergravur_csl-1" x1="265.5" y1="155.89" x2="202.45" y2="155.89"></line>
+    <line class="lasergravur_csl-1" x1="233.07" y1="229.83" x2="274.91" y2="187.99"></line>
+    <line class="lasergravur_csl-1" x1="306.85" y1="156.05" x2="453.4" y2="9.5"></line>
+  </g>
+</svg>

components/images/fertigungsverfahren/laserteile.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <style>
+    .laserteile_csl-1 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: white;
+    stroke-width: 15px;
+    }
+  </style>
+  <title>Laserteile Icon</title>
+  <g>
+    <polyline class="laserteile_csl-1" points="173.7 208.12 9 322.7 110.74 393.47 212.35 318.1"></polyline>
+    <polyline class="laserteile_csl-1" points="290.91 318.1 147.48 419.03 249.5 490 490 322.7 325.27 208.1"></polyline>
+    <polyline class="laserteile_csl-1" points="197.22 134.48 144.94 82.2 144.94 9 9 9"></polyline>
+    <polyline class="laserteile_csl-1" points="490 9 354.06 9 354.06 82.2 301.78 134.48 228.59 134.48"></polyline>
+    <line class="laserteile_csl-1" x1="354.07" y1="318.09" x2="290.91" y2="318.09"></line>
+    <line class="laserteile_csl-1" x1="212.35" y1="318.09" x2="134.48" y2="318.09"></line>
+    <line class="laserteile_csl-1" x1="209.87" y1="288.5" x2="164.8" y2="266.75"></line>
+    <line class="laserteile_csl-1" x1="334.2" y1="266.75" x2="289.13" y2="288.5"></line>
+    <line class="laserteile_csl-1" x1="249.5" y1="218.13" x2="249.5" y2="301.78"></line>
+    <polyline class="laserteile_csl-1" points="197.22 134.48 197.22 186.76 236.43 218.13 262.57 218.13 301.78 186.76 301.78 134.48"></polyline>
+  </g>
+</svg>

components/images/fertigungsverfahren/stanzteile.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <style>
+    .stanzteile_csl-1 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: white;
+    stroke-width: 15px;
+    }
+  </style>
+  <title>Stanzteile Icon</title>
+  <g>
+    <g>
+      <polyline class="stanzteile_csl-1" points="173.7 209.12 9 323.7 110.74 394.47 147.48 420.03 249.5 491 490 323.7 325.27 209.1"></polyline>
+      <polyline class="stanzteile_csl-1" points="354.06 10 354.06 83.2 285.5 151.5 285.5 217.5 213.5 217.5 213.5 151.5 144.5 80.5 144.94 10"></polyline>
+    </g>
+    <ellipse class="stanzteile_csl-1" cx="249.5" cy="321" rx="43.85" ry="33.5"></ellipse>
+  </g>
+</svg>

components/navbar.jsx

@@ -7,6 +7,14 @@ import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";
 import Link from "next/link";
 
 import Logo from "./media/logo.jsx";
+import laserteileImg from './images/fertigungsverfahren/laserteile.svg'
+import stanzteileImg from './images/fertigungsverfahren/stanzteile.svg'
+import biegeteileImg from './images/fertigungsverfahren/biegeteile.svg'
+import lasergravurImg from './images/fertigungsverfahren/lasergravur.svg'
+import blechkonstruktionImg from './images/fertigungsverfahren/blechkonstruktion.svg'
+import baugruppenImg from './images/fertigungsverfahren/baugruppen.svg'
+import fuegeverfahrenImg from './images/fertigungsverfahren/fuegeverfahren.svg'
+import entgrattechnikImg from './images/fertigungsverfahren/entgrattechnik.svg'
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -51,73 +59,7 @@ class Navbar extends React.Component {
           name: "Kontakt",
           link: "/kontakt",
         },
-      ],
-      submenuServices: [
-        {
-          key: 0,
-          name: "Laserteile",
-          link: "laserteile",
-          isActive: false,
-          icon: "/icons/fertigungsverfahren/laserteile.svg",
-          alt: "Laserteile Icon",
-        },
-        {
-          key: 1,
-          name: "Stanzteile",
-          link: "stanzteile",
-          isActive: false,
-          icon: "/icons/fertigungsverfahren/stanzteile.svg",
-          alt: "Stanzteile Icon",
-        },
-        {
-          key: 2,
-          name: "Biegeteile",
-          link: "biegeteile",
-          isActive: false,
-          icon: "/icons/fertigungsverfahren/biegeteile.svg",
-          alt: "Biegeteile Icon",
-        },
-        {
-          key: 3,
-          name: "Lasergravur",
-          link: "lasergravur",
-          isActive: false,
-          icon: "/icons/fertigungsverfahren/lasergravur.svg",
-          alt: "Lasergravur Icon",
-        },
-        {
-          key: 4,
-          name: "Blechkonstruktionen",
-          link: "blechkonstruktion",
-          isActive: false,
-          icon: "/icons/fertigungsverfahren/metallkonstruktion.svg",
-          alt: "Blechkonstruktionen Icon",
-        },
-        {
-          key: 5,
-          name: "Baugruppen",
-          link: "baugruppe",
-          isActive: false,
-          icon: "/icons/fertigungsverfahren/baugruppe.svg",
-          alt: "Baugruppen Icon",
-        },
-        {
-          key: 6,
-          name: "Fügeverfahren",
-          link: "fügeverfahren",
-          isActive: false,
-          icon: "/icons/fertigungsverfahren/fuegeverfahren.svg",
-          alt: "Fügeverfahren Icon",
-        },
-        {
-          key: 7,
-          name: "Entgrattechnik",
-          link: "entgraten",
-          isActive: false,
-          icon: "/icons/fertigungsverfahren/entgraten.svg",
-          alt: "Entgrattechnik Icon",
-        },
-      ],
+      ]
     };
   }
 
@@ -238,25 +180,151 @@ class Navbar extends React.Component {
           </div>
 
           <div className="subnav-container d-flex flex-row flex-nowrap align-items-center">
-            {this.state.submenuServices.map((menuitem, index) => (
-              <div key={menuitem.key} className="nav-subitem">
-                <Link
-                  href={"/fertigungsverfahren/" + menuitem.link}
-                  className="nav-link"
-                >
-                  <a>
-                    <Image
-                      src={menuitem.icon}
-                      alt={menuitem.alt}
-                      layout="intrinsic"
-                      width={50}
-                      height={50}
-                    />
-                    <div>{menuitem.name}</div>
-                  </a>
-                </Link>
-              </div>
-            ))}
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/laserteile"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={laserteileImg}
+                    alt="Laserteile Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Laserteile</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/stanzteile"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={stanzteileImg}
+                    alt="Stanzteile Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Stanzteile</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/biegeteile"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={biegeteileImg}
+                    alt="Biegeteile Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Biegeteile</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/lasergravur"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={lasergravurImg}
+                    alt="Lasergravur Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Lasergravur</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/blechkonstruktionen"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={blechkonstruktionImg}
+                    alt="Blechkonstruktionen Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Blechkonstruktionen</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/baugruppen"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={baugruppenImg}
+                    alt="Baugruppen Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Baugruppen</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/fuegeverfahren"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={fuegeverfahrenImg}
+                    alt="Fügeverfahren Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Fügeverfahren</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/entgrattechnik"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={entgrattechnikImg}
+                    alt="Entgrattechnik Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Entgrattechnik</div>
+                </a>
+              </Link>
+            </div>
+
+
           </div>
         </nav>
       </>

components/productscontainer.jsx

@@ -1,25 +0,0 @@
-import Image from "next/image";
-
-export default function ProductContainer(props) {
-  return (
-    <div className="col-12 col-lg-4 text-center h-100">
-      <div className="content">
-        <div className="bg-white">
-          <Image
-            src={props.imgurl}
-            alt={props.imgalt}
-            className="p-3"
-            layout="intrinsic"
-            width={300}
-            height={300}
-          />
-        </div>
-        <div className="">
-          <h3 className="text-center">{props.title}</h3>
-          <p>{props.text}</p>
-          {props.children}
-        </div>
-      </div>
-    </div>
-  );
-}

package.json

@@ -10,23 +10,23 @@
   },
   "dependencies": {
     "@react-google-maps/api": "^2.7.0",
-    "axios": "^0.26.0",
+    "axios": "^0.26.1",
     "bootstrap": "^5.1.3",
     "formik": "^2.2.9",
     "gsap": "npm:@gsap/shockingly@^3.9.1",
-    "next": "12.0.10",
+    "next": "12.1.0",
     "nodemailer": "^6.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-dropzone": "^12.0.4",
-    "react-svg": "^14.1.11",
+    "react-svg": "^14.1.14",
     "react-transition-group": "^4.4.2",
-    "sass": "^1.49.7",
-    "sharp": "^0.30.1",
+    "sass": "^1.49.9",
+    "sharp": "^0.30.3",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "eslint": "8.9.0",
-    "eslint-config-next": "12.0.10"
+    "eslint": "8.11.0",
+    "eslint-config-next": "12.1.0"
   }
 }

pages/index.js

@@ -5,7 +5,16 @@ import Image from "next/image";
 import { gsap } from "gsap/dist/gsap";
 import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";
 
-import ProductContainer from "../components/productscontainer.jsx";
+import landinglogoImg from "../components/images/logo/landinglogo.svg";
+import laserteileImg from '../components/images/fertigungsverfahren/laserteile.svg';
+import stanzteileImg from '../components/images/fertigungsverfahren/stanzteile.svg';
+import biegeteileImg from '../components/images/fertigungsverfahren/biegeteile.svg';
+import elektronikgehaeuseImg from '../components/images/products/elektronikgehaeuse.webp';
+import elektronikaufnahmeImg from '../components/images/products/elektronikaufnahme.webp';
+import federnImg from '../components/images/products/federn.webp';
+import metallabschirmungImg from '../components/images/products/metallabschirmung.webp';
+import teleskopdurchfuehrungenImg from '../components/images/products/teleskopdurchfuehrungen.webp';
+import chassismesstechnikImg from '../components/images/products/chassismesstechnik.webp';
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -16,7 +25,7 @@ export default class Home extends React.Component {
     this.productsWrapper = React.createRef();
   }
 
-  componentDidMount() {}
+  componentDidMount() { }
 
   render() {
     return (
@@ -42,7 +51,7 @@ export default class Home extends React.Component {
         >
           <div className="col text-center">
             <Image
-              src="/landinglogo.svg"
+              src={landinglogoImg}
               className="products-img"
               alt="Logo der Hans Prothmann GmbH"
               layout="intrinsic"
@@ -102,8 +111,8 @@ export default class Home extends React.Component {
                     }}
                   >
                     <Image
-                      src="/icons/fertigungsverfahren/laserteile.svg"
-                      alt="Icon einer Lasermaschine zum Herstellen von Laserteile"
+                      src={laserteileImg}
+                      alt="Laserteile Icon"
                       className="p-3"
                       layout="intrinsic"
                       width={250}
@@ -125,8 +134,8 @@ export default class Home extends React.Component {
                     }}
                   >
                     <Image
-                      src="/icons/fertigungsverfahren/stanzteile.svg"
-                      alt="Icon einer Stanzmaschine zum Herstellen von Stanzteile"
+                      src={stanzteileImg}
+                      alt="Stanzteile Icon"
                       className="p-3"
                       layout="intrinsic"
                       width={250}
@@ -148,8 +157,8 @@ export default class Home extends React.Component {
                     }}
                   >
                     <Image
-                      src="/icons/fertigungsverfahren/biegeteile.svg"
-                      alt="Icon einer Biegemaschine zum Herstellen von Biegeteilen"
+                      src={biegeteileImg}
+                      alt="Biegeteile Icon"
                       className="p-3"
                       layout="intrinsic"
                       width={250}
@@ -176,206 +185,171 @@ export default class Home extends React.Component {
             </div>
           </div>
           <div className="row mb-5">
-            <ProductContainer
-              imgurl="/products/elektronikgehaeuse.webp"
-              imgalt="Elektronikgehäuse aus Blech, Stanzteil, Laserteil"
-              title="Elektronikgehäuse"
-            >
-              <p>
-                Unsere Elektronikgehäuse werden mit{" "}
-                <Link href="/fertigungsverfahren/stanzteile">
-                  <a>Stanz-</a>
-                </Link>{" "}
-                oder{" "}
-                <Link href="/fertigungsverfahren/laserteile">
-                  <a>Lasertechnik</a>
-                </Link>{" "}
-                aus einer Blechplatine gefertigt. Die endgültige Form bekommen
-                die Teile nach der Umformung auf unseren{" "}
-                <Link href="/fertigungsverfahren/biegeteile">
-                  <a>CNC Biegemaschinen</a>
-                </Link>
-                .
-              </p>
-            </ProductContainer>
-            <ProductContainer
-              imgurl="/products/elektronikaufnahme.webp"
-              imgalt="Edelstahlkörper mit Gewindedüsen, Gewindebolzen, Senkungen und Erdungsfahne"
-              title="Elektronikaufnahme"
-            >
-              <p>
-                An dem Edelstahlgrundkörper sieht man unser Leistungsspektrum
-                rund ums Blech. Es sind Gewindedüsen geformt, Gewindebolzen
-                eingepresst, Senkungen geschnitten und Erdungsfahnen
-                angeschweißt.
-              </p>
-            </ProductContainer>
-            <ProductContainer
-              imgurl="/products/chassismesstechnik.webp"
-              imgalt="Dreieckiges Laserteil mit höchster Präzision"
-              title="Chassis für Messtechnik"
-            >
-              <p>
-                Spezielle Messtechnik benötigt häufig auch spezielle Lösungen in
-                der Mechanik. Dieses dreieckige Gehäuse stellt höchste
-                Anforderungen an die Umform- und Abkanttechnik.
-              </p>
-            </ProductContainer>
-            <ProductContainer
-              imgurl="/products/teleskopdurchfuehrungen.webp"
-              imgalt="Teleskopdurchführungen aus Blech mit perfekter Ebenheit"
-              title="Teleskopdurchführungen"
-            >
-              <p>
-                Bei diesen Biegeteilen liegt die Schwierigkeit in der Ebenheit
-                der Werkstücke. Die Ebenheit muss selbst nach der
-                Wärmeeinwirkung beim{" "}
-                <Link href="/fertigungsverfahren/stanzteile">
-                  <a>Lasern</a>
-                </Link>{" "}
-                und nach der Umformung beim{" "}
-                <Link href="/fertigungsverfahren/biegeteile">
-                  <a>Abkanten</a>
-                </Link>{" "}
-                gewährleistet sein.
-              </p>
-            </ProductContainer>
-            <ProductContainer
-              imgurl="/products/federn.webp"
-              imgalt="Mit Spezialwerkzeug gefertigte Federn aus exotischen Materialien mit Lasergravur"
-              title="Federn aus exotischen Materialien"
-            >
-              <p>
-                Wir haben eine große Auswahl an Federstählen auf Lager und
-                fertigen die Federn mit Spezialwerkzeugen aus eigener
-                Produktion. Diese Federn aus Kupfer mit{" "}
-                <Link href="/fertigungsverfahren/lasergravur">
-                  <a>Lasergravur</a>
-                </Link>{" "}
-                zeigen die Präzision bei der Fertigung.
-              </p>
-            </ProductContainer>
-            <ProductContainer
-              imgurl="/products/metallabschirmung.webp"
-              imgalt="Runde Metallabschirmung aus Blech"
-              title="MU-Metall Abschirmungen"
-            >
-              <p>
-                Aufgrund unserer langjährigen Erfahrung im audiovisuellen
-                Anlagenbau sind wir auch Ihr kompetenter Partner in der
-                Produktion von elektromagnetischen Abschirmungen.
-              </p>
-            </ProductContainer>
+
+            <div className="col-12 col-lg-4 text-center h-100">
+              <div className="content">
+                <div className="bg-white">
+                  <Image
+                    src={elektronikgehaeuseImg}
+                    alt="Elektronikgehäuse aus Blech, Stanzteil, Laserteil"
+                    className="p-3"
+                    layout="intrinsic"
+                    width={300}
+                    height={300}
+                  />
+                </div>
+                <div className="">
+                  <h3 className="text-center">Elektronikgehäuse</h3>
+                  <p>
+                    Unsere Elektronikgehäuse werden mit{" "}
+                    <Link href="/fertigungsverfahren/stanzteile">
+                      <a>Stanz-</a>
+                    </Link>{" "}
+                    oder{" "}
+                    <Link href="/fertigungsverfahren/laserteile">
+                      <a>Lasertechnik</a>
+                    </Link>{" "}
+                    aus einer Blechplatine gefertigt. Die endgültige Form bekommen
+                    die Teile nach der Umformung auf unseren{" "}
+                    <Link href="/fertigungsverfahren/biegeteile">
+                      <a>CNC Biegemaschinen</a>
+                    </Link>
+                    .
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="col-12 col-lg-4 text-center h-100">
+              <div className="content">
+                <div className="bg-white">
+                  <Image
+                    src={elektronikaufnahmeImg}
+                    alt="Edelstahlkörper mit Gewindedüsen, Gewindebolzen, Senkungen und Erdungsfahne"
+                    className="p-3"
+                    layout="intrinsic"
+                    width={300}
+                    height={300}
+                  />
+                </div>
+                <div className="">
+                  <h3 className="text-center">Elektronikaufnahme</h3>
+                  <p>
+                    An dem Edelstahlgrundkörper sieht man unser Leistungsspektrum
+                    rund ums Blech. Es sind Gewindedüsen geformt, Gewindebolzen
+                    eingepresst, Senkungen geschnitten und Erdungsfahnen
+                    angeschweißt.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="col-12 col-lg-4 text-center h-100">
+              <div className="content">
+                <div className="bg-white">
+                  <Image
+                    src={chassismesstechnikImg}
+                    alt="Dreieckiges Laserteil mit höchster Präzision"
+                    className="p-3"
+                    layout="intrinsic"
+                    width={300}
+                    height={300}
+                  />
+                </div>
+                <div className="">
+                  <h3 className="text-center">Chassis für Messtechnik</h3>
+                  <p>
+                    Spezielle Messtechnik benötigt häufig auch spezielle Lösungen in
+                    der Mechanik. Dieses dreieckige Gehäuse stellt höchste
+                    Anforderungen an die Umform- und Abkanttechnik.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="col-12 col-lg-4 text-center h-100">
+              <div className="content">
+                <div className="bg-white">
+                  <Image
+                    src={teleskopdurchfuehrungenImg}
+                    alt="Teleskopdurchführungen aus Blech mit perfekter Ebenheit"
+                    className="p-3"
+                    layout="intrinsic"
+                    width={300}
+                    height={300}
+                  />
+                </div>
+                <div className="">
+                  <h3 className="text-center">Teleskopdurchführungen</h3>
+                  <p>
+                    Bei diesen Biegeteilen liegt die Schwierigkeit in der Ebenheit
+                    der Werkstücke. Die Ebenheit muss selbst nach der
+                    Wärmeeinwirkung beim{" "}
+                    <Link href="/fertigungsverfahren/stanzteile">
+                      <a>Lasern</a>
+                    </Link>{" "}
+                    und nach der Umformung beim{" "}
+                    <Link href="/fertigungsverfahren/biegeteile">
+                      <a>Abkanten</a>
+                    </Link>{" "}
+                    gewährleistet sein.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="col-12 col-lg-4 text-center h-100">
+              <div className="content">
+                <div className="bg-white">
+                  <Image
+                    src={federnImg}
+                    alt="Mit Spezialwerkzeug gefertigte Federn aus exotischen Materialien mit Lasergravur"
+                    className="p-3"
+                    layout="intrinsic"
+                    width={300}
+                    height={300}
+                  />
+                </div>
+                <div className="">
+                  <h3 className="text-center">Federn aus exotischen Materialien</h3>
+                  <p>
+                    Wir haben eine große Auswahl an Federstählen auf Lager und
+                    fertigen die Federn mit Spezialwerkzeugen aus eigener
+                    Produktion. Diese Federn aus Kupfer mit{" "}
+                    <Link href="/fertigungsverfahren/lasergravur">
+                      <a>Lasergravur</a>
+                    </Link>{" "}
+                    zeigen die Präzision bei der Fertigung.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="col-12 col-lg-4 text-center h-100">
+              <div className="content">
+                <div className="bg-white">
+                  <Image
+                    src={metallabschirmungImg}
+                    alt="Runde Metallabschirmung aus Blech"
+                    className="p-3"
+                    layout="intrinsic"
+                    width={300}
+                    height={300}
+                  />
+                </div>
+                <div className="">
+                  <h3 className="text-center">MU-Metall Abschirmungen</h3>
+                  <p>
+                    Aufgrund unserer langjährigen Erfahrung im audiovisuellen
+                    Anlagenbau sind wir auch Ihr kompetenter Partner in der
+                    Produktion von elektromagnetischen Abschirmungen.
+                  </p>
+                </div>
+              </div>
+            </div>
+
           </div>
         </div>
-        {/* <div className="container-fluid products-container navbar-spacing">
-                  {content.products.map(function (prod) {
-                    return (
-                      <div className="row align-items-center" key={prod.title}>
-                        <div
-                          className={`align-self-stretch background-image d-flex flex-column justify-content-center products-img col-lg-4`}
-                        >
-                          <h3 className="mainheading d-lg-none">{prod.title}</h3>
-                          <div className="icon-size align-items-center bg-light">
-                            <img src={prod.imgurl} />
-                          </div>
-                        </div>
-                        <div
-                          className={`col-lg-6 offset-lg-1 pl-0 align-self-center p-5 mb-5 h-100"`}
-                        >
-                          <div>
-                            <h3 className="mainheading d-none d-lg-block">
-                              {prod.title}
-                            </h3>
-                            <p>{prod.text}</p>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div> */}
-        {/* <div className="container">
-                  <div className="row">
-                    <div className="col-lg-6">
-                      <div className="sticky_history">
-                        <p>1971</p>
-                        <p>1980</p>
-                        <p>1985</p>
-                        <p>1995</p>
-                        <p>2013</p>
-                        <p>2018</p>
-                        <p>2021</p>
-                      </div>
-                    </div>
-                    <div className="col-12 col-lg-6 history_wrapper mb-5">
-                      <div className="section-wrapper">
-                        <section className="section history">
-                          <h3>Gründung</h3>
-                          <p>
-                            Die Firma Prothmann wurde von Herrn Hans Prothmann als
-                            Personengesellschaft in der Winterstraße in Gröbenzell bei
-                            München gegründet.
-                          </p>
-                        </section>
-                        <section className="section history">
-                          <h3>Umzug #1</h3>
-                          <p>
-                            Umzug zum derzeitigen Standort in die Industriestraße 6 in
-                            Gröbenzell bei München.
-                          </p>
-                        </section>
-                        <section className="section history">
-                          <h3>GmbH</h3>
-                          <p>
-                            1985 wurde die Hans Prothmann GbR in eine GmbH umgewandelt.
-                          </p>
-                        </section>
-                        <section className="section history">
-                          <h3>Digitalisierung</h3>
-                          <p>
-                            Erstmals wurden computergesteuerte Verarbeitungsmaschinen
-                            eingesetzt, welche ständig an die neusten Technologien
-                            angepasst werden. Zudem gelten seither bei uns strenge,
-                            eigens auferlegte Qualitäts-Kriterien, nach welchen wir
-                            unsere Produkte in den modernsten CNC Anlagen herstellen.
-                            Seitdem sind wir eine der führenden Unternehmen, wenn es um
-                            Blechverarbeitung geht.
-                          </p>
-                        </section>
-
-                        <section className="section history">
-                          <h3>Generationenwechsel</h3>
-                          <p>
-                            Herr Dr. Kolja Prothmann tritt, nachdem er bereits seit
-                            Jahren im Unternehmen tätig ist, in die Geschäftsführung
-                            ein. Herr Hans Prothmann gilt jedoch weiterhin als
-                            Ansprechpartner und unterstützt die Hans Prothmann GmbH mit
-                            seiner jahrzehnte langen Erfahrungen.
-                          </p>
-                        </section>
-
-                        <section className="section history">
-                          <h3>Lasergravur</h3>
-                          <p>
-                            Dieses Jahr haben wir unser Leistungsspektrum um
-                            Lasergravieren erweitert. Damit können wir eine Vielzahl von
-                            Metallen ganz nach Ihren Vorstellungen Beschriften und
-                            Kennzeichnen.
-                          </p>
-                        </section>
-
-                        <section className="section history">
-                          <h3>Umzug #2</h3>
-                          <p>
-                            Zum zweiten mal in der Firmengeschichte wechseln wir unseren
-                            Standort. Ab Mitte 2021 finden Sie uns nur wenige Häuser
-                            weiter in der Breslauerstraße 19.
-                          </p>
-                        </section>
-                      </div>
-                    </div>
-                  </div>
-                </div> */}
       </>
     );
   }