52 lines
1.6 KiB
TypeScript
52 lines
1.6 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: 40px !important;
|
|
z-index: 2;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !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": "linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.92) 60%, rgba(0, 0, 0, 0.98) 100%)"
|
|
} as React.CSSProperties}
|
|
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>
|
|
</>
|
|
);
|
|
}
|
|
|