christian/www.prothmann.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bigger redesign

Browse Source
This commit is contained in:
Christian Anetzberger
2023-01-31 17:05:28 +01:00
parent 7ac213d208
commit 13ecc97011
29 changed files with 3207 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
pages/_app.js
View File

@@ -1,7 +1,11 @@
// React, NextJS
import App from "next/app";
import Script from 'next/script'
import Head from "next/head";
import { setCookie, getCookie } from 'cookies-next';
// GSAP
import { gsap } from "gsap/dist/gsap";
import { SplitText } from "gsap/dist/SplitText";
import { Transition, SwitchTransition } from "react-transition-group";
@@ -10,14 +14,17 @@ import { Transition, SwitchTransition } from "react-transition-group";
import Footer from "../components/footer.jsx";
import Navbar from "../components/navbar.jsx";
// helper functions
import { getWidth } from "../components/utils.jsx";
// css imports
import "bootstrap/dist/css/bootstrap.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import "../styles/globals.scss";
import "../styles/footer.scss";
import "../styles/navbar.scss";
import "../styles/darkmode.scss";
// Register plugin only on client
if (typeof window !== "undefined") {
gsap.registerPlugin(SplitText);
}
@@ -39,48 +46,126 @@ export default class Site extends App {
initTl() {
if (document.querySelector(".landing-img")) {
this.tl.from(".landing-img", {
opacity: 0,
});
}
if (document.querySelector(".products-img")) {
if (getWidth() > 1200) {
this.tl.from(".products-img", {
this.tl.from(".landing-img", {
opacity: 0,
width: "100vw",
scale: 1.1
});
} else {
this.tl.from(".products-img", {
this.tl.from(".landing-img", {
opacity: 0,
height: "100vh",
});
}
}
if (document.querySelector(".mainheading")) {
this.tl.from(".mainheading", {
if (document.querySelector(".landing-logo")) {
if (getWidth() > 1200) {
this.tl.from(".landing-logo", {
opacity: 0,
y: 10,
scale: 0.9
}, "<");
} else {
this.tl.from(".landing-logo", {
opacity: 0,
y: 10,
scale: 0.9
}, "<");
}
}
if (document.querySelector(".products-img-container")) {
if (getWidth() > 1200) {
this.tl.from(".products-img-container", {
opacity: 0,
width: "75vw",
});
} else {
this.tl.from(".products-img-container", {
opacity: 0,
height: "75vh",
});
}
}
if (document.querySelector(".products-img-icon-wrapper")) {
if (getWidth() > 1200) {
this.tl.from(".products-img-icon-wrapper", {
backdropFilter: "blur(0px)",
backgroundColor: "rgba(13, 13, 13, 0)",
width: "75vw"
});
}
else {
{
this.tl.from(".products-img-icon-wrapper", {
backdropFilter: "blur(0px)",
backgroundColor: "rgba(13, 13, 13, 0)",
width: "75vh"
}, ">-0.35");
}
}
}
if (document.querySelector(".products-icon")) {
this.tl.from(".products-icon", {
opacity: 0,
y: 5,
});
}, ">-0.25");
}
if (document.querySelector(".mainheading")) {
if (getWidth() > 1200) {
this.tl.from(".mainheading", {
opacity: 0,
x: 10,
}, ">");
} else {
this.tl.from(".mainheading", {
opacity: 0,
y: 10,
}, ">");
}
}
if (document.querySelector(".subheading")) {
this.tl.from(".subheading", {
opacity: 0,
y: 5,
});
if (getWidth() > 1200) {
this.tl.from(".subheading", {
opacity: 0,
x: 10,
}, ">-0.25");
} else {
this.tl.from(".subheading", {
opacity: 0,
y: 10,
}, ">-0.25");
}
}
if (document.querySelector(".description")) {
this.tl.from(
".description",
{
opacity: 0,
y: 5,
},
0.6
);
if (getWidth() > 1200) {
this.tl.from(
".description",
{
opacity: 0,
x: 10,
},
">-0.25"
);
} else {
this.tl.from(
".description",
{
opacity: 0,
y: 10,
},
">-0.25"
);
}
}
if (document.querySelector(".quicknav")) {
@@ -154,10 +239,10 @@ export default class Site extends App {
}
}
if (document.querySelector(".products-img")) {
if (document.querySelector(".products-img-container")) {
if (getWidth() > 1200) {
this.tl.to(
".products-img",
".products-img-container",
{
opacity: 0,
width: 0,
@@ -167,7 +252,7 @@ export default class Site extends App {
);
} else {
this.tl.to(
".products-img",
".products-img-container",
{
opacity: 0,
height: 0,
@@ -232,19 +317,22 @@ export default class Site extends App {
</main>
<Footer />
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-504FPVG74X"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
<>
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-504FPVG74X"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-504FPVG74X');
`}
</Script>
</Script>
</>
</>
);
}

18
pages/agbs.jsx
View File

@@ -1,6 +1,12 @@
// React, NextJS
import React from "react";
import Head from "next/head";
// Bootstrap components
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
export default function Abgs(props) {
return (
<>
@@ -9,14 +15,14 @@ export default function Abgs(props) {
<meta name="keywords" content="AGBs, Prothmann, Hans Prothmann GmbH" />
<title>AGBs - Prothmann GmbH</title>
</Head>
<div className="container-fluid products-container navbar-spacing">
<div className="row align-items-center min-height-100">
<div className="col">
<Container fluid className="products-container navbar-spacing">
<Row className="align-items-center min-height-100">
<Col>
<h1 className="text-center">Allgemeine Geschäftsbedingungen</h1>
<p className="text-center">In Bearbeitung</p>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</>
);
}

28
pages/branchen.jsx
View File

@@ -1,3 +1,4 @@
// React, NextJS
import React from "react";
import Head from "next/head";
@@ -7,23 +8,26 @@ const content = {
elektronikbranche: {
title: "Mechanik für die Elektronikbranche",
text: `Viele Elektronikfirmen konzentrieren sich auf ihre Kernkompetenzen und vergeben die Produktion der mechanischen Teile und Gehäuse. Immer effektiver werdende Maschinen benötigen immer engere Toleranzen. Wenige hundertstel Millimeter Toleranzangaben auf Zeichnungen erschrecken uns auch nicht.<br><br>Wir als Experten möchten sie bei der Fertigung unterstützen. Egal wie einfach oder kompliziert ihre Anforderungen an die Mechanik sind, wir können Ihnen helfen. Wir bauen sehr kurzfristig Prototypen, freuen und aber auch auf ihre Serienproduktion.`,
iconurl: "/icons/laserteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
iconurl: "/icons/br_elektronikbranche.svg",
iconalt: "Icon einer vereinfachten Darstellung einer Chipbestückungsmaschine",
bgurl: "/background/branchen/elektronikbranche.webp",
bgtitle: "Bild einer Chipbestückungsanlage in Arbeit"
},
maschinenbau: {
title: "Präzisions-Maschinenbau, Automationstechnik, Robotik",
text: `Im Präzisions-Maschinenbau finden sich neben Frästeilen aus Kostengründen auch immer häufiger Blechteile. Unsere Maschinenkalibrierung endet nicht einfach bei der vom Maschinenhersteller versprochenen Präzision, sondern geben alles, um noch präziser zu werden. Dies macht uns zum Technologieführer, vor allem im Feinblechbereich von 0,1 bis 3 mm.`,
iconurl: "/icons/stanzteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
iconurl: "/icons/br_maschinenbau.svg",
iconalt: "Icon eines Roboterarms",
bgurl: "/background/branchen/maschinenbau.webp",
bgtitle: "Bild eines kleinen Roboterarms"
},
medizintechnik: {
title: "Medizintechnik, Messtechnik",
text: `Messtechnik in der Prozesssteuerung oder der Diagnose in der Medizin ist ein Gebiet in dem es auf Qualität ankommt. Diese Qualität können wir mit unseren hochwertigen Bauteilen liefern.<br><br>Seit über 40 jahren arbeiten wir für führende Technologieunternehmen und sind natürlich nach den gängigen Normen zertifiziert.`,
iconurl: "/icons/biegeteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
iconurl: "/icons/br_medizintechnik.svg",
iconalt: "Allgemeines Icon für Medizintechnik",
bgurl: "/background/branchen/medizintechnik.webp",
bgtitle: "Bild einer Maschine aus der Medizintechnik"
},
};
@@ -43,20 +47,26 @@ export default function Fertigungsverfahren(props) {
</Head>
<Productpage
bgurl={content.elektronikbranche.bgurl}
// iconurl={content.elektronikbranche.iconurl}
bgtitle={content.elektronikbranche.bgtitle}
iconurl={content.elektronikbranche.iconurl}
iconalt={content.elektronikbranche.iconalt}
title={content.elektronikbranche.title}
text={content.elektronikbranche.text}
/>
<Productpage
bgurl={content.maschinenbau.bgurl}
// iconurl={content.maschinenbau.iconurl}
bgtitle={content.maschinenbau.bgtitle}
iconurl={content.maschinenbau.iconurl}
iconalt={content.maschinenbau.iconalt}
title={content.maschinenbau.title}
text={content.maschinenbau.text}
reversed
/>
<Productpage
bgurl={content.medizintechnik.bgurl}
// iconurl={content.medizintechnik.iconurl}
bgtitle={content.medizintechnik.bgtitle}
iconurl={content.medizintechnik.iconurl}
iconalt={content.medizintechnik.iconalt}
title={content.medizintechnik.title}
text={content.medizintechnik.text}
/>

126
pages/datenschutz.jsx
View File

@@ -1,6 +1,12 @@
// React, NextJS
import React from "react";
import Head from "next/head";
// Bootstrap components
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
export default function Datenschutz(props) {
return (
<>
@@ -12,10 +18,10 @@ export default function Datenschutz(props) {
/>
<title>Datenschutz - Prothmann GmbH</title>
</Head>
<div className="container products-container navbar-spacing">
<Container className="products-container navbar-spacing">
<h1 className="text-center">Datenschutz</h1>
<div className="section-row row">
<div className="section-text-col section-text-col-text-center col">
<Row className="section-row">
<Col className="section-text-col section-text-col-text-center">
<p className="text-center">
Verantwortliche Stelle im Sinne der Datenschutzgesetze,
insbesondere der EU-Datenschutzgrundverordnung (DSGVO), ist:
@@ -26,13 +32,13 @@ export default function Datenschutz(props) {
Industriestraße 6<br />
82149 Gröbenzell
</p>
</div>
</div>
<div className="section-row-heading row">
</Col>
</Row>
<Row className="section-row-heading">
<h4>Ihre Betroffenenrechte</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<ul>
<li>
Auskunft über Ihre bei uns gespeicherten Daten und deren
@@ -81,15 +87,15 @@ export default function Datenschutz(props) {
</a>
.
</p>
</div>
</div>
<div className="section-row-heading text-center row">
</Col>
</Row>
<Row className="section-row-heading text-center">
<h4>
Erfassung allgemeiner Informationen beim Besuch unserer Website
</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<h5>Art und Zweck der Verarbeitung</h5>
<p>
Wenn Sie auf unsere Website zugreifen, d.h., wenn Sie sich nicht
@@ -148,13 +154,13 @@ export default function Datenschutz(props) {
und Services nicht verfügbar oder eingeschränkt sein. Aus diesem
Grund ist ein Widerspruch ausgeschlossen.{" "}
</p>
</div>
</div>
<div className="section-row-heading text-center row">
</Col>
</Row>
<Row className="section-row-heading text-center">
<h4>Kontaktformular und eAnfrage</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<h5>Art und Zweck der Verarbeitung</h5>
<p>
Die von Ihnen eingegebenen Daten werden zum Zweck der
@@ -207,13 +213,13 @@ export default function Datenschutz(props) {
Sie uns Ihren Namen, Ihre E-Mail-Adresse und den Grund der Anfrage
mitteilen.
</p>
</div>
</div>
<div className="section-row-heading text-center row">
</Col>
</Row>
<Row className="section-row-heading text-center">
<h4>Verwendung von Google Analytics</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<h5>Art und Zweck der Verarbeitung</h5>
<p>
Diese Website benutzt Google Analytics, einen Webanalysedienst der
@@ -305,13 +311,13 @@ export default function Datenschutz(props) {
der Besucher der Webseite bewertet und die Interessen analysiert
werden. Hierzu erstellen wir ein pseudonymes Nutzerprofil.
</p>
</div>
</div>
<div className="section-row-heading text-center row">
</Col>
</Row>
<Row className="section-row-heading text-center">
<h4>Verwendung von Adobe Typekit</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<h5>Art und Zweck der Verarbeitung</h5>
<p>
Wir setzen Adobe Typekit zur visuellen Gestaltung unserer Website
@@ -377,13 +383,13 @@ export default function Datenschutz(props) {
die korrekte Darstellung der Inhalte von Standardschriften nicht
ermöglicht werden.
</p>
</div>
</div>
<div className="section-row-heading text-center row">
</Col>
</Row>
<Row className="section-row-heading text-center">
<h4>Verwendung von Google Maps</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<h5>Art und Zweck der Verarbeitung</h5>
<p>
Auf dieser Webseite nutzen wir das Angebot von Google Maps. Google
@@ -464,13 +470,13 @@ export default function Datenschutz(props) {
Zugriff unterbinden, kann es hierdurch zu Funktionseinschränkungen
auf der Website kommen.
</p>
</div>
</div>
<div className="section-row-heading text-center row">
</Col>
</Row>
<Row className="section-row-heading text-center">
<h4>Google AdWords</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<h5>Art und Zweck der Verarbeitung</h5>
<p>
Unsere Webseite nutzt das Google Conversion-Tracking.
@@ -549,25 +555,25 @@ export default function Datenschutz(props) {
Zugriff unterbinden, kann es hierdurch zu Funktionseinschränkungen
auf der Website kommen.
</p>
</div>
</div>
<div className="section-row-heading text-center row">
</Col>
</Row>
<Row className="section-row-heading text-center">
<h4>SSL-Verschlüsselung</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<p>
Um die Sicherheit Ihrer Daten bei der Übertragung zu schützen,
verwenden wir dem aktuellen Stand der Technik entsprechende
Verschlüsselungsverfahren (z. B. SSL) über HTTPS.
</p>
</div>
</div>
<div className="section-row-heading text-center row">
</Col>
</Row>
<Row className="section-row-heading text-center">
<h4>Änderung unserer Datenschutzbestimmungen</h4>
</div>
<div className="section-row row">
<div className="section-text-col col">
</Row>
<Row className="section-row">
<Col className="section-text-col">
<p>
Wir behalten uns vor, diese Datenschutzerklärung anzupassen, damit
sie stets den aktuellen rechtlichen Anforderungen entspricht oder
@@ -575,9 +581,9 @@ export default function Datenschutz(props) {
umzusetzen, z.B. bei der Einführung neuer Services. Für Ihren
erneuten Besuch gilt dann die neue Datenschutzerklärung.
</p>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</>
);
}

9
pages/fertigungsverfahren/[index].jsx
View File

@@ -37,6 +37,7 @@ export async function getStaticProps(context) {
iconurl: "/icons/fertigungsverfahren/laserteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
bgurl: "/background/fertigungsverfahren/laserteile.webp",
bgtitle: "",
htitle: "Laserteile - Prothmann GmbH",
hdesc: "Wir fertigen komplexe Laserteile mit Toleranzen von 0,01 mm.",
hkey: "Laserteile, CNC Laser, Laserschneiden",
@@ -50,6 +51,7 @@ export async function getStaticProps(context) {
iconurl: "/icons/fertigungsverfahren/stanzteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
bgurl: "/background/fertigungsverfahren/stanzteile.webp",
bgtitle: "",
htitle: "Stanzteile - Prothmann GmbH",
hdesc:
"Wir fertigen komplexe Stanzteile - egal ob 0 Serie oder Massenproduktion.",
@@ -70,6 +72,7 @@ Wir beraten Sie gerne, wenn es um die Machbarkeit von Biegeteilen geht. Dabei k
iconurl: "/icons/fertigungsverfahren/biegeteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
bgurl: "/background/fertigungsverfahren/biegeteile.webp",
bgtitle: "",
htitle: "Biegeteile - Prothmann GmbH",
hdesc:
"Wir sind Marktführer für komplexe Biegeteile. Fordern Sie uns heraus.",
@@ -84,6 +87,7 @@ Wir beraten Sie gerne, wenn es um die Machbarkeit von Biegeteilen geht. Dabei k
iconurl: "/icons/fertigungsverfahren/lasergravur.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
bgurl: "/background/fertigungsverfahren/lasergravur.webp",
bgtitle: "",
htitle: "Lasergravieren - Prothmann GmbH",
hdesc:
"Egal ob Seriennummern, Beschriftungen von Frontplattten oder QR-Codes. Wir lasergravieren alle Teile nach Ihren vorgaben.",
@@ -100,6 +104,7 @@ Wir haben das Know-how um Blechteile zu konstruieren, die später problemlos und
iconurl: "/icons/fertigungsverfahren/metallkonstruktion.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
bgurl: "/background/fertigungsverfahren/blechkonstruktion.webp",
bgtitle: "",
htitle: "Blechkonstruktion - Prothmann GmbH",
hdesc:
"Wir erstellen für Sie komplexe Blechkontruktionen, wie z.B. Gehäuse für Elektronikteile.",
@@ -119,6 +124,7 @@ Kantenschutz`,
iconurl: "/icons/fertigungsverfahren/baugruppe.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
bgurl: "/background/fertigungsverfahren/baugruppe.webp",
bgtitle: "",
htitle: "Baugruppen - Prothmann GmbH",
hdesc:
"Wir können Baugruppen mit Schraubverbindungen, Vernietungen oder Klebungen herstellen und in einem Stücl zu Ihnen schicken.",
@@ -133,6 +139,7 @@ Kantenschutz`,
iconurl: "/icons/fertigungsverfahren/fuegeverfahren.svg",
iconalt: "Icon, welches einen Schweißhelm mit Schweißgerät zeigt",
bgurl: "/background/fertigungsverfahren/fügeverfahren.webp",
bgtitle: "",
htitle: "Laserschweißen, Schweißen - Prothmann GmbH",
hdesc: "Prothmann GmbH - Ihr Experte für Fügeverfahren München.",
hkey: "Fügeverfahren",
@@ -153,6 +160,7 @@ Ebenso können wir Kanten bis zu 0,3mm verrunden, wodurch Verletzungen vermieden
iconurl: "/icons/fertigungsverfahren/entgraten.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
bgurl: "/background/fertigungsverfahren/entgraten.webp",
bgtitle: "",
htitle: "Entgraten - Prothmann GmbH",
hdesc: "Prothmann GmbH - Ihr Experte für Entgraten München.",
hkey: "Entgraten",
@@ -172,6 +180,7 @@ class Fertigungsverfahren extends React.Component {
</Head>
<Productpage
bgurl={this.props.bgurl}
bgtitle={this.props.bgtitle}
iconurl={this.props.iconurl}
iconalt={this.props.iconalt}
title={this.props.title}

27
pages/impressum.jsx
View File

@@ -1,7 +1,14 @@
// React, NextJS
import React from "react";
import GoogleMaps from "../components/GogoleMaps.jsx";
import Head from "next/head";
// Bootstrap components
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import GoogleMaps from "../components/GogoleMaps.jsx";
export default function Impressum(props) {
return (
<>
@@ -16,8 +23,8 @@ export default function Impressum(props) {
/>
<title>Impressum - Prothmann GmbH</title>
</Head>
<div className="container-fluid products-container navbar-spacing">
<div className="row align-items-center min-height-100">
<Container fluid className="products-container navbar-spacing">
<Row className="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 col-lg-6 p-0`}
>
@@ -45,7 +52,7 @@ export default function Impressum(props) {
<b>Fax</b> <a title="Senden Sie uns ein Fax" href="fax:+49814259953">+49 (0) 8142 59953</a>
</p>
<p>
<b>Geschäftsführer</b> Hans & Kolja Prothmann
<b>Geschäftsführer</b> Dr. Kolja Prothmann & Hans Prothmann
<br />
<b>Handelsregister</b> HRB München 78953
<br />
@@ -53,9 +60,9 @@ export default function Impressum(props) {
</p>
</div>
</div>
</div>
<div className="row">
<div className="col text-center my-5">
</Row>
<Row>
<Col className="text-center my-5">
<h2>Nützliche Links</h2>
<p>
Unsere Maschinen von Amada
@@ -95,9 +102,9 @@ export default function Impressum(props) {
www.canetzberger.design
</a>
</p>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</>
);
}

111
pages/index.js
View File

@@ -1,10 +1,19 @@
// React, NextJS
import React from "react";
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
// Bootstrap components
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
//GSAP
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";
//Images
import landinglogoImg from "../components/images/logo/landinglogo.svg";
import laserteileImg from '../components/images/fertigungsverfahren/laserteile.svg';
import stanzteileImg from '../components/images/fertigungsverfahren/stanzteile.svg';
@@ -16,6 +25,8 @@ import metallabschirmungImg from '../components/images/products/metallabschirmun
import teleskopdurchfuehrungenImg from '../components/images/products/teleskopdurchfuehrungen.webp';
import chassismesstechnikImg from '../components/images/products/chassismesstechnik.webp';
//Register only on client side
if (typeof window !== "undefined") {
gsap.registerPlugin(ScrollTrigger);
}
@@ -27,8 +38,6 @@ export default class Home extends React.Component {
this.productsWrapper = React.createRef();
}
componentDidMount() { }
render() {
return (
<>
@@ -44,14 +53,14 @@ export default class Home extends React.Component {
<meta name="robots" content="index, follow" />
<title> Prothmann - Blechverarbeitung in München mit höchster Präzision</title>
</Head>
<div
className="container-fluid background-image landing-img d-flex align-items-center minh-100vh navbar-spacing"
<Container fluid
className="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">
<Col className="text-center">
<Image
src={landinglogoImg}
className="landing-logo p-5 m-auto"
@@ -59,11 +68,12 @@ export default class Home extends React.Component {
priority
fill
/>
</div>
</div>
<div className="container">
<div className="row">
<div className="col mt-5 text-center">
</Col>
</Container>
<Container>
<Row>
<Col className="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
@@ -96,12 +106,12 @@ export default class Home extends React.Component {
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">
</Col>
</Row>
</Container>
<Container fluid className=" mb-5">
<Row className="text-center">
<Col lg={4} xs={12} className="p-0">
<Link href="/fertigungsverfahren/laserteile" title="Informationen zu unseren Laserteilen">
<div
@@ -122,8 +132,8 @@ export default class Home extends React.Component {
</div>
</Link>
</div>
<div className="col-lg-4 col-xs-12 p-0">
</Col>
<Col lg={4} xs={12} className="p-0">
<Link href="/fertigungsverfahren/stanzteile" title="Informationen zu unseren Stanzteilen">
<div
@@ -140,12 +150,13 @@ export default class Home extends React.Component {
width={250}
height={250}
/>
<h2 className="text-white"> Stanzteile </h2>
</div>
</Link>
</div>
<div className="col-lg-4 col-xs-12 p-0">
</Col>
<Col lg={4} xs={12} className="p-0">
<Link href="/fertigungsverfahren/biegeteile" title="Informationen zu unseren Biegeteilen">
<div
@@ -166,25 +177,25 @@ export default class Home extends React.Component {
</div>
</Link>
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-12 col-lg-8 offset-lg-2 mt-5">
</Col>
</Row>
</Container>
<Container>
<Row>
<Col lg={8} className="col-12 offset-lg-2 mt-5">
<h3 className="text-center"> Produkte </h3>
<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
Edelstähle, Federstahl, Bronze und Messing, sowie Mu-Metall auf
Lager.
</p>
</div>
</div>
<div className="row mb-5">
</Col>
</Row>
<Row className="mb-5">
<div className="col-12 col-lg-4 text-center h-100">
<Col lg={4} className="col-12 text-center h-100">
<div className="content">
<div className="bg-white">
<Image
@@ -195,7 +206,7 @@ export default class Home extends React.Component {
height={300}
/>
</div>
<div className="">
<div>
<h4 className="text-center">Elektronikgehäuse</h4>
<p>
Unsere Elektronikgehäuse werden mit{" "}
@@ -215,9 +226,9 @@ export default class Home extends React.Component {
</p>
</div>
</div>
</div>
</Col>
<div className="col-12 col-lg-4 text-center h-100">
<Col lg={4} className="col-12 text-center h-100">
<div className="content">
<div className="bg-white">
<Image
@@ -228,7 +239,7 @@ export default class Home extends React.Component {
height={300}
/>
</div>
<div className="">
<div >
<h4 className="text-center">Elektronikaufnahme</h4>
<p>
An dem Edelstahlgrundkörper sieht man unser Leistungsspektrum
@@ -238,9 +249,9 @@ export default class Home extends React.Component {
</p>
</div>
</div>
</div>
</Col>
<div className="col-12 col-lg-4 text-center h-100">
<Col lg={4} className="col-12 text-center h-100">
<div className="content">
<div className="bg-white">
<Image
@@ -251,7 +262,7 @@ export default class Home extends React.Component {
height={300}
/>
</div>
<div className="">
<div>
<h4 className="text-center">Chassis für Messtechnik</h4>
<p>
Spezielle Messtechnik benötigt häufig auch spezielle Lösungen in
@@ -260,9 +271,9 @@ export default class Home extends React.Component {
</p>
</div>
</div>
</div>
</Col>
<div className="col-12 col-lg-4 text-center h-100">
<Col lg={4} className="col-12 text-center h-100">
<div className="content">
<div className="bg-white">
<Image
@@ -273,7 +284,7 @@ export default class Home extends React.Component {
height={300}
/>
</div>
<div className="">
<div>
<h4 className="text-center">Teleskopdurchführungen</h4>
<p>
Bei diesen Biegeteilen liegt die Schwierigkeit in der Ebenheit
@@ -290,9 +301,9 @@ export default class Home extends React.Component {
</p>
</div>
</div>
</div>
</Col>
<div className="col-12 col-lg-4 text-center h-100">
<Col lg={4} className="col-12 text-center h-100">
<div className="content">
<div className="bg-white">
<Image
@@ -303,7 +314,7 @@ export default class Home extends React.Component {
height={300}
/>
</div>
<div className="">
<div>
<h4 className="text-center">Federn aus exotischen Materialien</h4>
<p>
Wir haben eine große Auswahl an Federstählen auf Lager und
@@ -316,9 +327,9 @@ export default class Home extends React.Component {
</p>
</div>
</div>
</div>
</Col>
<div className="col-12 col-lg-4 text-center h-100">
<Col lg={4} className="col-12 text-center h-100">
<div className="content">
<div className="bg-white">
<Image
@@ -329,7 +340,7 @@ export default class Home extends React.Component {
height={300}
/>
</div>
<div className="">
<div>
<h4 className="text-center">MU-Metall Abschirmungen</h4>
<p>
Aufgrund unserer langjährigen Erfahrung im audiovisuellen
@@ -338,10 +349,10 @@ export default class Home extends React.Component {
</p>
</div>
</div>
</div>
</Col>
</div>
</div>
</Row>
</Container>
</>
);
}

95
pages/kontakt.jsx
View File

@@ -1,7 +1,16 @@
// React, NextJS
import React from "react";
import Head from "next/head";
// Bootstrap components
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
// Formik
import { Formik } from "formik";
import axios from "axios";
import Head from "next/head";
import {
TextInput,
@@ -32,10 +41,10 @@ export default class Kontakt extends React.Component {
<title>Kontakt - Prothmann GmbH</title>
</Head>
<div className="container-fluid products-container navbar-spacing">
<div className="row align-items-center min-height-100">
<div
className={`align-self-stretchd-flex flex-column justify-content-center col-lg-6 p-0 p-5`}
<Container fluid className="products-container navbar-spacing">
<Row className="align-items-center min-height-100">
<Col xs={12} lg={6}
className="align-self-stretchd-flex flex-column justify-content-center p-0 p-5"
>
<h1 className="mainheading">Kontakt</h1>
<div className="description">
@@ -61,10 +70,10 @@ export default class Kontakt extends React.Component {
82194 Gröbenzell (bei München)
</p>
</div>
</div>
</Col>
<div
className={`col-lg-6 pl-0 align-self-center p-5 mb-5 h-100 col-lg-6`}
<Col xs={12} lg={6}
className="pl-0 align-self-center p-5 mb-5 h-100"
>
<Formik
validationSchema={ContactSchema}
@@ -113,8 +122,8 @@ export default class Kontakt extends React.Component {
isSubmitting,
}) => (
<form onSubmit={handleSubmit} className="description">
<div className="row g-2 mb-5">
<div className="col">
<Row className="g-2 mb-5">
<Col>
<TextInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -127,11 +136,11 @@ export default class Kontakt extends React.Component {
label="Firma (optional)"
type="text"
/>
</div>
</div>
</Col>
</Row>
<div className="row g-2 mb-3">
<div className="col">
<Row className="g-2 mb-3">
<Col>
<SelectInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -144,8 +153,8 @@ export default class Kontakt extends React.Component {
label="Anrede"
options={["Herr", "Frau", "Divers"]}
/>
</div>
<div className="col">
</Col>
<Col>
<SelectInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -158,11 +167,11 @@ export default class Kontakt extends React.Component {
label="Titel"
options={["Dr.", "Prof.", "Dipl."]}
/>
</div>
</div>
</Col>
</Row>
<div className="row g-2 mb-5">
<div className="col">
<Row className="g-2 mb-5">
<Col>
<TextInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -175,8 +184,8 @@ export default class Kontakt extends React.Component {
label="Vorname (optional)"
type="text"
/>
</div>
<div className="col">
</Col>
<Col>
<TextInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -189,11 +198,11 @@ export default class Kontakt extends React.Component {
label="Nachname"
type="text"
/>
</div>
</div>
</Col>
</Row>
<div className="row g-2 mb-5">
<div className="col">
<Row className="g-2 mb-5">
<Col>
<TextInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -206,8 +215,8 @@ export default class Kontakt extends React.Component {
label="eMail"
type="email"
/>
</div>
<div className="col">
</Col>
<Col>
<TextInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -220,11 +229,11 @@ export default class Kontakt extends React.Component {
label="Telefon (optional)"
type="text"
/>
</div>
</div>
</Col>
</Row>
<div className="row g-2 mb-3">
<div className="col-12">
<Row className="g-2 mb-3">
<Col xs={12}>
<TextInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -237,8 +246,8 @@ export default class Kontakt extends React.Component {
label="Betreff"
type="text"
/>
</div>
<div className="col-12">
</Col>
<Col xs={12}>
<TextareaInput
isSubmitting={isSubmitting}
rescode={this.state.res}
@@ -250,10 +259,10 @@ export default class Kontakt extends React.Component {
value={values.nachricht}
label="Nachricht"
/>
</div>
</div>
<div className="row g-2 mb-3">
<div className="col">
</Col>
</Row>
<Row className="g-2 mb-3">
<Col>
<p>{this.state.status}</p>
{!isSubmitting && this.state.res != 200 && (
<button className="btn btn-dark" type="submit">
@@ -265,14 +274,14 @@ export default class Kontakt extends React.Component {
<span className="visually-hidden">Sende...</span>
</div>
)}
</div>
</div>
</Col>
</Row>
</form>
)}
</Formik>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</>
);
}

48
pages/materialien.jsx
View File

@@ -1,37 +1,44 @@
// React, NextJS
import React from "react";
import Head from "next/head";
// Bootstrap components
import Table from 'react-bootstrap/Table';
import Productpage from "../components/productpage.jsx";
const content = {
stahl: {
title: "Materialien",
text: `Wir fertigen Blechteile aus verschiedensten auf dem Weltmarkt erhältlichen Materialien. Rostende Stähle und nichtrostende Edelstähle gehörn dabei zu unserem Standardrepertoir, welche wir in den verschiedensten Stärken jederzeit vorrätig haben.`,
iconurl: "/icons/laserteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
iconurl: "/icons/mat_stahl.svg",
iconalt: "Icon eines Stapels an Blech mit verschiedenen Stählen und Edelstählen",
bgurl: "/background/materialien/stahl.webp",
bgtitle: "Bild mehrerer Stapel mit gebürstetem Edelstahl"
},
aluminium: {
title: "Aluminium",
text: `Aluminium ist aufgrund seiner spezifischen Festigkeit bei gleichzeitig geringem Volumen, sehr beliebt. So wird es vor allem dort verwendet, wo eine geringe Masse wichtig ist.`,
iconurl: "/icons/laserteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
iconurl: "/icons/mat_aluminium.svg",
iconalt: "Icon eines Stapels an Blech mit verschiedenen Aluminiumlegierungen",
bgurl: "/background/materialien/aluminium.webp",
bgtitle: "Bild mehrerer Stapel von Aluminiumblechen"
},
sonstiges: {
title: "Sonstiges",
text: `
Falls Sie besondere Anforderungen haben, fertigen wir Ihre Teile gerne aus exotischen Materialien, wie z.B. Kuper, Mesing oder auch Gold - Für uns ist kein Material zu schwierig, wir freuen uns über Ihre Herausforderung!`,
iconurl: "/icons/laserteile.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
iconurl: "/icons/mat_sonstiges.svg",
iconalt: "Icon eines Stapels an Blech mit selteneren Materialien wie z.B. Kupfer, Titan, Gold und Mu Metall",
bgurl: "/background/materialien/sonstiges.webp",
bgtitle: "Bild mehrerer verschieden dicken Kupferblechen"
},
};
function ContentSteel() {
return (
<>
<table className="table mt-5">
<Table className="mt-5">
<thead className="table-secondary">
<tr>
<th>Stähle</th>
@@ -93,15 +100,15 @@ function ContentSteel() {
<td></td>
</tr>
</tbody>
</table>
</Table>
</>
);
}
function ContenAluminum() {
function ContentAluminum() {
return (
<>
<table className="table mt-5">
<Table className="mt-5">
<thead className="table-secondary">
<tr>
<th>Aluminium</th>
@@ -126,15 +133,15 @@ function ContenAluminum() {
<td>6,0</td>
</tr>
</tbody>
</table>
</Table>
</>
);
}
function ContenOther() {
function ContentOther() {
return (
<>
<table className="table mt-5">
<Table className="mt-5">
<thead className="table-secondary">
<tr>
<th>Sonstiges</th>
@@ -169,7 +176,7 @@ function ContenOther() {
<td></td>
</tr>
</tbody>
</table>
</Table>
</>
);
}
@@ -189,20 +196,29 @@ export default function Materialien(props) {
bgurl={content.stahl.bgurl}
title={content.stahl.title}
text={content.stahl.text}
iconurl={content.stahl.iconurl}
iconalt={content.stahl.iconalt}
bgtitle={content.stahl.bgtitle}
addtext={<ContentSteel />}
/>
<Productpage
bgurl={content.aluminium.bgurl}
title={content.aluminium.title}
text={content.aluminium.text}
addtext={<ContenAluminum />}
iconurl={content.aluminium.iconurl}
iconalt={content.aluminium.iconalt}
bgtitle={content.aluminium.bgtitle}
addtext={<ContentAluminum />}
reversed
/>
<Productpage
bgurl={content.sonstiges.bgurl}
title={content.sonstiges.title}
text={content.sonstiges.text}
addtext={<ContenOther />}
iconurl={content.sonstiges.iconurl}
iconalt={content.sonstiges.iconalt}
bgtitle={content.sonstiges.bgtitle}
addtext={<ContentOther />}
/>
</>
);

30
pages/qualitaet.jsx
View File

@@ -1,3 +1,4 @@
// React, NextJS
import React from "react";
import Head from "next/head";
@@ -7,23 +8,26 @@ const content = {
auszeichnungen: {
title: "Auszeichnungen",
text: `The Precision Sheet Metal Technology Fair ist ein seit 1989 existenter Wettbewerb für AMADA Kunden, um Blechteile mit besonderer Qualität und Innovation auszuzeichnen. 2015 zählten wir mit einer hochpräzisen Halterung für eine Gelddruckmaschine zu den Gewinnern.`,
iconurl: "/icons/qualitaet/auszeichnungen.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
iconurl: "/icons/qs_auszeichnungen.svg",
iconalt: "Icon, welches Zertifikat darstellt",
bgurl: "/background/qualitaet/auszeichnungen.webp",
bgtitle: "Bild unserer Auszeichnung des Precision Sheet Metal Technology Fairs"
},
messtechnik: {
title: "Messtechnik",
text: `Grundsätzlich werden alle Teile über den gesamten Fertigungsprozess auf Qualität überwacht. Auf Wunsch erstellen wir auch Erstmusterprüfprotokolle, bei welchen alle Maße der Produktionszeichnung akribisch kontrolliert und in einem Prüfbericht, welchen wir Ihnen zukommen lassen, niedergeschrieben. <br><br>Wir verwenden kalibrierte Messmittel und folgende Messmaschinen:<br><ul><li>Mauser Capax 2 digitaler Höhenmesser</li><li>Messmikroskop Digiscope</li><li>Mitutoyo Messschieber</li></ul> sowie weitere für die Produktion notwendige Messmittel.`,
iconurl: "/icons/qualitaet/messtechnik.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
text: `Grundsätzlich werden alle Teile über den gesamten Fertigungsprozess auf Qualität überwacht. Auf Wunsch erstellen wir auch Erstmusterprüfprotokolle, bei welchen alle Maße der Produktionszeichnung akribisch kontrolliert und in einem Prüfbericht, welchen wir Ihnen zukommen lassen, niedergeschrieben. <br><br>Wir verwenden kalibrierte Messmittel und folgende Messmaschinen:<br/><br/>Mauser Capax 2 digitaler Höhenmesser<br/>Messmikroskop Digiscope<br/>Mitutoyo Messschieber<br/><br/> sowie weitere für die Produktion notwendige Messmittel.`,
iconurl: "/icons/qs_messtechnik.svg",
iconalt: "Icon eines Messschiebers beim Messen eines Rundteiles",
bgurl: "/background/qualitaet/messtechnik.webp",
bgtitle: "Bild einer 3D Messmaschine"
},
iso: {
title: "ISO Zertifizierung",
text: `Wir leben unseren ISO 9001:2008 Prozess! Schon lange bevor der Betrieb zertifiziert wurde haben wir nach strikten Auflagen gearbeitet. Unsere internen QS-Verfahren garantieren eine Qualität, die überzeugt. Reklamationen sind bei uns eine Seltenheit!`,
iconurl: "/icons/qualitaet/iso.svg",
iconalt: "Lasermachine beim herstellen von Laserteilen",
iconurl: "/icons/qs_iso.svg",
iconalt: "Icon mit Kreis und dem Text iso",
bgurl: "/background/qualitaet/iso-zertifizierung.webp",
bgtitle: "Bild unseres ISO Zertifikats"
},
};
@@ -43,20 +47,26 @@ export default function Fertigungsverfahren() {
</Head>
<Productpage
bgurl={content.auszeichnungen.bgurl}
// iconurl={content.auszeichnungen.iconurl}
bgtitle={content.auszeichnungen.bgtitle}
iconurl={content.auszeichnungen.iconurl}
iconalt={content.auszeichnungen.iconalt}
title={content.auszeichnungen.title}
text={content.auszeichnungen.text}
/>
<Productpage
bgurl={content.messtechnik.bgurl}
// iconurl={content.messtechnik.iconurl}
bgtitle={content.messtechnik.bgtitle}
iconurl={content.messtechnik.iconurl}
iconalt={content.messtechnik.iconalt}
title={content.messtechnik.title}
text={content.messtechnik.text}
reversed
/>
<Productpage
bgurl={content.iso.bgurl}
// iconurl={content.iso.iconurl}
bgtitle={content.iso.bgtitle}
iconurl={content.iso.iconurl}
iconalt={content.iso.iconalt}
title={content.iso.title}
text={content.iso.text}
/>