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

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; }
}