diff --git a/frontend/src/components/ui/button.jsx b/frontend/src/components/ui/button.jsx index d25e29a..6fa9c1c 100644 --- a/frontend/src/components/ui/button.jsx +++ b/frontend/src/components/ui/button.jsx @@ -1,10 +1,10 @@ import React from "react"; export function Button({ variant = "primary", size = "md", className = "", children, disabled, ...props }) { - const base = "font-extrabold rounded-2xl transition-all duration-200 flex items-center justify-center gap-2 active:scale-95 disabled:opacity-50 disabled:pointer-events-none disabled:active:scale-100"; + const base = "font-extrabold rounded-lg transition-all duration-200 flex items-center justify-center gap-2 active:scale-95 disabled:opacity-50 disabled:pointer-events-none disabled:active:scale-100"; const variants = { - primary: "bg-gradient-to-r from-rose-600 to-rose-500 hover:from-rose-500 hover:to-rose-600 text-white shadow-lg shadow-rose-600/30 hover:shadow-rose-600/50", + primary: "bg-gradient-to-r from-lime-400 to-lime-300 hover:from-lime-300 hover:to-lime-400 text-slate-950 shadow-lg shadow-lime-400/20 hover:shadow-lime-400/35", secondary: "bg-slate-900 hover:bg-slate-800 text-white border border-slate-800 hover:border-slate-700", ghost: "bg-transparent text-slate-300 hover:text-white hover:bg-slate-800/60", success: "bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-600 text-white shadow-lg shadow-emerald-600/30", diff --git a/frontend/src/index.css b/frontend/src/index.css index 3923905..1037e52 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,19 +1,47 @@ +@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); @import "tailwindcss"; -@layer base { - body { - @apply bg-gradient-to-br from-indigo-950 via-purple-950 to-slate-900 text-white font-sans antialiased; - } -} +:root { font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif; color: #111827; background: #fafafa; font-synthesis: none; } +html { scroll-behavior: smooth; } +html, body, #root { width: 100%; min-height: 100%; margin: 0; padding: 0; } +body { overflow-x: hidden; } +button, input { font: inherit; } +a { text-decoration: none; } -.custom-popup .leaflet-popup-content-wrapper { - background-color: #1e1b4b !important; - color: #f8fafc !important; - border-radius: 1rem !important; - border: 1px solid #6366f1 !important; - box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3) !important; -} +/* RouteIQ landing page */ +.routeiq-home { background: #fafafa; color: #111827; overflow: hidden; } +.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; position: relative; } +.hero { min-height: 748px; padding: 70px 0 0; background: #111827; color: #f9fafb; position: relative; overflow: hidden; isolation: isolate; } +.hero-grid { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(148,163,184,.09) 1px, transparent 1px),linear-gradient(90deg, rgba(148,163,184,.09) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black 35%, transparent 92%); } +.hero-orb { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; } +.hero-orb-one { height: 620px; width: 620px; background: rgba(37,99,235,.18); right: -210px; top: -180px; } +.hero-orb-two { height: 350px; width: 350px; background: rgba(132,204,22,.12); left: 37%; top: 280px; filter: blur(90px); } +.hero-content { min-height: 570px; display: grid; grid-template-columns: .89fr 1.11fr; align-items: center; gap: 42px; z-index: 1; } +.hero-copy { padding: 30px 0 60px; } +.eyebrow, .section-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; } +.eyebrow { color: #c4f16b; background: rgba(163,230,53,.08); border: 1px solid rgba(190,242,100,.18); padding: 7px 10px; border-radius: 6px; } +.pulse-ring { width: 7px; height: 7px; border-radius: 50%; background: #a3e635; box-shadow: 0 0 0 5px rgba(163,230,53,.1); } +.hero h1 { font-size: clamp(44px, 5.1vw, 71px); line-height: 1.045; letter-spacing: -.06em; margin: 23px 0 20px; font-weight: 800; max-width: 680px; } +.hero h1 em { font-style: normal; color: #b8f34b; } +.hero-lede { color: #b7c0d0; font-size: 17px; line-height: 1.7; max-width: 540px; margin: 0; } +.hero-actions { display: flex; gap: 12px; align-items: center; margin-top: 30px; flex-wrap: wrap; } +.button-primary, .button-secondary { min-height: 48px; padding: 0 19px; border-radius: 8px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } +.button-primary { color: #17200a; background: #b8f34b; box-shadow: 0 10px 24px rgba(132,204,22,.16); } +.button-primary:hover { background: #d0fa7e; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(132,204,22,.25); } +.button-secondary { border: 1px solid #475569; color: #f8fafc; background: rgba(30,41,59,.44); } +.button-secondary:hover { border-color: #94a3b8; background: #273449; transform: translateY(-2px); } +.play-icon { height: 21px; width: 21px; border-radius: 50%; background: #f8fafc; color: #182133; display: grid; place-items: center; } +.hero-proof { margin-top: 29px; display: flex; gap: 12px; align-items: center; color: #94a3b8; font-size: 11px; } +.hero-proof b { color: #e2e8f0; }.avatars { display: flex; padding-left: 6px; }.avatars i { height: 25px; width: 25px; border-radius: 50%; margin-left: -6px; border: 2px solid #111827; display: grid; place-items: center; font-size: 8px; font-style: normal; font-weight: 800; color: #17200a; background: #d9f99d; }.avatars i:nth-child(2) { background: #93c5fd; }.avatars i:nth-child(3) { background: #fda4af; }.avatars i:last-child { color: #cbd5e1; background: #334155; } +.hero-visual { position: relative; margin-right: -130px; padding: 14px 0 26px; } +.dashboard-shell { overflow: hidden; border: 1px solid rgba(148,163,184,.3); border-radius: 12px; background: #f8fafc; color: #182233; box-shadow: 0 35px 80px rgba(0,0,0,.36), 0 0 0 10px rgba(255,255,255,.025); width: 730px; max-width: 100%; } +.dashboard-topbar { height: 47px; padding: 0 16px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #e2e8f0; background: #fff; font-size: 10px; font-weight: 800; }.dashboard-brand { display: flex; align-items: center; gap: 6px; }.mini-mark { color: #4d7c0f; background: #d9f99d; width: 23px; height: 23px; border-radius: 5px; display: grid; place-items:center; }.dashboard-divider { height: 12px; width: 1px; background:#cbd5e1; margin-left: 2px; }.dashboard-status { margin-left: auto; color: #64748b; display:flex; gap:5px; align-items:center; }.status-dot,.live-dot { width: 6px; height: 6px; display:inline-block; border-radius: 50%; background:#84cc16; box-shadow:0 0 0 3px rgba(132,204,22,.14); }.dashboard-avatar { background:#172033; color:#d9f99d; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:8px; } +.dashboard-body { display:grid; grid-template-columns: 116px 1fr 164px; height: 370px; }.dashboard-sidebar { background:#fff; padding:16px 10px; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; gap:6px; }.dashboard-sidebar span { display:flex; gap:7px; align-items:center; padding:7px; color:#94a3b8; font-size:9px; font-weight:700; border-radius:5px; }.dashboard-sidebar .side-active { background:#eff6ff; color:#2563eb; }.map-stage { position:relative; overflow:hidden; background:#eaf0e9; background-image: radial-gradient(#c3d5c1 1px, transparent 1px); background-size:14px 14px; }.route-map { width:100%; height:100%; }.road { fill:none; stroke:#fff; stroke-width:19; opacity:.75; }.road-two{stroke-width:14}.road-three{stroke-width:10}.route-line{fill:none;stroke-linecap:round;stroke-width:5;stroke-dasharray:12 8;animation:route-dash 10s linear infinite}.route-line-one{stroke:#84cc16}.route-line-two{stroke:#3b82f6;animation-direction:reverse}.map-node{fill:#3b82f6;stroke:#fff;stroke-width:4}.map-node.origin{fill:#84cc16}.vehicle{fill:#172033; animation: vehicle-bob 3s ease-in-out infinite}.map-pulse { position:absolute; top:12px; left:13px; padding:6px 8px; color:#334155; border:1px solid rgba(148,163,184,.35); background:rgba(255,255,255,.8); backdrop-filter:blur(6px); border-radius:5px; font-size:8px; font-weight:800; display:flex; gap:5px; align-items:center; }.map-pulse span{height:6px;width:6px;border-radius:50%;background:#84cc16}.map-zoom { position:absolute; bottom:13px; right:13px; display:flex; flex-direction:column; border:1px solid #dbe3ea; overflow:hidden; border-radius:5px; }.map-zoom button { height:24px; width:24px; border:0; background:#fff; color:#334155; cursor:pointer; font-size:14px; }.map-zoom button+button{border-top:1px solid #e2e8f0}.map-label { position:absolute; font-size:9px;color:#829180;font-weight:700; }.map-label-a{left:31%;top:28%}.map-label-b{right:18%;top:20%}.map-label-c{left:17%;bottom:18%} +.dashboard-panel { background:#fff; padding:16px 11px; border-left:1px solid #e2e8f0; }.panel-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:800;margin-bottom:12px}.panel-heading button{border:0;background:none;color:#2563eb;font-size:8px;font-weight:700}.route-row{display:grid;grid-template-columns:7px 1fr auto;gap:6px;margin:10px 0;align-items:center}.route-color{width:6px;height:24px;border-radius:5px;background:#84cc16}.route-color.blue{background:#3b82f6}.route-color.purple{background:#a78bfa}.route-row b{font-size:8px;display:block}.route-row small{font-size:7px;color:#94a3b8;display:block;margin-top:2px}.route-row strong{font-family:"DM Mono";font-size:8px}.panel-insight{display:flex;gap:5px;padding:7px;background:#f7fee7;border:1px solid #ecfccb;border-radius:5px;margin-top:14px;font-size:7px;color:#4d7c0f;align-items:flex-start}.panel-insight b{display:block}.panel-insight svg:last-child{margin-left:auto;flex:none} +.float-card { position:absolute; z-index:2; background:rgba(255,255,255,.94); color:#172033; box-shadow:0 15px 35px rgba(0,0,0,.24); border:1px solid #e2e8f0; border-radius:9px; display:flex; gap:9px; padding:10px; }.float-card small{font-size:8px;color:#64748b;display:block}.float-card strong{display:inline-block;font-family:"DM Mono";font-size:15px;margin-top:2px}.savings-card{top:-12px;right:24px}.float-icon,.eta-check{height:26px;width:26px;display:grid;place-items:center;border-radius:7px}.float-icon{background:#ecfccb;color:#4d7c0f}.savings-card em{font-size:8px;font-style:normal;color:#65a30d;margin-left:4px;font-weight:800}.eta-card{bottom:4px;left:-44px;align-items:center}.eta-check{background:#dcfce7;color:#16a34a}.tiny-chart{color:#65a30d;font-size:27px;line-height:1}.logo-strip { height:106px; display:flex; align-items:center; justify-content:space-between; gap:28px; color:#64748b; font-size:10px; white-space:nowrap; border-top:1px solid rgba(148,163,184,.15); }.logo-strip b{font-size:13px;letter-spacing:.06em;color:#94a3b8}.logo-strip b:nth-last-child(2){font-style:italic}.metrics-section{background:#f2f5ef;border-bottom:1px solid #e4e8e2}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:33px 0;gap:22px}.metric-grid>div{padding-left:26px;border-left:1px solid #d7ded4}.metric-grid>div:first-child{padding-left:0;border:0}.metric-grid strong{font-family:"DM Mono";font-size:26px;font-weight:500;letter-spacing:-.07em}.metric-grid strong span{color:#65a30d}.metric-grid p{color:#64748b;margin:5px 0 0;font-size:10px;font-weight:700}.live-dot{vertical-align:middle;margin-left:5px;width:5px;height:5px}.section{padding:112px 0}.light-section{background:#fafafa}.section-heading{max-width:660px}.section-heading.centered{text-align:center;margin:0 auto 52px}.section-tag{color:#5b730f;margin:0}.section-tag>span{display:inline-block;width:17px;height:1px;background:#84cc16}.section-heading h2,.workflow-copy h2,.security-content h2,.cta-panel h2{font-size:clamp(33px,4vw,50px);line-height:1.1;letter-spacing:-.055em;font-weight:800;margin:14px 0}.section-heading p,.workflow-copy>p{color:#64748b;font-size:15px;line-height:1.7;margin:0 auto;max-width:550px}.bento-grid{display:grid;grid-template-columns:1.15fr .85fr 1fr;grid-template-rows:300px 270px;gap:15px}.bento-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;position:relative;overflow:hidden;padding:30px;display:flex;flex-direction:column}.bento-card h3{font-size:19px;letter-spacing:-.035em;line-height:1.25;margin:14px 0 8px}.bento-card p{font-size:12px;line-height:1.7;color:#64748b;margin:0;max-width:300px}.icon-tile{height:38px;width:38px;display:grid;place-items:center;color:#4d7c0f;background:#ecfccb;border-radius:8px}.icon-tile.blue{color:#2563eb;background:#dbeafe}.icon-tile.gold{color:#a16207;background:#fef3c7}.bento-map{grid-column:span 2;flex-direction:row}.bento-map a,.case-result a,.text-link{font-size:11px;font-weight:800;color:#4d7c0f;display:flex;align-items:center;gap:5px;margin-top:18px}.mini-route-art{flex:1;min-width:220px;position:relative;margin:-30px -30px -30px 10px;background:#f3f8f2;background-image:radial-gradient(#d0e1cf 1px,transparent 1px);background-size:13px 13px}.mini-route-line{position:absolute;width:240px;height:150px;border:4px dashed #84cc16;border-left:0;border-bottom:0;border-radius:0 100% 0 0;transform:rotate(-16deg);right:15px;top:64px}.mini-pin{position:absolute;width:13px;height:13px;background:#fff;border:4px solid #3b82f6;border-radius:50%}.pin-1{top:60px;right:51px}.pin-2{top:137px;right:130px}.pin-3{bottom:43px;left:38px;border-color:#84cc16}.mini-route-art b{position:absolute;bottom:24px;right:21px;color:#4d7c0f;background:#fff;padding:6px;border:1px solid #d9f99d;border-radius:5px;font-size:9px}.bento-data{grid-row:span 2;justify-content:space-between}.bar-art{height:165px;display:flex;align-items:end;gap:11px;padding:0 12px;border-bottom:1px solid #e2e8f0;background:linear-gradient(180deg,transparent, #f8fafc)}.bar-art span{flex:1;border-radius:5px 5px 0 0;background:#dbeafe}.bar-art span:nth-child(4),.bar-art span:nth-child(6){background:#3b82f6}.bento-ai{background:#172033;color:#fff;border:0}.bento-ai h3{font-size:21px;margin-top:auto}.bento-ai p{color:#aeb9c9}.ai-glow{height:48px;width:48px;display:grid;place-items:center;color:#b8f34b;background:rgba(163,230,53,.1);border:1px solid rgba(190,242,100,.16);border-radius:9px;box-shadow:0 0 40px rgba(132,204,22,.15)}.prompt-pill{margin-top:19px;display:flex;gap:6px;align-items:center;font-size:9px;font-weight:700;color:#d9f99d;background:rgba(255,255,255,.06);padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:6px}.prompt-pill svg:last-child{margin-left:auto}.bento-alert{padding-top:74px}.alert-card{position:absolute;display:flex;gap:8px;align-items:center;top:17px;left:18px;right:18px;padding:9px;background:#fff;border:1px solid #e2e8f0;border-radius:7px;box-shadow:0 8px 19px rgba(15,23,42,.08)}.alert-card>span{height:27px;width:27px;display:grid;place-items:center;background:#ecfccb;color:#4d7c0f;border-radius:6px}.alert-card b{font-size:9px}.alert-card p{font-size:8px;line-height:1.2}.alert-card>svg{margin-left:auto;color:#65a30d} +.workflow-section{background:#f1f5f2;border-top:1px solid #e2e8e4;border-bottom:1px solid #e2e8e4}.workflow-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.workflow-copy>p{margin-left:0}.steps{border-top:1px solid #cfd8d0}.steps article{display:grid;grid-template-columns:60px 1fr;gap:16px;padding:21px 0;border-bottom:1px solid #cfd8d0}.steps article>span{font-family:"DM Mono";font-size:12px;color:#65a30d}.steps h3{font-size:15px;margin:0 0 6px;letter-spacing:-.02em}.steps p{font-size:12px;color:#64748b;margin:0;line-height:1.6}.quote-section{padding:105px 0;background:#fff}.quote-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:105px;align-items:center}blockquote{font-size:clamp(24px,3vw,37px);line-height:1.25;letter-spacing:-.045em;font-weight:700;margin:18px 0 27px;max-width:650px}.person{display:flex;gap:10px;align-items:center}.person>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#d9f99d;color:#3f6212;font-size:10px;font-weight:800}.person p{margin:0;font-size:10px}.person b,.person small{display:block}.person small{color:#64748b;margin-top:3px}.case-result{border:1px solid #dce4db;border-radius:11px;background:#f7faf6;padding:28px}.case-result>span{color:#64748b;font-size:10px;font-weight:800}.case-result strong{font-family:"DM Mono";display:block;font-size:48px;letter-spacing:-.08em;font-weight:500;margin:19px 0 2px}.case-result>p{color:#65a30d;font-weight:800;font-size:11px;margin:0}.case-result hr{border:0;border-top:1px solid #dce4db;margin:20px 0}.case-result div{display:grid;gap:10px}.case-result div span{font-size:10px;display:flex;align-items:center;gap:7px;color:#475569}.case-result div svg{color:#65a30d}.case-result a{margin-top:23px}.security-section{background:#172033;color:#fff;padding:54px 0}.security-content{display:flex;align-items:center;justify-content:space-between;gap:40px}.security-content .section-tag{color:#c8ef7b}.security-content h2{font-size:31px;margin:10px 0 0}.security-list{display:flex;gap:27px;flex-wrap:wrap}.security-list span{font-size:11px;font-weight:700;color:#cbd5e1;display:flex;align-items:center;gap:8px}.security-list svg{color:#b8f34b}.final-cta{background:#fafafa;padding:92px 0}.cta-panel{min-height:305px;background:#e9f6c7;border-radius:13px;padding:52px 70px;overflow:hidden}.cta-panel h2{font-size:42px;margin:12px 0}.cta-panel>div:not(.cta-grid):not(.cta-route){position:relative;z-index:1}.cta-panel p{font-size:13px;color:#52602e;margin:0}.cta-panel .section-tag{color:#526a14}.dark-secondary{border-color:#b8ce7d;background:transparent;color:#344012}.dark-secondary:hover{background:#f2fbcf;border-color:#97ae5d}.cta-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(90,112,29,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(90,112,29,.09) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent 35%,black)}.cta-route{position:absolute;right:9%;top:62px;display:grid;place-items:center;color:#72a30c;transform:rotate(-9deg)}.cta-route svg{height:100px;width:100px;stroke-width:.9}.cta-route span{font-family:"DM Mono";position:absolute;font-size:16px;color:#3f6212}.cta-route small{position:absolute;bottom:-16px;white-space:nowrap;font-size:9px;color:#52602e} +@keyframes route-dash { to { stroke-dashoffset: -240; } } @keyframes vehicle-bob { 50% { transform: translate(7px,-5px); } } +@media (max-width: 960px){.hero{padding-top:38px}.hero-content{grid-template-columns:1fr;gap:10px}.hero-copy{padding-bottom:12px}.hero-visual{margin:0 0 -10px;padding:8px 0 26px}.dashboard-shell{width:100%}.logo-strip{overflow:hidden;justify-content:flex-start}.logo-strip b:nth-of-type(n+4){display:none}.bento-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.bento-map{grid-column:span 2}.bento-data{grid-row:auto}.workflow-layout,.quote-layout{gap:50px}.security-content{align-items:flex-start;flex-direction:column}.cta-panel{padding:42px}.cta-route{right:7%;opacity:.6}.dashboard-body{grid-template-columns:100px 1fr 150px}} +@media (max-width: 640px){.shell{width:min(100% - 32px,1180px)}.hero{min-height:0}.hero h1{font-size:44px}.hero-lede{font-size:15px}.dashboard-sidebar,.dashboard-panel{display:none}.dashboard-body{display:block}.map-stage{height:275px}.float-card{transform:scale(.85);transform-origin:bottom right}.savings-card{right:-12px}.eta-card{left:-12px}.logo-strip{height:72px;gap:22px}.logo-strip span{display:none}.logo-strip b{font-size:10px}.logo-strip b:nth-of-type(n+4){display:none}.metric-grid{grid-template-columns:1fr 1fr;gap:23px;padding:27px 0}.metric-grid>div:nth-child(3){padding-left:0;border:0}.metric-grid strong{font-size:22px}.section{padding:72px 0}.section-heading{margin-bottom:32px!important}.section-heading h2{font-size:34px}.bento-grid{display:flex;flex-direction:column}.bento-card{min-height:235px}.bento-map{min-height:310px;display:block}.mini-route-art{height:145px;margin:20px -30px -30px}.bento-data{min-height:270px}.bar-art{margin-top:24px}.workflow-layout,.quote-layout{grid-template-columns:1fr;gap:39px}.workflow-copy h2{font-size:35px}.quote-section{padding:72px 0}blockquote{font-size:28px}.security-list{gap:17px;display:grid;grid-template-columns:1fr 1fr}.security-list span:last-child{grid-column:span 2}.cta-panel{padding:35px 24px;min-height:350px}.cta-panel h2{font-size:35px}.cta-route{top:auto;bottom:45px;right:13%}.final-cta{padding:56px 0}.hero-actions{margin-top:24px}.button-primary,.button-secondary{width:100%}} -.custom-popup .leaflet-popup-tip { - background-color: #1e1b4b !important; -} +.custom-popup .leaflet-popup-content-wrapper { background-color: #1e293b !important; color: #f8fafc !important; border-radius: 1rem !important; border: 1px solid #475569 !important; box-shadow: 0 10px 25px -5px rgba(15, 23, 42, .3) !important; }.custom-popup .leaflet-popup-tip { background-color: #1e293b !important; } diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 89e129d..915bfd1 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -1,95 +1,138 @@ import React from "react"; import { Link } from "react-router-dom"; -import { useTranslation } from "react-i18next"; -import { Bus, Navigation, Ticket, ShieldCheck, Zap, Radio, Clock } from "lucide-react"; -import BusMapPreview from "../components/BusMapPreview"; -import { Card, CardTitle, CardDescription } from "../components/ui/card"; -import { Badge } from "../components/ui/badge"; -import { Button } from "../components/ui/button"; +import { + ArrowRight, + BarChart3, + BellRing, + Check, + ChevronRight, + Clock3, + CloudCog, + Fuel, + Gauge, + Globe2, + LockKeyhole, + MapPinned, + Play, + Route, + ShieldCheck, + Sparkles, + UsersRound, +} from "lucide-react"; -export default function Home() { - const { t } = useTranslation(); +const partners = ["NORTHSTAR", "ARROW FREIGHT", "CARGOLINE", "MERIDIAN", "VELOCITY", "WILLOW"]; +function RouteDashboard() { return ( -
-
- -
-
- - {t("hero_badge")} - - -

- {t("hero_title_1")}{" "} - - {t("hero_title_2")} - -

- -

- {t("hero_sub")} -

- -
- - - - - - -
+
+
+
RouteIQ Command center
+
Live optimization
+
AK
+
+
+ +
+
Chicago, IL
+
Evanston
+
Oak Park
+ + + + + + + + + + + + + + + + +
Optimizing 32 stops
+
+ +
+
+ ); +} -
- -
- -
- Live Driver Telemetry - - Continuous HTML5 Geolocation streaming directly over WebSockets for zero-latency vehicle coordinate tracking. - - +function SectionTag({ children }) { + return

{children}

; +} - -
- +export default function Home() { + return ( +
+
+
- -
- -
- PWA Offline Ticket Vault - - Service Worker caching & IndexedDB local ticket storage enabling instant ticket validation offline without signal. - - +
+
+
2.4M+

routes optimized

+
31%

average cost reduction

+
98.4%

on-time deliveries

+
14,832

routes optimized today

+
-
-
-

- Interactive Fleet Radar Map -

- - Dynamic Tiles Connected - +
+
+
Built for the moving world

See the smartest way
to run your fleet.

One intelligent command center that makes every decision, mile, and customer promise work harder.

+
+

Routes that adapt before you have to.

Continuously rebalance every stop against traffic, constraints, and real-time fleet signals.

Explore route intelligence
12 min faster
+

Every answer, in view.

Turn fleet activity into actionable performance intelligence.

+

Your always-on
operations copilot.

Ask RouteIQ what to optimize next and act on clear recommendations.

Find my fastest win today
+
Delay prevented

Route 04 rerouted around I-90

Stay ahead of every exception.

Get ahead of late arrivals before they become customer calls.

- -
-
+ +
+
Intelligence that moves

From chaos to clarity
in three moves.

Built around the way dispatch teams actually work—without adding another screen to watch.

See RouteIQ in action
01

Connect your operation

Bring in orders, drivers, constraints, and the systems you already use.

02

Let AI build the best plan

RouteIQ evaluates thousands of route combinations in seconds.

03

Keep every mile on track

Respond to changes with live visibility and proactive recommendations.

+
+ +
Results that speak
“RouteIQ gives our dispatchers the confidence to make the right call in the moment. We've cut our planning time in half.”
AT

Amelia TorresVP of Operations, Northstar Logistics

+ +

Enterprise-grade from day one

Move faster.
Stay in control.

SOC 2 Type II Enterprise SSO GDPR ready
+ +
+
); } diff --git a/frontend/src/pages/Navbar.jsx b/frontend/src/pages/Navbar.jsx index 4457adf..89a4027 100644 --- a/frontend/src/pages/Navbar.jsx +++ b/frontend/src/pages/Navbar.jsx @@ -48,25 +48,25 @@ export default function Navbar() { const navItemClass = (path) => `px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 ${ isActive(path) - ? "bg-rose-600 text-white shadow-lg shadow-rose-600/30" + ? "bg-lime-400 text-slate-950 shadow-lg shadow-lime-400/20" : "text-slate-300 hover:text-white hover:bg-slate-800/80" }`; return (