Files
www.prothmann.com/components/productpage.jsx
Christian Anetzberger 13ecc97011 Bigger redesign
2023-01-31 17:05:28 +01:00

41 lines
1.5 KiB
JavaScript

// React, NextJS
import React from "react";
import Image from "next/image"
// Bootstrap components
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
export default function Productpage(props) {
return (
<>
<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-container col-lg-6 col-12 ${props.reversed ? "order-lg-1" : ""}`}
style={{ backgroundImage: `url(${props.bgurl})` }} title={props.bgtitle}
>
<div className="center-icon">
{props.iconurl &&
<div className="products-img-icon-wrapper">
<Image src={props.iconurl} width={300} height={300} alt={props.iconalt} title={props.iconalt} className="products-icon" priority/>
</div>
}
</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>
</Row>
</Container>
</>
);
}