52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import React from "react";
|
|
|
|
export default function AboutHero() {
|
|
return (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
.about-us-hero-content {
|
|
width: 100% !important;
|
|
text-align: center !important;
|
|
color: #fff !important;
|
|
padding: 60px 40px 100px 40px !important;
|
|
z-index: 2;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: flex-end !important;
|
|
align-items: center !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.about-us-hero-title {
|
|
margin: 0 !important;
|
|
font-family: "Manrope", Sans-serif !important;
|
|
font-size: clamp(34px, 5.5vw, 68px) !important;
|
|
font-weight: 850 !important;
|
|
line-height: 1.1 !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: -1.5px !important;
|
|
color: #ffffff !important;
|
|
text-align: center !important;
|
|
}
|
|
`}} />
|
|
|
|
<div className="custom-standard-hero-container">
|
|
<div
|
|
style={{
|
|
backgroundImage: "url('/images/about-bg.png')",
|
|
["--hero-overlay" as any]: "linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.55) 100%)"
|
|
}}
|
|
className="custom-standard-hero-card"
|
|
>
|
|
<div className="about-us-hero-content">
|
|
<h3 className="about-us-hero-title">
|
|
The Operators Building <br /> <span style={{ color: "#C01227" }}>Doormile</span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|