first commit

src/components/sections/AboutHero.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+
+export default function AboutHero() {
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: `
+        .about-us-hero {
+            position: relative;
+        }
+
+        .about-us-hero .about-us-hero-bg {
+            min-height: fit-content;
+            background-position: center center;
+            background-repeat: no-repeat;
+            position: relative;
+        }
+
+        .about-us-hero .e-con-inner {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            z-index: 2;
+        }
+
+        .about-us-hero-content {
+            max-width: 100%;
+            text-align: center;
+            color: #fff;
+        }
+
+        .about-us-hero-eyebrow {
+            margin: 0 0 18px;
+            font-family: 'Manrope', sans-serif;
+            font-size: 13px;
+            font-weight: 800;
+            line-height: 1.3;
+            letter-spacing: 3px;
+            text-transform: uppercase;
+            color: rgba(255, 255, 255, 0.72);
+        }
+
+        .about-us-hero-title {
+            margin: 0 0 22px;
+            font-family: 'Manrope', sans-serif;
+            font-size: clamp(44px, 8vw, 96px);
+            font-weight: 900;
+            line-height: 0.98;
+            letter-spacing: 0;
+            color: #fff;
+        }
+
+        .about-us-hero-text {
+            text-align: center;
+            max-width: 720px;
+            margin: 0 auto;
+            font-family: 'Manrope', sans-serif;
+            font-size: clamp(17px, 2vw, 22px);
+            line-height: 1.65;
+            color: rgba(255, 255, 255, 0.78);
+        }
+
+        @media (max-width: 768px) {
+            .about-us-hero-content {
+                padding: 115px 20px 70px;
+            }
+        }
+      `}} />
+
+      <div className="elementor-63 miletruth-hero about-us-hero">
+        <div className="elementor-element elementor-element-86f3204 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="86f3204" data-element_type="container" data-e-type="container">
+          <div 
+            style={{ 
+              backgroundImage: "linear-gradient(hsla(0, 0%, 0%, 0.9), rgba(0, 0, 0, 0.9)), url('/images/about-bg.png')", 
+              backgroundSize: "cover",
+              borderRadius: "20px"
+            }} 
+            className="elementor-element elementor-element-0b7a484 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child about-us-hero-bg" 
+            data-id="0b7a484" 
+            data-element_type="container" 
+            data-e-type="container"
+          >
+            <div className="e-con-inner">
+              <div className="about-us-hero-content">
+                <br /> <br />
+                <h3 className="about-us-hero-title" style={{ color: "white", lineHeight: 1.2 }}>
+                  The Operators Building <br /> <span style={{ color: "#C01227" }}>Doormile</span>
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}