254 lines
14 KiB
TypeScript
254 lines
14 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { ScrollReveal } from "@/animations/Reveal";
|
|
|
|
export default function IndustrySolutions() {
|
|
return (
|
|
<div className="elementor-element elementor-element-3b4a7cc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="3b4a7cc" data-element_type="container" data-e-type="container">
|
|
<div className="e-con-inner">
|
|
<div className="elementor-element elementor-element-d602f7f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d602f7f" data-element_type="container" data-e-type="container">
|
|
|
|
<div className="elementor-element elementor-element-f64bd88 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f64bd88" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-5ed2dbb e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ed2dbb" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-c8162c4 elementor-widget elementor-widget-logico_heading" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default" style={{paddingLeft: "50px"}}>
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">/ Industry Solutions /</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="elementor-element elementor-element-1487241 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading"
|
|
data-id="1487241"
|
|
data-element_type="widget"
|
|
data-e-type="widget"
|
|
data-widget_type="logico_heading.default"
|
|
style={{marginLeft: "50px"}}
|
|
>
|
|
<div className="elementor-widget-container" style={{ margin: "30px 0 0 0"}}>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
@media (min-width: 1024px) {
|
|
.industry-title-single-line {
|
|
white-space: nowrap !important;
|
|
}
|
|
}
|
|
`}} />
|
|
<h3 className="logico-title industry-title-single-line" style={{ fontSize: "clamp(28px, 3.5vw, 48px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase" }}>
|
|
<ScrollReveal delay={0.05} duration={0.8} yOffset={25}>
|
|
Smart solutions built exclusively for your <span style={{ color: "#c01227" }}>industry</span>
|
|
</ScrollReveal>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-4af73cb e-con-full elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4af73cb" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-46f2f7d elementor-widget__width-initial elementor-widget elementor-widget-logico_button" data-id="46f2f7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
|
<div className="elementor-widget-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-6829276 e-grid e-con-full cut-corner-no sticky-container-off e-con e-child" data-id="6829276" data-element_type="container" data-e-type="container">
|
|
|
|
<div className="industry-solutions-grid">
|
|
|
|
{/* Card 1: FMCG */}
|
|
<Link href="/solutions" className="industry-card-link">
|
|
<div className="industry-card-bg">
|
|
<Image
|
|
src="/images/tab-pic-1.jpeg"
|
|
alt="FMCG Logistics"
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
<div className="industry-card-overlay" />
|
|
<div className="industry-card-hover-bg" />
|
|
|
|
{/* Default state */}
|
|
<div className="industry-card-default-content">
|
|
<h4 className="industry-card-default-title">FMCG</h4>
|
|
</div>
|
|
|
|
{/* Hover state */}
|
|
<div className="industry-card-hover-content">
|
|
<div className="industry-card-hover-top">
|
|
<p className="industry-card-description">
|
|
High volume, tight margins, zero tolerance for stockouts.
|
|
</p>
|
|
<div>
|
|
<h5 className="industry-card-section-title">Challenges</h5>
|
|
<ul className="industry-card-list">
|
|
<li className="industry-card-list-item bullet-1">Unpredictable demand spikes</li>
|
|
<li className="industry-card-list-item bullet-2">Fresh product expiry constraints</li>
|
|
<li className="industry-card-list-item bullet-3">Multi-stop route complexity</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 className="industry-card-section-title">Doormile Solutions</h5>
|
|
<ul className="industry-card-list">
|
|
<li className="industry-card-list-item bullet-4">AI-driven demand-responsive routing</li>
|
|
<li className="industry-card-list-item bullet-5">Freshness-aware delivery prioritization</li>
|
|
<li className="industry-card-list-item bullet-6">Dynamic batch optimization</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="industry-card-hover-bottom">
|
|
<div className="industry-card-hover-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
style={{ width: "20px", height: "20px" }}
|
|
>
|
|
<line x1="7" y1="17" x2="17" y2="7"></line>
|
|
<polyline points="7 7 17 7 17 17"></polyline>
|
|
</svg>
|
|
</div>
|
|
<h4 className="industry-card-hover-title">FMCG</h4>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Card 2: Pharmaceutical */}
|
|
<Link href="/solutions" className="industry-card-link">
|
|
<div className="industry-card-bg">
|
|
<Image
|
|
src="/images/tab-pic-2.jpeg"
|
|
alt="Pharma Logistics"
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
<div className="industry-card-overlay" />
|
|
<div className="industry-card-hover-bg" />
|
|
|
|
{/* Default state */}
|
|
<div className="industry-card-default-content">
|
|
<h4 className="industry-card-default-title">Pharmaceutical</h4>
|
|
</div>
|
|
|
|
{/* Hover state */}
|
|
<div className="industry-card-hover-content">
|
|
<div className="industry-card-hover-top">
|
|
<p className="industry-card-description">
|
|
Temperature-sensitive, compliance-critical, life-saving.
|
|
</p>
|
|
<div>
|
|
<h5 className="industry-card-section-title">Challenges</h5>
|
|
<ul className="industry-card-list">
|
|
<li className="industry-card-list-item bullet-1">Cold chain integrity requirements</li>
|
|
<li className="industry-card-list-item bullet-2">Regulatory compliance tracking</li>
|
|
<li className="industry-card-list-item bullet-3">Critical delivery time windows</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 className="industry-card-section-title">Doormile Solutions</h5>
|
|
<ul className="industry-card-list">
|
|
<li className="industry-card-list-item bullet-4">Real-time temperature monitoring</li>
|
|
<li className="industry-card-list-item bullet-5">Chain-of-custody documentation</li>
|
|
<li className="industry-card-list-item bullet-6">Priority override for critical shipments</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="industry-card-hover-bottom">
|
|
<div className="industry-card-hover-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
style={{ width: "20px", height: "20px" }}
|
|
>
|
|
<line x1="7" y1="17" x2="17" y2="7"></line>
|
|
<polyline points="7 7 17 7 17 17"></polyline>
|
|
</svg>
|
|
</div>
|
|
<h4 className="industry-card-hover-title">Pharmaceutical</h4>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Card 3: Enterprise & B2B */}
|
|
<Link href="/solutions" className="industry-card-link">
|
|
<div className="industry-card-bg">
|
|
<Image
|
|
src="/images/tab-pic-3.jpeg"
|
|
alt="Enterprise Logistics"
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
<div className="industry-card-overlay" />
|
|
<div className="industry-card-hover-bg" />
|
|
|
|
{/* Default state */}
|
|
<div className="industry-card-default-content">
|
|
<h4 className="industry-card-default-title">Enterprise & B2B</h4>
|
|
</div>
|
|
|
|
{/* Hover state */}
|
|
<div className="industry-card-hover-content">
|
|
<div className="industry-card-hover-top">
|
|
<p className="industry-card-description">
|
|
High-value shipments with complex delivery requirements.
|
|
</p>
|
|
<div>
|
|
<h5 className="industry-card-section-title">Challenges</h5>
|
|
<ul className="industry-card-list">
|
|
<li className="industry-card-list-item bullet-1">Appointment scheduling coordination</li>
|
|
<li className="industry-card-list-item bullet-2">White-glove delivery standards</li>
|
|
<li className="industry-card-list-item bullet-3">Multi-location routing complexity</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 className="industry-card-section-title">Doormile Solutions</h5>
|
|
<ul className="industry-card-list">
|
|
<li className="industry-card-list-item bullet-4">Automated appointment optimization</li>
|
|
<li className="industry-card-list-item bullet-5">Service level guarantee tracking</li>
|
|
<li className="industry-card-list-item bullet-6">Enterprise integration APIs</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="industry-card-hover-bottom">
|
|
<div className="industry-card-hover-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
style={{ width: "20px", height: "20px" }}
|
|
>
|
|
<line x1="7" y1="17" x2="17" y2="7"></line>
|
|
<polyline points="7 7 17 7 17 17"></polyline>
|
|
</svg>
|
|
</div>
|
|
<h4 className="industry-card-hover-title">Enterprise & B2B</h4>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|