Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update how it works card update

Browse Source
This commit is contained in:
Aravind R
2026-06-09 17:42:42 +05:30
parent 0ef51540e9
commit 8c85a11698
22 changed files with 1631 additions and 1370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/sections/ContactsHero.tsx
View File

@@ -1,5 +1,4 @@
import React from "react";
import Link from "next/link";
export default function ContactsHero() {
return (
@@ -82,9 +81,9 @@ export default function ContactsHero() {
-webkit-backdrop-filter: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 16px !important;
max-width: 820px !important;
width: 90% !important;
padding: 0 24px !important;
max-width: 1500px !important;
width: 92% !important;
box-shadow: none !important;
text-align: center !important;
}
@@ -95,60 +94,53 @@ export default function ContactsHero() {
border-color: transparent !important;
}
/* Spaced kicker */
.contacts-hero-kicker {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 24px !important;
}
.contacts-hero-kicker-line {
display: block !important;
width: 24px !important;
height: 1.5px !important;
background: #C01227 !important;
border-radius: 1px !important;
}
.contacts-hero-kicker-text {
font-size: 13px !important;
font-weight: 850 !important;
letter-spacing: 4px !important;
color: #C01227 !important;
text-transform: uppercase !important;
font-family: var(--font-manrope), "Manrope", sans-serif !important;
}
/* Bold modern typography */
/* 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.2vw, 62px) !important;
font-weight: 850 !important;
line-height: 1.15 !important;
font-size: clamp(34px, 5.9vw, 98px) !important;
font-weight: 300 !important;
line-height: 0.95 !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: -1.8px !important;
margin: 0 0 20px 0 !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 {
background: linear-gradient(135deg, #ffffff 40%, #c01227 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: #c01227 !important;
}
/* Description text */
.contacts-hero-desc {
font-size: clamp(15px, 1.22vw, 18px) !important;
font-size: clamp(15px, 1.3vw, 19px) !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
max-width: 600px !important;
margin: 0 auto 36px auto !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;
@@ -201,6 +193,9 @@ export default function ContactsHero() {
padding: 0 16px !important;
width: 95% !important;
}
.contacts-hero-title {
letter-spacing: -1px !important;
}
}
`}} />
<div className="custom-standard-hero-container">
@@ -212,18 +207,16 @@ export default function ContactsHero() {
<div className="contacts-hero-glow-blue"></div>
<div className="contacts-hero-glass-card">
<div className="contacts-hero-kicker">
<span className="contacts-hero-kicker-line"></span>
<span className="contacts-hero-kicker-text">24/7 support & sales</span>
<span className="contacts-hero-kicker-line"></span>
</div>
<h1 className="contacts-hero-title">
Get In <span className="contacts-hero-title-highlight">Touch</span>
<span className="contacts-hero-title-line">One Connected System.</span>
<span className="contacts-hero-title-line">
One Promise <span className="contacts-hero-title-highlight">Kept.</span>
</span>
</h1>
<p className="contacts-hero-desc">
Have questions about our smart delivery network, pricing plans, or partner ecosystem? Let&apos;s build the future of logistics together.
Stop managing separate logistics providers. Doormile unifies First Mile, Mid Mile and Last Mile into one intelligent delivery ecosystem powered by{" "}
<span className="contacts-hero-desc-trademark">MileTruth&trade; AI</span>.
</p>
</div>