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