erp page updated

src/app/globals.css

@@ -18395,3 +18395,119 @@ h4.service-details__dynamic-content-erp {
   white-space: nowrap;
   border: 0;
 }
+
+
+/* ERP Section Responsive Titles */
+.erp-section-title {
+  font-size: 28px !important;
+}
+
+.erp-features-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+}
+
+@media (max-width: 1440px) {
+  .erp-features-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 991px) {
+  .erp-section-title {
+    font-size: 22px !important;
+  }
+  
+  /* Panel 1: Key Features */
+  .erp-features-panel1 {
+    flex-direction: column !important;
+  }
+  .erp-features-tabs {
+    width: 100% !important;
+    display: grid !important;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+  }
+  
+  /* Panel 2: Pricing */
+  .erp-pricing-grid {
+    grid-template-columns: 1fr !important;
+  }
+  
+  /* Panel 3: Industries */
+  .erp-features-industries {
+    flex-direction: column !important;
+    gap: 40px !important;
+  }
+  .erp-industries-side {
+    align-items: center !important;
+    padding: 0 !important;
+  }
+  .erp-industries-item {
+    flex-direction: column !important;
+  }
+  .erp-industries-text {
+    text-align: center !important;
+    max-width: 100% !important;
+  }
+  
+  /* Panel 4: Challenges */
+  .erp-challenge-row {
+    grid-template-columns: 1fr !important;
+    gap: 12px !important;
+  }
+  .erp-challenge-row > span:nth-child(2),
+  .erp-challenge-row > div:nth-child(2) {
+    display: none !important;
+  }
+  
+  .erp-benefits-row {
+    flex-wrap: wrap !important;
+    gap: 30px 0 !important;
+  }
+  
+  .erp-benefit-item {
+    flex: 0 0 calc(50% - 26px) !important;
+    max-width: calc(50% - 26px) !important;
+  }
+  
+  /* Hide the connector between item 2 and 3 in both rows, so they break into neat 2-item rows */
+  .erp-benefit-connector:nth-child(4) {
+    display: none !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .erp-service-card-img {
+    display: none !important;
+  }
+  
+  .erp-features-tabs {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .erp-benefits-row {
+    gap: 20px 0 !important;
+  }
+  
+  .erp-benefit-item {
+    flex: 0 0 100% !important;
+    max-width: 100% !important;
+  }
+  
+  /* Hide all connectors on mobile */
+  .erp-benefit-connector {
+    display: none !important;
+  }
+}
+/* ERP Section Responsive Padding */
+.erp-section-padding {
+  padding: 80px 0;
+}
+@media (max-width: 768px) {
+  .erp-section-padding, #process {
+    padding: 60px 0 !important;
+  }
+}
+

src/app/service/[slug]/page.tsx

@@ -5,6 +5,7 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PageHeader from "@/components/common/PageHeader";
 import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails";
+import ErpPageLayout from "@/components/erp-development-service/ErpPageLayout";
 import { ourServices } from "@/utils/data";
 import { notFound } from "next/navigation";
 
@@ -52,6 +53,8 @@ export default async function ServiceDetailsPage({ params }: { params: Promise<{
         ],
     };
 
+    const isErpPage = slug === "erp-development-implementation";
+
     return (
         <>
             <Script id={`schema-breadcrumb-${slug}`} type="application/ld+json" strategy="beforeInteractive">
@@ -59,16 +62,22 @@ export default async function ServiceDetailsPage({ params }: { params: Promise<{
             </Script>
             <Header1 />
             <main id="main-content">
-                <PageHeader
+                {isErpPage ? (
-                    title={service.title}
+                    <ErpPageLayout service={service} />
-                    bannerLeftImage={service.bannerLeftImage}
+                ) : (
-                    bannerRightImage={service.bannerRightImage}
+                    <>
-                />
+                        <PageHeader
-                <ServiceDetails service={service} />
+                            title={service.title}
+                            bannerLeftImage={service.bannerLeftImage}
+                            bannerRightImage={service.bannerRightImage}
+                        />
+                        <ServiceDetails service={service} />
+                    </>
+                )}
             </main>
             <Footer1 />
 
-            {slug === 'erp-development-implementation' && (
+            {isErpPage && (
                 /* Schema markup code start */
                 <script
                     type="application/ld+json"

src/components/common/GsapReveal.tsx

@@ -10,9 +10,10 @@ interface GsapRevealProps {
     y?: number;
     duration?: number;
     delay?: number;
+    className?: string;
 }
 
-const GsapReveal: React.FC<GsapRevealProps> = ({ children, y = 50, duration = 1, delay = 0 }) => {
+const GsapReveal: React.FC<GsapRevealProps> = ({ children, y = 50, duration = 1, delay = 0, className = "" }) => {
     const revealRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -41,7 +42,7 @@ const GsapReveal: React.FC<GsapRevealProps> = ({ children, y = 50, duration = 1,
         };
     }, [y, duration, delay]);
 
-    return <div ref={revealRef}>{children}</div>;
+    return <div ref={revealRef} className={className}>{children}</div>;
 };
 
 export default GsapReveal;

src/components/erp-development-service/Benefits.tsx

@@ -0,0 +1,235 @@
+"use client";
+import React from "react";
+import GsapReveal from "@/components/common/GsapReveal";
+
+const whyCards = [
+  {
+    num: "01",
+    icon: "/assets/images/services/erp/new/operational-challenges/disconnected-tools.png",
+    title: "Disconnected tools —",
+    desc: "finance, inventory, and sales sit in separate apps or spreadsheets that don't talk to each other",
+  },
+  {
+    num: "02",
+    icon: "/assets/images/services/erp/new/operational-challenges/no-real-time-visibility.png",
+    title: "No real-time visibility",
+    desc: "into cash flow, stock levels, or production status",
+  },
+  {
+    num: "03",
+    icon: "/assets/images/services/erp/new/operational-challenges/manual-error-prone-process.png",
+    title: "Manual, error-prone processes",
+    desc: "for invoicing, reconciliation, and reporting",
+  },
+  {
+    num: "04",
+    icon: "/assets/images/services/erp/new/operational-challenges/inability-to-scale-operation.png",
+    title: "Inability to scale operations,",
+    desc: "add locations, or onboard new product lines without adding headcount",
+  },
+  {
+    num: "05",
+    icon: "/assets/images/services/erp/new/operational-challenges/compilance-audit-pressure.png",
+    title: "Compliance and audit pressure",
+    desc: "that spreadsheets can no longer support",
+  },
+  {
+    num: "06",
+    icon: "/assets/images/services/erp/new/operational-challenges/legacy-on-premise erp.png",
+    title: "Legacy or on-premise ERP",
+    desc: "that is outdated, unsupported, or too rigid to customize",
+  },
+];
+
+const Benefits = () => {
+  return (
+    <>
+      {/* ── Section 1: White background ── */}
+      <section className="erp-section-padding" style={{ backgroundColor: "#ffffff", position: "relative", zIndex: 1, isolation: "isolate" }}>
+        <div className="container">
+
+          <GsapReveal y={20} duration={0.8}>
+            <div style={{ textAlign: 'center', marginBottom: '60px' }}>
+              <h2 style={{ color: '#1e3a8a', marginBottom: '18px', fontSize: '32px', fontWeight: '700' }}>
+                ERP Development & Implementation Services:
+              </h2>
+              <p style={{ fontSize: '20px', color: '#334155', lineHeight: '1.6', margin: 0, fontWeight: '500' }}>
+                Everything a growing business needs to know before choosing an ERP implementation partner — process, pricing, features, and FAQs.
+              </p>
+            </div>
+          </GsapReveal>
+
+          {/* What Are ERP Development and Implementation Services? */}
+          <div className="row align-items-center">
+            {/* Left: title + image */}
+            <div className="col-lg-5 mb-4 mb-lg-0">
+              <GsapReveal y={30} duration={1}>
+                <div className="sec-title mb-2">
+                  <div className="sec-title__shape"></div>
+                  <p className="sec-title__tagline">ERP EXPERTISE</p>
+                </div>
+                <h2 className="sec-title__title erp-section-title mb-4">
+                  What Are ERP Development and Implementation Services?
+                </h2>
+                <img
+                  src="/assets/images/services/erp/new/erp-expertise/erp-expertise.webp"
+                  alt="ERP unified platform"
+                  className="img-fluid rounded-4 shadow-sm"
+                  style={{ width: "100%", height: "215px", objectFit: "cover" }}
+                />
+              </GsapReveal>
+            </div>
+
+            {/* Right: two paragraphs */}
+            <div className="col-lg-7">
+              <GsapReveal y={30} duration={1} delay={0.2}>
+                <div className="ps-lg-4">
+                  <p style={{ fontSize: "1.05rem", color: "#444", lineHeight: "1.8", marginBottom: "20px" }}>
+                    <strong>ERP development and implementation services</strong> cover the full lifecycle of building,
+                    configuring, and deploying an Enterprise Resource Planning (ERP) system — from analyzing business
+                    requirements and designing workflows, to custom development, data migration, integration, testing, and
+                    post-launch support. The goal is a single, unified platform that connects finance, inventory, supply
+                    chain, HR, and sales into one real-time system of record.
+                  </p>
+                  <p style={{ fontSize: "1.05rem", color: "#444", lineHeight: "1.8" }}>
+                    Unlike a plug-and-play software purchase, ERP implementation is a structured project. A specialist
+                    partner maps your existing processes, configures or builds the software around them, migrates historical
+                    data safely, and trains your team — so the system fits the business instead of forcing the business to
+                    fit the system.
+                  </p>
+                </div>
+              </GsapReveal>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      {/* ── Section 2: Dark navy — Why Do Businesses Need Professional ERP Implementation Services? ── */}
+      <section
+        className="erp-section-padding"
+        style={{
+          backgroundColor: "#0d1b2a",
+          position: "relative",
+          overflow: "hidden",
+          zIndex: 1,
+          isolation: "isolate",
+        }}
+      >
+        {/* Decorative gold glow — bottom-right */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: "-80px",
+            right: "-80px",
+            width: "300px",
+            height: "300px",
+            borderRadius: "50%",
+            background: "radial-gradient(circle, rgba(55,121,185,0.18) 0%, transparent 70%)",
+            pointerEvents: "none",
+          }}
+        />
+
+        <div className="container" style={{ position: "relative", zIndex: 1 }}>
+
+          {/* Heading + intro */}
+          <GsapReveal y={30} duration={0.9} className="text-center d-flex flex-column align-items-center">
+            <div className="sec-title mb-2 justify-content-center">
+              <div className="sec-title__shape"></div>
+              <p className="sec-title__tagline text-white">OPERATIONAL CHALLENGES</p>
+            </div>
+            <h2 className="sec-title__title erp-section-title text-white">
+              Why Do Businesses Need Professional ERP Implementation Services?
+            </h2>
+            <p
+              style={{
+                fontSize: "1rem",
+                color: "#b0bec5",
+                lineHeight: "1.7",
+                marginBottom: "48px",
+                maxWidth: "540px",
+              }}
+            >
+              Most companies turn to ERP development and implementation services when they hit one or more of these operational walls:
+            </p>
+          </GsapReveal>
+
+          {/* 3×2 numbered card grid */}
+          <div className="row g-4 align-items-stretch">
+            {whyCards.map((card, idx) => (
+              <div className="col-lg-4 col-md-6 d-flex flex-column" key={idx}>
+                <GsapReveal y={40} duration={0.8} delay={idx * 0.08} className="h-100 w-100">
+                  <div
+                    style={{
+                      backgroundColor: "#162032",
+                      borderRadius: "14px",
+                      padding: "28px 24px",
+                      height: "100%",
+                      border: "1px solid rgba(255,255,255,0.06)",
+                      transition: "transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease",
+                      cursor: "default",
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.transform = "translateY(-6px)";
+                      e.currentTarget.style.boxShadow = "0 16px 40px rgba(0,0,0,0.35)";
+                      e.currentTarget.style.borderColor = "rgba(55,121,185,0.35)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.transform = "translateY(0)";
+                      e.currentTarget.style.boxShadow = "none";
+                      e.currentTarget.style.borderColor = "rgba(255,255,255,0.06)";
+                    }}
+                  >
+                    {/* Icon circle */}
+                    <div style={{ display: "flex", alignItems: "center", gap: "14px", marginBottom: "20px" }}>
+                      <div
+                        style={{
+                          width: "46px",
+                          height: "46px",
+                          borderRadius: "50%",
+                          backgroundColor: "rgba(55,121,185,0.15)",
+                          border: "1.5px solid rgba(55,121,185,0.5)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0,
+                        }}
+                      >
+                        <img src={card.icon} alt={card.title} className="aniamtion-key-5" style={{ width: "25px", height: "25px", objectFit: "contain", flexShrink: 0 }} />
+                      </div>
+                    </div>
+
+                    {/* Card text */}
+                    <p style={{ fontSize: "0.97rem", color: "#e0e6ef", lineHeight: "1.65", margin: 0 }}>
+                      <strong style={{ color: "#ffffff", fontWeight: 700 }}>{card.title}</strong>{" "}
+                      {card.desc}
+                    </p>
+                  </div>
+                </GsapReveal>
+              </div>
+            ))}
+          </div>
+
+          {/* Closing paragraph */}
+          <GsapReveal y={20} duration={0.8} delay={0.5} className="text-center d-flex flex-column align-items-center">
+            <p
+              style={{
+                fontSize: "1rem",
+                color: "#b0bec5",
+                lineHeight: "1.75",
+                marginTop: "48px",
+                maxWidth: "800px",
+              }}
+            >
+              A professionally implemented ERP system resolves these issues by centralizing data, automating routine
+              workflows, and giving leadership a single source of truth for decision-making.
+            </p>
+          </GsapReveal>
+
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Benefits;

src/components/erp-development-service/Challenges.tsx

@@ -0,0 +1,154 @@
+"use client";
+import React from "react";
+import GsapReveal from "@/components/common/GsapReveal";
+
+const challengesData = [
+  {
+    num: "01",
+    challenge: "Resistance to change from staff",
+    approach: "Structured training and phased rollout to build user confidence",
+    icon: "fa-users-slash",
+  },
+  {
+    num: "02",
+    challenge: "Messy or incomplete legacy data",
+    approach: "Data cleansing and validation before migration",
+    icon: "fa-database",
+  },
+  {
+    num: "03",
+    challenge: "Scope creep and delayed go-live",
+    approach: "Fixed-milestone project plans with clear sign-off gates",
+    icon: "fa-timeline",
+  },
+  {
+    num: "04",
+    challenge: "Poor fit with existing processes",
+    approach: "Custom workflow configuration instead of forcing standard templates",
+    icon: "fa-puzzle-piece",
+  },
+  {
+    num: "05",
+    challenge: "Integration failures with existing tools",
+    approach: "API-first integration approach tested before go-live",
+    icon: "fa-link-slash",
+  },
+];
+
+const whyChoose = [
+  "End-to-end ownership — from consulting and development through data migration and support",
+  "Custom-built modules for businesses that don't fit generic templates",
+  "Structured, milestone-based implementation process to protect timelines and budgets",
+  "Dedicated post-go-live support instead of a one-time handoff",
+  "Experience across manufacturing, retail, distribution, and services industries",
+];
+
+const Challenges = () => {
+  return (
+    <>
+      {/* ── Common ERP Challenges — challenge → arrow → approach ── */}
+      <section style={{ backgroundColor: "#ffffff", padding: "80px 0" }}>
+        <div className="container">
+          <GsapReveal y={30} duration={0.8}>
+            <h2 className="sec-title__title erp-section-title">
+              Common ERP Implementation Challenges — and How We Solve Them
+            </h2>
+
+            {/* Column headers */}
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 40px 1fr", gap: "0", marginBottom: "8px", paddingLeft: "52px" }}>
+              <p style={{ fontSize: "0.82rem", fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: "0.06em", margin: 0 }}>Challenge</p>
+              <div />
+              <p style={{ fontSize: "0.82rem", fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: "0.06em", margin: 0 }}>Our Approach</p>
+            </div>
+          </GsapReveal>
+
+          {/* Challenge rows */}
+          <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+            {challengesData.map((item, idx) => (
+              <GsapReveal key={idx} y={20} duration={0.7} delay={idx * 0.08}>
+                <div
+                  style={{
+                    display: "grid",
+                    gridTemplateColumns: "1fr 48px 1fr",
+                    alignItems: "center",
+                    gap: "0",
+                    borderRadius: "12px",
+                    padding: "18px 20px",
+                    backgroundColor: "#f8f9fb",
+                    border: "1px solid #edf0f5",
+                    transition: "box-shadow 0.3s ease",
+                    cursor: "default",
+                  }}
+                  onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 6px 20px rgba(0,0,0,0.08)"; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; }}
+                >
+                  {/* Challenge */}
+                  <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
+                    <div style={{
+                      width: "34px", height: "34px", borderRadius: "50%",
+                      backgroundColor: "#1a2e4a",
+                      display: "flex", alignItems: "center", justifyContent: "center",
+                      color: "#ffffff", fontSize: "11px", fontWeight: 800, flexShrink: 0,
+                    }}>
+                      {item.num}
+                    </div>
+                    <p style={{ fontSize: "0.93rem", fontWeight: 600, color: "#1a1a2e", margin: 0, lineHeight: "1.45" }}>
+                      {item.challenge}
+                    </p>
+                  </div>
+
+                  {/* Arrow */}
+                  <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                    <svg width="32" height="14" viewBox="0 0 32 14" fill="none">
+                      <line x1="0" y1="7" x2="22" y2="7" stroke="#a8c0d8" strokeWidth="1.8" strokeDasharray="3 2" />
+                      <polygon points="22,3 32,7 22,11" fill="#a8c0d8" />
+                    </svg>
+                  </div>
+
+                  {/* Approach */}
+                  <p style={{ fontSize: "0.9rem", color: "#555", margin: 0, lineHeight: "1.55" }}>
+                    {item.approach}
+                  </p>
+                </div>
+              </GsapReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Why Choose Metatron Cube Solutions ── */}
+      <section style={{ backgroundColor: "#f4f6fa", padding: "80px 0" }}>
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-lg-5 mb-4 mb-lg-0">
+              <GsapReveal y={30} duration={0.8}>
+                <h2 className="sec-title__title erp-section-title">
+                  Why Choose Metatron Cube Solutions for ERP Development &amp; Implementation
+                </h2>
+              </GsapReveal>
+            </div>
+            <div className="col-lg-7">
+              <GsapReveal y={30} duration={0.8} delay={0.15}>
+                <ul className="list-unstyled mb-0">
+                  {whyChoose.map((point, i) => (
+                    <li key={i} className="d-flex align-items-start mb-4">
+                      <div
+                        className="me-3 mt-1 d-flex align-items-center justify-content-center rounded-circle fw-bold text-white"
+                        style={{ width: "30px", height: "30px", backgroundColor: "#1a2e4a", fontSize: "0.82rem", flexShrink: 0 }}
+                      >
+                        {i + 1}
+                      </div>
+                      <span style={{ fontSize: "1rem", color: "#444", lineHeight: "1.7" }}>{point}</span>
+                    </li>
+                  ))}
+                </ul>
+              </GsapReveal>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Challenges;

src/components/erp-development-service/ErpFAQ.tsx

@@ -0,0 +1,189 @@
+"use client";
+import React, { useState } from "react";
+import GsapReveal from "@/components/common/GsapReveal";
+import Link from "next/link";
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+interface ErpFAQProps {
+  faq?: FAQItem[];
+}
+
+const defaultFaq: FAQItem[] = [
+  {
+    question: "What is the difference between ERP development and ERP implementation?",
+    answer:
+      "ERP development refers to building or customizing the software itself, while ERP implementation refers to configuring, deploying, and rolling out that software within your business — including data migration, integration, and training.",
+  },
+  {
+    question: "How long does ERP implementation take?",
+    answer:
+      "A small-business rollout with limited modules can take 6–10 weeks, while an enterprise-wide, multi-location implementation can take 6–12 months or more, depending on customization and integration complexity.",
+  },
+  {
+    question: "How much does ERP implementation cost?",
+    answer:
+      "Cost depends on the number of modules, level of customization, data volume, and integrations required. Small deployments cost far less than enterprise rollouts with deep customization — a discovery call is the most reliable way to get an accurate quote.",
+  },
+  {
+    question: "Can an existing ERP system be customized instead of replaced?",
+    answer:
+      "Yes. Many businesses extend their current ERP with custom modules, workflows, and dashboards rather than migrating to a new platform, which is often faster and less disruptive than a full replacement.",
+  },
+  {
+    question: "What causes ERP implementations to fail?",
+    answer:
+      "The most common causes are poor requirement analysis, unrealistic timelines, weak data migration planning, and insufficient staff training — all of which a structured, milestone-based implementation process is designed to prevent.",
+  },
+  {
+    question: "Do you support data migration from legacy or on-premise systems?",
+    answer:
+      "Yes. Data migration services include cleansing, mapping, and validating historical data from legacy or on-premise systems before it is moved into the new ERP environment.",
+  },
+];
+
+const ErpFAQ: React.FC<ErpFAQProps> = ({ faq }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(0);
+  const faqData = faq && faq.length > 0 ? faq : defaultFaq;
+
+  const toggleAccordion = (index: number) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <>
+      {/* FAQ Section */}
+      <section className="erp-section-padding pt-0" style={{ backgroundColor: "#fff" }}>
+        <div className="container">
+          <div className="text-center mb-5">
+            <GsapReveal y={30} duration={0.8}>
+              <div className="sec-title mb-2">
+                <div className="sec-title__shape mx-auto"></div>
+                <p className="sec-title__tagline">FAQ</p>
+              </div>
+              <h2 className="sec-title__title erp-section-title" style={{ marginBottom: "28px" }}>
+                Frequently Asked Questions
+              </h2>
+            </GsapReveal>
+          </div>
+
+          <div className="row justify-content-center">
+            <div className="col-lg-10">
+              <GsapReveal y={30} duration={0.8} delay={0.15}>
+                {faqData.map((item, index) => (
+                  <div
+                    key={index}
+                    style={{
+                      marginBottom: "12px",
+                      border: "1px solid #e5e7eb",
+                      borderRadius: "10px",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <div
+                      onClick={() => toggleAccordion(index)}
+                      className="d-flex justify-content-between align-items-center px-4 py-4"
+                      style={{
+                        cursor: "pointer",
+                        backgroundColor: activeIndex === index ? "#f0f5ff" : "#fff",
+                        transition: "background-color 0.3s ease",
+                      }}
+                    >
+                      <h5
+                        className="mb-0 pe-3"
+                        style={{
+                          fontSize: "1.08rem",
+                          fontWeight: 600,
+                          color: activeIndex === index ? "var(--primary-blue)" : "#1a1a2e",
+                          transition: "color 0.3s ease",
+                        }}
+                      >
+                        {item.question}
+                      </h5>
+                      <i
+                        className="fa-solid fa-chevron-down"
+                        style={{
+                          color: activeIndex === index ? "var(--primary-blue)" : "#999",
+                          transition: "transform 0.3s ease",
+                          transform: activeIndex === index ? "rotate(180deg)" : "rotate(0deg)",
+                          flexShrink: 0,
+                        }}
+                      ></i>
+                    </div>
+                    {activeIndex === index && (
+                      <div
+                        className="px-4 pb-4 pt-2"
+                        style={{ backgroundColor: "#f0f5ff", borderTop: "1px solid #dbeafe" }}
+                      >
+                        <p
+                          className="mb-0"
+                          style={{ fontSize: "1rem", color: "#555", lineHeight: "1.75" }}
+                          dangerouslySetInnerHTML={{ __html: item.answer }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </GsapReveal>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Conclusion + CTA */}
+      <section className="erp-section-padding" style={{ backgroundColor: "#f4f6fa" }}>
+        <div className="container">
+          <div className="row justify-content-center">
+            <div className="col-lg-9">
+              <GsapReveal y={30} duration={0.8}>
+                <div className="text-center mb-5">
+                  <div className="sec-title mb-2">
+                    <div className="sec-title__shape mx-auto"></div>
+                    <p className="sec-title__tagline">CONCLUSION</p>
+                  </div>
+                  <h2 className="sec-title__title erp-section-title" style={{ marginBottom: "28px" }}>
+                    Choosing the Right ERP Implementation Partner
+                  </h2>
+                  <p style={{ fontSize: "1.08rem", color: "#555", lineHeight: "1.8", marginBottom: "16px" }}>
+                    ERP development and implementation is one of the highest-impact technology investments a growing business can make — but only when it's planned and executed correctly. The right partner brings structured discovery, custom development where it's needed, careful data migration, and support that continues long after go-live.
+                  </p>
+                </div>
+              </GsapReveal>
+
+              <GsapReveal y={30} duration={0.8} delay={0.15}>
+                <div
+                  className="rounded-4 text-center"
+                  style={{
+                    padding: "40px",
+                    background: "linear-gradient(rgba(26, 26, 46, 0.85), rgba(55, 121, 185, 0.85)), url(/assets\/images/services/erp/new/cta/conclusion-bg.webp) center/cover no-repeat",
+                    color: "#fff",
+                    boxShadow: "0 10px 30px rgba(0,0,0,0.1)",
+                  }}
+                >
+                  <h3 style={{ fontSize: "1.75rem", fontWeight: 700, color: "#fff", marginBottom: "16px" }}>
+                    Ready to streamline your operations with a system built around your business?
+                  </h3>
+                  <p style={{ fontSize: "1.05rem", color: "#ffffff", marginBottom: "28px" }}>
+                    Get in touch for a free ERP requirement assessment and project estimate.
+                  </p>
+                  <Link
+                    href="/contact"
+                    className="vl-btn1"
+                    style={{ backgroundColor: "#fff", color: "var(--primary-blue)", fontWeight: 700, display: "inline-block" }}
+                  >
+                    Get Free Assessment <i className="fa-solid fa-angle-right ms-2"></i>
+                  </Link>
+                </div>
+              </GsapReveal>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default ErpFAQ;

src/components/erp-development-service/ErpPageLayout.tsx

@@ -0,0 +1,42 @@
+"use client";
+import React from "react";
+import { ServiceType } from "@/types";
+import PageHeader from "@/components/common/PageHeader";
+import Benefits from "./Benefits";
+import ServicesList from "./ServicesList";
+import Process from "./Process";
+import FeaturesGrid from "./FeaturesGrid";
+import ErpFAQ from "./ErpFAQ";
+import WhyChooseUs from "./WhyChooseUs";
+import "../mobile-app-development-service/style-app.css";
+
+interface ErpPageLayoutProps {
+  service: ServiceType;
+}
+
+const ErpPageLayout: React.FC<ErpPageLayoutProps> = ({ service }) => {
+  return (
+    <div className="erp-page-wrapper" style={{ overflowX: "hidden" }}>
+      <PageHeader
+        title="ERP Development"
+        bannerLeftImage={service.bannerLeftImage}
+        bannerRightImage={service.bannerRightImage}
+        breadcrumbItems={[
+          { name: "Services", href: "/services-digital-solutions" },
+          { name: "ERP Development & Implementation" },
+        ]}
+      />
+
+
+
+      <Benefits />
+      <ServicesList />
+      <Process />
+      <FeaturesGrid />
+      <WhyChooseUs />
+      <ErpFAQ faq={service.faq} />
+    </div>
+  );
+};
+
+export default ErpPageLayout;

src/components/erp-development-service/FeaturesGrid.tsx

@@ -0,0 +1,350 @@
+"use client";
+import React, { useState } from "react";
+import GsapReveal from "@/components/common/GsapReveal";
+
+/* ─── Data ─────────────────────────────────────────────────── */
+const features = [
+  { title: "Real-time dashboards", icon: "/assets/images/services/erp/new/erp-features/1.png", desc: "Live visibility into cash flow, inventory, and sales performance." },
+  { title: "Modular architecture", icon: "/assets/images/services/erp/new/erp-features/2.png", desc: "Add finance, HR, or SCM modules as the business grows." },
+  { title: "Cloud deployment", icon: "/assets/images/services/erp/new/erp-features/3.png", desc: "Access from anywhere, lower infrastructure overhead." },
+  { title: "Workflow automation", icon: "/assets/images/services/erp/new/erp-features/4.png", desc: "Removes manual, repetitive approval and data-entry steps." },
+  { title: "Role-based access control", icon: "/assets/images/services/erp/new/erp-features/5.png", desc: "Ensures data security and audit-ready permissions." },
+  { title: "Third-party integrations", icon: "/assets/images/services/erp/new/erp-features/6.png", desc: "Connects payments, e-commerce, banking, and shipping tools." },
+  { title: "Custom reporting & analytics", icon: "/assets/images/services/erp/new/erp-features/7.png", desc: "Turns raw data into decision-ready insights." },
+];
+
+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: "/assets/images/services/erp/new/who-we-serve/manufacturing.png" },
+  { title: "Retail & E-commerce", desc: "inventory accuracy, omnichannel order management", icon: "/assets/images/services/erp/new/who-we-serve/retail.png" },
+  { title: "Distribution & Logistics", desc: "warehouse, fulfillment, and supply chain visibility", icon: "/assets/images/services/erp/new/who-we-serve/distribution.png" },
+];
+const rightIndustries = [
+  { title: "Healthcare", desc: "compliance-driven records and resource management", icon: "/assets/images/services/erp/new/who-we-serve/healthcare.png" },
+  { title: "Professional Services", desc: "project tracking, billing, and resource allocation", icon: "/assets/images/services/erp/new/who-we-serve/professional-services.png" },
+  { title: "Non-profits", desc: "fund tracking, transparency, and donor reporting", icon: "/assets/images/services/erp/new/who-we-serve/non-profit.png" },
+];
+
+const challengesData = [
+  { num: "01", icon: "fa-users-slash", challenge: "Resistance to change from staff", approach: "Structured training and phased rollout to build user confidence" },
+  { num: "02", icon: "fa-database", challenge: "Messy or incomplete legacy data", approach: "Data cleansing and validation before migration" },
+  { num: "03", icon: "fa-timeline", challenge: "Scope creep and delayed go-live", approach: "Fixed-milestone project plans with clear sign-off gates" },
+  { num: "04", icon: "fa-puzzle-piece", challenge: "Poor fit with existing processes", approach: "Custom workflow configuration instead of forcing standard templates" },
+  { num: "05", icon: "fa-link-slash", challenge: "Integration failures with existing tools", approach: "API-first integration approach tested before go-live" },
+];
+
+/* ─── Panel shared styles ───────────────────────────────────── */
+const panelPad: React.CSSProperties = { padding: "60px 20px" };
+
+/* ─── Component ─────────────────────────────────────────────── */
+const FeaturesGrid = () => {
+  const [active, setActive] = useState(0);
+
+  return (
+    <section style={{ width: "100%", overflow: "hidden" }}>
+      <div className="erp-features-grid">
+
+        {/* ══════════════════════════════════════════════════════
+            Panel TL — Key Features (dark navy)
+        ══════════════════════════════════════════════════════ */}
+        <div style={{ backgroundColor: "#0d1b2a", ...panelPad, position: "relative", overflow: "hidden" }}>
+          {/* bg glow */}
+          <div style={{ position: "absolute", top: "-60px", right: "-60px", width: "300px", height: "300px", borderRadius: "50%", background: "radial-gradient(circle, rgba(55,121,185,0.15) 0%, transparent 70%)", pointerEvents: "none" }} />
+
+          <GsapReveal y={25} duration={0.8}>
+            <div className="sec-title mb-2">
+              <div className="sec-title__shape"></div>
+              <p className="sec-title__tagline text-white" style={{ opacity: 0.8 }}>ERP FEATURES</p>
+            </div>
+            <h2 className="sec-title__title erp-section-title" style={{ color: "#ffffff", marginBottom: "28px" }}>
+              Key Features to Look For<br />in a Modern ERP System
+            </h2>
+          </GsapReveal>
+
+          <div className="erp-features-panel1" style={{ display: "flex", gap: "28px", alignItems: "stretch" }}>
+            {/* Feature tabs */}
+            <div className="erp-features-tabs" style={{ width: "240px", flexShrink: 0 }}>
+              {features.map((feat, idx) => (
+                <GsapReveal key={idx} y={10} duration={0.5} delay={idx * 0.05}>
+                  <button
+                    onClick={() => setActive(idx)}
+                    style={{
+                      display: "flex", alignItems: "center", gap: "14px", width: "100%",
+                      background: active === idx ? "rgba(55,121,185,0.2)" : "transparent",
+                      border: active === idx ? "1px solid rgba(55,121,185,0.6)" : "1px solid transparent",
+                      borderRadius: "10px", padding: "12px 16px", marginBottom: "6px",
+                      cursor: "pointer", textAlign: "left", transition: "all 0.2s",
+                    }}
+                  >
+                    <div style={{
+                      width: "44px", height: "44px", borderRadius: "50%", flexShrink: 0,
+                      backgroundColor: active === idx ? "rgba(55,121,185,0.25)" : "rgba(255,255,255,0.08)",
+                      border: active === idx ? "1.5px solid rgba(55,121,185,0.8)" : "1px solid rgba(255,255,255,0.2)",
+                      display: "flex", alignItems: "center", justifyContent: "center",
+                      color: active === idx ? "#3779b9" : "#ffffff", fontSize: "18px", transition: "all 0.2s",
+                    }}>
+                      {feat.icon.startsWith('/') ? (
+                        <img src={feat.icon} alt={feat.title} className="aniamtion-key-5" style={{ width: "26px", height: "26px", objectFit: "contain" }} />
+                      ) : (
+                        <i className={`fa-solid ${feat.icon}`} />
+                      )}
+                    </div>
+                    <span style={{ fontSize: "14px", fontWeight: active === idx ? 700 : 500, color: active === idx ? "#3779b9" : "#ffffff", transition: "color 0.2s", lineHeight: "1.3" }}>
+                      {feat.title}
+                    </span>
+                  </button>
+                </GsapReveal>
+              ))}
+            </div>
+
+            {/* Active feature detail */}
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <GsapReveal y={15} duration={0.6} className="h-100">
+                <div style={{
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                  backgroundColor: "rgba(26, 46, 74, 0.4)",
+                  border: "1px solid rgba(255,255,255,0.1)",
+                  borderRadius: "16px",
+                  padding: "24px",
+                }}>
+                  <h3 style={{ fontSize: "1.1rem", fontWeight: 700, color: "#ffffff", marginBottom: "10px" }}>
+                    {features[active].title}
+                  </h3>
+                  <p style={{ fontSize: "0.88rem", color: "#b0bec5", lineHeight: "1.6", marginBottom: "24px" }}>
+                    {features[active].desc}
+                  </p>
+                  {/* Dashboard preview */}
+                  <div style={{ flex: 1, borderRadius: "12px", overflow: "hidden", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 12px 32px rgba(0,0,0,0.4)" }}>
+                    <img
+                      src="/assets/images/services/erp/new/erp-features/erp-features.webp"
+                      alt="ERP dashboard"
+                      style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+                    />
+                  </div>
+                </div>
+              </GsapReveal>
+            </div>
+          </div>
+        </div>
+
+        {/* ══════════════════════════════════════════════════════
+            Panel TR — Cost & Timeline (white)
+        ══════════════════════════════════════════════════════ */}
+        <div style={{ backgroundColor: "#f6f9fc", ...panelPad, borderLeft: "1px solid #edf0f5", borderRadius: "0 15px 0 0" }}>
+          <GsapReveal y={25} duration={0.8}>
+            <div className="sec-title mb-2">
+              <div className="sec-title__shape"></div>
+              <p className="sec-title__tagline">PRICING & TIMELINE</p>
+            </div>
+            <h2 className="sec-title__title erp-section-title" style={{ marginBottom: "8px" }}>
+              ERP Implementation Cost &amp; Timeline: What to Expect
+            </h2>
+            <p style={{ fontSize: "0.88rem", color: "#556a84", lineHeight: "1.65", marginBottom: "32px" }}>
+              Every ERP project is scoped differently, but the table below gives a general planning benchmark based on business size and complexity.
+            </p>
+          </GsapReveal>
+
+          {/* 3 tier columns */}
+          <div className="erp-pricing-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "20px", marginBottom: "32px" }}>
+            {pricingTiers.map((tier, idx) => (
+              <GsapReveal key={idx} y={20} duration={0.7} delay={idx * 0.1}>
+                <div style={{ display: "flex", alignItems: "flex-start", gap: "12px" }}>
+                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", paddingTop: "2px" }}>
+                    {/* Top Icon */}
+                    <div style={{ width: "24px", height: "24px", borderRadius: "6px", backgroundColor: "#3779b9", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "11px" }}>
+                      <i className="fa-solid fa-calendar-days" />
+                    </div>
+                    {/* Vertical Line */}
+                    <div style={{ width: "1.5px", height: "46px", backgroundColor: "#3779b9", margin: "4px 0", opacity: 0.6 }} />
+                    {/* Bottom Icon */}
+                    <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "11px" }}>
+                      <i className="fa-solid fa-clock" />
+                    </div>
+                  </div>
+
+                  <div style={{ flex: 1 }}>
+                    {/* Top Text (Label) */}
+                    <div style={{ height: "70px" }}>
+                      <p style={{ fontSize: "0.9rem", fontWeight: 800, color: "#1a365d", margin: "0 0 2px" }}>{tier.label}</p>
+                      <p style={{ fontSize: "0.8rem", color: "#556a84", margin: 0 }}>{tier.sub}</p>
+                    </div>
+                    {/* Bottom Text (Timeline) */}
+                    <div>
+                      <p style={{ fontSize: "1rem", fontWeight: 800, color: "#1a365d", margin: "0 0 8px" }}>{tier.timeline}</p>
+                      <p style={{ fontSize: "0.78rem", color: "#556a84", margin: 0, lineHeight: "1.5" }}>{tier.timelineDesc}</p>
+                    </div>
+                  </div>
+                </div>
+              </GsapReveal>
+            ))}
+          </div>
+
+          {/* Note */}
+          <GsapReveal y={10} duration={0.6} delay={0.3}>
+            <div style={{ display: "flex", gap: "10px", backgroundColor: "#eef4fb", borderRadius: "12px", padding: "16px 20px" }}>
+              <div style={{ width: "24px", height: "24px", borderRadius: "50%", border: "2px solid #3779b9", color: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "12px", flexShrink: 0 }}>
+                <i className="fa-solid fa-info" />
+              </div>
+              <p style={{ fontSize: "0.82rem", color: "#1a365d", lineHeight: "1.5", margin: 0 }}>
+                <strong>Note:</strong> Actual cost and timeline depend on the number of modules, degree of customization, data volume, and integration complexity.<br />
+                A discovery call is the fastest way to get an accurate estimate for your business.
+              </p>
+            </div>
+          </GsapReveal>
+        </div>
+
+      </div>
+      {/* END erp-features-grid */}
+
+      {/* ══════════════════════════════════════════════════════
+          FULL-WIDTH — Industries We Serve
+      ══════════════════════════════════════════════════════ */}
+      <div className="erp-section-padding" style={{ backgroundColor: "#ffffff", borderTop: "1px solid #edf0f5" }}>
+        <div className="container">
+          <GsapReveal y={25} duration={0.8}>
+            <div className="sec-title mb-2">
+              <div className="sec-title__shape"></div>
+              <p className="sec-title__tagline">WHO WE SERVE</p>
+            </div>
+            <h2 className="sec-title__title erp-section-title" style={{ marginBottom: "36px" }}>
+              Industries We Serve
+            </h2>
+          </GsapReveal>
+
+          {/* 3-column responsive cards grid */}
+          <div className="row g-4">
+            {[...leftIndustries, ...rightIndustries].map((ind, idx) => (
+              <div className="col-lg-4 col-md-6 col-12" key={idx}>
+                <GsapReveal y={20} duration={0.6} delay={idx * 0.08}>
+                  <div
+                    style={{
+                      background: "#f8fafc", /* slightly darker off-white to contrast with the #ffffff background */
+                      border: "1px solid #e2e8f0",
+                      borderRadius: "14px",
+                      padding: "28px 24px 20px",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "14px",
+                      boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
+                      transition: "box-shadow 0.25s, transform 0.25s",
+                      cursor: "default",
+                      height: "100%",
+                      boxSizing: "border-box",
+                    }}
+                    onMouseEnter={e => {
+                      (e.currentTarget as HTMLDivElement).style.boxShadow = "0 10px 28px rgba(0,0,0,0.10)";
+                      (e.currentTarget as HTMLDivElement).style.transform = "translateY(-3px)";
+                    }}
+                    onMouseLeave={e => {
+                      (e.currentTarget as HTMLDivElement).style.boxShadow = "0 2px 8px rgba(0,0,0,0.04)";
+                      (e.currentTarget as HTMLDivElement).style.transform = "translateY(0)";
+                    }}
+                  >
+                    {/* Icon + Title row */}
+                    <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
+                      <div style={{
+                        width: "80px", height: "80px", borderRadius: "12px",
+                        background: "linear-gradient(135deg, #eef4fb 0%, #dbeafe 100%)",
+                        display: "flex", alignItems: "center", justifyContent: "center",
+                        color: "#3779b9", fontSize: "22px", flexShrink: 0,
+                      }}>
+                        <img src={ind.icon} alt={ind.title} className="aniamtion-key-5" style={{ width: "50px", height: "50px", objectFit: "contain" }} />
+                      </div>
+                      <h3 style={{ fontSize: "1.05rem", fontWeight: 800, color: "#1a365d", margin: 0, lineHeight: "1.3" }}>
+                        {ind.title}
+                      </h3>
+                    </div>
+
+                    {/* Description */}
+                    <p style={{ fontSize: "0.87rem", color: "#556a84", lineHeight: "1.7", margin: 0, flex: 1 }}>
+                      {ind.desc.charAt(0).toUpperCase() + ind.desc.slice(1)}.
+                    </p>
+
+                    {/* Contact link */}
+                    <div style={{ borderTop: "1px solid #edf0f5", paddingTop: "14px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                      <a
+                        href="/contact"
+                        style={{ fontSize: "14px", fontWeight: 600, color: "#3779b9", textDecoration: "none", letterSpacing: "0.01em" }}
+                        onMouseEnter={e => (e.currentTarget.style.textDecoration = "underline")}
+                        onMouseLeave={e => (e.currentTarget.style.textDecoration = "none")}
+                      >
+                        Contact Us
+                      </a>
+                      <span style={{ color: "#3779b9", fontSize: "16px" }}>→</span>
+                    </div>
+                  </div>
+                </GsapReveal>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+          FULL-WIDTH — Challenges (dark navy)
+      ══════════════════════════════════════════════════════ */}
+      <div className="erp-section-padding" style={{ backgroundColor: "#0d1b2a", position: "relative", overflow: "hidden" }}>
+        {/* Subtle bg glow */}
+        <div style={{ position: "absolute", bottom: "-60px", left: "-60px", width: "320px", height: "320px", borderRadius: "50%", background: "radial-gradient(circle, rgba(55,121,185,0.12) 0%, transparent 70%)", pointerEvents: "none" }} />
+        <div style={{ position: "absolute", top: "-60px", right: "-60px", width: "280px", height: "280px", borderRadius: "50%", background: "radial-gradient(circle, rgba(55,121,185,0.10) 0%, transparent 70%)", pointerEvents: "none" }} />
+
+        <div className="container">
+          <GsapReveal y={25} duration={0.8}>
+            <div className="sec-title mb-2">
+              <div className="sec-title__shape"></div>
+              <p className="sec-title__tagline text-white" style={{ opacity: 0.8 }}>HOW WE SOLVE IT</p>
+            </div>
+            <h2 className="sec-title__title erp-section-title" style={{ color: "#ffffff", marginBottom: "32px" }}>
+              Common ERP Implementation<br />Challenges — and How We Solve Them
+            </h2>
+            {/* Column labels */}
+            <div className="row d-none d-md-flex" style={{ marginBottom: "16px" }}>
+              <div className="col-md-5">
+                <span style={{ fontSize: "22px", fontWeight: 700, color: "#3779b9", letterSpacing: "0.04em", textTransform: "uppercase" }}>Challenge</span>
+              </div>
+              <div className="col-md-2"></div>
+              <div className="col-md-5">
+                <span style={{ fontSize: "22px", fontWeight: 700, color: "#3779b9", letterSpacing: "0.04em", textTransform: "uppercase" }}>Our Approach</span>
+              </div>
+            </div>
+          </GsapReveal>
+
+          <div style={{ display: "flex", flexDirection: "column" }}>
+            {challengesData.map((item, idx) => (
+              <GsapReveal key={idx} y={15} duration={0.6} delay={idx * 0.07}>
+                <div className="row align-items-center" style={{
+                  padding: "20px 0", borderBottom: idx < challengesData.length - 1 ? "1px solid rgba(255,255,255,0.08)" : "none"
+                }}>
+                  {/* Challenge */}
+                  <div className="col-md-5 d-flex align-items-center gap-3 mb-3 mb-md-0">
+                    <div style={{ width: "32px", height: "32px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#ffffff", fontSize: "11px", fontWeight: 800, flexShrink: 0 }}>
+                      {item.num}
+                    </div>
+                    <p style={{ fontSize: "1.15rem", fontWeight: 600, color: "#ffffff", margin: 0, lineHeight: "1.5" }}>{item.challenge}</p>
+                  </div>
+                  {/* Arrow */}
+                  <div className="col-md-2 d-none d-md-flex justify-content-center text-primary" style={{ fontSize: "14px", color: "#3779b9" }}>
+                    <i className="fa-solid fa-arrow-right" />
+                  </div>
+                  {/* Approach */}
+                  <div className="col-md-5">
+                    <p style={{ fontSize: "1.05rem", color: "#b0bec5", margin: 0, lineHeight: "1.6" }}>{item.approach}</p>
+                  </div>
+                </div>
+              </GsapReveal>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeaturesGrid;

src/components/erp-development-service/Hero.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React, { useState } from "react";
+import GsapReveal from "@/components/common/GsapReveal";
+import Link from "next/link";
+import ContactPopup from "@/components/common/ContactPopup/ContactPopup";
+
+const Hero = () => {
+  const [isContactOpen, setIsContactOpen] = useState(false);
+
+  return (
+    <div className="hero1-section-area" id="home" style={{ paddingTop: '150px', paddingBottom: '100px', backgroundColor: '#f9f9fc', position: 'relative', overflow: 'hidden' }}>
+      <div className="container">
+        <div className="row align-items-center">
+          <div className="col-lg-6">
+            <div className="hero1-header heading1">
+              <GsapReveal y={30} duration={0.8}>
+                <h5 style={{ color: 'var(--primary-blue)', fontWeight: 600, letterSpacing: '1px', textTransform: 'uppercase', marginBottom: '15px' }}>
+                  ERP Development & Implementation Services
+                </h5>
+              </GsapReveal>
+              
+              <GsapReveal y={30} duration={1} delay={0.2}>
+                <h1 className="text-anime-style-3" style={{ fontSize: '3.5rem', lineHeight: '1.2', marginBottom: '20px', color: '#1a1a2e' }}>
+                  Everything a growing business needs to scale
+                </h1>
+              </GsapReveal>
+              
+              <GsapReveal y={30} duration={1.2} delay={0.4}>
+                <p style={{ fontSize: '1.125rem', color: '#555', marginBottom: '30px', lineHeight: '1.6' }}>
+                  Process, pricing, features, and FAQs to help you choose the right ERP implementation partner. We build and deploy unified systems that connect finance, HR, inventory, and sales.
+                </p>
+              </GsapReveal>
+              
+              <GsapReveal y={30} duration={1.4} delay={0.6}>
+                <div className="btn-area1 d-flex flex-wrap gap-3">
+                  <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
+                    Free ERP Assessment
+                    <i className="fa-solid fa-angle-right" style={{ marginLeft: '10px' }}></i>
+                  </button>
+                  <Link href="#process" className="vl-btn1" style={{ backgroundColor: 'transparent', color: 'var(--primary-blue)', border: '2px solid var(--primary-blue)' }}>
+                    See Our Process <i className="fa-solid fa-angle-right" style={{ marginLeft: '10px' }}></i>
+                  </Link>
+                </div>
+              </GsapReveal>
+            </div>
+          </div>
+          
+          <div className="col-lg-6 mt-5 mt-lg-0">
+            <GsapReveal y={30} duration={1.5} delay={0.5}>
+              <div className="hero-image-wrapper" style={{ position: 'relative' }}>
+                <img 
+                  src="/assets/img-app/home/banner/centre-img.webp" 
+                  alt="ERP Dashboard Graphic" 
+                  className="img-fluid rounded-4 shadow-lg" 
+                  style={{ width: '100%', objectFit: 'cover', borderRadius: '20px' }}
+                />
+                
+                {/* Floating Elements for Animation */}
+                <img 
+                  src="/assets/img-app/home/banner/left-element.webp" 
+                  alt="Floating element" 
+                  className="position-absolute floating-slow" 
+                  style={{ bottom: '-30px', left: '-30px', width: '120px' }} 
+                />
+                <img 
+                  src="/assets/img-app/home/banner/right-element.webp" 
+                  alt="Floating element" 
+                  className="position-absolute floating-fast" 
+                  style={{ top: '-30px', right: '-20px', width: '100px' }} 
+                />
+              </div>
+            </GsapReveal>
+          </div>
+        </div>
+      </div>
+      <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
+    </div>
+  );
+};
+
+export default Hero;

src/components/erp-development-service/PricingAndIndustries.tsx

@@ -0,0 +1,233 @@
+"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 &amp; 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;

src/components/erp-development-service/Process.tsx

@@ -0,0 +1,333 @@
+"use client";
+import React from "react";
+import GsapReveal from "@/components/common/GsapReveal";
+
+const leftSteps = [
+  {
+    id: 1,
+    title: "Discovery & Business Process Analysis —",
+    desc: "map current workflows, pain points, and requirements",
+  },
+  {
+    id: 2,
+    title: "Solution Design & Planning —",
+    desc: "select modules, define architecture, and set a project roadmap",
+  },
+  {
+    id: 3,
+    title: "Development, Configuration & Customization —",
+    desc: "build or configure the ERP around your processes",
+  },
+  {
+    id: 4,
+    title: "Data Migration & Integration —",
+    desc: "move and validate data; connect third-party tools",
+  },
+];
+
+const rightSteps = [
+  {
+    id: 5,
+    title: "Testing & Quality Assurance —",
+    desc: "functional, performance, and user-acceptance testing",
+  },
+  {
+    id: 6,
+    title: "Deployment & Go-Live —",
+    desc: "phased or full rollout with contingency planning",
+  },
+  {
+    id: 7,
+    title: "Training & Change Management —",
+    desc: "hands-on training so teams adopt the system confidently",
+  },
+  {
+    id: 8,
+    title: "Post-Go-Live Support & Optimization —",
+    desc: "monitoring, fixes, and continuous improvement",
+  },
+];
+
+const StepItem = ({ step, delay }: { step: (typeof leftSteps)[0]; delay: number }) => (
+  <GsapReveal y={20} duration={0.7} delay={delay}>
+    <div
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "16px",
+        marginBottom: "28px",
+      }}
+    >
+      {/* Number circle */}
+      <div
+        style={{
+          flexShrink: 0,
+          width: "36px",
+          height: "36px",
+          borderRadius: "50%",
+          backgroundColor: "#1a2e4a",
+          color: "#ffffff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "0.88rem",
+          fontWeight: 700,
+        }}
+      >
+        {step.id}
+      </div>
+      {/* Text */}
+      <div>
+        <p style={{ margin: 0, fontSize: "0.97rem", color: "#1a1a2e", lineHeight: "1.55" }}>
+          <strong style={{ fontWeight: 700 }}>{step.title}</strong>{" "}
+          <span style={{ color: "#555", fontWeight: 400 }}>{step.desc}</span>
+        </p>
+      </div>
+    </div>
+  </GsapReveal>
+);
+
+const Process = () => {
+  return (
+    <>
+      {/* ── ERP Implementation Process: Step by Step ── */}
+      <section
+        id="process"
+        style={{
+          backgroundColor: "#f0f4f8",
+          padding: "80px 0",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* ── Background decorative blobs ── */}
+        {/* Large light circle — top left */}
+        <div
+          style={{
+            position: "absolute",
+            top: "-120px",
+            left: "-120px",
+            width: "420px",
+            height: "420px",
+            borderRadius: "50%",
+            background: "radial-gradient(circle, rgba(26,46,74,0.06) 0%, transparent 70%)",
+            pointerEvents: "none",
+          }}
+        />
+        {/* Medium circle — bottom right */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: "-100px",
+            right: "-100px",
+            width: "360px",
+            height: "360px",
+            borderRadius: "50%",
+            background: "radial-gradient(circle, rgba(232,165,0,0.10) 0%, transparent 70%)",
+            pointerEvents: "none",
+          }}
+        />
+        {/* Subtle arc stroke — centre right */}
+        <svg
+          style={{
+            position: "absolute",
+            top: "50%",
+            right: "4%",
+            transform: "translateY(-50%)",
+            opacity: 0.07,
+            pointerEvents: "none",
+          }}
+          width="220"
+          height="220"
+          viewBox="0 0 220 220"
+          fill="none"
+        >
+          <circle cx="110" cy="110" r="100" stroke="#1a2e4a" strokeWidth="18" />
+          <circle cx="110" cy="110" r="60" stroke="#1a2e4a" strokeWidth="10" />
+        </svg>
+
+        <div className="container" style={{ position: "relative", zIndex: 1 }}>
+          <div className="row align-items-stretch">
+
+            {/* ── LEFT: title + subtitle + steps 1-4 ── */}
+            <div className="col-lg-5 mb-5 mb-lg-0 pe-lg-5 d-flex flex-column">
+              <GsapReveal y={30} duration={0.9}>
+                <div className="sec-title mb-2">
+                  <div className="sec-title__shape"></div>
+                  <p className="sec-title__tagline">HOW WE WORK</p>
+                </div>
+                <h2 className="sec-title__title erp-section-title">
+                  Our ERP Implementation Process: Step by Step
+                </h2>
+                <p
+                  style={{
+                    fontSize: "0.97rem",
+                    color: "#555",
+                    lineHeight: "1.7",
+                    marginBottom: "36px",
+                  }}
+                >
+                  A predictable, proven process is what separates a successful ERP rollout from a costly failure. Here is how a professional ERP implementation typically unfolds:
+                </p>
+              </GsapReveal>
+
+              {leftSteps.map((step, i) => (
+                <StepItem key={step.id} step={step} delay={i * 0.1} />
+              ))}
+            </div>
+
+            {/* ── RIGHT: image + steps 5-8 ── */}
+            <div className="col-lg-7 d-flex flex-column justify-content-between">
+              {/* Laptop image */}
+              <GsapReveal y={30} duration={0.9} delay={0.15}>
+                <img
+                  src="/assets/images/services/erp/new/how-we-work/how-we-work.webp"
+                  alt="ERP implementation process"
+                  className="img-fluid rounded-4"
+                  style={{
+                    width: "100%",
+                    maxHeight: "310px",
+                    objectFit: "cover",
+                    marginBottom: "36px",
+                    boxShadow: "0 8px 28px rgba(0,0,0,0.10)",
+                  }}
+                />
+              </GsapReveal>
+
+              {/* Steps 5-8 in a 2-column sub-grid */}
+              <div className="row g-0">
+                {rightSteps.map((step, i) => (
+                  <div className="col-md-6" key={step.id}>
+                    <StepItem step={step} delay={0.2 + i * 0.1} />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </section>
+
+      {/* ── Key Benefits — connected timeline layout ── */}
+      <section
+        className="erp-section-padding"
+        style={{
+          backgroundColor: "#ffffff",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Decorative blobs */}
+        <div style={{ position: "absolute", bottom: "-80px", right: "-80px", width: "380px", height: "380px", borderRadius: "50%", background: "radial-gradient(circle, rgba(55,121,185,0.08) 0%, transparent 70%)", pointerEvents: "none" }} />
+        <div style={{ position: "absolute", top: "-60px", left: "-60px", width: "260px", height: "260px", borderRadius: "50%", background: "radial-gradient(circle, rgba(55,121,185,0.06) 0%, transparent 70%)", pointerEvents: "none" }} />
+
+        <div className="container" style={{ position: "relative", zIndex: 1 }}>
+
+          {/* Title */}
+          <GsapReveal y={30} duration={0.8}>
+            <div className="sec-title mb-2">
+              <div className="sec-title__shape"></div>
+              <p className="sec-title__tagline">BENEFITS</p>
+            </div>
+            <h2 style={{ marginBottom: "35px" }} className="sec-title__title erp-section-title">
+              Key Benefits of Professional<br />ERP Implementation
+            </h2>
+          </GsapReveal>
+
+          {/* ── Row 1: items 01–04 ── */}
+          <GsapReveal y={30} duration={0.9} delay={0.1}>
+            <div className="erp-benefits-row" style={{ display: "flex", alignItems: "flex-start", marginBottom: "40px" }}>
+              {[
+                { num: "01", icon: "/assets/images/services/erp/new/benifits/1.png", desc: "Unified, real-time data across finance, inventory, and operations" },
+                { num: "02", icon: "/assets/images/services/erp/new/benifits/2.png", desc: "Fewer manual errors through automated workflows and approvals" },
+                { num: "03", icon: "/assets/images/services/erp/new/benifits/3.png", desc: "Faster financial close and more accurate reporting" },
+                { num: "04", icon: "/assets/images/services/erp/new/benifits/4.png", desc: "Better demand forecasting and inventory control" },
+              ].map((item, idx, arr) => (
+                <React.Fragment key={item.num}>
+                  {/* Benefit item */}
+                  <div className="erp-benefit-item" style={{ flex: 1, minWidth: 0 }}>
+                    {/* Icon + number */}
+                    <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "14px" }}>
+                      <div style={{
+                        width: "60px", height: "60px", borderRadius: "50%",
+                        border: "2px solid #3779b9",
+                        backgroundColor: "#f0f7ff",
+                        display: "flex", alignItems: "center", justifyContent: "center",
+                        flexShrink: 0,
+                      }}>
+                        <img src={item.icon} alt="benefit icon" className="aniamtion-key-5" style={{ width: "50px", height: "50px", objectFit: "contain" }} />
+                      </div>
+                      <span style={{ fontSize: "1.05rem", fontWeight: 700, color: "#1a2e4a" }}>{item.num}</span>
+                    </div>
+                    {/* Description */}
+                    <p style={{ fontSize: "0.88rem", color: "#444", lineHeight: "1.55", margin: 0, paddingRight: "12px" }}>
+                      {item.desc}
+                    </p>
+                  </div>
+
+                  {/* SVG connector arrow (between items, not after last) */}
+                  {idx < arr.length - 1 && (
+                    <div className="erp-benefit-connector" style={{ flexShrink: 0, width: "52px", marginTop: "15px" }}>
+                      <svg width="52" height="14" viewBox="0 0 52 14" fill="none">
+                        <line x1="0" y1="7" x2="40" y2="7" stroke="#a8c0d8" strokeWidth="1.8" strokeDasharray="4 3" />
+                        <circle cx="20" cy="7" r="3" fill="#a8c0d8" />
+                        <polygon points="40,3 52,7 40,11" fill="#a8c0d8" />
+                      </svg>
+                    </div>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+          </GsapReveal>
+
+          {/* ── Row 2: items 05–07 ── */}
+          <GsapReveal y={30} duration={0.9} delay={0.25}>
+            <div className="erp-benefits-row" style={{ display: "flex", alignItems: "flex-start" }}>
+              {[
+                { num: "05", icon: "/assets/images/services/erp/new/benifits/5.png", desc: "Improved regulatory and tax compliance" },
+                { num: "06", icon: "/assets/images/services/erp/new/benifits/6.png", desc: "Scalable infrastructure that grows with the business" },
+                { num: "07", icon: "/assets/images/services/erp/new/benifits/7.png", desc: "Lower long-term operating costs through process automation" },
+              ].map((item, idx, arr) => (
+                <React.Fragment key={item.num}>
+                  {/* Benefit item — takes same 1/4 width so row 2 aligns under row 1 */}
+                  <div className="erp-benefit-item" style={{ flex: "0 0 calc(25% - 13px)", minWidth: 0 }}>
+                    <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "14px" }}>
+                      <div style={{
+                        width: "60px", height: "60px", borderRadius: "50%",
+                        border: "2px solid #3779b9",
+                        backgroundColor: "#f0f7ff",
+                        display: "flex", alignItems: "center", justifyContent: "center",
+                        flexShrink: 0,
+                      }}>
+                        <img src={item.icon} alt="benefit icon" className="aniamtion-key-5" style={{ width: "36px", height: "36px", objectFit: "contain" }} />
+                      </div>
+                      <span style={{ fontSize: "1.05rem", fontWeight: 700, color: "#1a2e4a" }}>{item.num}</span>
+                    </div>
+                    <p style={{ fontSize: "0.88rem", color: "#444", lineHeight: "1.55", margin: 0, paddingRight: "12px" }}>
+                      {item.desc}
+                    </p>
+                  </div>
+
+                  {idx < arr.length - 1 && (
+                    <div className="erp-benefit-connector" style={{ flexShrink: 0, width: "52px", marginTop: "15px" }}>
+                      <svg width="52" height="14" viewBox="0 0 52 14" fill="none">
+                        <line x1="0" y1="7" x2="40" y2="7" stroke="#a8c0d8" strokeWidth="1.8" strokeDasharray="4 3" />
+                        <circle cx="20" cy="7" r="3" fill="#a8c0d8" />
+                        <polygon points="40,3 52,7 40,11" fill="#a8c0d8" />
+                      </svg>
+                    </div>
+                  )}
+                </React.Fragment>
+              ))}
+              {/* Empty spacer to fill row 2 to match row 1 total width */}
+              <div style={{ flex: 1 }} />
+            </div>
+          </GsapReveal>
+
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Process;

src/components/erp-development-service/ServicesList.tsx

@@ -0,0 +1,426 @@
+"use client";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import GsapReveal from "@/components/common/GsapReveal";
+
+// Register ScrollTrigger
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+const services = [
+  {
+    id: 1,
+    title: "ERP Consulting & Requirement Analysis",
+    desc: "Before any code is written or software is configured, our consultants study your current workflows, pain points, and growth plans. This stage defines the modules you need — finance, inventory, procurement, HR, CRM — and sets measurable success criteria for the project.",
+  },
+  {
+    id: 2,
+    title: "ERP Implementation",
+    desc: "This covers configuration, environment setup, workflow automation, and rollout planning. Correct implementation is what determines whether an ERP investment delivers ROI — poorly implemented systems are a leading cause of failed ERP projects.",
+  },
+  {
+    id: 3,
+    title: "ERP Customization & Enhancement",
+    desc: "Existing ERP systems are extended with custom fields, approval workflows, role-based dashboards, and business-specific logic so the platform keeps pace with your business as it evolves.",
+  },
+  {
+    id: 4,
+    title: "System Integration",
+    desc: "The ERP is connected to the other tools you already run — payment gateways, e-commerce platforms, CRMs, shipping providers, and banking systems — so data moves automatically instead of being re-entered manually.",
+  },
+  {
+    id: 5,
+    title: "Custom Dashboards & Reporting",
+    desc: "Role-specific dashboards give finance, operations, and leadership teams the real-time metrics they need, without waiting on manual reports.",
+  },
+  {
+    id: 6,
+    title: "Post-Implementation Support & Maintenance",
+    desc: "Go-live is the start, not the end. Ongoing support covers bug fixes, performance monitoring, user training refreshers, and feature enhancements as the business grows.",
+  },
+];
+
+/* ── Hook: detect if viewport ≤ 991px ────────────────────────── */
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 991px)");
+    setIsMobile(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   DESKTOP LAYOUT  (≥ 992px) — GSAP scroll-pin
+═══════════════════════════════════════════════════════════════ */
+const DesktopLayout = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const stickyRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useLayoutEffect(() => {
+    if (!containerRef.current || !stickyRef.current) return;
+
+    let st: globalThis.ScrollTrigger;
+    const totalItems = services.length;
+
+    st = ScrollTrigger.create({
+      trigger: containerRef.current,
+      pin: stickyRef.current,
+      start: "top top",
+      end: `+=${window.innerHeight * totalItems}`,
+      onUpdate: (self) => {
+        const segmentProgress = self.progress * totalItems;
+        let nextIndex = Math.floor(segmentProgress);
+        if (nextIndex >= totalItems) nextIndex = totalItems - 1;
+        if (nextIndex < 0) nextIndex = 0;
+        setActiveIndex((prev) => (prev !== nextIndex ? nextIndex : prev));
+      },
+    });
+    ScrollTrigger.refresh();
+
+    return () => {
+      if (st) st.kill();
+      ScrollTrigger.refresh();
+    };
+  }, []);
+
+  const handleDotClick = (index: number) => {
+    if (!containerRef.current) return;
+    const startY = containerRef.current.offsetTop;
+    window.scrollTo({ top: startY + index * window.innerHeight, behavior: "smooth" });
+  };
+
+  return (
+    <section
+      ref={containerRef}
+      style={{
+        backgroundColor: "#031427",
+        color: "#ffffff",
+        position: "relative",
+        zIndex: 20,
+        isolation: "isolate",
+      }}
+    >
+      <div
+        ref={stickyRef}
+        style={{
+          height: "100vh",
+          display: "flex",
+          flexDirection: "row",
+          width: "100%",
+          position: "relative",
+          zIndex: 100,
+          backgroundColor: "#031427",
+          backgroundImage: "url('/assets/images/services/erp/new/erp-services/erp-services-bg.webp')",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      >
+        {/* LEFT COLUMN */}
+        <div style={{ width: "44%", flexShrink: 0, display: "flex", flexDirection: "column", justifyContent: "center", paddingLeft: "8%", paddingRight: "4%" }}>
+          <div className="sec-title mb-2">
+            <div className="sec-title__shape"></div>
+            <p className="sec-title__tagline text-white" style={{ opacity: 0.75 }}>ERP SERVICES</p>
+          </div>
+          <h2 style={{ fontSize: "clamp(1.6rem, 2.4vw, 2.25rem)", fontWeight: 700, color: "#ffffff", lineHeight: 1.22, margin: "0 0 14px" }}>
+            Our End-to-End ERP Development &amp; Implementation Services
+          </h2>
+          <p style={{ fontSize: "0.9rem", color: "#8aaecb", lineHeight: 1.7, margin: "0 0 28px", maxWidth: "420px" }}>
+            A complete ERP engagement typically spans the following service areas:
+          </p>
+          <div style={{ width: "40px", height: "2px", backgroundColor: "#3a86ff", marginBottom: "24px", borderRadius: "2px" }} />
+          <div style={{ fontSize: "0.72rem", color: "#3a86ff", letterSpacing: "3px", marginBottom: "14px", fontWeight: 700 }}>
+            {String(activeIndex + 1).padStart(2, "0")} / {String(services.length).padStart(2, "0")}
+          </div>
+          <div style={{ position: "relative", minHeight: "240px" }}>
+            {services.map((srv, idx) => {
+              const isActive = activeIndex === idx;
+              return (
+                <div key={srv.id} style={{ position: "absolute", top: 0, left: 0, opacity: isActive ? 1 : 0, transform: isActive ? "translateY(0)" : "translateY(20px)", transition: "opacity 0.5s ease, transform 0.5s ease", pointerEvents: isActive ? "auto" : "none" }}>
+                  <h3 style={{ fontSize: "clamp(1.1rem, 1.6vw, 1.45rem)", fontWeight: 700, color: "#ffffff", lineHeight: 1.3, margin: "0 0 12px" }}>{srv.title}</h3>
+                  <p style={{ fontSize: "0.87rem", color: "#8aaecb", lineHeight: 1.8, margin: 0, maxWidth: "380px" }}>{srv.desc}</p>
+                </div>
+              );
+            })}
+          </div>
+          <div style={{ display: "flex", gap: "8px", marginTop: "28px" }}>
+            {services.map((srv, idx) => {
+              const isActive = activeIndex === idx;
+              return (
+                <div key={srv.id} onClick={() => handleDotClick(idx)} title={srv.title} style={{ height: "4px", width: isActive ? "40px" : "18px", backgroundColor: isActive ? "#3a86ff" : "rgba(255,255,255,0.18)", cursor: "pointer", transition: "width 0.3s, background-color 0.3s", borderRadius: "2px" }} />
+              );
+            })}
+          </div>
+        </div>
+
+        {/* RIGHT COLUMN — isometric stack */}
+        <div style={{ flex: 1, height: "100vh", position: "relative", display: "flex", alignItems: "center", justifyContent: "center", perspective: "1400px" }}>
+          <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(58,134,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(58,134,255,0.05) 1px, transparent 1px)", backgroundSize: "48px 48px", pointerEvents: "none" }} />
+          <div style={{ position: "relative", width: "340px", height: `${(services.length - 1) * 90 + 220}px` }}>
+            {services.map((srv, idx) => {
+              const isActive = activeIndex === idx;
+              const baseTop = idx * 90;
+              const translateY = isActive ? baseTop - 15 : baseTop;
+              const scale = isActive ? 1.1 : 1;
+              return (
+                <div key={srv.id} style={{ position: "absolute", width: "100%", height: "220px", top: 0, backgroundImage: `url('/assets/images/services/erp/new/erp-services/${srv.id}.webp')`, backgroundSize: "contain", backgroundRepeat: "no-repeat", backgroundPosition: "center", backgroundColor: "transparent", border: "none", filter: isActive ? "drop-shadow(0 0 8px #ffcc00) drop-shadow(0 0 16px rgba(255,204,0,0.6))" : "drop-shadow(0 4px 6px rgba(0,0,0,0.3))", transform: `translateY(${translateY}px) scale(${scale})`, transition: "transform 0.6s cubic-bezier(0.34,1.56,0.64,1), filter 0.5s, opacity 0.5s", opacity: isActive ? 1 : 0.65, zIndex: services.length - idx }} />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+   MOBILE LAYOUT  (≤ 991px) — stacked list + clickable layers
+═══════════════════════════════════════════════════════════════ */
+const MobileLayout = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  const open = (idx: number) => setOpenIndex(idx);
+  const close = () => setOpenIndex(null);
+  const prev = () => setOpenIndex((i) => ((i ?? 0) - 1 + services.length) % services.length);
+  const next = () => setOpenIndex((i) => ((i ?? 0) + 1) % services.length);
+
+  return (
+    <section style={{ backgroundColor: "#031427", backgroundImage: "url('/assets/images/services/erp/new/erp-services/erp-services-bg.webp')", backgroundSize: "cover", backgroundPosition: "center", color: "#ffffff", padding: "80px 0", position: "relative", zIndex: 10 }}>
+      <div className="container">
+
+        {/* ── Header ── */}
+        <GsapReveal y={25} duration={0.8}>
+          <div style={{ textAlign: "center", marginBottom: "44px" }}>
+            <div className="sec-title mb-2 justify-content-center">
+              <div className="sec-title__shape"></div>
+              <p className="sec-title__tagline text-white" style={{ opacity: 0.75 }}>ERP SERVICES</p>
+            </div>
+            <h2 style={{ fontSize: "clamp(1.4rem, 5vw, 2rem)", fontWeight: 700, color: "#ffffff", lineHeight: 1.25, margin: "0 0 14px" }}>
+              Our End-to-End ERP Development &amp; Implementation Services
+            </h2>
+            <p style={{ fontSize: "0.88rem", color: "#8aaecb", lineHeight: 1.7, maxWidth: "460px", margin: "0 auto" }}>
+              A complete ERP engagement typically spans the following service areas:
+            </p>
+          </div>
+        </GsapReveal>
+
+        {/* ── Layers + Orbs ── */}
+        <GsapReveal y={20} duration={0.8} delay={0.2}>
+          <div style={{ display: "flex", justifyContent: "center", alignItems: "flex-start", gap: "20px" }}>
+
+            {/* Isometric layer stack */}
+          <div style={{
+            position: "relative",
+            width: "200px",
+            height: `${(services.length - 1) * 52 + 120}px`,
+            flexShrink: 0,
+          }}>
+            {services.map((srv, idx) => {
+              const isActive = openIndex === idx;
+              return (
+                <div
+                  key={srv.id}
+                  onClick={() => open(idx)}
+                  title={srv.title}
+                  style={{
+                    position: "absolute",
+                    top: `${idx * 52}px`,
+                    left: 0,
+                    width: "100%",
+                    height: "120px",
+                    backgroundImage: `url('/assets/images/services/erp/new/erp-services/${srv.id}.webp')`,
+                    backgroundSize: "contain",
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: "center",
+                    cursor: "pointer",
+                    filter: isActive
+                      ? "drop-shadow(0 0 10px #ffcc00) drop-shadow(0 0 22px rgba(255,204,0,0.55))"
+                      : "drop-shadow(0 3px 6px rgba(0,0,0,0.55))",
+                    transform: isActive ? "translateY(-10px) scale(1.09)" : "scale(1)",
+                    transition: "filter 0.38s, transform 0.38s",
+                    zIndex: services.length - idx,
+                  }}
+                />
+              );
+            })}
+          </div>
+
+          {/* Orb column — one orb per layer, vertically centred with each layer */}
+          <div style={{
+            display: "flex",
+            flexDirection: "column",
+            paddingTop: "32px",    /* align with layer centres */
+            gap: "16px",
+          }}>
+            {services.map((srv, idx) => {
+              const isActive = openIndex === idx;
+              return (
+                <div key={srv.id} onClick={() => open(idx)} title={srv.title}
+                  style={{ position: "relative", cursor: "pointer" }}>
+                  {/* connector dash */}
+                  <span style={{
+                    position: "absolute",
+                    right: "100%",
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    width: "12px",
+                    height: "1.5px",
+                    marginRight: "3px",
+                    backgroundColor: isActive ? "rgba(255,204,0,0.7)" : "rgba(255,255,255,0.18)",
+                    transition: "background 0.3s",
+                  }} />
+                  {/* orb */}
+                  <div style={{
+                    width: "34px",
+                    height: "34px",
+                    borderRadius: "50%",
+                    background: isActive
+                      ? "radial-gradient(circle at 38% 38%, #ffe566, #d4a017 60%, #8a6500)"
+                      : "radial-gradient(circle at 38% 38%, #bbb, #777 60%, #444)",
+                    boxShadow: isActive
+                      ? "0 0 0 3px rgba(255,204,0,0.55), 0 0 16px rgba(255,204,0,0.35)"
+                      : "0 0 0 2px rgba(180,180,180,0.3)",
+                    transform: isActive ? "scale(1.2)" : "scale(1)",
+                    transition: "background 0.35s, box-shadow 0.35s, transform 0.35s",
+                    position: "relative",
+                  }}>
+                    {isActive && (
+                      <span style={{
+                        position: "absolute",
+                        inset: "-6px",
+                        borderRadius: "50%",
+                        border: "2px solid rgba(255,204,0,0.5)",
+                        animation: "erp-orb-ring 1.1s ease-out infinite",
+                        pointerEvents: "none",
+                      }} />
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          </div>
+        </GsapReveal>
+      </div>
+
+      {/* ── Backdrop ── */}
+      <div
+        onClick={close}
+        style={{
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0,0,0,0.6)",
+          zIndex: 200,
+          opacity: openIndex !== null ? 1 : 0,
+          pointerEvents: openIndex !== null ? "auto" : "none",
+          transition: "opacity 0.35s",
+        }}
+      />
+
+      {/* ── Slide-up card ── */}
+      <div style={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 201,
+        backgroundColor: "#0d1b2a",
+        borderRadius: "20px 20px 0 0",
+        maxHeight: "82vh",
+        overflowY: "auto",
+        boxShadow: "0 -8px 48px rgba(0,0,0,0.65)",
+        transform: openIndex !== null ? "translateY(0)" : "translateY(105%)",
+        transition: "transform 0.42s cubic-bezier(0.32,0.72,0,1)",
+      }}>
+        {openIndex !== null && (
+          <>
+            <div style={{ padding: "24px 22px 0" }}>
+              {/* Close */}
+              <button onClick={close} style={{
+                float: "right",
+                width: "32px", height: "32px",
+                borderRadius: "50%",
+                border: "1px solid rgba(255,255,255,0.2)",
+                backgroundColor: "rgba(255,255,255,0.07)",
+                color: "#fff", fontSize: "16px",
+                cursor: "pointer", lineHeight: 1,
+                display: "flex", alignItems: "center", justifyContent: "center",
+              }}>✕</button>
+
+              {/* Layer image */}
+              <div style={{
+                width: "140px", height: "88px",
+                backgroundImage: `url('/assets/images/services/erp/new/erp-services/${services[openIndex].id}.webp')`,
+                backgroundSize: "contain",
+                backgroundRepeat: "no-repeat",
+                backgroundPosition: "center",
+                margin: "0 auto 20px",
+                filter: "drop-shadow(0 0 10px #ffcc00) drop-shadow(0 0 20px rgba(255,204,0,0.38))",
+              }} />
+
+              {/* Counter */}
+              <div style={{ fontSize: "0.62rem", color: "#3a86ff", letterSpacing: "3px", fontWeight: 700, marginBottom: "10px" }}>
+                {String(openIndex + 1).padStart(2, "0")} / {String(services.length).padStart(2, "0")}
+              </div>
+
+              <h3 style={{ fontSize: "1.25rem", fontWeight: 700, color: "#ffffff", lineHeight: 1.3, margin: "0 0 14px" }}>
+                {services[openIndex].title}
+              </h3>
+              <p style={{ fontSize: "0.88rem", color: "#8aaecb", lineHeight: 1.85, margin: "0 0 28px" }}>
+                {services[openIndex].desc}
+              </p>
+            </div>
+
+            {/* Prev / Next */}
+            <div style={{
+              display: "flex",
+              justifyContent: "space-between",
+              padding: "14px 22px 28px",
+              borderTop: "1px solid rgba(255,255,255,0.07)",
+            }}>
+              <button onClick={prev} style={{
+                display: "flex", alignItems: "center", gap: "6px",
+                backgroundColor: "transparent",
+                border: "1px solid rgba(255,255,255,0.18)",
+                borderRadius: "30px", padding: "9px 20px",
+                color: "#c8d8e8", fontSize: "0.85rem", cursor: "pointer",
+              }}>‹ Prev</button>
+              <button onClick={next} style={{
+                display: "flex", alignItems: "center", gap: "6px",
+                backgroundColor: "#3a86ff",
+                border: "none",
+                borderRadius: "30px", padding: "9px 20px",
+                color: "#fff", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer",
+              }}>Next ›</button>
+            </div>
+          </>
+        )}
+      </div>
+
+      <style>{`
+        @keyframes erp-orb-ring {
+          0%   { opacity: 0.9; transform: scale(1); }
+          100% { opacity: 0;   transform: scale(2); }
+        }
+      `}</style>
+    </section>
+  );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+   ROOT COMPONENT — renders correct layout per viewport
+═══════════════════════════════════════════════════════════════ */
+const ServicesList = () => {
+  const isMobile = useIsMobile();
+  return isMobile ? <MobileLayout /> : <DesktopLayout />;
+};
+
+export default ServicesList;
+
+

src/components/erp-development-service/WhyChooseUs.tsx

@@ -0,0 +1,126 @@
+"use client";
+import React, { useState } from "react";
+import GsapReveal from "@/components/common/GsapReveal";
+
+const whyChooseList = [
+  "End-to-end ownership — from consulting and development through data migration and support",
+  "Custom-built modules for businesses that don't fit generic templates",
+  "Structured, milestone-based implementation process to protect timelines and budgets",
+  "Dedicated post-go-live support instead of a one-time handoff",
+  "Experience across manufacturing, retail, distribution, and services industries"
+];
+
+const WhyChooseUs = () => {
+  return (
+    <section className="erp-section-padding" style={{ backgroundColor: "#ffffff" }}>
+      <div className="container">
+        <div className="row align-items-center">
+          {/* Left Block */}
+          <div className="col-lg-5 mb-5 mb-lg-0">
+            <GsapReveal y={30} duration={1}>
+              <div
+                style={{
+                  backgroundColor: "#eff6fb",
+                  borderRadius: "20px",
+                  padding: "40px",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: "100%",
+                }}
+              >
+                <img
+                  src="/assets/images/services/erp/big-img.webp"
+                  alt="Why Choose Metatron"
+                  className="img-fluid rounded-4 shadow-sm mb-4 aniamtion-key-5"
+                  style={{ width: "100%", maxHeight: "250px", objectFit: "cover" }}
+                />
+                <h3
+                  style={{
+                    color: "#0a2540",
+                    fontSize: "1.75rem",
+                    fontWeight: "700",
+                    lineHeight: "1.4",
+                    textAlign: "center",
+                    margin: 0,
+                  }}
+                >
+                  Why Choose Metatron Cube Solutions for ERP Development & Implementation
+                </h3>
+                <div style={{ width: "80%", height: "2px", backgroundColor: "#8eb6d8", marginTop: "20px" }}></div>
+              </div>
+            </GsapReveal>
+          </div>
+
+          {/* Right List */}
+          <div className="col-lg-7">
+            <div className="ps-lg-4" style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+              {whyChooseList.map((text, idx) => (
+                <GsapReveal key={idx} y={30} duration={0.7} delay={idx * 0.1}>
+                  <ListItem text={text} index={idx + 1} />
+                </GsapReveal>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ListItem = ({ text, index }: { text: string; index: number }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "20px",
+        padding: "15px 20px",
+        backgroundColor: isHovered ? "#f8f9fa" : "transparent",
+        borderRadius: "12px",
+        transition: "all 0.3s ease",
+        transform: isHovered ? "translateX(10px)" : "translateX(0)",
+        cursor: "default",
+      }}
+    >
+      <div
+        style={{
+          width: "40px",
+          height: "40px",
+          borderRadius: "50%",
+          backgroundColor: "#3779b9", // Orange color
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          color: "#ffffff",
+          fontWeight: "700",
+          fontSize: "16px",
+          boxShadow: isHovered ? "0 4px 10px rgba(245, 158, 11, 0.3)" : "none",
+          transition: "box-shadow 0.3s ease",
+        }}
+      >
+        {/* You could use an icon here or a number */}
+        <i className="fa-solid fa-check"></i>
+      </div>
+      <p
+        style={{
+          fontSize: "1.05rem",
+          color: "#334155",
+          lineHeight: "1.6",
+          margin: 0,
+          fontWeight: "500",
+        }}
+      >
+        {text}
+      </p>
+    </div>
+  );
+};
+
+export default WhyChooseUs;