225 lines
8.0 KiB
TypeScript
225 lines
8.0 KiB
TypeScript
import React from "react";
|
|
|
|
export default function ContactsHero() {
|
|
return (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
.contacts-hero-custom {
|
|
background-color: #0b0b0b !important;
|
|
background-image: url('/images/home2-banner-3.jpg') !important;
|
|
background-size: cover !important;
|
|
background-position: center !important;
|
|
}
|
|
|
|
.contacts-hero-card-custom {
|
|
position: relative !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
flex-direction: column !important;
|
|
box-sizing: border-box !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.contacts-hero-bg-overlay {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
/* Lighter wash so the red van / sunset stays vivid like the reference,
|
|
while keeping the centered heading readable. */
|
|
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.62) 100%) !important;
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
/* Ambient Glowing Orbs */
|
|
.contacts-hero-glow-red {
|
|
position: absolute !important;
|
|
bottom: -15% !important;
|
|
right: -10% !important;
|
|
width: min(500px, 75vw) !important;
|
|
height: min(500px, 75vw) !important;
|
|
background: radial-gradient(circle, rgba(192, 18, 39, 0.24) 0%, rgba(192, 18, 39, 0) 70%) !important;
|
|
filter: blur(70px) !important;
|
|
pointer-events: none !important;
|
|
z-index: 1 !important;
|
|
animation: float-glow 10s ease-in-out infinite alternate !important;
|
|
}
|
|
|
|
.contacts-hero-glow-blue {
|
|
position: absolute !important;
|
|
top: -15% !important;
|
|
left: -10% !important;
|
|
width: min(450px, 60vw) !important;
|
|
height: min(450px, 60vw) !important;
|
|
background: radial-gradient(circle, rgba(0, 150, 255, 0.06) 0%, rgba(0, 150, 255, 0) 70%) !important;
|
|
filter: blur(75px) !important;
|
|
pointer-events: none !important;
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
/* Abstract Tech Grid */
|
|
.contacts-hero-grid {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
|
|
background-size: 50px 50px !important;
|
|
opacity: 0.8 !important;
|
|
pointer-events: none !important;
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
/* Center content — card frame removed (no background, border, blur or
|
|
shadow); the text sits directly on the hero background. */
|
|
.contacts-hero-glass-card {
|
|
position: relative !important;
|
|
z-index: 3 !important;
|
|
background: transparent !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
padding: 0 24px !important;
|
|
max-width: 1500px !important;
|
|
width: 92% !important;
|
|
box-shadow: none !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.contacts-hero-glass-card:hover {
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
/* Hero headline — large, light, reference-matched display type.
|
|
Size scales with the viewport so the line-to-container width ratio
|
|
stays constant; the cap keeps the longest line inside the 1500px
|
|
container (with nowrap on desktop) so it can never overflow/clip. */
|
|
.contacts-hero-title {
|
|
font-size: clamp(34px, 5.9vw, 98px) !important;
|
|
font-weight: 400 !important;
|
|
line-height: 0.95 !important;
|
|
color: #ffffff !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: -0.02em !important;
|
|
margin: 0 0 28px 0 !important;
|
|
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
|
}
|
|
|
|
.contacts-hero-title-line {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Keep each line intact on desktop — never split SYSTEM or PROMISE/KEPT */
|
|
@media (min-width: 1024px) {
|
|
.contacts-hero-title-line {
|
|
white-space: nowrap !important;
|
|
}
|
|
}
|
|
|
|
.contacts-hero-title-highlight {
|
|
color: #c01227 !important;
|
|
}
|
|
|
|
/* Description text */
|
|
.contacts-hero-desc {
|
|
font-size: clamp(15px, 1.3vw, 19px) !important;
|
|
line-height: 1.6 !important;
|
|
color: rgba(255, 255, 255, 0.82) !important;
|
|
max-width: 640px !important;
|
|
margin: 0 auto 24px auto !important;
|
|
font-weight: 500 !important;
|
|
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
|
}
|
|
|
|
.contacts-hero-desc-trademark {
|
|
color: #ffffff !important;
|
|
font-weight: 700 !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
/* Breadcrumb capsule */
|
|
.contacts-hero-breadcrumbs {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
gap: 10px !important;
|
|
background: rgba(255, 255, 255, 0.04) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
|
padding: 8px 22px !important;
|
|
border-radius: 30px !important;
|
|
transition: background 0.3s, border-color 0.3s !important;
|
|
}
|
|
|
|
.contacts-hero-breadcrumbs:hover {
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
border-color: rgba(255, 255, 255, 0.15) !important;
|
|
}
|
|
|
|
.contacts-breadcrumb-link {
|
|
color: rgba(255, 255, 255, 0.65) !important;
|
|
text-decoration: none !important;
|
|
font-size: 13px !important;
|
|
font-weight: 600 !important;
|
|
transition: color 0.2s !important;
|
|
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
|
}
|
|
|
|
.contacts-breadcrumb-link:hover {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.contacts-breadcrumb-del {
|
|
color: rgba(255, 255, 255, 0.3) !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.contacts-breadcrumb-cur {
|
|
color: #C01227 !important;
|
|
font-size: 13px !important;
|
|
font-weight: 700 !important;
|
|
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
|
}
|
|
|
|
@keyframes float-glow {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
100% { transform: translate(-15px, -25px) scale(1.08); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.contacts-hero-glass-card {
|
|
padding: 0 16px !important;
|
|
width: 95% !important;
|
|
}
|
|
.contacts-hero-title {
|
|
letter-spacing: -1px !important;
|
|
}
|
|
}
|
|
`}} />
|
|
<div className="custom-standard-hero-container">
|
|
<div className="custom-standard-hero-card contacts-hero-custom">
|
|
<div className="contacts-hero-card-custom">
|
|
<div className="contacts-hero-bg-overlay"></div>
|
|
<div className="contacts-hero-grid"></div>
|
|
<div className="contacts-hero-glow-red"></div>
|
|
<div className="contacts-hero-glow-blue"></div>
|
|
|
|
<div className="contacts-hero-glass-card">
|
|
<h1 className="contacts-hero-title">
|
|
<span className="contacts-hero-title-line">Delivering Trust.</span>
|
|
<span className="contacts-hero-title-line">
|
|
Beyond <span className="contacts-hero-title-highlight">Boundaries.</span>
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
|