Initial

components/GogoleMaps.jsx

@@ -0,0 +1,224 @@
+import React from "react";
+import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
+
+const styles = [
+  {
+    featureType: "all",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "administrative",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "administrative",
+    elementType: "labels.text.fill",
+    stylers: [
+      {
+        color: "#444444",
+      },
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "administrative.neighborhood",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "landscape",
+    elementType: "all",
+    stylers: [
+      {
+        visibility: "on",
+      },
+      {
+        color: "#e0dfe0",
+      },
+    ],
+  },
+  {
+    featureType: "landscape",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "poi",
+    elementType: "all",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "poi",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "poi.park",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#a8a9a8",
+      },
+      {
+        visibility: "on",
+      },
+    ],
+  },
+  {
+    featureType: "road",
+    elementType: "all",
+    stylers: [
+      {
+        saturation: -100,
+      },
+      {
+        lightness: 45,
+      },
+    ],
+  },
+  {
+    featureType: "road",
+    elementType: "geometry.fill",
+    stylers: [
+      {
+        visibility: "on",
+      },
+      {
+        color: "#5b5b5a",
+      },
+    ],
+  },
+  {
+    featureType: "road",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "road.highway",
+    elementType: "all",
+    stylers: [
+      {
+        visibility: "simplified",
+      },
+    ],
+  },
+  {
+    featureType: "road.highway",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "road.arterial",
+    elementType: "labels.icon",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "transit",
+    elementType: "all",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "transit",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+  {
+    featureType: "water",
+    elementType: "all",
+    stylers: [
+      {
+        color: "#ffffff",
+      },
+      {
+        visibility: "on",
+      },
+    ],
+  },
+  {
+    featureType: "water",
+    elementType: "labels",
+    stylers: [
+      {
+        visibility: "off",
+      },
+    ],
+  },
+];
+
+const containerStyle = {
+  width: "100%",
+  height: "100%",
+};
+
+const center = {
+  lat: 48.191044224831614,
+  lng: 11.379406506650541,
+};
+
+function GoogleMaps() {
+  return (
+    <LoadScript googleMapsApiKey="AIzaSyDx-VOQjrzQcBxWsLXeT9KhihxeQf6TRzY">
+      <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={center}
+        zoom={17}
+        options={{
+          styles: styles,
+        }}
+      >
+        <Marker position={center} label="Hans Prothmann GmbH" />
+        <></>
+      </GoogleMap>
+    </LoadScript>
+  );
+}
+
+export default React.memo(GoogleMaps);

components/footer.jsx

@@ -0,0 +1,33 @@
+import Head from "next/head";
+import Link from "next/link";
+
+export default function Footer(props) {
+  return (
+    <footer>
+      <div className="container-fluid">
+        <div className="row py-2">
+          <div className="col-12 col-lg-4 text-center">
+            <Link href="/impressum">
+              <a>Impressum</a>
+            </Link>
+          </div>
+          <div className="col-12 col-lg-4 text-center">
+            <Link href="/datenschutz">
+              <a>Datenschutz</a>
+            </Link>
+          </div>
+          <div className="col-12 col-lg-4 text-center">
+            <Link href="/agbs">
+              <a>AGBs</a>
+            </Link>
+          </div>
+        </div>
+        <div className="row footer-dark-bg py-2">
+          <div className="col-12">
+            <div className="text-center">© 2021 Prothmann GmbH</div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/forms/Dropzone.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+
+const thumbsContainer = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  marginTop: 16,
+};
+
+const thumb = {
+  display: "inline-flex",
+  borderRadius: 2,
+  border: "1px solid #eaeaea",
+  marginBottom: 8,
+  marginRight: 8,
+  width: 100,
+  height: 100,
+  padding: 4,
+  boxSizing: "border-box",
+};
+
+const thumbInner = {
+  display: "flex",
+  minWidth: 0,
+  overflow: "hidden",
+};
+
+const img = {
+  display: "block",
+  width: "auto",
+  height: "100%",
+};
+
+export default function Dropzone(props) {
+  const [files, setFiles] = useState([]);
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: "image/*,.dxf,.stp,.step,.pdf",
+    onDrop: (acceptedFiles) => {
+      props.setFieldValue(
+        `parts[${props.index}].files`,
+        props.files.concat(acceptedFiles)
+      );
+      setFiles(
+        props.files.map((file) =>
+          Object.assign(file, {
+            preview: URL.createObjectURL(file),
+          })
+        )
+      );
+    },
+  });
+
+  const thumbs = files.map((file) => (
+    <div style={thumb} key={file.name}>
+      <div style={thumbInner}>
+        <img src={file.preview} style={img} />
+      </div>
+    </div>
+  ));
+
+  useEffect(
+    () => () => {
+      // Make sure to revoke the data uris to avoid memory leaks
+      files.forEach((file) => URL.revokeObjectURL(file.preview));
+    },
+    [files]
+  );
+
+  return (
+    <section className="container">
+      <div {...getRootProps({ className: "dropzone" })}>
+        <input {...getInputProps()} />
+        <p>Drag 'n' drop some files here, or click to select files</p>
+      </div>
+      <aside style={thumbsContainer}>{thumbs}</aside>
+    </section>
+  );
+}

components/forms/Thumb.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+export default class Thumb extends React.Component {
+  state = {
+    loading: false,
+    thumb: undefined,
+  };
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.file !== this.props.file) {
+      this.setState({ loading: true }, () => {
+        let reader = new FileReader();
+
+        reader.onloadend = () => {
+          this.setState({ loading: false, thumb: reader.result });
+        };
+
+        reader.readAsDataURL(this.props.file);
+      });
+    }
+  }
+
+  render() {
+    if (!this.props.file) {
+      return null;
+    }
+
+    if (this.state.loading) {
+      return <p>loading...</p>;
+    }
+
+    return (
+      <img
+        src={this.state.thumb}
+        alt={this.props.file.name}
+        className=""
+        height={200}
+        width={200}
+      />
+    );
+  }
+}

components/forms/eanfrageforms/contactperson.jsx

