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

update ev fleet image

Browse Source
This commit is contained in:
Aravind
2026-07-30 20:30:26 +05:30
parent 040cc2ae46
commit 6e3f49bb94
4 changed files with 52 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/ev section1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

2
src/app/solutions/page.tsx
View File

@@ -119,7 +119,7 @@ export default function SolutionsPage() {
features={EV_FLEET_FEATURES}
ariaLabel="Doormile EV fleet"
bannerImage="/images/ev fleet1.png"
image="/images/ev.webp"
image="/images/ev section1.png"
/>
<SolutionsWhyDoormile />
<SolMileTruthBand />

55
src/components/sections/PlatformCapabilities.tsx
View File

@@ -658,18 +658,6 @@ export default function PlatformCapabilities() {
</ul>
</div>
{/* Floating twin-chevron nav, sitting over the card row like the
reference. Hidden from AT — the segments below are the labelled
control; these duplicate prev/next for pointer users. */}
<div className="pcap-float">
<button type="button" className="pcap-fbtn" onClick={prev} aria-label="Previous capabilities">
<Arrow dir="prev" />
</button>
<span className="pcap-float-div" aria-hidden="true" />
<button type="button" className="pcap-fbtn" onClick={next} aria-label="Next capabilities">
<Arrow dir="next" />
</button>
</div>
</div>
<div className="pcap-foot">
@@ -681,6 +669,16 @@ export default function PlatformCapabilities() {
</Link>
<div className="pcap-progress">
<div className="pcap-nav-btns" aria-label="Carousel navigation">
<button type="button" className="pcap-fbtn" onClick={prev} aria-label="Previous capabilities">
<Arrow dir="prev" />
</button>
<span className="pcap-float-div" aria-hidden="true" />
<button type="button" className="pcap-fbtn" onClick={next} aria-label="Next capabilities">
<Arrow dir="next" />
</button>
</div>
<span className="pcap-count" aria-hidden="true">
<b>{num}</b> / {totalStr}
</span>
@@ -1018,29 +1016,31 @@ const CSS = `
background: var(--pc-red); border-color: var(--pc-red-bright); transform: translate(2px,-2px) rotate(0deg);
}
/* ---------- Floating twin-chevron nav ---------- */
#pcap-root .pcap-float {
position: absolute; z-index: 6; top: 40%; left: 66.666%;
transform: translate(-50%, -50%);
/* ---------- Carousel navigation pill in footer ---------- */
#pcap-root .pcap-nav-btns {
display: flex; align-items: center; gap: 2px;
width: 92px; height: 92px; border-radius: 50%;
background: rgba(17,17,19,0.92); border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 30px 60px -26px rgba(0,0,0,0.9); backdrop-filter: blur(6px);
width: 92px; height: 42px; border-radius: 999px; flex: none;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
#pcap-root .pcap-float-div { width: 1px; height: 26px; background: rgba(255,255,255,0.16); flex: none; }
#pcap-root .pcap-nav-btns:hover {
border-color: rgba(226,53,74,0.45);
background: rgba(255,255,255,0.09);
}
#pcap-root .pcap-float-div { width: 1px; height: 20px; background: rgba(255,255,255,0.16); flex: none; }
#pcap-root .pcap-fbtn {
flex: 1; height: 100%; border: 0; background: none; color: #fff; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
transition: color 0.25s, transform 0.25s;
}
#pcap-root .pcap-fbtn:first-child { padding-right: 4px; }
#pcap-root .pcap-fbtn:last-child { padding-left: 4px; }
#pcap-root .pcap-fbtn svg { width: 20px; height: 20px; transition: transform 0.25s; }
#pcap-root .pcap-fbtn:first-child { padding-right: 2px; }
#pcap-root .pcap-fbtn:last-child { padding-left: 2px; }
#pcap-root .pcap-fbtn svg { width: 18px; height: 18px; transition: transform 0.25s; }
#pcap-root .pcap-fbtn:hover { color: var(--pc-red-bright); }
#pcap-root .pcap-fbtn:first-child:hover svg { transform: translateX(-3px); }
#pcap-root .pcap-fbtn:last-child:hover svg { transform: translateX(3px); }
#pcap-root .pcap-fbtn:focus-visible { outline: 2px solid var(--pc-red-bright); outline-offset: 2px; }
@media (max-width: 1023px) { #pcap-root .pcap-float { left: 50%; top: 42%; } }
@keyframes pcap-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.35); } }
@@ -1097,16 +1097,13 @@ const CSS = `
/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
#pcap-root .pcap-card-cap { padding: 20px 18px 22px; }
#pcap-root .pcap-float { width: 82px; height: 82px; }
}
@media (max-width: 639px) {
#pcap-root .pcap-foot { flex-direction: column; align-items: stretch; gap: 18px; }
#pcap-root .pcap-explore { justify-content: center; }
#pcap-root .pcap-progress { justify-content: space-between; }
#pcap-root .pcap-progress { justify-content: space-between; gap: 12px; }
#pcap-root .pcap-segs { flex: 1; justify-content: space-between; gap: 6px; }
#pcap-root .pcap-seg { flex: 1; width: auto; }
#pcap-root .pcap-float { width: 72px; height: 72px; top: 44%; }
#pcap-root .pcap-float svg { width: 18px; height: 18px; }
#pcap-root .pcap-count b { font-size: 18px; }
}

29
src/components/sections/SolutionsSections.tsx
View File

@@ -2115,6 +2115,20 @@ function SolWingsSpotlight() {
{ t: "Electric at both ends", d: "EV pickup to the airport and EV delivery on arrival, on the same booking." },
]}
/>
<div className="sol-wings-specs">
<div className="sol-wings-spec-item">
<span className="sol-wings-spec-val">Same Day</span>
<span className="sol-wings-spec-lbl">City-to-City Air</span>
</div>
<div className="sol-wings-spec-item">
<span className="sol-wings-spec-val">100% EV</span>
<span className="sol-wings-spec-lbl">First & Last Mile</span>
</div>
<div className="sol-wings-spec-item">
<span className="sol-wings-spec-val">Live Sync</span>
<span className="sol-wings-spec-lbl">Air & Road Tracking</span>
</div>
</div>
<div className="sol-wings-cta">
<Magnetic>
<Link href="/doormile-wings" prefetch className="logico-alter-button">Explore Doormile Wings</Link>
@@ -3228,10 +3242,17 @@ const CSS = `
#sol-root .sol-off-note { display: block; width: 100%; margin: 18px 0 18px; padding-top: 16px; border-top: 1px solid var(--sol-line); color: rgba(255,255,255,0.38); font-size: 11.5px; line-height: 1.5; }
#sol-root .sol-off-link { margin-top: auto; padding: 10px 18px; font-size: 12px; }
/* ---- Wings spotlight — media + copy, mirrors .sol-s02-media-row ---- */
#sol-root .sol-wings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 34px; }
#sol-root .sol-wings-copy { display: flex; flex-direction: column; }
#sol-root .sol-wings-cta { margin-top: 28px; }
/* ---- Wings spotlight — media + copy ---- */
#sol-root .sol-wings-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 52px); align-items: center; margin-top: 34px; }
#sol-root .sol-wings-copy { display: flex; flex-direction: column; width: 100%; }
#sol-root .sol-wings-copy .sol-minilist { gap: 18px; }
#sol-root .sol-wings-copy .sol-mini b { font-size: 15px; font-weight: 750; }
#sol-root .sol-wings-copy .sol-mini span { font-size: 14px; line-height: 1.55; }
#sol-root .sol-wings-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; padding: 14px 18px; background: rgba(226, 53, 74, 0.04); border: 1px solid rgba(226, 53, 74, 0.12); border-radius: 14px; }
#sol-root .sol-wings-spec-item { display: flex; flex-direction: column; gap: 2px; }
#sol-root .sol-wings-spec-val { font-size: 15px; font-weight: 800; color: #dc2626; line-height: 1.2; }
#sol-root .sol-wings-spec-lbl { font-size: 11px; font-weight: 600; color: #4b5563; letter-spacing: 0.01em; }
#sol-root .sol-wings-cta { margin-top: 24px; display: flex; align-items: center; }
/* ============================================================
POWERED BY MILETRUTH™ AI — the one LIGHT surface on /solutions.