fix how to work , about,blog
This commit is contained in:
@@ -5,6 +5,177 @@ 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
|
||||
(source: public/css/sections/section-miles3.css + kit-5 typography).
|
||||
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: 150px 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;
|
||||
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;
|
||||
}
|
||||
.elementor-element-74687fb > .elementor-widget-container { padding: 22px 0 0 0; }
|
||||
.elementor-element-74687fb .elementor-icon svg { height: 139px; }
|
||||
.elementor-element-fd9c57e .elementor-icon svg { height: 158px; }
|
||||
.elementor-element-fbb1628 > .elementor-widget-container { padding: 25px 0 0 0; }
|
||||
.elementor-element-fbb1628 .elementor-icon svg { 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: 100px 0 0 0; }
|
||||
.elementor-element-77d1265 { padding: 0 30px; }
|
||||
.elementor-element-4add972 { 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 0 0; }
|
||||
.elementor-element-77d1265 { padding: 0 22px; }
|
||||
.elementor-element-4add972 { 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">
|
||||
@@ -97,5 +268,6 @@ export default function Miles3() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user