55 lines
2.5 KiB
JavaScript
55 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import DOMPurify from 'dompurify';
|
|
import { useIntl } from "gatsby-plugin-intl";
|
|
|
|
const Header = () => {
|
|
const intl = useIntl();
|
|
const header_1= DOMPurify.sanitize(intl.formatMessage({ id: "header_1" }).trim().replace(/^"|"$/g, ''));
|
|
|
|
return (
|
|
<header className="style-3 overflow-hidden" data-scroll-index="0">
|
|
<div className="container">
|
|
<div className="content section-padding">
|
|
<div className="row">
|
|
<div className="col-lg-5">
|
|
<div className="info">
|
|
<h1 className="h1" dangerouslySetInnerHTML={{ __html: header_1 }}></h1>
|
|
<p className="p">{intl.formatMessage({ id: "header_2" })}</p>
|
|
<h5 className="h5">{intl.formatMessage({ id: "get_free_quotes" })} <span className="fw-normal ms-1">{intl.formatMessage({ id: "header_3" })}</span></h5>
|
|
<form action="contact.php" className="form mt-30" method="post">
|
|
<div className="row gx-3">
|
|
<div className="col-6">
|
|
<div className="form-group input-with-icon">
|
|
<input type="text" className="form-control" placeholder={intl.formatMessage({ id: "your_email" })} />
|
|
<span className="input-icon"><i className="far fa-envelope"></i></span>
|
|
</div>
|
|
</div>
|
|
<div className="col-6">
|
|
<div className="form-group">
|
|
<select className="form-select" defaultValue={"Your inquiry about"}>
|
|
<option value="">{intl.formatMessage({ id: "inquiry_about" })}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<button className="btn dark-butn hover-darkBlue rounded-pill w-100 mt-3">
|
|
<span>{intl.formatMessage({ id: "request_a_consultation" })}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="main-img">
|
|
<img src="/assets/img/header/header_3.png" alt="" className="pattern" />
|
|
<img src="/assets/img/header/header_3_c.png" alt="" className="circle" />
|
|
<img src="/assets/img/header/logo_sh_l.png" alt="" className="logo_shap" />
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export default Header |