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

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