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

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>
</>
);
}