290 lines
12 KiB
TypeScript
290 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useInView } from "framer-motion";
|
|
import { ScrollReveal, Magnetic } from "@/animations/Reveal";
|
|
|
|
interface ConnectedLogisticsSectionProps {
|
|
id?: string;
|
|
eyebrow?: string;
|
|
title?: string;
|
|
imageSrc?: string;
|
|
imageAlt?: string;
|
|
items?: Array<{ title: string; text: string }>;
|
|
showButton?: boolean;
|
|
}
|
|
|
|
const DEFAULT_ITEMS = [
|
|
{ title: "Real-Time Visibility", text: "See every shipment, every vehicle, every handoff—live. No blind spots." },
|
|
{ title: "Dynamic Route Adjustment", text: "AI continuously optimizes routes based on traffic, weather, and real-world conditions." },
|
|
{ title: "Proactive Delay Prevention", text: "Detect SLA risks hours before they become problems. Act, don't react." },
|
|
{ title: "Execution Intelligence", text: "Learn from every shipment. Get smarter with every mile traveled." },
|
|
];
|
|
|
|
export default function ConnectedLogisticsSection({
|
|
id = "vehicle-ai",
|
|
eyebrow = "/ Connected Logistics /",
|
|
title = "Smart logistics solutions we deliver for modern supply chains",
|
|
imageSrc = "/images/home2-pic-3.webp",
|
|
imageAlt = "Connected Logistics",
|
|
items = DEFAULT_ITEMS,
|
|
showButton = false,
|
|
}: ConnectedLogisticsSectionProps) {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
const isInView = useInView(sectionRef, { once: true, margin: "-50px" });
|
|
|
|
return (
|
|
<div ref={sectionRef} className="elementor elementor-61" data-elementor-type="wp-page" data-elementor-id="61" id={id} style={{ width: "100%", scrollMarginTop: "100px" }}>
|
|
<div className="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
/* Ensure the inner content wrapper is responsive and never overflows */
|
|
.elementor-element-fdb2e58 {
|
|
width: 100% !important;
|
|
max-width: 650px !important;
|
|
}
|
|
|
|
/* Make heading font size fluid and responsive */
|
|
.elementor-element-7500280 .logico-title {
|
|
font-size: clamp(26px, 3.5vw, 54px) !important;
|
|
line-height: 1.25em !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
/* Fix text colors for the dark background */
|
|
.elementor-element-71c3e1d .logico-title {
|
|
color: #ffffff !important;
|
|
}
|
|
.elementor-element-71c3e1d p {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
}
|
|
|
|
/* Make sure paragraphs are responsive on all screen widths */
|
|
.elementor-element-165dfa5 {
|
|
width: 100% !important;
|
|
max-width: min(619px, 100%) !important;
|
|
}
|
|
.elementor-element-3888a1e {
|
|
width: 100% !important;
|
|
max-width: min(526px, 100%) !important;
|
|
}
|
|
|
|
/* Sizing and identical padding on all 4 sides for Connected Logistics Image container */
|
|
.elementor-element-99768ba .elementor-widget-container {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
padding: 40px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.elementor-element-99768ba img.wp-image-4481 {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
object-fit: cover !important;
|
|
border-radius: 25px !important;
|
|
margin: 0 auto !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Desktop/Laptop (min-width: 1025px) column width and flex rules */
|
|
@media (min-width: 1025px) {
|
|
.elementor-element-9ffed33 {
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
flex-wrap: nowrap !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.elementor-element-96343ba,
|
|
.elementor-element-71c3e1d {
|
|
width: 50% !important;
|
|
max-width: 50% !important;
|
|
flex: 1 1 50% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.elementor-element-9ffed33 {
|
|
flex-direction: column !important;
|
|
align-items: stretch !important;
|
|
}
|
|
|
|
.elementor-element-96343ba,
|
|
.elementor-element-71c3e1d {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.elementor-element-96343ba > div {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.elementor-element-96343ba {
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
.elementor-element-71c3e1d {
|
|
padding-bottom: 24px !important;
|
|
}
|
|
|
|
.elementor-element-165dfa5,
|
|
.elementor-element-3888a1e {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.elementor-element-99768ba {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.elementor-element-99768ba .elementor-widget-container {
|
|
padding: 10px !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
|
|
width: 100% !important;
|
|
max-width: 600px !important;
|
|
border-radius: 25px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.elementor-element-99768ba {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.elementor-element-71c3e1d {
|
|
padding-bottom: 12px !important;
|
|
}
|
|
|
|
.elementor-element-99768ba .elementor-widget-container {
|
|
padding: 0px !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
object-fit: cover !important;
|
|
border-radius: 25px !important;
|
|
}
|
|
}
|
|
` }} />
|
|
<div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
|
|
|
{/* Image side */}
|
|
<div className="elementor-element elementor-element-96343ba e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="96343ba" data-element_type="container">
|
|
<ScrollReveal delay={0.1} duration={0.9} yOffset={30} className="w-full h-full">
|
|
<div className="elementor-element elementor-element-99768ba elementor-widget elementor-widget-image" data-id="99768ba" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
|
<div className="elementor-widget-container">
|
|
<Image
|
|
fetchPriority="high"
|
|
priority
|
|
width={578}
|
|
height={790}
|
|
src={imageSrc}
|
|
className="attachment-full size-full wp-image-4481"
|
|
alt={imageAlt}
|
|
style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
objectFit: "cover",
|
|
borderRadius: "25px",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
|
|
{/* Content side */}
|
|
<div className="elementor-element elementor-element-71c3e1d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="71c3e1d" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-fdb2e58 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="fdb2e58" data-element_type="container" data-e-type="container">
|
|
|
|
<ScrollReveal delay={0.1} duration={0.8} yOffset={20}>
|
|
<div className="elementor-element elementor-element-0136e6e elementor-widget elementor-widget-logico_heading" data-id="0136e6e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">{eyebrow}</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.2} duration={0.85} yOffset={25}>
|
|
<div className="elementor-element elementor-element-7500280 elementor-widget elementor-widget-logico_heading" data-id="7500280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<h2 className="logico-title">{title}</h2>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Staggered List items */}
|
|
{items.map((item, index) => (
|
|
<ScrollReveal key={index} delay={0.25 + index * 0.1} duration={0.8} yOffset={25}>
|
|
<div className="elementor-element elementor-element-4cc07a7 elementor-widget elementor-widget-logico_heading" data-id="4cc07a7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">{item.title}</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
|
<div className="elementor-widget-container">
|
|
<p>{item.text}</p>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
))}
|
|
|
|
{showButton && (
|
|
<ScrollReveal delay={0.65} duration={0.8} yOffset={20}>
|
|
<div className="elementor-element elementor-element-c0a45e4 elementor-widget elementor-widget-logico_button" data-id="c0a45e4" 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">
|
|
<Magnetic>
|
|
<Link href="/solutions" className="logico-alter-button">Explore more</Link>
|
|
</Magnetic>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Absolutely Positioned Block Decoration Badge */}
|
|
<div
|
|
className="elementor-element elementor-element-0efc59e elementor-absolute elementor-widget elementor-widget-logico_block_decoration"
|
|
data-id="0efc59e"
|
|
data-element_type="widget"
|
|
data-settings='{"_position":"absolute"}'
|
|
data-widget_type="logico_block_decoration.default"
|
|
style={{ position: "absolute" }}
|
|
>
|
|
<div className="elementor-widget-container">
|
|
<div className={`block-decoration animation-enable block-decoration-style-1 ${isInView ? "animated" : ""}`}>
|
|
<div className="block-decoration-item"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|