import React from "react";
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";

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';

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

export default class Home extends React.Component {
  constructor(props) {
    super(props);

    this.productsWrapper = React.createRef();
  }

  componentDidMount() { }

  render() {
    return (
      <>
        <Head>
          <meta
            name="description"
            content="Die Hans Prothmann GmbH ist Ihr Experte für Blechverarbeitung in München. Professionelles Laserschneiden, Stanzen, Biegen und Gravieren in München."
          />
          <meta
            name="keywords"
            content="Blechverarbeitung München, Blechverarbeitung Gröbenzell, Laserteile, Biegeteile, Stanzteile"
          />
          <meta name="robots" content="index, follow" />
          <title> Prothmann - Blechverarbeitung in München </title>
        </Head>
        <div
          className="container-fluid background-image landing-img d-flex align-items-center minh-100vh navbar-spacing"
          style={{
            backgroundImage:
              "url(/background/fertigungsverfahren/laserteile.webp)",
          }}
        >
          <div className="col text-center">
            <Image
              src={landinglogoImg}
              className="landing-logo"
              alt="Logo der Hans Prothmann GmbH"
              width={500}
              height={500}
            />
          </div>
        </div>
        <div className="container">
          <div className="row">
            <div className="col mt-5 text-center">
              <h1> Ihr Experte für Blechverarbeitung in München </h1>
              <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 {" "}
                <Link href="/fertigungsverfahren/laserteile">
                  CNC Laser-
                </Link>
                ,{" "}
                <Link href="/fertigungsverfahren/stanzteile">
                  CNC Stanz-
                </Link>
                ,{" "}
                <Link href="/fertigungsverfahren/biegeteile">
                  CNC Biege-
                </Link>{" "}
                und{" "}
                <Link href="/fertigungsverfahren/lasergravur">
                  Gravurtechnik
                </Link>
                , mit welchem wir anspruchsvolle, qualitativ hochwertige
                Bauteile für Sie fertigen - egal ob 0 Serie oder
                Massenproduktion.
              </p>
              <p>
                Unsere Stärke liegt vor allem in der Präzision unserer
                Fertigungsteile. Branchenübliche Toleranzen von 0, 1 mm können
                wir deutlich unterschreiten und Teile mit Toleranzen von 0, 01
                mm in Serie fertigen. Um diesen Anforderungen gerecht zu werden,
                kalibrieren wir unsere Maschinen regelmäßig auf den Mikrometer
                genau - das ist Hightech in Blech.
              </p>
            </div>
          </div>
        </div>
        <div className="container-fluid mb-5">
          <div className="row text-center">
            <div className="col-lg-4 col-xs-12 p-0">
              <Link href="/fertigungsverfahren/laserteile">

                <div
                  className="background-image d-flex align-items-center flex-column filter-grey"
                  style={{
                    backgroundImage:
                      "url('/background/fertigungsverfahren/laserteile.webp')",
                  }}
                >
                  <Image
                    src={laserteileImg}
                    alt="Laserteile Icon"
                    className="p-3"
                    layout="intrinsic"
                    width={250}
                    height={250}
                  />
                  <h3 className="text-white"> Laserteile </h3>
                </div>

              </Link>
            </div>
            <div className="col-lg-4 col-xs-12 p-0">
              <Link href="/fertigungsverfahren/stanzteile">

                <div
                  className="background-image d-flex align-items-center flex-column filter-grey"
                  style={{
                    backgroundImage:
                      "url('/background/fertigungsverfahren/stanzteile.webp')",
                  }}
                >
                  <Image
                    src={stanzteileImg}
                    alt="Stanzteile Icon"
                    className="p-3"
                    layout="intrinsic"
                    width={250}
                    height={250}
                  />
                  <h3 className="text-white"> Stanzteile </h3>
                </div>

              </Link>
            </div>
            <div className="col-lg-4 col-xs-12 p-0">
              <Link href="/fertigungsverfahren/biegeteile">

                <div
                  className="background-image d-flex align-items-center flex-column filter-grey"
                  style={{
                    backgroundImage:
                      "url('/background/fertigungsverfahren/biegeteile.webp')",
                  }}
                >
                  <Image
                    src={biegeteileImg}
                    alt="Biegeteile Icon"
                    className="p-3"
                    layout="intrinsic"
                    width={250}
                    height={250}
                  />
                  <h3 className="text-white"> Biegeteile </h3>
                </div>

              </Link>
            </div>
          </div>
        </div>
        <div className="container">
          <div className="row">
            <div className="col-12 col-lg-8 offset-lg-2 mt-5">
              <h2 className="text-center"> Produkte </h2>
              <p className="text-center">
                Wir verarbeiten alle auf dem Weltmarkt erhältlichen Materialien.
                Durch unsere Spezialisierung auf Feinbleche haben wir oft auch
                schwierig zu beschaffende Materialien wie z.B. säurebeständige
                Edelstähle, Federstahl, Bronze und Messing, sowie Mu-Metal auf
                Lager.
              </p>
            </div>
          </div>
          <div className="row mb-5">

            <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">
                      Stanz-
                    </Link>{" "}
                    oder{" "}
                    <Link href="/fertigungsverfahren/laserteile">
                      Lasertechnik
                    </Link>{" "}
                    aus einer Blechplatine gefertigt. Die endgültige Form bekommen
                    die Teile nach der Umformung auf unseren{" "}
                    <Link href="/fertigungsverfahren/biegeteile">
                      CNC Biegemaschinen
                    </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">
                      Lasern
                    </Link>{" "}
                    und nach der Umformung beim{" "}
                    <Link href="/fertigungsverfahren/biegeteile">
                      Abkanten
                    </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">
                      Lasergravur
                    </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>
      </>
    );
  }
}
