281 lines
14 KiB
TypeScript
281 lines
14 KiB
TypeScript
import React from "react";
|
||
import FirstMileIcon from "../icons/FirstMileIcon";
|
||
import MidMileIcon from "../icons/MidMileIcon";
|
||
import LastMileIcon from "../icons/LastMileIcon";
|
||
|
||
export default function Miles3() {
|
||
return (
|
||
<>
|
||
<style dangerouslySetInnerHTML={{ __html: `
|
||
/* =====================================================================
|
||
How It Works · "Doormile connects first, mid, and last mile" section
|
||
Self-contained recreation of the original Elementor design
|
||
(originally Elementor section CSS, now inlined below + in /public/css/site.css).
|
||
Explicit flex/grid values because the Elementor framework reads them
|
||
from CSS custom properties that aren't set in this rebuild.
|
||
===================================================================== */
|
||
|
||
/* Section shell — dark card fully inset from the edges. The page body is
|
||
white, so margins expose a white gutter on all sides and all four
|
||
corners are rounded, matching the reference. */
|
||
.elementor-element-c36a604 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: auto;
|
||
margin: 20px 20px 0 20px;
|
||
background-color: #1F1F1F;
|
||
border-radius: 25px 25px 0 0;
|
||
padding: 90px 0 0 0;
|
||
}
|
||
/* Boxed inner — centered, original content width */
|
||
.elementor-element-c36a604 > .e-con-inner {
|
||
width: 100%;
|
||
max-width: 1630px;
|
||
margin: 0 auto;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Outer content wrapper — full width, stacks header then grid */
|
||
.elementor-element-77d1265 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
max-width: 1630px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Header row + its inner column (eyebrow + heading, top-left) */
|
||
.elementor-element-b147420 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
width: 100%;
|
||
}
|
||
.elementor-element-5bc90f3 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
text-align: left;
|
||
}
|
||
|
||
/* Eyebrow: "/ How It Works /" */
|
||
.elementor-element-176d17f .logico-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 2.1429em;
|
||
color: #FFFFFF;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Main heading (h3 kit typography, white)
|
||
NOTE: theme-core sets ".logico-front-end h3:not([class*=logico-title-h])
|
||
{ color: var(--logico-dark-text-color) }" at specificity (0,2,1), which
|
||
renders this <h3 class="logico-title"> dark. We prefix .logico-front-end
|
||
(-> (0,3,0)) to win, and force -webkit-text-fill-color (it had inherited
|
||
the dark currentColor). */
|
||
.elementor-element-63a9de5 > .elementor-widget-container {
|
||
margin: 18px 0 0 0;
|
||
}
|
||
.logico-front-end .elementor-element-63a9de5 .logico-title {
|
||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||
font-size: 60px;
|
||
font-weight: 500;
|
||
line-height: 1.2em;
|
||
letter-spacing: -0.03em;
|
||
text-transform: uppercase;
|
||
color: #FFFFFF;
|
||
-webkit-text-fill-color: #FFFFFF;
|
||
opacity: 1;
|
||
visibility: visible;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 3-column card grid.
|
||
Original column-gap is 120px, but at laptop widths (1280–1500) that
|
||
squeezes columns so descriptions wrap to 3 lines. Reduced to 60px so
|
||
columns stay wide enough for ~2-line descriptions like the reference,
|
||
while keeping the 70px row-gap. */
|
||
.elementor-element-4add972 {
|
||
display: grid;
|
||
/* Elementor's ".e-con.e-grid" (specificity 0,2,0) sets grid-template-columns
|
||
from this CSS var, which OUT-RANKS a plain ".elementor-element-4add972"
|
||
(0,1,0) rule — so the responsive breakpoints below MUST drive the var,
|
||
not grid-template-columns directly, or the grid never collapses on mobile. */
|
||
--e-con-grid-template-columns: repeat(3, 1fr);
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-auto-flow: row;
|
||
gap: 70px 60px;
|
||
width: 100%;
|
||
margin: 55px 0 0 0;
|
||
}
|
||
/* Each card stacks: truck / title / description, left-aligned */
|
||
.elementor-element-4add972 > .e-con {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
text-align: left;
|
||
}
|
||
|
||
/* Truck illustrations — exact original heights + baseline padding */
|
||
.elementor-element-4add972 .elementor-icon-wrapper {
|
||
text-align: start;
|
||
}
|
||
.elementor-element-4add972 .elementor-icon svg {
|
||
width: auto;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
.elementor-element-74687fb > .elementor-widget-container { padding: 22px 0 0 0; }
|
||
.elementor-element-74687fb .elementor-icon svg { max-height: 139px; }
|
||
.elementor-element-fd9c57e .elementor-icon svg { max-height: 158px; }
|
||
.elementor-element-fbb1628 > .elementor-widget-container { padding: 25px 0 0 0; }
|
||
.elementor-element-fbb1628 .elementor-icon svg { max-height: 128px; }
|
||
|
||
/* Card titles (First / Mid / Last Mile) */
|
||
.elementor-element-d310968 > .elementor-widget-container,
|
||
.elementor-element-c582715 > .elementor-widget-container,
|
||
.elementor-element-fb01b90 > .elementor-widget-container {
|
||
margin: 25px 0 20px 0;
|
||
}
|
||
.elementor-element-d310968 .logico-title,
|
||
.elementor-element-c582715 .logico-title,
|
||
.elementor-element-fb01b90 .logico-title {
|
||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
line-height: 24px;
|
||
letter-spacing: -0.03em;
|
||
color: #FFFFFF;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Card descriptions */
|
||
.elementor-element-9989187 p,
|
||
.elementor-element-3ae1ce0 p,
|
||
.elementor-element-1057c22 p {
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
line-height: 1.6667em;
|
||
color: #FFFFFF;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ---- Responsive (grid breakpoints mirror the original section-miles3
|
||
cascade: 3-col@120gap >1200, 3-col@40gap ≤1200, 2-col ≤1020, 1-col
|
||
≤480). The ≤1200 step is what keeps columns wide enough at laptop
|
||
widths so descriptions stay ~2 lines and trucks stay proportionate. */
|
||
@media (max-width: 1200px) {
|
||
.elementor-element-4add972 { gap: 70px 40px; }
|
||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(40px, 5vw, 60px); }
|
||
}
|
||
@media (max-width: 1020px) {
|
||
.elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 76px 0 60px 0; }
|
||
.elementor-element-77d1265 { padding: 0 30px; }
|
||
.elementor-element-4add972 { --e-con-grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
|
||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(34px, 6vw, 52px); }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.elementor-element-c36a604 { margin: 12px 12px 0 12px; border-radius: 20px 20px 0 0; padding: 70px 0 50px 0; }
|
||
.elementor-element-77d1265 { padding: 0 22px; }
|
||
.elementor-element-4add972 { --e-con-grid-template-columns: 1fr; grid-template-columns: 1fr; gap: 56px; }
|
||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(30px, 9vw, 44px); }
|
||
}
|
||
`}} />
|
||
|
||
<div className="elementor-element elementor-element-c36a604 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="c36a604" data-element_type="container" data-e-type="container">
|
||
<div className="e-con-inner">
|
||
<div className="elementor-element elementor-element-77d1265 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="77d1265" data-element_type="container" data-e-type="container">
|
||
<div className="elementor-element elementor-element-b147420 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b147420" data-element_type="container" data-e-type="container">
|
||
<div className="elementor-element elementor-element-5bc90f3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5bc90f3" data-element_type="container" data-e-type="container">
|
||
<div className="elementor-element elementor-element-176d17f elementor-widget elementor-widget-logico_heading" data-id="176d17f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||
<div className="elementor-widget-container">
|
||
<div className="logico-title">/ How It Works /</div>
|
||
</div>
|
||
</div>
|
||
<div className="elementor-element elementor-element-63a9de5 elementor-widget elementor-widget-logico_heading" data-id="63a9de5" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||
<div className="elementor-widget-container">
|
||
<h3 className="logico-title">Doormile connects first, mid, and last mile into a seamless end-to-end logistics experience</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="elementor-element elementor-element-4add972 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="4add972" data-element_type="container" data-e-type="container">
|
||
{/* First Mile */}
|
||
<div className="elementor-element elementor-element-e1670a9 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e1670a9" data-element_type="container" data-e-type="container">
|
||
<div className="elementor-element elementor-element-74687fb elementor-view-default elementor-widget elementor-widget-icon" data-id="74687fb" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||
<div className="elementor-widget-container">
|
||
<div className="elementor-icon-wrapper">
|
||
<div className="elementor-icon">
|
||
<FirstMileIcon />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="elementor-element elementor-element-d310968 elementor-widget elementor-widget-logico_heading" data-id="d310968" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||
<div className="elementor-widget-container">
|
||
<div className="logico-title">First Mile</div>
|
||
</div>
|
||
</div>
|
||
<div className="elementor-element elementor-element-9989187 elementor-widget elementor-widget-text-editor" data-id="9989187" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||
<div className="elementor-widget-container">
|
||
<p>Orders are picked up from warehouses with live tracking and quality checks.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mid Mile */}
|
||
<div className="elementor-element elementor-element-97a7e5b e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="97a7e5b" data-element_type="container" data-e-type="container">
|
||
<div className="elementor-element elementor-element-fd9c57e elementor-view-default elementor-widget elementor-widget-icon" data-id="fd9c57e" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||
<div className="elementor-widget-container">
|
||
<div className="elementor-icon-wrapper">
|
||
<div className="elementor-icon">
|
||
<MidMileIcon />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="elementor-element elementor-element-c582715 elementor-widget elementor-widget-logico_heading" data-id="c582715" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||
<div className="elementor-widget-container">
|
||
<div className="logico-title">Mid Mile</div>
|
||
</div>
|
||
</div>
|
||
<div className="elementor-element elementor-element-3ae1ce0 elementor-widget elementor-widget-text-editor" data-id="3ae1ce0" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||
<div className="elementor-widget-container">
|
||
<p>Smooth inter-city logistics through strategically located hubs with live tracking.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Last Mile */}
|
||
<div className="elementor-element elementor-element-86fb82f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="86fb82f" data-element_type="container" data-e-type="container">
|
||
<div className="elementor-element elementor-element-fbb1628 elementor-view-default elementor-widget elementor-widget-icon" data-id="fbb1628" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||
<div className="elementor-widget-container">
|
||
<div className="elementor-icon-wrapper">
|
||
<div className="elementor-icon">
|
||
<LastMileIcon />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="elementor-element elementor-element-fb01b90 elementor-widget elementor-widget-logico_heading" data-id="fb01b90" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||
<div className="elementor-widget-container">
|
||
<div className="logico-title">Last Mile</div>
|
||
</div>
|
||
</div>
|
||
<div className="elementor-element elementor-element-1057c22 elementor-widget elementor-widget-text-editor" data-id="1057c22" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||
<div className="elementor-widget-container">
|
||
<p>Packages reach customers with real-time updates and proof of delivery.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|