274 lines
16 KiB
TypeScript
274 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function EVSection() {
|
|
const [hasMounted, setHasMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setHasMounted(true);
|
|
}, []);
|
|
|
|
const renderAnimatedText = () => {
|
|
const lines = [
|
|
{ text: "Built for Electric.", highlight: true },
|
|
{ text: "Not Adapted.", highlight: false }
|
|
];
|
|
|
|
return lines.map((line, lineIdx) => {
|
|
const words = line.text.split(/\s+/);
|
|
return (
|
|
<div key={lineIdx} style={{ display: "block" }}>
|
|
{words.map((word, wordIdx) => {
|
|
const letters = word.split("");
|
|
return (
|
|
<span key={wordIdx} className="word" style={{ display: "inline-block", marginRight: "0.2em", whiteSpace: "nowrap" }}>
|
|
{letters.map((letter, letterIdx) => {
|
|
const delay = (lineIdx * 0.2) + (wordIdx * 0.1) + (letterIdx * 0.03);
|
|
return (
|
|
<span
|
|
key={letterIdx}
|
|
className={`letter ${hasMounted ? "animated" : ""}`}
|
|
style={{
|
|
["--delay" as any]: `${delay}s`,
|
|
}}
|
|
>
|
|
{letter}
|
|
</span>
|
|
);
|
|
})}
|
|
{/* Non-breaking space */}
|
|
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
.logico-title .word {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
margin-right: 0.1em;
|
|
}
|
|
.letter {
|
|
display: inline-block;
|
|
opacity: 0;
|
|
transform: translateY(0.5em);
|
|
}
|
|
.letter.animated {
|
|
animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
|
|
animation-delay: var(--delay);
|
|
}
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
`}} />
|
|
|
|
<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">
|
|
|
|
{/* Parallax placeholder background */}
|
|
<div
|
|
className="elementor-element elementor-element-7da6646 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
|
data-id="7da6646"
|
|
data-element_type="container"
|
|
data-e-type="container"
|
|
data-settings="{"background_background":"classic"}"
|
|
style={{
|
|
backgroundPosition: "center center",
|
|
backgroundImage: "url(/images/home4-banner-4.png)",
|
|
backgroundSize: "cover"
|
|
}}
|
|
></div>
|
|
|
|
<div className="elementor-element elementor-element-8b5d6e6 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8b5d6e6" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-1f766ea e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="1f766ea" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-3b61435 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3b61435" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
|
<div className="elementor-element elementor-element-c364d1c elementor-widget elementor-widget-text-editor" data-id="c364d1c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
|
<div className="elementor-widget-container">
|
|
<p>01</p>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-239afbb elementor-widget elementor-widget-logico_heading" data-id="239afbb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<h5 className="logico-title">EV Logistics</h5>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-0d307dd elementor-widget elementor-widget-text-editor" data-id="0d307dd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
|
<div className="elementor-widget-container">
|
|
<p>Cleaner miles, lower costs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-5aea22e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5aea22e" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-b6e14bd e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b6e14bd" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
|
<div className="e-con-inner">
|
|
<div className="elementor-element elementor-element-90cc867 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="90cc867" data-element_type="container" data-e-type="container">
|
|
|
|
<div className="elementor-element elementor-element-24c0280 elementor-widget__width-inherit elementor-widget elementor-widget-logico_heading" data-id="24c0280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">/ EV-Native Design /</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-2ed47f3 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="2ed47f3" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-36efec7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="36efec7" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-778840d elementor-widget elementor-widget-logico_heading logico_heading_animation" data-id="778840d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<h3 className="logico-title" data-animate="true">
|
|
{renderAnimatedText()}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-bbfb67f elementor-widget elementor-widget-image" data-id="bbfb67f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
|
<div className="elementor-widget-container">
|
|
<img decoding="async" width="626" height="692" src="/images/home4-pic-1.png" className="attachment-full size-full wp-image-6789" alt="EV Truck" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-b2c956f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b2c956f" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-1a450c2 elementor-absolute elementor-widget elementor-widget-image" data-id="1a450c2" data-element_type="widget" data-e-type="widget" data-settings="{"_position":"absolute"}" data-widget_type="image.default">
|
|
<div className="elementor-widget-container">
|
|
<img loading="lazy" decoding="async" width="965" height="474" src="/images/bg-map.png" className="attachment-full size-full wp-image-1148" alt="Map Grid" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Icon Boxes */}
|
|
<div className="elementor-element elementor-element-6b51278 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="6b51278" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="elementor-icon-box-wrapper">
|
|
<div className="elementor-icon-box-icon">
|
|
<span className="elementor-icon">
|
|
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
|
</span>
|
|
</div>
|
|
<div className="elementor-icon-box-content">
|
|
<div className="elementor-icon-box-title">
|
|
<span>Battery-Aware Routing</span>
|
|
</div>
|
|
<p className="elementor-icon-box-description">
|
|
Battery level, health, and degradation are first-class inputs to route optimization.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-e34beb2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="e34beb2" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="elementor-divider">
|
|
<span className="elementor-divider-separator"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-27ba815 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="27ba815" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="elementor-icon-box-wrapper">
|
|
<div className="elementor-icon-box-icon">
|
|
<span className="elementor-icon">
|
|
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
|
</span>
|
|
</div>
|
|
<div className="elementor-icon-box-content">
|
|
<div className="elementor-icon-box-title">
|
|
<span>Charging Integration</span>
|
|
</div>
|
|
<p className="elementor-icon-box-description">
|
|
Seamlessly integrate charging stops without compromising delivery windows.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-6895eb5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6895eb5" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="elementor-divider">
|
|
<span className="elementor-divider-separator"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-332c78f elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="332c78f" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="elementor-icon-box-wrapper">
|
|
<div className="elementor-icon-box-icon">
|
|
<span className="elementor-icon">
|
|
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
|
</span>
|
|
</div>
|
|
<div className="elementor-icon-box-content">
|
|
<div className="elementor-icon-box-title">
|
|
<span>Energy-Optimized Paths</span>
|
|
</div>
|
|
<p className="elementor-icon-box-description">
|
|
Factor in elevation, speed limits, and weather for maximum efficiency.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-6895eb5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6895eb5" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="elementor-divider">
|
|
<span className="elementor-divider-separator"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-332c78f elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="332c78f" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="elementor-icon-box-wrapper">
|
|
<div className="elementor-icon-box-icon">
|
|
<span className="elementor-icon">
|
|
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
|
</span>
|
|
</div>
|
|
<div className="elementor-icon-box-content">
|
|
<div className="elementor-icon-box-title">
|
|
<span>Predictable Operations</span>
|
|
</div>
|
|
<p className="elementor-icon-box-description">
|
|
EVs become predictable assets, not operational risks.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-e70d3b7 elementor-widget elementor-widget-logico_button" data-id="e70d3b7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="button-widget">
|
|
<div className="button-container">
|
|
<Link href="/solutions" className="logico-alter-button">Explore more</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</>
|
|
);
|
|
}
|