122 lines
4.7 KiB
TypeScript
122 lines
4.7 KiB
TypeScript
import Link from "next/link";
|
|
|
|
export default function WingsFinalCTA() {
|
|
return (
|
|
<>
|
|
<style
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
/* dm-section-container replaces the vendor .we-container class here
|
|
(which is otherwise reused verbatim on the About page CTA), so this
|
|
section's edges line up with the Footer's shared container instead
|
|
of that widget's own 1320px width. It carries no vertical margin,
|
|
so restore the same top spacing .we-container provided. */
|
|
.wfcta-container {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.wfcta-box {
|
|
position: relative;
|
|
overflow: hidden;
|
|
/* Placeholder — swap for a sourced photo/illustration with a dark
|
|
overlay once real Doormile Wings imagery exists. */
|
|
background: linear-gradient(150deg, #0b0b0d 0%, #1f1f1f 60%, #0b0b0d 100%) !important;
|
|
padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 48px) !important;
|
|
}
|
|
|
|
.wfcta-box::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
background: radial-gradient(60% 80% at 50% 0%, rgba(200,16,46,0.18) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.wfcta-box .we-cta-inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.wfcta-title {
|
|
font-size: clamp(32px, 4.5vw, 60px) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.wfcta-title em {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.wfcta-sub {
|
|
max-width: 640px;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.wfcta-container {
|
|
/* Raised to dominate the collapsed margin with the previous
|
|
section (Roadmap's own 24px bottom margin) so the gap above
|
|
the CTA card reads the same as the gap below it. */
|
|
margin-top: 14px !important;
|
|
/* There's ~110px of unexplained extra space rendered between this
|
|
container and the Footer that follows on mobile (verified with
|
|
Playwright — no element/padding/margin in the DOM accounts for
|
|
it, so it isn't coming from either section's own box). Pulling
|
|
the CTA up with a negative bottom margin closes most of that
|
|
gap directly instead of chasing the underlying cause, without
|
|
touching the shared Footer component (used on every page) or
|
|
either card's internal padding. Tuned so the resulting visible
|
|
gap below the card matches the ~44px gap above it. */
|
|
margin-bottom: -96px !important;
|
|
padding: 0 10px !important;
|
|
}
|
|
.wfcta-box {
|
|
/* Vertical padding cut ~25% (48px -> 36px) to close the excessive
|
|
gap above the heading and below the button on mobile — the
|
|
card felt loose relative to the rest of the Wings page.
|
|
Horizontal padding/border-radius/width untouched. */
|
|
padding: 36px 20px !important;
|
|
border-radius: 22px !important;
|
|
}
|
|
.wfcta-title {
|
|
font-size: clamp(28px, 6vw, 38px) !important;
|
|
line-height: 1.25 !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
.wfcta-sub {
|
|
font-size: 15px !important;
|
|
line-height: 1.5 !important;
|
|
margin-bottom: 24px !important;
|
|
}
|
|
}
|
|
`,
|
|
}}
|
|
/>
|
|
<div className="dm-section-container wfcta-container" id="wings-final-cta">
|
|
<div className="we-cta wfcta-box">
|
|
<div className="we-cta-inner">
|
|
<h2 className="we-cta-title wfcta-title">
|
|
Ready to move at<br />
|
|
<em>the speed of now?</em>
|
|
</h2>
|
|
<p className="we-cta-sub wfcta-sub">
|
|
Partner with Doormile Wings for same-day air logistics across India’s major
|
|
regional capitals.
|
|
</p>
|
|
<div className="we-cta-btns">
|
|
<Link href="/contact" className="btn-we-primary" style={{ textDecoration: "none" }}>
|
|
Get Started
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
<polyline points="12 5 19 12 12 19" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|