67 lines
3.0 KiB
JavaScript
67 lines
3.0 KiB
JavaScript
import React, { useEffect, useState, useContext } from 'react';
|
|
import api from '../../common/api';
|
|
import { LanguageContext } from '../../context/LanguageContext';
|
|
import translationService from '../../common/translationService';
|
|
const Header = () => {
|
|
const { currentLanguage } = useContext(LanguageContext);
|
|
const [headers, setHeaders] = useState([]);
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await api.get('headers', 'header.json');
|
|
setHeaders(response);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [], [currentLanguage]);
|
|
|
|
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: translationService.getTranslation(headers, 'header_1',currentLanguage) }}></h1>
|
|
<p className="p"></p>
|
|
<h5 className="h5">{translationService.getTranslation(headers, 'header_2',currentLanguage)}<span className="fw-normal ms-1">{translationService.getTranslation(headers, 'header_3',currentLanguage)}</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={translationService.getTranslation(headers, 'your_email',currentLanguage)} />
|
|
<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="">{translationService.getTranslation(headers, 'inquiry_about',currentLanguage)}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<button className="btn dark-butn hover-darkBlue rounded-pill w-100 mt-3">
|
|
<span>{translationService.getTranslation(headers, 'request_a_consultation',currentLanguage)}</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 |