update home,about,solutions
This commit is contained in:
@@ -1,206 +1,535 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import Image from "next/image";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
}
|
||||
|
||||
const ACCORDION_DATA = [
|
||||
{
|
||||
index: 1,
|
||||
num: "01",
|
||||
title: "Battery-First Planning",
|
||||
desc: "Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought."
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
num: "02",
|
||||
title: "Energy-Aware Routing",
|
||||
desc: "Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency."
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
num: "03",
|
||||
title: "Smart Charging Integration",
|
||||
desc: "Seamless coordination with charging infrastructure to eliminate range anxiety for drivers."
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
num: "04",
|
||||
title: "Carbon Footprint Tracking",
|
||||
desc: "Real-time emissions monitoring and sustainability reports for every delivery."
|
||||
}
|
||||
];
|
||||
|
||||
export default function EVLogisticSection() {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(1);
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(4); // Default to item 4 open to match user's screenshot layout
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const imageWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
const toggleAccordion = (index: number) => {
|
||||
setOpenIndex((prev) => (prev === index ? null : index));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
const img = imageRef.current;
|
||||
const imgWrapper = imageWrapperRef.current;
|
||||
if (!container || !img || !imgWrapper) return;
|
||||
|
||||
// 1. Parent Wrapper Loop: Slow Looping float
|
||||
const floatAnim = gsap.to(imgWrapper, {
|
||||
y: "-=10",
|
||||
duration: 4.5,
|
||||
ease: "sine.inOut",
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
});
|
||||
|
||||
// 2. Premium Entrance Animation on Scroll (ScrollTrigger based)
|
||||
const entryTl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: container,
|
||||
start: "top 80%",
|
||||
toggleActions: "play none none none",
|
||||
}
|
||||
});
|
||||
|
||||
entryTl
|
||||
.to(container.querySelector(".ev-logistic-kicker"), {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
letterSpacing: "3px", // Kinetic letter-spacing track expand effect!
|
||||
duration: 0.8,
|
||||
ease: "power3.out",
|
||||
})
|
||||
.to(container.querySelectorAll(".ev-char"), {
|
||||
y: "0%",
|
||||
opacity: 1,
|
||||
duration: 0.95,
|
||||
stagger: 0.02, // Rapid letter-by-letter wave reveal!
|
||||
ease: "power4.out",
|
||||
}, "-=0.45")
|
||||
.to(container.querySelectorAll(".ev-logistic-accordion-item"), {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.08,
|
||||
ease: "power3.out",
|
||||
}, "-=0.6")
|
||||
.fromTo(img, {
|
||||
opacity: 0,
|
||||
scale: 0.95,
|
||||
}, {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 1.0,
|
||||
ease: "power4.out",
|
||||
}, "-=0.8");
|
||||
|
||||
return () => {
|
||||
floatAnim.kill();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const headingText = "LOGISTICS BUILT FOR ELECTRIC VEHICLES";
|
||||
const headingWords = headingText.split(" ");
|
||||
|
||||
return (
|
||||
<div className="elementor-63 miletruth-hero about-us-hero" style={{ position: "relative", zIndex: 1 }}>
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* Custom CSS Scoped to EV Logistics Section - New Premium Look */
|
||||
.ev-logistic-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 1320px;
|
||||
margin: 10px auto 120px auto; /* Centered horizontally with auto margins */
|
||||
padding: 80px 60px; /* Restored original balanced left/right paddings */
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
gap: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ENLARGED Left Column - Image columns takes up 60% for high visual weight */
|
||||
.ev-logistic-image-col {
|
||||
flex: 1 1 60%;
|
||||
max-width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start; /* Align left edge */
|
||||
position: relative;
|
||||
min-height: 580px;
|
||||
margin-left: -150px; /* Shifted left towards boundary */
|
||||
}
|
||||
|
||||
/* Branded glow spotlight halo behind the vehicle */
|
||||
.ev-logistic-image-glow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(192, 18, 39, 0.05) 0%, rgba(192, 18, 39, 0.01) 55%, transparent 75%);
|
||||
filter: blur(54px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Increased max-width wrapper so image scales much larger */
|
||||
.ev-logistic-image-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 1000px; /* Enlarged vehicle size */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
will-change: transform;
|
||||
transform: scale(1.25);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.ev-logistic-image-wrapper img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: none; /* Blends solid white JPEG edges seamlessly into pure white background */
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Balanced right column - takes up 40% for crisp textual reading */
|
||||
.ev-logistic-content-col {
|
||||
flex: 1 1 40%;
|
||||
max-width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ev-logistic-kicker {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px; /* Expands to 3px on scroll */
|
||||
text-transform: lowercase;
|
||||
color: #888888;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 10px; /* Shifted exactly 10px to the right as requested */
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
will-change: transform, opacity, letter-spacing;
|
||||
}
|
||||
|
||||
.ev-logistic-title-wrapper {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
/* Expanded clean headings look from the screenshot */
|
||||
.ev-logistic-title {
|
||||
font-size: clamp(45px, 6.2vw, 96px);
|
||||
font-weight: 500;
|
||||
line-height: 0.95;
|
||||
text-transform: uppercase;
|
||||
color: #111111;
|
||||
margin: 0 10px 0 0; /* Clean margin-right to shift title away from borders */
|
||||
letter-spacing: -1.8px;
|
||||
}
|
||||
|
||||
/* CSS for robust letter-by-letter animation wrapping */
|
||||
.ev-word-inline {
|
||||
display: inline-block;
|
||||
white-space: nowrap; /* Prevents awkward character line breaks */
|
||||
}
|
||||
|
||||
.ev-char-wrapper {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ev-char {
|
||||
display: inline-block;
|
||||
transform: translateY(110%);
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.ev-char-space {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sleek horizontal grid borders */
|
||||
.ev-logistic-accordion-item {
|
||||
width: 100%;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
will-change: transform, opacity;
|
||||
transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-item:last-child {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Soft highlight on row hover */
|
||||
.ev-logistic-accordion-item:hover {
|
||||
background: rgba(192, 18, 39, 0.015);
|
||||
}
|
||||
|
||||
/* Spacious row padding for luxurious design - INCREASED font size for headers */
|
||||
.ev-logistic-accordion-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28px 16px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(24px, 2.2vw, 30px); /* Increased to clamp up to 30px! */
|
||||
font-weight: 700;
|
||||
color: #111111;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-header span:first-child {
|
||||
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Row text horizontal slide nudge */
|
||||
.ev-logistic-accordion-header:hover {
|
||||
color: #c01227;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-header:hover span:first-child {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-arrow-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-arrow-container svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
/* Inactive arrows: point down-right ↘ */
|
||||
.ev-logistic-accordion-item:not(.active) .ev-logistic-accordion-arrow-container {
|
||||
transform: rotate(90deg);
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* Active arrows: point up-right ↗ in brand red */
|
||||
.ev-logistic-accordion-item.active .ev-logistic-accordion-arrow-container {
|
||||
transform: rotate(0deg);
|
||||
color: #c01227;
|
||||
}
|
||||
|
||||
/* Hover: rotate smooth to diagonal up-right */
|
||||
.ev-logistic-accordion-header:hover .ev-logistic-accordion-arrow-container {
|
||||
transform: rotate(0deg);
|
||||
color: #c01227;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-content {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transition: max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-item.active .ev-logistic-accordion-content {
|
||||
max-height: 160px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Balanced text spacing inside descriptions - INCREASED font size for descriptions */
|
||||
.ev-logistic-accordion-content-inner {
|
||||
padding: 0 16px 28px 16px;
|
||||
font-size: clamp(18px, 1.5vw, 20px); /* Increased to clamp up to 20px! */
|
||||
line-height: 1.6;
|
||||
color: #555555;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Underline track & sweeping active red bar */
|
||||
.ev-logistic-accordion-progress-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1.5px;
|
||||
background: transparent;
|
||||
margin-top: -1.5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-progress-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #c01227;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-item.active .ev-logistic-accordion-progress-bar {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
/* Responsiveness constraints */
|
||||
@media (max-width: 1024px) {
|
||||
.ev-logistic-section {
|
||||
flex-direction: column;
|
||||
padding: 60px 24px;
|
||||
gap: 50px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.ev-logistic-image-col {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
min-height: auto;
|
||||
margin-left: 0; /* Reset margins on mobile */
|
||||
justify-content: center; /* Center layout on mobile */
|
||||
}
|
||||
|
||||
.ev-logistic-image-wrapper {
|
||||
max-width: 580px;
|
||||
transform: none; /* Reset scaling on mobile */
|
||||
}
|
||||
|
||||
.ev-logistic-content-col {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ev-logistic-title {
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ev-logistic-section {
|
||||
padding: 40px 16px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.ev-logistic-image-wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ev-logistic-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-header {
|
||||
font-size: 19px;
|
||||
padding: 22px 8px;
|
||||
}
|
||||
|
||||
.ev-logistic-accordion-content-inner {
|
||||
padding: 0;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "180px" }}
|
||||
className="elementor-element ev-log elementor-element-ead59d3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent"
|
||||
data-id="ead59d3"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
ref={containerRef}
|
||||
className="ev-logistic-section"
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-f35119c elementor-widget__width-initial elementor-absolute elementor-widget elementor-widget-image"
|
||||
data-id="f35119c"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
{/* Left Column: Enlarged Floating Wrapper & Ambient glow */}
|
||||
<div className="ev-logistic-image-col">
|
||||
<div className="ev-logistic-image-glow"></div>
|
||||
|
||||
<div ref={imageWrapperRef} className="ev-logistic-image-wrapper">
|
||||
<Image
|
||||
ref={imageRef as any}
|
||||
src="/images/ev.jpeg"
|
||||
alt="EV Logistics"
|
||||
width={1050}
|
||||
height={854}
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-56ecbb3 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="56ecbb3"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
>
|
||||
<div className="e-con-inner">
|
||||
<div
|
||||
className="elementor-element elementor-element-47f8cbe e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="47f8cbe"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
>
|
||||
|
||||
{/* Right Column: Refined Accordion list with letter-by-letter animation */}
|
||||
<div className="ev-logistic-content-col">
|
||||
{/* Animated features kicker */}
|
||||
<div className="ev-logistic-kicker">/ features /</div>
|
||||
|
||||
{/* Character-by-character masked entrance wave reveal on scroll */}
|
||||
<div className="ev-logistic-title-wrapper">
|
||||
<h3 className="ev-logistic-title">
|
||||
{headingWords.map((word, wordIndex) => (
|
||||
<span key={wordIndex} className="ev-word-inline">
|
||||
{word.split("").map((letter, letterIndex) => (
|
||||
<span key={letterIndex} className="ev-char-wrapper">
|
||||
<span className="ev-char">{letter}</span>
|
||||
</span>
|
||||
))}
|
||||
<span className="ev-char-space"> </span>
|
||||
</span>
|
||||
))}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="ev-logistic-accordion">
|
||||
{ACCORDION_DATA.map((item) => (
|
||||
<div
|
||||
className="elementor-element elementor-element-cd6daaf elementor-widget elementor-widget-logico_heading"
|
||||
data-id="cd6daaf"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
key={item.index}
|
||||
className={`ev-logistic-accordion-item ${openIndex === item.index ? "active" : ""}`}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ features /</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-1b3f232 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading"
|
||||
data-id="1b3f232"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title">Logistics Built for Electric Vehicles</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-9b7e9c9 elementor-widget__width-initial elementor-widget elementor-widget-accordion"
|
||||
data-id="9b7e9c9"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-accordion">
|
||||
|
||||
{/* Accordion 1 */}
|
||||
<div className="elementor-accordion-item">
|
||||
<div
|
||||
className={`elementor-tab-title ${openIndex === 1 ? "elementor-active" : ""}`}
|
||||
role="button"
|
||||
aria-expanded={openIndex === 1}
|
||||
onClick={() => toggleAccordion(1)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span className="elementor-accordion-icon-closed" style={{ display: openIndex === 1 ? "none" : "inline" }}>
|
||||
<i className="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span className="elementor-accordion-icon-opened" style={{ display: openIndex === 1 ? "inline" : "none" }}>
|
||||
<i className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span className="elementor-accordion-title">01. Battery-First Planning</span>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-tab-content elementor-clearfix"
|
||||
role="region"
|
||||
style={{ display: openIndex === 1 ? "block" : "none" }}
|
||||
>
|
||||
<p>Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accordion 2 */}
|
||||
<div className="elementor-accordion-item">
|
||||
<div
|
||||
className={`elementor-tab-title ${openIndex === 2 ? "elementor-active" : ""}`}
|
||||
role="button"
|
||||
aria-expanded={openIndex === 2}
|
||||
onClick={() => toggleAccordion(2)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span className="elementor-accordion-icon-closed" style={{ display: openIndex === 2 ? "none" : "inline" }}>
|
||||
<i className="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span className="elementor-accordion-icon-opened" style={{ display: openIndex === 2 ? "inline" : "none" }}>
|
||||
<i className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span className="elementor-accordion-title">02. Energy-Aware Routing</span>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-tab-content elementor-clearfix"
|
||||
role="region"
|
||||
style={{ display: openIndex === 2 ? "block" : "none" }}
|
||||
>
|
||||
<p>Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accordion 3 */}
|
||||
<div className="elementor-accordion-item">
|
||||
<div
|
||||
className={`elementor-tab-title ${openIndex === 3 ? "elementor-active" : ""}`}
|
||||
role="button"
|
||||
aria-expanded={openIndex === 3}
|
||||
onClick={() => toggleAccordion(3)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span className="elementor-accordion-icon-closed" style={{ display: openIndex === 3 ? "none" : "inline" }}>
|
||||
<i className="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span className="elementor-accordion-icon-opened" style={{ display: openIndex === 3 ? "inline" : "none" }}>
|
||||
<i className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span className="elementor-accordion-title">03. Smart Charging Integration</span>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-tab-content elementor-clearfix"
|
||||
role="region"
|
||||
style={{ display: openIndex === 3 ? "block" : "none" }}
|
||||
>
|
||||
<p>Seamless coordination with charging infrastructure to eliminate range anxiety for drivers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accordion 4 */}
|
||||
<div className="elementor-accordion-item">
|
||||
<div
|
||||
className={`elementor-tab-title ${openIndex === 4 ? "elementor-active" : ""}`}
|
||||
role="button"
|
||||
aria-expanded={openIndex === 4}
|
||||
onClick={() => toggleAccordion(4)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span className="elementor-accordion-icon-closed" style={{ display: openIndex === 4 ? "none" : "inline" }}>
|
||||
<i className="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span className="elementor-accordion-icon-opened" style={{ display: openIndex === 4 ? "inline" : "none" }}>
|
||||
<i className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span className="elementor-accordion-title">04. Carbon Footprint Tracking</span>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-tab-content elementor-clearfix"
|
||||
role="region"
|
||||
style={{ display: openIndex === 4 ? "block" : "none" }}
|
||||
>
|
||||
<p>Real-time emissions monitoring and sustainability reports for every delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="ev-logistic-accordion-header"
|
||||
onClick={() => toggleAccordion(item.index)}
|
||||
aria-expanded={openIndex === item.index}
|
||||
>
|
||||
<span>{item.num}. {item.title}</span>
|
||||
<span className="ev-logistic-accordion-arrow-container">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="7" y1="17" x2="17" y2="7"></line>
|
||||
<polyline points="7 7 17 7 17 17"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div className="ev-logistic-accordion-content">
|
||||
<div className="ev-logistic-accordion-content-inner">
|
||||
{/* Kinetic slide-up and fade subtitle reveal */}
|
||||
<p style={{
|
||||
transform: openIndex === item.index ? "translateY(0)" : "translateY(12px)",
|
||||
opacity: openIndex === item.index ? 1 : 0,
|
||||
transition: "transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease",
|
||||
transitionDelay: "0.08s",
|
||||
margin: 0
|
||||
}}>
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* Underline track & sweep animated red bar */}
|
||||
<div className="ev-logistic-accordion-progress-track">
|
||||
<div className="ev-logistic-accordion-progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user