234 lines
9.8 KiB
TypeScript
234 lines
9.8 KiB
TypeScript
"use client";
|
||
import React from "react";
|
||
import GsapReveal from "@/components/common/GsapReveal";
|
||
|
||
const pricingTiers = [
|
||
{
|
||
label: "Small business",
|
||
sub: "(1–2 modules)",
|
||
timeline: "6–10 weeks",
|
||
timelineDesc: "Lower end of budget — limited customization",
|
||
icon: "fa-building",
|
||
color: "#3b82f6",
|
||
},
|
||
{
|
||
label: "Mid-size business",
|
||
sub: "(3–5 modules)",
|
||
timeline: "3–5 months",
|
||
timelineDesc: "Moderate — custom workflows + data migration",
|
||
icon: "fa-city",
|
||
color: "#8b5cf6",
|
||
},
|
||
{
|
||
label: "Enterprise",
|
||
sub: "(multi-location/full suite)",
|
||
timeline: "6–12+ months",
|
||
timelineDesc: "Higher — deep customization, integrations, multi-site rollout",
|
||
icon: "fa-globe",
|
||
color: "#0ea5e9",
|
||
},
|
||
];
|
||
|
||
const leftIndustries = [
|
||
{
|
||
title: "Manufacturing",
|
||
desc: "production planning, shop-floor control, and cost accuracy",
|
||
icon: "fa-industry",
|
||
},
|
||
{
|
||
title: "Healthcare",
|
||
desc: "compliance-driven records and resource management",
|
||
icon: "fa-hospital",
|
||
},
|
||
{
|
||
title: "Professional Services",
|
||
desc: "project tracking, billing, and resource allocation",
|
||
icon: "fa-briefcase",
|
||
},
|
||
];
|
||
|
||
const rightIndustries = [
|
||
{
|
||
title: "Retail & E-commerce",
|
||
desc: "inventory accuracy, omnichannel order management",
|
||
icon: "fa-store",
|
||
},
|
||
{
|
||
title: "Distribution & Logistics",
|
||
desc: "warehouse, fulfillment, and supply chain visibility",
|
||
icon: "fa-truck-fast",
|
||
},
|
||
{
|
||
title: "Non-profits",
|
||
desc: "fund tracking, transparency, and donor reporting",
|
||
icon: "fa-hand-holding-heart",
|
||
},
|
||
];
|
||
|
||
const PricingAndIndustries = () => {
|
||
return (
|
||
<>
|
||
{/* ── ERP Implementation Cost & Timeline ── */}
|
||
<section style={{ backgroundColor: "#ffffff", padding: "80px 0" }}>
|
||
<div className="container">
|
||
<GsapReveal y={30} duration={0.8}>
|
||
<h2 className="sec-title__title erp-section-title">
|
||
ERP Implementation Cost & Timeline:
|
||
</h2>
|
||
<h2 className="sec-title__title erp-section-title">
|
||
What to Expect
|
||
</h2>
|
||
<p style={{ fontSize: "0.97rem", color: "#555", lineHeight: "1.7", marginBottom: "40px", maxWidth: "620px" }}>
|
||
Every ERP project is scoped differently, but the table below gives a general planning benchmark based on business size and complexity.
|
||
</p>
|
||
</GsapReveal>
|
||
|
||
{/* 3-column pricing cards */}
|
||
<div className="row g-4 mb-4">
|
||
{pricingTiers.map((tier, idx) => (
|
||
<div className="col-lg-4" key={idx}>
|
||
<GsapReveal y={30} duration={0.8} delay={idx * 0.1}>
|
||
<div
|
||
style={{
|
||
borderRadius: "14px",
|
||
border: "1px solid #e8edf3",
|
||
padding: "28px 24px",
|
||
backgroundColor: "#fff",
|
||
boxShadow: "0 2px 12px rgba(0,0,0,0.05)",
|
||
transition: "box-shadow 0.3s ease, transform 0.3s ease",
|
||
cursor: "default",
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.boxShadow = "0 10px 28px rgba(0,0,0,0.1)";
|
||
e.currentTarget.style.transform = "translateY(-4px)";
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.boxShadow = "0 2px 12px rgba(0,0,0,0.05)";
|
||
e.currentTarget.style.transform = "translateY(0)";
|
||
}}
|
||
>
|
||
{/* Icon */}
|
||
<div style={{
|
||
width: "44px", height: "44px", borderRadius: "50%",
|
||
backgroundColor: `${tier.color}18`,
|
||
border: `1.5px solid ${tier.color}55`,
|
||
display: "flex", alignItems: "center", justifyContent: "center",
|
||
color: tier.color, fontSize: "18px", marginBottom: "16px",
|
||
}}>
|
||
<i className={`fa-solid ${tier.icon}`} />
|
||
</div>
|
||
|
||
{/* Label */}
|
||
<p style={{ fontSize: "1rem", fontWeight: 700, color: "#1a1a2e", margin: "0 0 4px" }}>{tier.label}</p>
|
||
<p style={{ fontSize: "0.82rem", color: "#888", margin: "0 0 20px" }}>{tier.sub}</p>
|
||
|
||
{/* Divider */}
|
||
<div style={{ height: "1px", backgroundColor: "#f0f0f0", marginBottom: "20px" }} />
|
||
|
||
{/* Timeline */}
|
||
<p style={{ fontSize: "1.3rem", fontWeight: 800, color: "#1a1a2e", margin: "0 0 6px" }}>{tier.timeline}</p>
|
||
<p style={{ fontSize: "0.88rem", color: "#666", lineHeight: "1.55", margin: 0 }}>{tier.timelineDesc}</p>
|
||
</div>
|
||
</GsapReveal>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Note */}
|
||
<GsapReveal y={15} duration={0.7} delay={0.3}>
|
||
<div style={{
|
||
display: "flex", alignItems: "flex-start", gap: "12px",
|
||
backgroundColor: "#fff8e6", border: "1px solid #f0d070",
|
||
borderRadius: "10px", padding: "16px 20px",
|
||
}}>
|
||
<i className="fa-solid fa-circle-info" style={{ color: "#c8950a", fontSize: "1rem", flexShrink: 0, marginTop: "2px" }} />
|
||
<p style={{ fontSize: "0.88rem", color: "#555", lineHeight: "1.6", margin: 0 }}>
|
||
<strong>Note:</strong> Actual cost and timeline depend on the number of modules, degree of customization, data volume, and integration complexity. A discovery call is the fastest way to get an accurate estimate for your business.
|
||
</p>
|
||
</div>
|
||
</GsapReveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Industries We Serve — hub and spoke ── */}
|
||
<section style={{ backgroundColor: "#f8f9fb", padding: "80px 0" }}>
|
||
<div className="container">
|
||
<GsapReveal y={30} duration={0.8}>
|
||
<h2 className="sec-title__title erp-section-title">
|
||
Industries We Serve
|
||
</h2>
|
||
</GsapReveal>
|
||
|
||
<div style={{ display: "flex", alignItems: "center", gap: "0", justifyContent: "center" }}>
|
||
|
||
{/* Left industries */}
|
||
<div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "28px", alignItems: "flex-end", paddingRight: "40px" }}>
|
||
{leftIndustries.map((ind, idx) => (
|
||
<GsapReveal key={idx} y={20} duration={0.7} delay={idx * 0.1}>
|
||
<div style={{ textAlign: "right", maxWidth: "220px" }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "10px", justifyContent: "flex-end", marginBottom: "4px" }}>
|
||
<p style={{ fontSize: "0.95rem", fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{ind.title}</p>
|
||
<div style={{
|
||
width: "36px", height: "36px", borderRadius: "50%",
|
||
backgroundColor: "#eef2f8",
|
||
border: "1.5px solid #c8d8ec",
|
||
display: "flex", alignItems: "center", justifyContent: "center",
|
||
color: "#3b6ea8", fontSize: "14px", flexShrink: 0,
|
||
}}>
|
||
<i className={`fa-solid ${ind.icon}`} />
|
||
</div>
|
||
</div>
|
||
<p style={{ fontSize: "0.82rem", color: "#777", lineHeight: "1.5", margin: 0 }}>{ind.desc}</p>
|
||
</div>
|
||
</GsapReveal>
|
||
))}
|
||
</div>
|
||
|
||
{/* Center ERP hub */}
|
||
<GsapReveal y={0} duration={0.9} delay={0.1}>
|
||
<div style={{
|
||
width: "140px", height: "140px", borderRadius: "50%",
|
||
backgroundColor: "#1a2e4a",
|
||
display: "flex", flexDirection: "column",
|
||
alignItems: "center", justifyContent: "center",
|
||
boxShadow: "0 0 0 16px rgba(26,46,74,0.08), 0 0 0 32px rgba(26,46,74,0.04)",
|
||
flexShrink: 0,
|
||
textAlign: "center",
|
||
}}>
|
||
<i className="fa-solid fa-circle-nodes" style={{ color: "#e8a500", fontSize: "24px", marginBottom: "6px" }} />
|
||
<span style={{ fontSize: "0.75rem", fontWeight: 800, color: "#ffffff", letterSpacing: "0.08em", lineHeight: "1.2" }}>ERP<br />SOLUTION</span>
|
||
</div>
|
||
</GsapReveal>
|
||
|
||
{/* Right industries */}
|
||
<div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "28px", alignItems: "flex-start", paddingLeft: "40px" }}>
|
||
{rightIndustries.map((ind, idx) => (
|
||
<GsapReveal key={idx} y={20} duration={0.7} delay={idx * 0.1}>
|
||
<div style={{ textAlign: "left", maxWidth: "220px" }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "4px" }}>
|
||
<div style={{
|
||
width: "36px", height: "36px", borderRadius: "50%",
|
||
backgroundColor: "#eef2f8",
|
||
border: "1.5px solid #c8d8ec",
|
||
display: "flex", alignItems: "center", justifyContent: "center",
|
||
color: "#3b6ea8", fontSize: "14px", flexShrink: 0,
|
||
}}>
|
||
<i className={`fa-solid ${ind.icon}`} />
|
||
</div>
|
||
<p style={{ fontSize: "0.95rem", fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{ind.title}</p>
|
||
</div>
|
||
<p style={{ fontSize: "0.82rem", color: "#777", lineHeight: "1.5", margin: 0, paddingLeft: "46px" }}>{ind.desc}</p>
|
||
</div>
|
||
</GsapReveal>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default PricingAndIndustries;
|