356 lines
18 KiB
TypeScript
356 lines
18 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 (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
@media (max-width: 768px) {
|
|
.elementor-element.elementor-element-3b4a7cc {
|
|
--padding-left: 0px !important;
|
|
--padding-right: 0px !important;
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-3b4a7cc > .e-con-inner {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-d602f7f {
|
|
--padding-left: 20px !important;
|
|
--padding-right: 20px !important;
|
|
padding-left: 20px !important;
|
|
padding-right: 20px !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-f64bd88,
|
|
.elementor-element.elementor-element-5ed2dbb,
|
|
.elementor-element.elementor-element-6829276 {
|
|
--padding-left: 0px !important;
|
|
--padding-right: 0px !important;
|
|
--margin-left: 0px !important;
|
|
--margin-right: 0px !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6829276 {
|
|
--e-con-grid-template-columns: minmax(0, 1fr) !important;
|
|
--grid-justify-content: stretch !important;
|
|
--justify-items: stretch !important;
|
|
grid-template-columns: minmax(0, 1fr) !important;
|
|
justify-content: stretch !important;
|
|
justify-items: stretch !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.industry-solutions-grid,
|
|
.industry-card-link {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.industry-solutions-grid {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
`}} />
|
|
<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 industry-section-label" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
/* Minimal section label — matches the "/ Doormile Approach /" pattern */
|
|
.industry-section-label {
|
|
width: 100%;
|
|
}
|
|
.industry-section-label > .elementor-widget-container {
|
|
max-width: 100%;
|
|
margin: 12px 0 50px 0;
|
|
padding: 0 0 14px 0;
|
|
border-style: solid;
|
|
border-width: 0 0 1px 0;
|
|
border-color: rgba(17, 17, 17, 0.15);
|
|
}
|
|
.industry-section-label .logico-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 2.1429em;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
color: #111111;
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.industry-section-label > .elementor-widget-container {
|
|
margin-bottom: 36px;
|
|
padding-bottom: 12px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.industry-section-label > .elementor-widget-container {
|
|
margin-bottom: 28px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.industry-section-label .logico-title {
|
|
font-size: 12px;
|
|
letter-spacing: 1.5px;
|
|
}
|
|
}
|
|
`}} />
|
|
<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"
|
|
>
|
|
<div className="elementor-widget-container" style={{ margin: "30px 0 0 0"}}>
|
|
<h2 className="logico-title" style={{ fontSize: "clamp(28px, 3.5vw, 48px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase", maxWidth: "900px" }}>
|
|
<ScrollReveal delay={0.05} duration={0.8} yOffset={25}>
|
|
Smart solutions built exclusively for your <span style={{ color: "#c01227" }}>industry</span>
|
|
</ScrollReveal>
|
|
</h2>
|
|
</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.webp"
|
|
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.webp"
|
|
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.webp"
|
|
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>
|
|
</>
|
|
);
|
|
}
|