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

fix mobile screen issue

Browse Source
This commit is contained in:
Aravind R
2026-06-06 13:55:33 +05:30
parent 91841ba3f4
commit ab67fec091
20 changed files with 707 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/sections/IntelligenceGrid.tsx
View File

@@ -712,24 +712,91 @@ export default function IntelligenceGrid() {
@media (max-width: 768px) {
.roadmap-hero-section {
width: calc(100% - 40px); /* keep the 20px site-standard band gutter */
padding: 60px 16px;
}
.roadmap-grid-container {
grid-template-columns: 1fr;
gap: 16px;
width: calc(100% - 24px); /* tighter 12px gutter so the band reads edge-to-edge on phones */
padding: 52px 16px 44px;
border-radius: 22px;
}
.vision-main-subtitle { margin-bottom: 40px !important; }
/* Progress header → compact, centered summary card */
.roadmap-track-container {
flex-direction: column;
align-items: flex-start;
gap: 20px;
align-items: center;
text-align: center;
gap: 16px;
padding: 20px 18px;
margin-bottom: 36px;
}
.roadmap-track-label { font-size: 12px; letter-spacing: 1.5px; }
.timeline-horizontal-wrapper { width: 100%; }
.roadmap-complete-pct-container { justify-content: center; }
.timeline-horizontal-wrapper {
width: 100%;
/* ── Vertical timeline: the four stacked cards become a connected
journey (2026 → 2030) with a coloured rail + phase node dots. ── */
.roadmap-grid-container {
grid-template-columns: 1fr;
gap: 18px;
position: relative;
padding-left: 32px;
}
.roadmap-grid-container::before {
content: '';
position: absolute;
left: 6px;
top: 16px;
bottom: 16px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, #eab308 0%, #22c55e 34%, #3b82f6 67%, #C8102E 100%);
opacity: 0.55;
}
.roadmap-col-card { padding: 24px 22px; }
/* node dot sits on the rail, aligned with the year number */
.roadmap-col-card::before {
content: '';
position: absolute;
left: -32px;
top: 28px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #09090b;
border: 2px solid #C8102E;
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(200, 16, 46, 0.7);
z-index: 3;
}
.roadmap-col-card[data-card="2026"]::before {
border-color: #eab308;
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(234, 179, 8, 0.6);
}
.roadmap-col-card[data-card="2027"]::before {
border-color: #22c55e;
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(34, 197, 94, 0.6);
}
.roadmap-col-card[data-card="2028"]::before {
border-color: #3b82f6;
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(59, 130, 246, 0.6);
}
.roadmap-col-card[data-card="2030"]::before {
border-color: #ffffff;
background: #C8102E;
box-shadow: 0 0 0 4px #09090b, 0 0 16px rgba(200, 16, 46, 0.9);
}
/* the 2030 card's sweeping border (::after) would sit over the rail
gutter — keep it from bleeding past the card's rounded edge */
.glowing-vision-card::after { inset: -1px; }
}
@media (max-width: 480px) {
.roadmap-hero-section { padding: 44px 14px 38px; }
.roadmap-hero-section .intelligence-grid-title { font-size: clamp(28px, 8.4vw, 38px) !important; letter-spacing: -1px !important; }
.roadmap-grid-container { padding-left: 28px; }
.roadmap-grid-container::before { left: 5px; }
.roadmap-col-card { padding: 22px 18px; }
.roadmap-col-card::before { left: -28px; top: 26px; }
.year-num { font-size: 23px; }
.card-heading { font-size: 16px; }
.card-text { font-size: 13px; }
}
`}} />
@@ -809,9 +876,10 @@ export default function IntelligenceGrid() {
const is2030 = card.year === 2030;
const isActive = activeYear === card.year;
return (
<div
<div
key={card.year}
onMouseEnter={() => setActiveYear(card.year)}
onClick={() => setActiveYear(card.year)}
className={`roadmap-col-card ${is2030 ? "glowing-vision-card" : ""} ${isActive ? "active" : ""}`}
data-card={card.year}
>