122 lines
7.7 KiB
TypeScript
122 lines
7.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ScrollReveal } from "@/animations/Reveal";
|
|
|
|
export default function TheProblem() {
|
|
return (
|
|
<div className="elementor-element elementor-element-30fd9d1 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent section-shrink-custom" data-id="30fd9d1" data-element_type="container" data-e-type="container">
|
|
<div className="e-con-inner">
|
|
<div className="elementor-element elementor-element-03db5d7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="03db5d7" data-element_type="container" data-e-type="container">
|
|
|
|
<ScrollReveal delay={0.05} duration={0.8} yOffset={20}>
|
|
<div className="elementor-element elementor-element-3fe4ca3 elementor-widget elementor-widget-logico_heading" data-id="3fe4ca3" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">/ The Problem /</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.15} duration={0.85} yOffset={30}>
|
|
<div className="elementor-element elementor-element-ffd1f7d elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="ffd1f7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<h2 className="logico-title">Fragmented Logistics is Broken</h2>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Grid of Problem boxes */}
|
|
<div className="elementor-element elementor-element-e09c20e e-grid e-con-full cut-corner-no sticky-container-off e-con e-child" data-id="e09c20e" data-element_type="container" data-e-type="container">
|
|
|
|
{/* Box 1 */}
|
|
<ScrollReveal delay={0.1} duration={0.7} yOffset={35} className="w-full">
|
|
<div className="elementor-element elementor-element-81a7690 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="81a7690" 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-air-delivery"></i>
|
|
</span>
|
|
</div>
|
|
<div className="elementor-icon-box-content">
|
|
<div className="elementor-icon-box-title">
|
|
<p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>73%</p>
|
|
<span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>of delays happen at handoffs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Box 2 */}
|
|
<ScrollReveal delay={0.2} duration={0.7} yOffset={35} className="w-full">
|
|
<div className="elementor-element elementor-element-0f4aa27 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="0f4aa27" 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-container"></i>
|
|
</span>
|
|
</div>
|
|
<div className="elementor-icon-box-content">
|
|
<div className="elementor-icon-box-title">
|
|
<p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>3x</p>
|
|
<span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>higher risk of missed SLAs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Box 3 */}
|
|
<ScrollReveal delay={0.3} duration={0.7} yOffset={35} className="w-full">
|
|
<div className="elementor-element elementor-element-6cfd203 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="6cfd203" 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-trolley"></i>
|
|
</span>
|
|
</div>
|
|
<div className="elementor-icon-box-content">
|
|
<div className="elementor-icon-box-title">
|
|
<p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>2.5x</p>
|
|
<span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>more time spent on coordination</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Box 4 */}
|
|
<ScrollReveal delay={0.4} duration={0.7} yOffset={35} className="w-full">
|
|
<div className="elementor-element elementor-element-0d343e1 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="0d343e1" 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-supply-chain"></i>
|
|
</span>
|
|
</div>
|
|
<div className="elementor-icon-box-content">
|
|
<div className="elementor-icon-box-title">
|
|
<p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>28%</p>
|
|
<span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>increase in operational costs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|