first commit
This commit is contained in:
200
src/components/sections/IntelligenceGrid.tsx
Normal file
200
src/components/sections/IntelligenceGrid.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import React from "react";
|
||||
|
||||
export default function IntelligenceGrid() {
|
||||
return (
|
||||
<div 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">
|
||||
<section id="hero" className="roadmap-hero-section">
|
||||
{/* Concentric crimson vector curves background */}
|
||||
<div className="crimson-arc-bg"></div>
|
||||
<div className="crimson-arc-bg inner"></div>
|
||||
|
||||
<div className="container">
|
||||
{/* Screen Header Bar */}
|
||||
<div className="screen-header-bar"></div>
|
||||
|
||||
{/* Content Titles */}
|
||||
<div className="vision-tag-top">VISION / 2030</div>
|
||||
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.roadmap-hero-section .intelligence-grid-title {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.roadmap-hero-section .intelligence-grid-title-highlight {
|
||||
color: #c01227 !important;
|
||||
}
|
||||
`}} />
|
||||
|
||||
<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>
|
||||
|
||||
{/* Horizontal Timeline Track Widget */}
|
||||
<div className="roadmap-track-container">
|
||||
<span className="roadmap-track-label">ROADMAP TO 2030</span>
|
||||
<div className="timeline-horizontal-wrapper">
|
||||
<div className="timeline-horizontal-line"></div>
|
||||
<div className="timeline-horizontal-fill"></div>
|
||||
|
||||
{/* Nodes aligned above card columns */}
|
||||
<div className="node-dots-row">
|
||||
<div className="node-dot-item dot-active" style={{ left: "12.5%" }}>
|
||||
<div className="node-pulse-inner"></div>
|
||||
</div>
|
||||
<div className="node-dot-item dot-active" style={{ left: "37.5%" }}>
|
||||
<div className="node-pulse-inner"></div>
|
||||
</div>
|
||||
<div className="node-dot-item dot-active" style={{ left: "62.5%" }}>
|
||||
<div className="node-pulse-inner"></div>
|
||||
</div>
|
||||
<div className="node-dot-item dot-vision-active" style={{ left: "87.5%" }}>
|
||||
<div className="node-pulse-crown"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="roadmap-complete-pct">75% COMPLETE →</span>
|
||||
</div>
|
||||
|
||||
{/* 4-Column Card Grid Side-by-Side */}
|
||||
<div className="roadmap-grid-container">
|
||||
|
||||
{/* Card 1: 2026 */}
|
||||
<div className="roadmap-col-card" data-card="2026">
|
||||
<div className="card-top-row">
|
||||
<span className="year-num">2026</span>
|
||||
<div className="card-icon-badge">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<span className="phase-badge-pill yellow">Pilot Phase</span>
|
||||
<h5 className="card-heading" style={{ color: "white" }}>Hyderabad Pilot</h5>
|
||||
<p className="card-text">
|
||||
Launch operations in Hyderabad with dedicated EV hubs and MileTruth AI v1.0.
|
||||
</p>
|
||||
<div className="card-pills-stack">
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
50-80 orders/day
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
1 city
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
10+ women partners
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2: 2027 */}
|
||||
<div className="roadmap-col-card" data-card="2027">
|
||||
<div className="card-top-row">
|
||||
<span className="year-num">2027</span>
|
||||
<div className="card-icon-badge">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<span className="phase-badge-pill green">Multi-City</span>
|
||||
<h5 className="card-heading" style={{ color: "white" }}>Multi-City Scale</h5>
|
||||
<p className="card-text">
|
||||
Expand to Bengaluru and Chennai, securing key B2B enterprise traction.
|
||||
</p>
|
||||
<div className="card-pills-stack">
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
300-500 orders/day
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
3 cities
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
|
||||
50+ EVs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3: 2028 */}
|
||||
<div className="roadmap-col-card" data-card="2028">
|
||||
<div className="card-top-row">
|
||||
<span className="year-num">2028</span>
|
||||
<div className="card-icon-badge">
|
||||
<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 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.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.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>
|
||||
</div>
|
||||
</div>
|
||||
<span className="phase-badge-pill blue">Platform</span>
|
||||
<h5 className="card-heading" style={{ color: "white" }}>Platform Expansion</h5>
|
||||
<p className="card-text">
|
||||
Scale to 5+ cities. Launch developer API marketplace and Series A readiness.
|
||||
</p>
|
||||
<div className="card-pills-stack">
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
1,200+ orders/day
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
5+ cities
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
|
||||
API marketplace
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 4: 2030 */}
|
||||
<div className="roadmap-col-card glowing-vision-card" data-card="2030">
|
||||
<div className="card-top-row">
|
||||
<span className="year-num">2030</span>
|
||||
<div className="card-icon-badge translucent-white">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<span className="phase-badge-pill white-pill">Vision State</span>
|
||||
<h5 className="card-heading" style={{ color: "white" }}>AI Pulse Layer</h5>
|
||||
<p className="card-text">
|
||||
Nationwide AI logistics grid reaching 15+ cities, empowering female micro-entrepreneurs.
|
||||
</p>
|
||||
<div className="card-pills-stack">
|
||||
<div className="card-stat-pill-mini translucent-crimson">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
5,000+ orders/day
|
||||
</div>
|
||||
<div className="card-stat-pill-mini translucent-crimson">
|
||||
<span className="currency-symbol" style={{ marginRight: "4px" }}>Rs</span> 65 Cr+ revenue
|
||||
</div>
|
||||
<div className="card-stat-pill-mini translucent-crimson">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><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>
|
||||
2,000+ women partners
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user