853 lines
31 KiB
TypeScript
853 lines
31 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
if (typeof window !== "undefined") {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
}
|
|
|
|
const ROADMAP_DATA = [
|
|
{
|
|
year: 2026,
|
|
pct: 25,
|
|
trackLeft: "12.5%",
|
|
phase: "Pilot Phase",
|
|
phaseClass: "yellow",
|
|
title: "Hyderabad Pilot",
|
|
desc: "Launch operations in Hyderabad with dedicated EV hubs and MileTruth AI v1.0.",
|
|
icon: (
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M4.5 16.5c-1.5 1.5-2.5 3.5-2.5 5.5C4 22 6 21 7.5 19.5" />
|
|
<path d="M12 12l9-9-9 9z" />
|
|
<path d="M12 12c-2.3 2.3-3.4 5.3-3.5 8.5l12-12c-3.2-.1-6.2-1.2-8.5-3.5z" />
|
|
</svg>
|
|
),
|
|
stats: [
|
|
{ text: "50-80 orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
|
|
{ text: "1 city", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
|
|
{ text: "10+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg> }
|
|
]
|
|
},
|
|
{
|
|
year: 2027,
|
|
pct: 50,
|
|
trackLeft: "37.5%",
|
|
phase: "Multi-City",
|
|
phaseClass: "green",
|
|
title: "Multi-City Scale",
|
|
desc: "Expand to Bengaluru and Chennai, securing key B2B enterprise traction.",
|
|
icon: (
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="8" x2="12" y2="16"></line>
|
|
<line x1="8" y1="12" x2="16" y2="12"></line>
|
|
</svg>
|
|
),
|
|
stats: [
|
|
{ text: "300-500 orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
|
|
{ text: "3 cities", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
|
|
{ text: "50+ EVs", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> }
|
|
]
|
|
},
|
|
{
|
|
year: 2028,
|
|
pct: 75,
|
|
trackLeft: "62.5%",
|
|
phase: "Platform",
|
|
phaseClass: "blue",
|
|
title: "Platform Expansion",
|
|
desc: "Scale to 5+ cities. Launch developer API marketplace and Series A readiness.",
|
|
icon: (
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
|
</svg>
|
|
),
|
|
stats: [
|
|
{ text: "1,200+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
|
|
{ text: "5+ cities", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
|
|
{ text: "API marketplace", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> }
|
|
]
|
|
},
|
|
{
|
|
year: 2030,
|
|
pct: 100,
|
|
trackLeft: "87.5%",
|
|
phase: "Vision State",
|
|
phaseClass: "white-pill",
|
|
title: "AI Pulse Layer",
|
|
desc: "Nationwide AI logistics grid reaching 15+ cities, empowering female micro-entrepreneurs.",
|
|
icon: (
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z" />
|
|
<path d="M3 20h18" strokeWidth="3" />
|
|
</svg>
|
|
),
|
|
stats: [
|
|
{ text: "5,000+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
|
|
{ text: "Rs 65 Cr+ revenue", icon: <span className="currency-symbol" style={{ marginRight: "4px", fontSize: "11px", fontWeight: 800 }}>Rs</span> },
|
|
{ text: "2,000+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg> }
|
|
]
|
|
}
|
|
];
|
|
|
|
export default function IntelligenceGrid() {
|
|
const [activeYear, setActiveYear] = useState<number>(2030);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
// Map year to target percent
|
|
const getActivePercent = () => {
|
|
if (activeYear === 2026) return 25;
|
|
if (activeYear === 2027) return 50;
|
|
if (activeYear === 2028) return 75;
|
|
return 100;
|
|
};
|
|
|
|
// Map year to timeline horizontal track width
|
|
const getTrackWidth = () => {
|
|
if (activeYear === 2026) return "12.5%";
|
|
if (activeYear === 2027) return "37.5%";
|
|
if (activeYear === 2028) return "62.5%";
|
|
return "87.5%";
|
|
};
|
|
|
|
useEffect(() => {
|
|
const container = containerRef.current;
|
|
if (!container) return;
|
|
|
|
// 1. Dotted City Connections Canvas loops
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return;
|
|
|
|
let animationFrameId: number;
|
|
let width = (canvas.width = canvas.offsetWidth);
|
|
let height = (canvas.height = canvas.offsetHeight);
|
|
|
|
const handleResize = () => {
|
|
if (!canvas) return;
|
|
width = canvas.width = canvas.offsetWidth;
|
|
height = canvas.height = canvas.offsetHeight;
|
|
};
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
const nodes = [
|
|
{ name: "Hyderabad", x: 0.18, y: 0.55 },
|
|
{ name: "Chennai", x: 0.42, y: 0.72 },
|
|
{ name: "Bengaluru", x: 0.64, y: 0.42 },
|
|
{ name: "Mumbai", x: 0.82, y: 0.62 }
|
|
];
|
|
|
|
const particles = [
|
|
{ from: 0, to: 1, t: 0, speed: 0.005 },
|
|
{ from: 1, to: 2, t: 0.3, speed: 0.004 },
|
|
{ from: 2, to: 3, t: 0.6, speed: 0.006 }
|
|
];
|
|
|
|
const draw = () => {
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
// Draw faint connection lines
|
|
ctx.lineWidth = 1.5;
|
|
ctx.setLineDash([6, 6]);
|
|
ctx.strokeStyle = "rgba(220, 38, 38, 0.12)";
|
|
|
|
ctx.beginPath();
|
|
for (let i = 0; i < nodes.length - 1; i++) {
|
|
const startX = nodes[i].x * width;
|
|
const startY = nodes[i].y * height;
|
|
const endX = nodes[i + 1].x * width;
|
|
const endY = nodes[i + 1].y * height;
|
|
ctx.moveTo(startX, startY);
|
|
ctx.lineTo(endX, endY);
|
|
}
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
|
|
// Draw flowing sparks along connections
|
|
particles.forEach((p) => {
|
|
p.t += p.speed;
|
|
if (p.t >= 1) p.t = 0;
|
|
|
|
const startNode = nodes[p.from];
|
|
const endNode = nodes[p.to];
|
|
|
|
const startX = startNode.x * width;
|
|
const startY = startNode.y * height;
|
|
const endX = endNode.x * width;
|
|
const endY = endNode.y * height;
|
|
|
|
const curX = startX + (endX - startX) * p.t;
|
|
const curY = startY + (endY - startY) * p.t;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(curX, curY, 4, 0, Math.PI * 2);
|
|
ctx.fillStyle = "#c01227";
|
|
ctx.shadowColor = "#c01227";
|
|
ctx.shadowBlur = 10;
|
|
ctx.fill();
|
|
ctx.shadowBlur = 0;
|
|
});
|
|
|
|
// City labels & glow halos
|
|
nodes.forEach((n) => {
|
|
const xCoord = n.x * width;
|
|
const yCoord = n.y * height;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(xCoord, yCoord, 8, 0, Math.PI * 2);
|
|
ctx.fillStyle = "rgba(220, 38, 38, 0.08)";
|
|
ctx.fill();
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(xCoord, yCoord, 3, 0, Math.PI * 2);
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
|
|
ctx.fill();
|
|
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.12)";
|
|
ctx.font = "bold 11px 'Manrope', sans-serif";
|
|
ctx.textAlign = "center";
|
|
ctx.fillText(n.name, xCoord, yCoord - 14);
|
|
});
|
|
|
|
animationFrameId = requestAnimationFrame(draw);
|
|
};
|
|
|
|
draw();
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
cancelAnimationFrame(animationFrameId);
|
|
};
|
|
}, []);
|
|
|
|
// Circular progress calculations
|
|
const activePercent = getActivePercent();
|
|
const radius = 30;
|
|
const circumference = 2 * Math.PI * radius; // 188.49
|
|
const strokeOffset = circumference * (1 - activePercent / 100);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent"
|
|
data-id="bbc6760"
|
|
data-element_type="container"
|
|
data-e-type="container"
|
|
style={{ position: "relative", zIndex: 1 }}
|
|
>
|
|
<section id="hero" className="roadmap-hero-section">
|
|
{/* Subtle Canvas Dotted Logistics Network Background */}
|
|
<canvas ref={canvasRef} className="ce-canvas-bg" aria-hidden="true"></canvas>
|
|
|
|
{/* Floating background glowing spotlights */}
|
|
<div className="roadmap-glow-spot top-left"></div>
|
|
<div className="roadmap-glow-spot bottom-right"></div>
|
|
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
/* Buttery-Smooth Hardware-Accelerated 3D AI Logistics Timeline Styles */
|
|
.roadmap-hero-section {
|
|
position: relative;
|
|
background: #09090b !important;
|
|
width: 100%;
|
|
padding: 100px 40px;
|
|
box-sizing: border-box;
|
|
font-family: 'Manrope', sans-serif;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* Connection Grid Canvas Overlay */
|
|
.ce-canvas-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
opacity: 0.08;
|
|
}
|
|
|
|
/* Spotlights */
|
|
.roadmap-glow-spot {
|
|
position: absolute;
|
|
width: 500px;
|
|
height: 500px;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
filter: blur(140px);
|
|
z-index: 0;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
.roadmap-glow-spot.top-left {
|
|
left: -10%;
|
|
top: -10%;
|
|
background: radial-gradient(circle, #C8102E 0%, transparent 70%);
|
|
}
|
|
|
|
.roadmap-glow-spot.bottom-right {
|
|
right: -10%;
|
|
bottom: -10%;
|
|
background: radial-gradient(circle, #ff0033 0%, transparent 70%);
|
|
}
|
|
|
|
.roadmap-hero-section .container {
|
|
max-width: 1320px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Header Styles */
|
|
.vision-tag-top {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
letter-spacing: 3px;
|
|
color: #C8102E;
|
|
text-transform: uppercase;
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.roadmap-hero-section .intelligence-grid-title {
|
|
color: #ffffff !important;
|
|
font-size: clamp(34px, 3.8vw, 54px) !important;
|
|
font-weight: 900 !important;
|
|
line-height: 1.1 !important;
|
|
text-align: center;
|
|
letter-spacing: -1.8px !important;
|
|
margin: 0 0 20px 0 !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.roadmap-hero-section .intelligence-grid-title-highlight {
|
|
color: #C8102E !important;
|
|
}
|
|
|
|
.vision-main-subtitle {
|
|
font-size: clamp(16px, 1.4vw, 20px);
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
color: #a1a1aa !important;
|
|
text-align: center;
|
|
max-width: 720px;
|
|
margin: 0 auto 60px auto !important;
|
|
}
|
|
|
|
/* Glowing 3D Timeline Track - Overflow Visible Guarantees No Halo Cutoffs */
|
|
.roadmap-track-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 30px;
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
border-radius: 20px;
|
|
padding: 24px 34px;
|
|
box-sizing: border-box;
|
|
backdrop-filter: blur(8px);
|
|
margin-bottom: 60px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
overflow: visible !important; /* Extremely important to prevent cropping timeline child elements */
|
|
}
|
|
|
|
.roadmap-track-label {
|
|
font-size: 13.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 2px;
|
|
color: #71717a;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.timeline-horizontal-wrapper {
|
|
flex: 1 1 auto;
|
|
height: 6px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 3px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: visible !important; /* Critical to let pulsing halo overlay expand outside the 6px wrapper */
|
|
}
|
|
|
|
.timeline-horizontal-fill {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: #C8102E;
|
|
box-shadow: 0 0 12px #C8102E;
|
|
border-radius: 3px;
|
|
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
will-change: width;
|
|
}
|
|
|
|
.node-dots-row {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
overflow: visible !important; /* Dynamic expansion */
|
|
}
|
|
|
|
.node-dot-item {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: #18181b;
|
|
border: 2px solid rgba(255, 255, 255, 0.15);
|
|
transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
|
|
background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
|
|
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
will-change: border-color, background-color, box-shadow;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.node-dot-item.active {
|
|
background: #C8102E;
|
|
border-color: #ffffff;
|
|
box-shadow: 0 0 10px #C8102E;
|
|
}
|
|
|
|
/* Pulsing crown node halo - Smoothly decays opacity to 0 to prevent visual pops/blinks */
|
|
.node-pulse-crown {
|
|
position: absolute;
|
|
inset: -4px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid #C8102E;
|
|
animation: node-breather 2s infinite ease-out;
|
|
pointer-events: none;
|
|
box-sizing: border-box;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
@keyframes node-breather {
|
|
0% { transform: scale(0.95); opacity: 0.9; }
|
|
80% { opacity: 0.25; }
|
|
100% { transform: scale(1.6); opacity: 0; }
|
|
}
|
|
|
|
/* Progress Ring */
|
|
.roadmap-complete-pct-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.roadmap-complete-pct {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
color: #C8102E;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.progress-ring-circle {
|
|
transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
transform: rotate(-90deg);
|
|
transform-origin: 50% 50%;
|
|
stroke: #C8102E;
|
|
filter: drop-shadow(0 0 4px #C8102E);
|
|
}
|
|
|
|
/* 4-Column Grid container */
|
|
.roadmap-grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* GPU Hardware-Accelerated Breathtakingly Smooth 3D Floating Cards */
|
|
.roadmap-col-card {
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.035);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
backdrop-filter: blur(16px);
|
|
border-radius: 20px;
|
|
padding: 30px 24px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
|
border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
|
background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
|
box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
cursor: pointer;
|
|
will-change: transform, box-shadow;
|
|
}
|
|
|
|
/* Ultra-Smooth CSS scale and translation lifts on hover */
|
|
.roadmap-col-card:hover {
|
|
transform: translateY(-8px) scale(1.03);
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
background-color: rgba(255, 255, 255, 0.055);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
/* Active card highlight state */
|
|
.roadmap-col-card.active {
|
|
border-color: rgba(200, 16, 46, 0.65);
|
|
background: rgba(200, 16, 46, 0.04);
|
|
box-shadow: 0 20px 40px rgba(200, 16, 46, 0.1);
|
|
}
|
|
|
|
.card-top-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.year-num {
|
|
font-size: 26px;
|
|
font-weight: 900;
|
|
color: #ffffff;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.card-icon-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.phase-badge-pill {
|
|
align-self: flex-start;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
padding: 5px 10px;
|
|
border-radius: 6px;
|
|
margin-bottom: 18px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.phase-badge-pill.yellow {
|
|
background: rgba(234, 179, 8, 0.12);
|
|
color: #eab308;
|
|
border: 1px solid rgba(234, 179, 8, 0.2);
|
|
}
|
|
|
|
.phase-badge-pill.green {
|
|
background: rgba(34, 197, 94, 0.12);
|
|
color: #22c55e;
|
|
border: 1px solid rgba(34, 197, 94, 0.2);
|
|
}
|
|
|
|
.phase-badge-pill.blue {
|
|
background: rgba(59, 130, 246, 0.12);
|
|
color: #3b82f6;
|
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.phase-badge-pill.white-pill {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
color: #ffffff;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.card-heading {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
margin: 0 0 10px 0 !important;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
.card-text {
|
|
font-size: 13.5px;
|
|
line-height: 1.5;
|
|
color: #a1a1aa !important;
|
|
margin: 0 0 20px 0 !important;
|
|
}
|
|
|
|
.card-pills-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.card-stat-pill-mini {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: #e4e4e7;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
|
|
will-change: transform;
|
|
}
|
|
|
|
.roadmap-col-card:hover .card-stat-pill-mini {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Special destination: Glowing 2030 AI Pulse Layer card */
|
|
.glowing-vision-card {
|
|
background: linear-gradient(135deg, rgba(200, 16, 46, 0.95) 0%, rgba(120, 10, 30, 0.98) 100%) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
|
animation: red-breath 4s infinite ease-in-out;
|
|
}
|
|
|
|
/* Hover scale override for 2030 vision card */
|
|
.glowing-vision-card:hover {
|
|
transform: translateY(-8px) scale(1.03) !important;
|
|
box-shadow: 0 20px 50px rgba(200, 16, 46, 0.7) !important;
|
|
}
|
|
|
|
/* Laser sweeping neon borders on 2030 vision card */
|
|
.glowing-vision-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -1.5px;
|
|
border-radius: 20px;
|
|
background: linear-gradient(90deg, #C8102E, #ff3366, #ff0033, #C8102E);
|
|
background-size: 300% 100%;
|
|
animation: border-sweep 5s linear infinite;
|
|
z-index: -1;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
@keyframes border-sweep {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes red-breath {
|
|
0%, 100% { box-shadow: 0 10px 40px rgba(200, 16, 46, 0.25), inset 0 0 15px rgba(255,255,255,0.05); }
|
|
50% { box-shadow: 0 10px 60px rgba(200, 16, 46, 0.6), inset 0 0 25px rgba(255,255,255,0.1); }
|
|
}
|
|
|
|
.glowing-vision-card .card-stat-pill-mini {
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
.glowing-vision-card:hover .card-stat-pill-mini {
|
|
background: rgba(255, 255, 255, 0.14) !important;
|
|
}
|
|
|
|
.glowing-vision-card .card-text {
|
|
color: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
|
|
/* Floating sparks/particles inside the 2030 vision card */
|
|
.ce-sparkle {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
filter: blur(0.5px);
|
|
}
|
|
.sparkle-1 { left: 15%; bottom: 8%; animation: float-spark 3s infinite ease-in; }
|
|
.sparkle-2 { left: 52%; bottom: 18%; animation: float-spark 4s infinite ease-in; animation-delay: 1.2s; }
|
|
.sparkle-3 { left: 82%; bottom: 12%; animation: float-spark 3.5s infinite ease-in; animation-delay: 2s; }
|
|
|
|
@keyframes float-spark {
|
|
0% { transform: translateY(0); opacity: 0; }
|
|
50% { opacity: 0.9; }
|
|
100% { transform: translateY(-70px); opacity: 0; }
|
|
}
|
|
|
|
/* Responsive Constraints */
|
|
@media (max-width: 1024px) {
|
|
.roadmap-hero-section {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.roadmap-grid-container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.roadmap-track-container {
|
|
padding: 20px 24px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.roadmap-hero-section {
|
|
padding: 60px 16px;
|
|
}
|
|
|
|
.roadmap-grid-container {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.roadmap-track-container {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
|
|
.timeline-horizontal-wrapper {
|
|
width: 100%;
|
|
}
|
|
}
|
|
`}} />
|
|
|
|
<div className="container">
|
|
{/* Header tag and Titles */}
|
|
<div className="vision-tag-top">VISION / 2030</div>
|
|
|
|
<div className="elementor-element elementor-element-54d05ac elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<h3 className="logico-title intelligence-grid-title">
|
|
The <span className="intelligence-grid-title-highlight">Intelligence Grid</span> Behind Every Urban Mile
|
|
</h3>
|
|
<p className="vision-main-subtitle">
|
|
From Hyderabad EV pilot to nationwide AI logistics intelligence by 2030
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Interactive glowing timeline progress track */}
|
|
<div className="roadmap-track-container">
|
|
<span className="roadmap-track-label">ROADMAP TO 2030</span>
|
|
|
|
<div className="timeline-horizontal-wrapper">
|
|
{/* Timeline Track fillers */}
|
|
<div className="timeline-horizontal-line"></div>
|
|
<div
|
|
className="timeline-horizontal-fill"
|
|
style={{ width: getTrackWidth() }}
|
|
></div>
|
|
|
|
{/* Glowing active year nodes */}
|
|
<div className="node-dots-row">
|
|
{ROADMAP_DATA.map((node) => (
|
|
<div
|
|
key={node.year}
|
|
className={`node-dot-item ${activeYear >= node.year ? "active" : ""}`}
|
|
style={{ left: node.trackLeft }}
|
|
>
|
|
{activeYear === node.year && (
|
|
<div className="node-pulse-crown"></div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Circular glowing progress SVG ring */}
|
|
<div className="roadmap-complete-pct-container">
|
|
<span className="roadmap-complete-pct">{activePercent}% COMPLETE →</span>
|
|
<svg width="40" height="40" viewBox="0 0 80 80">
|
|
<circle
|
|
cx="40"
|
|
cy="40"
|
|
r="30"
|
|
fill="none"
|
|
stroke="rgba(255,255,255,0.06)"
|
|
strokeWidth="6"
|
|
/>
|
|
<circle
|
|
className="progress-ring-circle"
|
|
cx="40"
|
|
cy="40"
|
|
r="30"
|
|
fill="none"
|
|
strokeWidth="6"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={strokeOffset}
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 3D Floating Grid cards */}
|
|
<div className="roadmap-grid-container">
|
|
{ROADMAP_DATA.map((card) => {
|
|
const is2030 = card.year === 2030;
|
|
const isActive = activeYear === card.year;
|
|
return (
|
|
<div
|
|
key={card.year}
|
|
onMouseEnter={() => setActiveYear(card.year)}
|
|
className={`roadmap-col-card ${is2030 ? "glowing-vision-card" : ""} ${isActive ? "active" : ""}`}
|
|
data-card={card.year}
|
|
>
|
|
{/* Sparkles particles loop (for 2030 only) */}
|
|
{is2030 && (
|
|
<>
|
|
<span className="ce-sparkle sparkle-1"></span>
|
|
<span className="ce-sparkle sparkle-2"></span>
|
|
<span className="ce-sparkle sparkle-3"></span>
|
|
</>
|
|
)}
|
|
|
|
<div className="card-top-row">
|
|
<span className="year-num">{card.year}</span>
|
|
<div className={`card-icon-badge ${is2030 ? "translucent-white" : ""}`}>
|
|
{card.icon}
|
|
</div>
|
|
</div>
|
|
|
|
<span className={`phase-badge-pill ${card.phaseClass}`}>
|
|
{card.phase}
|
|
</span>
|
|
|
|
<h5 className="card-heading" style={{ color: "white" }}>
|
|
{card.title}
|
|
</h5>
|
|
|
|
<p className="card-text">
|
|
{card.desc}
|
|
</p>
|
|
|
|
<div className="card-pills-stack">
|
|
{card.stats.map((stat, sIndex) => (
|
|
<div
|
|
key={sIndex}
|
|
className={`card-stat-pill-mini ${is2030 ? "translucent-crimson" : ""}`}
|
|
>
|
|
{stat.icon}
|
|
<span>{stat.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|