update image and about section
This commit is contained in:
@@ -12,8 +12,8 @@ if (typeof window !== "undefined") {
|
||||
const CARDS_DATA = [
|
||||
{
|
||||
index: 1,
|
||||
title: "Battery-First Planning",
|
||||
desc: "Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought.",
|
||||
title: "Operational Visibility",
|
||||
desc: "Real-time tracking and centralized control provide complete visibility across every shipment, vehicle, and delivery milestone.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="2" y="7" width="16" height="10" rx="2" ry="2" />
|
||||
@@ -25,8 +25,8 @@ const CARDS_DATA = [
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
title: "Energy-Aware Routing",
|
||||
desc: "Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency.",
|
||||
title: "Intelligent Routing",
|
||||
desc: "AI-powered route optimization reduces travel time, improves delivery accuracy, and maximizes fleet utilization.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
|
||||
@@ -35,8 +35,8 @@ const CARDS_DATA = [
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
title: "Smart Charging Integration",
|
||||
desc: "Seamless coordination with charging infrastructure to eliminate range anxiety for drivers.",
|
||||
title: "EV-First Logistics",
|
||||
desc: "Purpose-built workflows for electric fleets improve battery efficiency, charging management, and sustainable operations.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12 2v10" />
|
||||
@@ -48,8 +48,8 @@ const CARDS_DATA = [
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
title: "Carbon Footprint Tracking",
|
||||
desc: "Real-time emissions monitoring and sustainability reports for every delivery.",
|
||||
title: "Scalable Network",
|
||||
desc: "Flexible logistics infrastructure supports growth across cities, regions, and high-volume delivery operations without disruption.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.5 2 5.5a7 7 0 0 1-7 7h-3" />
|
||||
@@ -89,18 +89,16 @@ export default function EVLogisticSection() {
|
||||
});
|
||||
|
||||
entryTl
|
||||
.to(container.querySelector(".ev-logistic-kicker"), {
|
||||
.to(container.querySelector(".ev-logistic-kicker-widget"), {
|
||||
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%",
|
||||
.to(container.querySelector(".ev-logistic-title-widget"), {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.95,
|
||||
stagger: 0.02, // Rapid letter-by-letter wave reveal!
|
||||
duration: 0.85,
|
||||
ease: "power4.out",
|
||||
}, "-=0.45")
|
||||
.to(container.querySelectorAll(".ev-feature-card"), {
|
||||
@@ -125,20 +123,11 @@ export default function EVLogisticSection() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const headingText = "LOGISTICS BUILT FOR ELECTRIC VEHICLES";
|
||||
const headingWords = headingText.split(" ");
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* Custom CSS Scoped to EV Logistics Section */
|
||||
.ev-logistic-section {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
max-width: 1480px !important;
|
||||
margin: 10px auto 120px auto !important;
|
||||
padding: 80px 40px !important;
|
||||
box-sizing: border-box !important;
|
||||
background: #ffffff !important;
|
||||
font-family: 'Manrope', sans-serif !important;
|
||||
@@ -149,8 +138,6 @@ export default function EVLogisticSection() {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
align-self: stretch !important;
|
||||
border-bottom: 2px solid rgba(17, 17, 17, 0.09) !important;
|
||||
padding-bottom: 24px !important;
|
||||
margin-bottom: 48px !important;
|
||||
display: block !important;
|
||||
text-align: left !important;
|
||||
@@ -223,57 +210,30 @@ export default function EVLogisticSection() {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.ev-logistic-kicker {
|
||||
font-size: 14px !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 2.1429em !important;
|
||||
letter-spacing: 0px !important;
|
||||
text-transform: lowercase !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 0 16px 0 !important;
|
||||
.ev-logistic-kicker-widget {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
will-change: transform, opacity, letter-spacing;
|
||||
text-align: left !important;
|
||||
display: inline-block !important;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.ev-logistic-title-wrapper {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Expanded clean headings look from the screenshot */
|
||||
.ev-logistic-title {
|
||||
font-size: clamp(40px, 5.5vw, 80px) !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 0.95 !important;
|
||||
text-transform: uppercase !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 10px 0 0 !important;
|
||||
letter-spacing: -1.8px !important;
|
||||
}
|
||||
|
||||
/* CSS for robust letter-by-letter animation wrapping */
|
||||
.ev-word-inline {
|
||||
display: inline-block !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.ev-char-wrapper {
|
||||
display: inline-block !important;
|
||||
overflow: hidden !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.ev-char {
|
||||
display: inline-block !important;
|
||||
transform: translateY(110%);
|
||||
.ev-logistic-title-widget {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.ev-char-space {
|
||||
display: inline-block !important;
|
||||
.ev-logistic-title-widget > .elementor-widget-container {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ev-logistic-title-widget .logico-title {
|
||||
margin: 0 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* Card Grid Layout */
|
||||
@@ -360,11 +320,6 @@ export default function EVLogisticSection() {
|
||||
|
||||
/* Responsiveness constraints */
|
||||
@media (max-width: 1024px) {
|
||||
.ev-logistic-section {
|
||||
padding: 60px 24px !important;
|
||||
margin-bottom: 60px !important;
|
||||
}
|
||||
|
||||
.ev-logistic-body-grid {
|
||||
flex-direction: column !important;
|
||||
gap: 50px !important;
|
||||
@@ -389,20 +344,9 @@ export default function EVLogisticSection() {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.ev-logistic-title {
|
||||
font-size: clamp(32px, 5vw, 60px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ev-logistic-section {
|
||||
padding: 40px 16px !important;
|
||||
}
|
||||
|
||||
.ev-logistic-title {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
|
||||
.ev-feature-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 20px !important;
|
||||
@@ -410,61 +354,76 @@ export default function EVLogisticSection() {
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="ev-logistic-section"
|
||||
>
|
||||
{/* Top Header Row with / features / kicker and Full-Width Title */}
|
||||
<div className="ev-logistic-header">
|
||||
<div className="ev-logistic-kicker">/ Build Electric Vehicles /</div>
|
||||
<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>
|
||||
|
||||
<div className="ev-logistic-body-grid">
|
||||
{/* 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}
|
||||
src="/images/ev.jpeg"
|
||||
alt="EV Logistics"
|
||||
width={1050}
|
||||
height={854}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: 2x2 Grid of Feature Cards */}
|
||||
<div className="ev-logistic-content-col">
|
||||
<div className="ev-feature-grid">
|
||||
{CARDS_DATA.map((item) => (
|
||||
<div
|
||||
key={item.index}
|
||||
className="ev-feature-card"
|
||||
>
|
||||
<div className="ev-feature-icon-wrapper">
|
||||
{item.icon}
|
||||
<div className="elementor-61">
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="elementor-element elementor-element-88745f4 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent ev-logistic-section"
|
||||
data-id="88745f4"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
>
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-343b363 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="343b363" data-element_type="container" data-e-type="container">
|
||||
{/* Same header hierarchy and container structure as "The Doormile Way". */}
|
||||
<div className="ev-logistic-header">
|
||||
<div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading ev-logistic-kicker-widget" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title ev-logistic-kicker">/ Build Electric Vehicles /</div>
|
||||
</div>
|
||||
<h4 className="ev-feature-card-title">{item.title}</h4>
|
||||
<p className="ev-feature-card-desc">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
<div className="ev-logistic-title-wrapper">
|
||||
<div className="elementor-element elementor-element-1cc335a elementor-widget elementor-widget-logico_heading ev-logistic-title-widget" data-id="1cc335a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div
|
||||
className="logico-title"
|
||||
style={{
|
||||
WebkitTextStroke: "4px #c01227",
|
||||
color: "#fff",
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
LOGISTICS BUILT FOR ELECTRIC VEHICLES
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ev-logistic-body-grid">
|
||||
{/* 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}
|
||||
src="/images/ev.webp"
|
||||
alt="EV Logistics"
|
||||
width={1050}
|
||||
height={854}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: 2x2 Grid of Feature Cards */}
|
||||
<div className="ev-logistic-content-col">
|
||||
<div className="ev-feature-grid">
|
||||
{CARDS_DATA.map((item) => (
|
||||
<div
|
||||
key={item.index}
|
||||
className="ev-feature-card"
|
||||
>
|
||||
<div className="ev-feature-icon-wrapper">
|
||||
{item.icon}
|
||||
</div>
|
||||
<h4 className="ev-feature-card-title">{item.title}</h4>
|
||||
<p className="ev-feature-card-desc">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user