@@ -0,0 +1,207 @@
+import React from "react";
+import {
+  TextInput,
+  TextareaInput,
+  SelectInput,
+  CheckInput,
+} from "../formfields.jsx";
+
+export default function ContactPersonForm(props) {
+  return (
+    <>
+      <div className="row g-2 mb-5">
+        <div className="col">
+          <h1>Informationen</h1>
+        </div>
+      </div>
+      <div className="row g-2 mb-5">
+        <div className="col">
+          <TextInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.firma}
+            touched={props.touched.firma}
+            placeholder={"Musterfirma"}
+            onChange={props.handleChange("firma")}
+            onBlur={props.handleBlur("firma")}
+            value={props.values.firma}
+            label="Firma (optional)"
+            type="text"
+          />
+        </div>
+      </div>
+      <div className="row g-2 mb-3">
+        <h3>Anprechpartner</h3>
+        <div className="col">
+          <SelectInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.anrede}
+            touched={props.touched.anrede}
+            placeholder={"Anrede"}
+            onChange={props.handleChange("anrede")}
+            onBlur={props.handleBlur("anrede")}
+            value={props.values.anrede}
+            label="Anrede"
+            options={["Herr", "Frau", "Divers"]}
+          />
+        </div>
+        <div className="col">
+          <SelectInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.titel}
+            touched={props.touched.titel}
+            placeholder={"Titel"}
+            onChange={props.handleChange("titel")}
+            onBlur={props.handleBlur("titel")}
+            value={props.values.titel}
+            label="Titel"
+            options={["Dr.", "Prof.", "Dipl."]}
+          />
+        </div>
+      </div>
+      <div className="row g-2 mb-3">
+        <div className="col">
+          <TextInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.vorname}
+            touched={props.touched.vorname}
+            placeholder={"Max"}
+            onChange={props.handleChange("vorname")}
+            onBlur={props.handleBlur("vorname")}
+            value={props.values.vorname}
+            label="Vorname (optional)"
+            type="text"
+          />
+        </div>
+        <div className="col">
+          <TextInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.nachname}
+            touched={props.touched.nachname}
+            placeholder={"Mustermann"}
+            onChange={props.handleChange("nachname")}
+            onBlur={props.handleBlur("nachname")}
+            value={props.values.nachname}
+            label="Nachname"
+            type="text"
+          />
+        </div>
+      </div>
+      <div className="row g-2 mb-5">
+        <div className="col">
+          <TextInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.email}
+            touched={props.touched.email}
+            placeholder={"max@mustermann.de"}
+            onChange={props.handleChange("email")}
+            onBlur={props.handleBlur("email")}
+            value={props.values.email}
+            label="eMail"
+            type="text"
+          />
+        </div>
+        <div className="col">
+          <TextInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.telefon}
+            touched={props.touched.telefon}
+            placeholder={"0815 123456"}
+            onChange={props.handleChange("telefon")}
+            onBlur={props.handleBlur("telefon")}
+            value={props.values.telefon}
+            label="Telfon (optional)"
+            type="text"
+          />
+        </div>
+      </div>
+
+      <div className="row g-2 mb-3">
+        <h3>Rechnungsadresse</h3>
+        <div className="col">
+          <TextInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.invoiceadress}
+            touched={props.touched.invoiceadress}
+            placeholder={"Musterstraße 1"}
+            onChange={props.handleChange("invoiceadress")}
+            onBlur={props.handleBlur("invoiceadress")}
+            value={props.values.invoiceadress}
+            label="Adresse"
+            type="text"
+          />
+        </div>
+        <div className="col">
+          <TextInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.invoiceplz}
+            touched={props.touched.invoiceplz}
+            placeholder={"12345"}
+            onChange={props.handleChange("invoiceplz")}
+            onBlur={props.handleBlur("invoiceplz")}
+            value={props.values.invoiceplz}
+            label="PLZ"
+            type="text"
+          />
+        </div>
+      </div>
+
+      <div className="row g-2 mb-5">
+        <div className="col">
+          <CheckInput
+            isSubmitting={props.isSubmitting}
+            rescode={props.rescode}
+            error={props.errors.diffrentshipping}
+            touched={props.touched.diffrentshipping}
+            onChange={props.handleChange("diffrentshipping")}
+            onBlur={props.handleBlur("diffrentshipping")}
+            value={props.values.diffrentshipping}
+            label=" Lieferadresse ist anders als Rechnungsadresse"
+          />
+        </div>
+      </div>
+
+      {props.values.diffrentshipping && (
+        <div className="row g-2 mb-5">
+          <h3>Lieferadresse</h3>
+          <div className="col">
+            <TextInput
+              isSubmitting={props.isSubmitting}
+              rescode={props.rescode}
+              error={props.errors.shippingaddress}
+              touched={props.touched.shippingaddress}
+              placeholder={"Musterstraße 1"}
+              onChange={props.handleChange("shippingaddress")}
+              onBlur={props.handleBlur("shippingaddress")}
+              value={props.values.shippingaddress}
+              label="Lieferadresse"
+              type="text"
+            />
+          </div>
+          <div className="col">
+            <TextInput
+              isSubmitting={props.isSubmitting}
+              rescode={props.rescode}
+              error={props.errors.shippingplz}
+              touched={props.touched.shippingplz}
+              placeholder={"12345"}
+              onChange={props.handleChange("shippingplz")}
+              onBlur={props.handleBlur("shippingplz")}
+              value={props.values.shippingplz}
+              label="PLZ"
+              type="text"
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

components/forms/eanfrageforms/introform.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function IntroForm(props) {
+  return (
+    <>
+      <div>
+        <h1>eAnfrage</h1>
+        <p>
+          Herzlich Wilkommen bei der Prothman GmbH. Wir freuen uns sehr, dass
+          Sie Interesse an unserem Produktionsspektrum haben.
+          <br />
+          <br />
+          Hier haben Sie die Möglichkeit, direkt online eine Produktionsanfrage
+          an uns zu schicken. Dies ist für sie volkommen kostenlos!
+          <br />
+          Das Tool erfrgägt alle wichtigen Parameter, die wir für die
+          Kalkulation eines Angebotes benötigen. Sollten noch Unklarheiten
+          aufkommen, setzen wir uns mit Ihnen in Verbindung.
+        </p>
+      </div>
+    </>
+  );
+}

components/forms/eanfrageforms/partform.jsx

@@ -0,0 +1,380 @@
+import React from "react";
+import {
+  TextInput,
+  TextareaInput,
+  SelectInput,
+  CheckInput,
+} from "../formfields.jsx";
+import Image from "next/image";
+import Dropzone from "../Dropzone.jsx";
+
+const dropzoneStyle = {
+  width: "100%",
+  height: "auto",
+  borderWidth: 2,
+  borderColor: "rgb(102, 102, 102)",
+  borderStyle: "dashed",
+  borderRadius: 5,
+};
+
+export default class PartForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this._handleModalShow = this._handleModalShow.bind(this);
+    this._handleModalHide = this._handleModalHide.bind(this);
+
+    this.state = {
+      show: false,
+      modalindex: 0,
+      newmodaldata: {},
+    };
+  }
+
+  _handleModalShow(index) {
+    this.setState({
+      show: true,
+      modalindex: index,
+    });
+  }
+
+  _handleModalHide(index) {
+    this.setState({
+      show: false,
+    });
+  }
+
+  render() {
+    const that = this;
+    const props = this.props;
+
+    return (
+      <>
+        {this.state.show && (
+          <Overlay
+            index={this.state.modalindex}
+            show={this.state.show}
+            handleHide={this._handleModalHide}
+            {...props}
+          />
+        )}
+
+        <div className="row g-2 mb-5">
+          <div className="col">
+            <h1>Produktionsdaten</h1>
+          </div>
+        </div>
+
+        <div className="row g-2 mb-5">
+          <div className="col">
+            <table className="table mt-5">
+              <thead className="table-secondary">
+                <tr>
+                  <th>Name</th>
+                  <th>Material</th>
+                  <th>Anzahl</th>
+                  <th>Anzahl Dateien</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {props.values.parts.map(function (part, index) {
+                  return (
+                    <tr key={index}>
+                      <td>{part.name}</td>
+                      <td>{part.material}</td>
+                      <td>{part.amount}</td>
+                      <td>{part.files.length}</td>
+                      <td colSpan="1">
+                        <button
+                          type="button"
+                          className={`btn btn-dark text-center m-0`}
+                          onClick={that._handleModalShow.bind(this, index)}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            fill="currentColor"
+                            className="bi bi-pencil-square"
+                            viewBox="0 0 16 16"
+                          >
+                            <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
+                            <path
+                              fillRule="evenodd"
+                              d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"
+                            />
+                          </svg>
+                        </button>
+
+                        <button
+                          type="button"
+                          className={`btn btn-danger text-center m-0`}
+                          onClick={() => console.log("Edit")}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            fill="currentColor"
+                            className="bi bi-x-square"
+                            viewBox="0 0 16 16"
+                          >
+                            <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
+                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+                          </svg>
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+function Overlay(props) {
+  return (
+    <div className="modal" tabIndex="-1" style={{ display: "block" }}>
+      <div className="modal-dialog modal-fullscreen">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">
+              {props.values.parts[props.index]["name"]}
+            </h5>
+            <button
+              type="button"
+              className="btn-close bg-white"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+              onClick={props.handleHide}
+            ></button>
+          </div>
+          <div className="modal-body">
+            <div className="container">
+              <div className="row">
+                <div className="col">
+                  <div className="row g-2 mb-3">
+                    <h3>Angaben</h3>
+                    <div className="col">
+                      <TextInput
+                        isSubmitting={props.isSubmitting}
+                        // error={props.errors.parts[props.index]["name"]}
+                        // touched={props.touched.parts[props.index]["name"]}
+                        placeholder={"Metallteil 123"}
+                        onChange={props.handleChange(
+                          `parts[${props.index}].name`
+                        )}
+                        // onBlur={
+                        //   props.handleBlur.values.parts[props.index]["name"]
+                        // }
+                        value={props.values.parts[props.index]["name"]}
+                        label="Name"
+                        type="text"
+                      />
+                    </div>
+                    <div className="col">
+                      <TextInput
+                        isSubmitting={props.isSubmitting}
+                        // error={props.errors.parts[props.index]["amount"]}
+                        // touched={props.touched.parts[props.index]["amount"]}
+                        placeholder={"123"}
+                        onChange={props.handleChange(
+                          `parts[${props.index}].amount`
+                        )}
+                        // onBlur={props.handleBlur("amount")}
+                        value={props.values.parts[props.index]["amount"]}
+                        label="Anzahl"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                  <div className="row g-2 mb-3">
+                    <div className="col">
+                      <TextareaInput
+                        isSubmitting={props.isSubmitting}
+                        // error={props.errors.parts[props.index]["description"]}
+                        // touched={props.touched.parts[props.index]["description"]}
+                        placeholder={"Metallteil 123"}
+                        onChange={props.handleChange(
+                          `parts[${props.index}].description`
+                        )}
+                        onBlur={props.handleBlur(
+                          `parts[${props.index}].description`
+                        )}
+                        value={props.values.parts[props.index]["description"]}
+                        label="Beschreibung"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                  <div className="row g-2 mb-5">
+                    <div className="col">
+                      <SelectInput
+                        isSubmitting={props.isSubmitting}
+                        type="radio"
+                        // error={props.errors.titel}
+                        // touched={props.touched.titel}
+                        placeholder={"Material"}
+                        onChange={props.handleChange(
+                          `parts[${props.index}].material`
+                        )}
+                        onBlur={props.handleBlur(
+                          `parts[${props.index}].material`
+                        )}
+                        value={props.values.parts[props.index]["material"]}
+                        label="Material"
+                        options={[
+                          "1.4301 V2A",
+                          "1.4310 Federstahl",
+                          "1.4404 V4A",
+                          "1.4751 V4A",
+                          "1.4016 Blech",
+                          "DC01 Stahl",
+                          "St37 Stahl",
+                          "AlMg3",
+                          "AlSi",
+                          "Al99",
+                          "Sonstiges",
+                        ]}
+                      />
+                    </div>
+                    {props.values.parts[props.index]["material"] ==
+                      "Sonstiges" && (
+                      <div className="col">
+                        <TextInput
+                          isSubmitting={props.isSubmitting}
+                          // error={props.errors.parts[props.index]["materialother"]}
+                          // touched={props.touched.parts[props.index]["materialother"]}
+                          placeholder={"Material (Sonstiges)"}
+                          onChange={props.handleChange(
+                            `parts[${props.index}].materialother`
+                          )}
+                          onBlur={props.handleBlur(
+                            `parts[${props.index}].materialother`
+                          )}
+                          value={
+                            props.values.parts[props.index]["materialother"]
+                          }
+                          label="Material Sonstiges"
+                          type="text"
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="row g-2 mb-3">
+                    <h3>Oberfläche</h3>
+                    <p>Unsere Teile werden standardmäßig entgratet. </p>
+                    <div className="col">
+                      <SelectInput
+                        isSubmitting={props.isSubmitting}
+                        type="radio"
+                        // error={props.errors.titel}
+                        // touched={props.touched.titel}
+                        placeholder={"Oberfläche"}
+                        onChange={props.handleChange(
+                          `parts[${props.index}].finish`
+                        )}
+                        onBlur={props.handleBlur(
+                          `parts[${props.index}].finish`
+                        )}
+                        value={props.values.parts[props.index]["finish"]}
+                        label="Material"
+                        options={[
+                          "2B matt",
+                          "Oszillationsschliff",
+                          "Gerader Schliff",
+                          "K240 Schliff",
+                          "Sonstiges",
+                        ]}
+                      />
+                    </div>
+                    {props.values.parts[props.index]["finish"] ==
+                      "Sonstiges" && (
+                      <div className="col">
+                        <TextInput
+                          isSubmitting={props.isSubmitting}
+                          // error={props.errors.parts[props.index]["finishother"]}
+                          // touched={props.touched.parts[props.index]["finishother"]}
+                          placeholder={"Oberfläche (Sonstiges)"}
+                          onChange={props.handleChange(
+                            `parts[${props.index}].finishother`
+                          )}
+                          onBlur={props.handleBlur(
+                            `parts[${props.index}].finishother`
+                          )}
+                          value={props.values.parts[props.index]["finishother"]}
+                          label="Oberfläche Sonstiges"
+                          type="text"
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="row g-2 mb-3">
+                    <h3>Gravur</h3>
+                    <p>Unsere Teile werden standardmäßig entgratet. </p>
+                    <div className="col">
+                      <CheckInput
+                        isSubmitting={props.isSubmitting}
+                        // error={props.errors.diffrentshipping}
+                        // touched={props.touched.diffrentshipping}
+                        onChange={props.handleChange(
+                          `parts[${props.index}].engraving`
+                        )}
+                        onBlur={props.handleBlur(
+                          `parts[${props.index}].engraving`
+                        )}
+                        value={props.values.parts[props.index]["engraving"]}
+                        label=" Dieses Teil soll lasergraviert werden"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="col">
+                  <div className="row g-2 mb-3">
+                    <h3>Dateien</h3>
+                    <p>
+                      Bite fügen Sie alle Dateien in gängigen Formaten (.step,
+                      .pdf) hinzu, die wir für die Produktion benötigen. Die
+                      Produktionsdateien müssen im Maßststab 1:1 sein.
+                    </p>
+                    {props.values.parts[props.index]["engraving"] === true && (
+                      <p>
+                        Zum lasergravieren benötigen wir eine seperate Vektor
+                        Datei (.dwg, .dxf) im Maßstab 1:1, welche nur die zu
+                        gravierenden Formen enthält. Schriften müssen in Pfade
+                        umgewandelt werden!
+                      </p>
+                    )}
+                    <div className="col">
+                      <Dropzone
+                        files={props.values.parts[props.index]["files"]}
+                        setFieldValue={props.setFieldValue}
+                        index={props.index}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={props.handleHide}
+            >
+              Schließen
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/forms/eanfrageforms/summary.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { TextInput, TextareaInput, SelectInput } from "../formfields.jsx";
+
+export default function Summary(props) {
+  return (
+    <>
+      <h1>Übersicht</h1>
+    </>
+  );
+}

components/forms/formfields.jsx

@@ -0,0 +1,110 @@
+import React from "react";
+
+export function TextInput(props) {
+  return (
+    <>
+      <div className="form-floating">
+        <input
+          disabled={props.isSubmitting || props.rescode === 200}
+          type={props.type}
+          className={`form-control ${
+            props.error && props.touched ? "is-invalid" : ""
+          } ${!props.error && props.touched ? "is-valid" : ""}`}
+          placeholder={props.placeholder}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          value={props.value}
+        />
+        <label>{props.label}</label>
+      </div>
+      {props.error && props.touched ? (
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.error}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function TextareaInput(props) {
+  return (
+    <>
+      <div className="form-floating">
+        <textarea
+          disabled={props.isSubmitting || props.rescode === 200}
+          style={{ height: "100px", resize: "none" }}
+          className={`form-control ${
+            props.error && props.touched ? "is-invalid" : ""
+          } ${!props.error && props.touched ? "is-valid" : ""}`}
+          placeholder={props.placeholder}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          value={props.value}
+        />
+        <label>{props.label}</label>
+      </div>
+      {props.error && props.touched ? (
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.error}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function SelectInput(props) {
+  return (
+    <>
+      <div className="form-floating">
+        <select
+          disabled={props.isSubmitting || props.rescode === 200}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          className={`form-control ${
+            props.error && props.touched ? "is-invalid" : ""
+          } ${!props.error && props.touched ? "is-valid" : ""}`}
+        >
+          <option defaultValue></option>
+          {props.options.map(function (option) {
+            return (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            );
+          })}
+        </select>
+        <label>{props.label}</label>
+      </div>
+      {props.error && props.touched ? (
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.error}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function CheckInput(props) {
+  return (
+    <>
+      <div className="form-check text-start">
+        <input
+          disabled={props.isSubmitting || props.rescode === 200}
+          type={props.type || "checkbox"}
+          className={`form-check-input ${
+            props.error && props.touched ? "is-invalid" : ""
+          } ${!props.error && props.touched ? "is-valid" : ""}`}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          value={props.value}
+        />
+        <label className="form-check-label">{props.label}</label>
+      </div>
+      {props.error && props.touched ? (
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.error}
+        </div>
+      ) : null}
+    </>
+  );
+}

components/forms/schemas.jsx

@@ -0,0 +1,49 @@
+import * as Yup from "yup";
+
+export const ContactSchema = Yup.object().shape({
+  firma: Yup.string().max(64, "Maximal 64 Zeichen"),
+  anrede: Yup.string()
+    .min(2, "Mindestens 2 Zeichen")
+    .max(64, "Maximal 64 Zeichen")
+    .required("Pflichtfeld"),
+  titel: Yup.string().max(64, "Maximal 64 Zeichen"),
+  vorname: Yup.string().max(64, "Maximal 64 Zeichen"),
+  nachname: Yup.string()
+    .min(2, "Mindestens 2 Zeichen")
+    .max(64, "Maximal 64 Zeichen")
+    .required("Pflichtfeld"),
+  email: Yup.string().email("Ungültige Email Adresse").required("Pflichtfeld"),
+  telefon: Yup.string()
+    .min(2, "Mindestens 2 Zeichen")
+    .max(64, "Maximal 64 Zeichen"),
+  betreff: Yup.string()
+    .min(5, "Mindestens 5 Zeichen")
+    .max(64, "Maximal 64 Zeichen")
+    .required("Pflichtfeld"),
+  nachricht: Yup.string()
+    .min(10, "Mindestens 10 Zeichen")
+    .max(2000, "Maximal 2000 Zeichen")
+    .required("Pflichtfeld"),
+});
+
+export const EanfrageSchema = Yup.object().shape({
+  firma: Yup.string().max(64, "Maximal 64 Zeichen"),
+  anrede: Yup.string()
+    .min(2, "Mindestens 2 Zeichen")
+    .max(64, "Maximal 64 Zeichen")
+    .required("Pflichtfeld"),
+  titel: Yup.string().max(64, "Maximal 64 Zeichen"),
+  vorname: Yup.string().max(64, "Maximal 64 Zeichen"),
+  nachname: Yup.string()
+    .min(2, "Mindestens 2 Zeichen")
+    .max(64, "Maximal 64 Zeichen")
+    .required("Pflichtfeld"),
+  email: Yup.string().email("Ungültige Email Adresse").required("Pflichtfeld"),
+  telefon: Yup.string()
+    .min(2, "Mindestens 2 Zeichen")
+    .max(64, "Maximal 64 Zeichen"),
+  invoiceadress: Yup.string()
+    .min(2, "Mindestens 2 Zeichen")
+    .max(64, "Maximal 64 Zeichen"),
+  invoiceplz: Yup.number("PLZ kann nur Zahlen enthalten"),
+});

components/media/logo.jsx

@@ -0,0 +1,21 @@
+export default function HomeLanding() {
+  return (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 595.28 841.89"
+    >
+      <title>hp_logo</title>
+      <rect className="logo-style-1" width="595.28" height="841.89" />
+      <polygon
+        className="logo-style-2"
+        points="255.88 38.58 255.88 181.67 169.88 181.67 169.88 38.58 88.02 38.58 88.02 406.61 169.88 406.61 169.88 263.53 255.88 263.53 255.88 406.61 337.74 406.61 337.74 38.58 255.88 38.58"
+      />
+      <path
+        className="logo-style-2"
+        d="M466.09,436.93H255.88V805h81.86V687.36H505.6V436.93ZM337.74,605.5V518.79h86V605.5Z"
+      />
+    </svg>
+  );
+}

components/media/qualityicons.jsx

@@ -0,0 +1,103 @@
+import React from "react";
+
+export const QualityIcon1 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+  >
+    <title>qualityIcon1</title>
+    <g id="qualityIcon1" data-name="1">
+      <path
+        className="cls-1"
+        d="M464.4,373.62a11.81,11.81,0,0,0,11.78-11.78V131.26a11.81,11.81,0,0,0-11.78-11.78H29.72A11.8,11.8,0,0,0,18,131.26V361.84a11.8,11.8,0,0,0,11.77,11.78H339.79"
+      />
+      <circle className="cls-1" cx="402.09" cy="350.56" r="51.51" />
+      <circle className="cls-1" cx="402.09" cy="350.56" r="36.8" />
+      <polyline
+        className="cls-1"
+        points="357.45 375.58 321.63 411.39 340.77 410.9 340.77 431 376.33 395.44"
+      />
+      <polyline
+        className="cls-1"
+        points="446.74 375.58 482.56 411.39 463.42 410.9 463.42 431 427.86 395.44"
+      />
+      <line className="cls-1" x1="80.74" y1="159.71" x2="302.5" y2="159.71" />
+      <line className="cls-1" x1="80.74" y1="198.96" x2="106.26" y2="198.96" />
+      <line className="cls-1" x1="148.45" y1="198.96" x2="407.49" y2="198.96" />
+      <line className="cls-1" x1="80.74" y1="238.21" x2="302.5" y2="238.21" />
+      <line className="cls-1" x1="80.74" y1="277.46" x2="302.5" y2="277.46" />
+      <line className="cls-1" x1="329.97" y1="277.46" x2="355.49" y2="277.46" />
+      <line className="cls-1" x1="238.72" y1="336.33" x2="334.88" y2="336.33" />
+    </g>
+  </svg>
+);
+export const QualityIcon2 = () => (
+  <svg
+    id="qualityIcon2"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+  >
+    <title>qualityIcon2</title>
+    <g id="_1" data-name="1">
+      <rect
+        className="cls-1"
+        x="-36.48"
+        y="193.17"
+        width="572.35"
+        height="114.47"
+        transform="translate(-103.93 249.9) rotate(-45)"
+      />
+      <line className="cls-1" x1="209.22" y1="209.94" x2="249.69" y2="250.41" />
+      <line className="cls-1" x1="377.85" y1="41.3" x2="398.09" y2="61.54" />
+      <line className="cls-1" x1="242.95" y1="176.21" x2="263.18" y2="196.44" />
+      <line className="cls-1" x1="276.67" y1="142.48" x2="296.91" y2="162.72" />
+      <line className="cls-1" x1="344.13" y1="75.03" x2="364.36" y2="95.27" />
+      <line className="cls-1" x1="310.4" y1="108.76" x2="350.87" y2="149.23" />
+      <line className="cls-1" x1="108.04" y1="311.11" x2="148.52" y2="351.58" />
+      <line className="cls-1" x1="141.77" y1="277.39" x2="162.01" y2="297.62" />
+      <line className="cls-1" x1="175.5" y1="243.66" x2="195.73" y2="263.9" />
+      <line className="cls-1" x1="40.59" y1="378.57" x2="60.83" y2="398.8" />
+      <line className="cls-1" x1="74.32" y1="344.84" x2="94.55" y2="365.08" />
+    </g>
+  </svg>
+);
+
+export const QualityIcon3 = () => (
+  <svg
+    id="qualityIcon3"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+  >
+    <title>qualityIcon3</title>
+    <rect
+      className="cls-1"
+      x="17.5"
+      y="116.75"
+      width="467"
+      height="259"
+      rx="12"
+      ry="12"
+    />
+    <g>
+      <path className="cls-3" d="M105.3,318.08v-144h13.6v144Z" />
+      <path
+        className="cls-3"
+        d="M161.7,275.08a42.68,42.68,0,0,0,4.3,16.3,32.14,32.14,0,0,0,9,10.9,35.75,35.75,0,0,0,12.7,6.1,60,60,0,0,0,15.4,1.9,51.33,51.33,0,0,0,16.6-2.4,31.39,31.39,0,0,0,11.4-6.5,25.51,25.51,0,0,0,6.5-9.5,31.17,31.17,0,0,0,2.1-11.4q0-8.4-3.8-13.6a29.21,29.21,0,0,0-9.9-8.5,60.44,60.44,0,0,0-14-5.3q-7.91-2-16.2-3.9t-16.2-4.5a51,51,0,0,1-14-7,33.73,33.73,0,0,1-9.9-11.3q-3.8-6.9-3.8-17.5a35.19,35.19,0,0,1,3.1-14.4,35.83,35.83,0,0,1,9.2-12.4,45.16,45.16,0,0,1,15.3-8.6,64.5,64.5,0,0,1,21.2-3.2,60.71,60.71,0,0,1,21.3,3.4,42.36,42.36,0,0,1,15.1,9.3,38.25,38.25,0,0,1,9,13.7,45.83,45.83,0,0,1,3,16.6h-13a32.36,32.36,0,0,0-2.9-14.2,26.61,26.61,0,0,0-7.9-9.8,33.73,33.73,0,0,0-11.4-5.6,48.56,48.56,0,0,0-13.2-1.8q-10.39,0-17.5,2.9a30.69,30.69,0,0,0-11.3,7.5,25.41,25.41,0,0,0-5.8,10.2,24.46,24.46,0,0,0-.6,11.2,19.55,19.55,0,0,0,5.6,11.2,35.26,35.26,0,0,0,10.8,6.9,81.27,81.27,0,0,0,14.1,4.4q7.69,1.69,15.7,3.6t15.5,4.5a47.69,47.69,0,0,1,13.3,7,32.14,32.14,0,0,1,9.3,11.3q3.49,6.9,3.5,17.3,0,20-13.8,31t-38.8,11a71.72,71.72,0,0,1-20.8-2.9,46.11,46.11,0,0,1-16.6-8.8,40.36,40.36,0,0,1-10.9-14.6q-3.9-8.7-3.9-20.5Z"
+      />
+      <path
+        className="cls-3"
+        d="M272.7,246.28a98.89,98.89,0,0,1,4.3-29.6,71.27,71.27,0,0,1,12.7-24.1,60.32,60.32,0,0,1,20.8-16.3q12.4-6,28.6-6,16.8,0,29.5,5.9a59.54,59.54,0,0,1,21.2,16.2,70.26,70.26,0,0,1,12.8,24.2,100.22,100.22,0,0,1,4.3,29.7,97.51,97.51,0,0,1-4.3,29.3,71.45,71.45,0,0,1-12.7,24,59.86,59.86,0,0,1-21,16.3q-12.6,6-29.2,6t-29.2-6a59.86,59.86,0,0,1-21-16.3,70,70,0,0,1-12.6-24A99.44,99.44,0,0,1,272.7,246.28Zm67.2,64q14,0,24.1-5.3a48,48,0,0,0,16.6-14.1,60.23,60.23,0,0,0,9.6-20.4,93.18,93.18,0,0,0,3.1-24.2,90.37,90.37,0,0,0-3.7-26.9,58.38,58.38,0,0,0-10.7-20.3,45.87,45.87,0,0,0-17-12.8,55.1,55.1,0,0,0-22.4-4.4q-13.8,0-23.9,5.4a48.65,48.65,0,0,0-16.6,14.3,61.09,61.09,0,0,0-9.6,20.5,96.79,96.79,0,0,0,0,48.6,60,60,0,0,0,9.6,20.4,47.11,47.11,0,0,0,16.6,14Q325.69,310.29,339.9,310.28Z"
+      />
+    </g>
+  </svg>
+);

components/media/serviceicons.jsx

@@ -0,0 +1,278 @@
+import React from "react";
+
+export const ServiceIcon1 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 500 500"
+  >
+    <title>serviceIcons</title>
+    <g id="_1" data-name="1">
+      <polyline
+        className="cls-1"
+        points="173.7 208.12 9 322.7 110.74 393.47 212.35 318.1"
+      />
+      <polyline
+        className="cls-1"
+        points="290.91 318.1 147.48 419.03 249.5 490 490 322.7 325.27 208.1"
+      />
+      <polyline
+        className="cls-1"
+        points="197.22 134.48 144.94 82.2 144.94 9 9 9"
+      />
+      <polyline
+        className="cls-1"
+        points="490 9 354.06 9 354.06 82.2 301.78 134.48 228.59 134.48"
+      />
+      <line className="cls-1" x1="354.07" y1="318.09" x2="290.91" y2="318.09" />
+      <line className="cls-1" x1="212.35" y1="318.09" x2="134.48" y2="318.09" />
+      <line className="cls-1" x1="209.87" y1="288.5" x2="164.8" y2="266.75" />
+      <line className="cls-1" x1="334.2" y1="266.75" x2="289.13" y2="288.5" />
+      <line className="cls-1" x1="249.5" y1="218.13" x2="249.5" y2="301.78" />
+      <polyline
+        className="cls-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"
+      />
+    </g>
+  </svg>
+);
+
+export const ServiceIcon2 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 500 500"
+  >
+    <title>serviceIcons</title>
+    <g id="_2" data-name="2">
+      <g id="_1" data-name="1">
+        <polyline
+          className="cls-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
+          className="cls-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"
+        />
+      </g>
+      <ellipse className="cls-1" cx="249.5" cy="321" rx="43.85" ry="33.5" />
+    </g>
+  </svg>
+);
+
+export const ServiceIcon3 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 500 500"
+  >
+    <title>serviceIcons</title>
+    <g id="_3" data-name="3">
+      <line className="cls-1" x1="9.5" y1="490.5" x2="490.5" y2="490.5" />
+      <line className="cls-1" x1="249.5" y1="9.5" x2="490.5" y2="9.5" />
+      <line className="cls-1" x1="9.5" y1="9.5" x2="203.5" y2="9.5" />
+    </g>
+    <line className="cls-1" x1="249.5" y1="250.5" x2="231.5" y2="232.5" />
+    <path
+      className="cls-1"
+      d="M203.5,98.5l6.13,6.13A105.76,105.76,0,0,1,238.17,202L231.5,232.5"
+    />
+    <line className="cls-1" x1="203.5" y1="9.5" x2="203.5" y2="98.5" />
+    <path
+      className="cls-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"
+    />
+    <line className="cls-1" x1="249.5" y1="408.5" x2="203.5" y2="362.5" />
+    <line className="cls-1" x1="249.5" y1="408.5" x2="295.5" y2="362.5" />
+    <line className="cls-1" x1="203.5" y1="362.5" x2="9.5" y2="362.5" />
+    <line className="cls-1" x1="295.5" y1="362.5" x2="490.5" y2="362.5" />
+    <line className="cls-1" x1="249.5" y1="348.5" x2="163" y2="262" />
+    <line className="cls-1" x1="250" y1="348.5" x2="336.5" y2="262" />
+  </svg>
+);
+
+export const ServiceIcon4 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 500 500"
+  >
+    <title>serviceIcons</title>
+    <g id="_4" data-name="4">
+      <path
+        className="cls-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"
+      />
+      <line className="cls-1" x1="307.01" y1="265.68" x2="307.01" y2="202.95" />
+      <line className="cls-1" x1="307.01" y1="119.29" x2="307.01" y2="56.55" />
+      <line className="cls-1" x1="380.94" y1="229.82" x2="339.11" y2="187.99" />
+      <line className="cls-1" x1="280.14" y1="129.02" x2="233.08" y2="81.96" />
+      <line className="cls-1" x1="411.58" y1="155.89" x2="348.52" y2="155.89" />
+      <line className="cls-1" x1="265.5" y1="155.89" x2="202.45" y2="155.89" />
+      <line className="cls-1" x1="233.07" y1="229.83" x2="274.91" y2="187.99" />
+      <line className="cls-1" x1="306.85" y1="156.05" x2="453.4" y2="9.5" />
+    </g>
+  </svg>
+);
+
+export const ServiceIcon5 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 500 500"
+  >
+    <title>serviceIcons</title>
+    <g id="_5" data-name="5">
+      <path
+        className="cls-1"
+        d="M9,9H293.5a50,50,0,0,1,50,50V340h-188V121.84a50,50,0,0,0-50-50H9Z"
+      />
+      <polygon
+        className="cls-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"
+      />
+      <path
+        className="cls-1"
+        d="M489.5,490H205a50,50,0,0,1-50-50V340H343v37.16a50,50,0,0,0,50,50h96.5Z"
+      />
+    </g>
+  </svg>
+);
+
+export const ServiceIcon6 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 500 500"
+  >
+    <title>serviceIcons</title>
+    <g id="_6" data-name="6">
+      <g>
+        <polyline
+          className="cls-1"
+          points="329.67 190.33 329.67 169.33 308.67 169.33"
+        />
+        <line
+          className="cls-2"
+          x1="269.22"
+          y1="169.33"
+          x2="210.06"
+          y2="169.33"
+        />
+        <polyline
+          className="cls-1"
+          points="190.33 169.33 169.33 169.33 169.33 190.33"
+        />
+        <line
+          className="cls-2"
+          x1="169.33"
+          y1="229.78"
+          x2="169.33"
+          y2="288.94"
+        />
+        <polyline
+          className="cls-1"
+          points="169.33 308.67 169.33 329.67 190.33 329.67"
+        />
+        <line
+          className="cls-2"
+          x1="229.78"
+          y1="329.67"
+          x2="288.94"
+          y2="329.67"
+        />
+        <polyline
+          className="cls-1"
+          points="308.67 329.67 329.67 329.67 329.67 308.67"
+        />
+        <line
+          className="cls-2"
+          x1="329.67"
+          y1="269.22"
+          x2="329.67"
+          y2="210.06"
+        />
+      </g>
+      <polygon
+        className="cls-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"
+      />
+    </g>
+  </svg>
+);
+
+export const ServiceIcon7 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 500 500"
+  >
+    <title>serviceIcons</title>
+    <g id="_7" data-name="7">
+      <rect
+        className="cls-1"
+        x="123.5"
+        y="93.5"
+        width="252"
+        height="70"
+        rx="12"
+        ry="12"
+      />
+      <path
+        className="cls-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"
+      />
+      <polyline
+        className="cls-1"
+        points="298.03 331.14 240.26 273.37 221.97 291.66"
+      />
+      <path
+        className="cls-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"
+      />
+    </g>
+  </svg>
+);
+
+export const ServiceIcon8 = () => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 500 500"
+  >
+    <title>serviceIcons</title>
+    <g id="_8" data-name="8">
+      <rect
+        className="cls-1"
+        x="9"
+        y="105.44"
+        width="481"
+        height="193.13"
+        rx="96.56"
+      />
+      <circle className="cls-1" cx="103.74" cy="201.39" r="53.44" />
+      <circle className="cls-1" cx="396.47" cy="201.39" r="53.44" />
+      <circle className="cls-1" cx="249.5" cy="342.5" r="11" />
+      <circle className="cls-1" cx="299.5" cy="342.5" r="11" />
+      <circle className="cls-1" cx="149.5" cy="342.5" r="11" />
+      <circle className="cls-1" cx="349.5" cy="342.5" r="11" />
+      <circle className="cls-1" cx="99.5" cy="342.5" r="11" />
+      <circle className="cls-1" cx="399.5" cy="342.5" r="11" />
+      <circle className="cls-1" cx="274.5" cy="382.5" r="11" />
+      <circle className="cls-1" cx="199.5" cy="342.5" r="11" />
+      <circle className="cls-1" cx="324.5" cy="382.5" r="11" />
+      <circle className="cls-1" cx="374.5" cy="382.5" r="11" />
+      <circle className="cls-1" cx="224.5" cy="382.5" r="11" />
+      <circle className="cls-1" cx="174.5" cy="382.5" r="11" />
+      <circle className="cls-1" cx="124.5" cy="382.5" r="11" />
+    </g>
+  </svg>
+);

components/navbar.jsx

@@ -0,0 +1,272 @@
+import React from "react";
+import Image from "next/image";
+import { withRouter } from "next/router";
+import { gsap } from "gsap/dist/gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";
+
+import Link from "next/link";
+
+import Logo from "./media/logo.jsx";
+
+gsap.registerPlugin(ScrollTrigger);
+
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.toggleClose = this.toggleClose.bind(this);
+    this.isLg = this.isLg.bind(this);
+
+    this.state = {
+      isOpen: false,
+      menuitems: [
+        {
+          key: 0,
+          name: "Home",
+          link: "/",
+        },
+        {
+          key: 1,
+          name: "Fertigungsverfahren",
+          link: "/fertigungsverfahren",
+        },
+        {
+          key: 2,
+          name: "Materialien",
+          link: "/materialien",
+        },
+        {
+          key: 3,
+          name: "Qualität",
+          link: "/qualitaet",
+        },
+        {
+          key: 4,
+          name: "Branchen",
+          link: "/branchen",
+        },
+        {
+          key: 5,
+          name: "Kontakt",
+          link: "/kontakt",
+        },
+        {
+          key: 6,
+          name: "eAnfrage",
+          link: "/eanfrage",
+        },
+      ],
+      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",
+        },
+      ],
+    };
+  }
+
+  componentDidUpdate(props, prevProps) {
+    if (this.props.isOpen !== prevProps.isOpen) {
+      if (this.state.isOpen) {
+        gsap.to(".navbar-collapse", {
+          height: "auto",
+        });
+      } else if (!this.state.isOpen) {
+        if (!this.isLg()) {
+          gsap.to(".navbar-collapse", {
+            height: 0,
+          });
+        }
+      }
+    }
+  }
+
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+  }
+  toggleClose() {
+    this.setState({
+      isOpen: false,
+    });
+  }
+
+  isLg() {
+    if (
+      (self.innerWidth && self.innerWidth >= 992) ||
+      (document.documentElement &&
+        document.documentElement.clientWidth &&
+        document.documentElement.clientWidth >= 992) ||
+      (document.body && document.body.clientWidth >= 992)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  componentDidMount() {
+    if (!this.isLg()) {
+      gsap.set(".navbar-collapse", {
+        height: 0,
+      });
+    }
+
+    let targets = gsap.utils.toArray(".subnav-container div");
+
+    gsap
+      .timeline({
+        scrollTrigger: {
+          trigger: "body",
+          start: "top+=200 top",
+          end: "+=300",
+          scrub: 0.1,
+        },
+      })
+      .to(".subnav-container", {
+        height: 0,
+        ease: "power1.inOut",
+      })
+      .to(
+        targets,
+        {
+          opacity: 0,
+          ease: "power4.inOut",
+        },
+        0
+      );
+  }
+
+  render() {
+    const pathname = this.props.router.pathname;
+    return (
+      <>
+        <nav
+          className="noselect navbar navbar-expand-lg fixed-top"
+          onToggle={this.toggle}
+        >
+          <Link href="/" onClick={this.toggleClose}>
+            <a className="navbar-brand">
+              <Logo />
+            </a>
+          </Link>
+          <button
+            onClick={this.toggle}
+            className="navbar-toggler"
+            type="button"
+          >
+            <div
+              className={
+                this.state.isOpen ? "animated-icon open" : "animated-icon"
+              }
+            >
+              <span />
+              <span />
+              <span />
+              <span />
+            </div>
+          </button>
+          <div className="mainnav-container d-flex justify-content-around">
+            <div className="navbar-collapse">
+              <div className="navbar-nav">
+                {this.state.menuitems.map((menuitem, index) => (
+                  <div key={menuitem.key} className="nav-item">
+                    <Link href={menuitem.link}>
+                      <a onClick={this.toggleClose}>{menuitem.name}</a>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </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>
+        </nav>
+      </>
+    );
+  }
+}
+
+export default withRouter(Navbar);

components/productpage.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { ReactSVG } from "react-svg";
+
+export default function Productpage(props) {
+  return (
+    <>
+      <div className="container-fluid products-container navbar-spacing">
+        <div className="row align-items-center min-height-100">
+          <div
+            className={`align-self-stretch background-image d-flex flex-column justify-content-center products-img-shadow products-img ${
+              props.reversed ? "order-lg-1" : ""
+            } ${props.smallbg ? "col-lg-5" : "col-lg-6"}`}
+            style={{ backgroundImage: `url(${props.bgurl})` }}
+          >
+            <div className="icon-size align-items-center">
+              <ReactSVG src={props.iconurl} />
+            </div>
+          </div>
+          <div
+            className={`col-lg-6 pl-0 align-self-center p-5 mb-5 h-100 ${
+              props.smallbg ? "col-lg-7" : "col-lg-6"
+            }`}
+          >
+            <h1 className="mainheading">{props.title}</h1>
+            <div className="description">
+              <p dangerouslySetInnerHTML={{ __html: props.text }}></p>
+              {props.addtext && props.addtext}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

components/productscontainer.jsx

@@ -0,0 +1,25 @@
+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>
+  );
+}

components/utils.jsx

@@ -0,0 +1,24 @@
+export function getWidth() {
+  if (typeof window != "undefined") {
+    return Math.max(
+      document.body.scrollWidth,
+      document.documentElement.scrollWidth,
+      document.body.offsetWidth,
+      document.documentElement.offsetWidth,
+      document.documentElement.clientWidth
+    );
+  }
+  return 0;
+}
+
+export function getHeight() {
+  if (typeof window != "undefined") {
+    return Math.max(
+      document.body.scrollHeight,
+      document.documentElement.scrollHeight,
+      document.body.offsetHeight,
+      document.documentElement.offsetHeight,
+      document.documentElement.clientHeight
+    );
+  }
+}