From fb80b0149b096dbe205a40ace2cc1f89fe70ecb3 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 20 Mar 2026 04:39:33 +0000
Subject: [PATCH] Add src/app/services/page.tsx

---
 src/app/services/page.tsx | 222 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 222 insertions(+)
 create mode 100644 src/app/services/page.tsx

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..b903510
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Zap, Lightbulb, CheckCircle, BarChart3 } from "lucide-react";
+
+export default function ServicesPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/services" },
+    { name: "Projects", id: "projects" },
+    { name: "Contact", id: "/contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Solutions",      items: [
+        { label: "Industrial Automation", href: "/services" },
+        { label: "Robot & Cobot Systems", href: "/services" },
+        { label: "Packaging Machinery", href: "/services" },
+        { label: "Smart Gate Systems", href: "/services" },
+        { label: "Custom Engineering", href: "/services" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/about" },
+        { label: "Projects & Portfolio", href: "/" },
+        { label: "Services", href: "/services" },
+        { label: "Careers", href: "/" },
+        { label: "Contact", href: "/contact" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Case Studies", href: "/" },
+        { label: "Technical Documentation", href: "/" },
+        { label: "Support Portal", href: "/" },
+        { label: "FAQ", href: "/" },
+        { label: "Contact Support", href: "/contact" },
+      ],
+    },
+    {
+      title: "Contact",      items: [
+        { label: "Phone: +66 2 123 4567", href: "tel:+6621234567" },
+        { label: "Email: info@milestones.co.th", href: "mailto:info@milestones.co.th" },
+        { label: "LINE: @milestones-tech", href: "https://line.me" },
+        { label: "Bangkok, Thailand", href: "/" },
+        { label: "Mon-Fri 8:00-18:00 (GMT+7)", href: "/" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="large"
+      background="grid"
+      cardStyle="solid"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Milestones Technologies"
+          navItems={navItems}
+          button={{
+            text: "Request Quote",            href: "/contact"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardGallery
+          title="Our Complete Service Portfolio"
+          description="Explore our comprehensive range of automation and engineering services. From industrial automation to smart gate systems, we deliver tailored solutions that drive efficiency, reliability, and growth for your business."
+          tag="OUR SERVICES"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          buttons={[
+            {
+              text: "Request Consultation",              href: "/contact"},
+            {
+              text: "View Case Studies",              href: "/"},
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "animated-grid" }}
+          mediaItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-automation-control-system-wit-1773981131808-cf06236c.png?_wi=1",              imageAlt: "Industrial automation control systems and machinery"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/state-of-the-art-automatic-packaging-sys-1773981131749-3c44c882.png?_wi=1",              imageAlt: "Automatic packaging systems in operation"},
+          ]}
+          mediaAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="services-detail" data-section="services-detail">
+        <FeatureCardTwentyFour
+          tag="CORE SERVICE OFFERINGS"
+          tagIcon={Lightbulb}
+          tagAnimation="slide-up"
+          title="Five Comprehensive Solution Categories"
+          description="We specialize in five core areas of automation and engineering, each designed to address specific industry needs. Every service includes consultation, design, implementation, and ongoing support."
+          features={[
+            {
+              id: "industrial-automation",              title: "Industrial Automation Systems",              author: "Manufacturing Excellence",              description: "Complete automation solutions for production lines, assembly processes, and manufacturing workflows. We design and implement integrated control systems using PLCs, variable frequency drives, and real-time monitoring. Typical results include 40% productivity gains and significantly reduced defects.",              tags: ["PLC Control", "Production Lines", "Real-time Monitoring"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-automation-control-system-wit-1773981131808-cf06236c.png?_wi=1",              imageAlt: "Industrial automation control systems with PLC and drives"},
+            {
+              id: "robot-cobot",              title: "Robot & Cobot Automation",              author: "Precision Robotics",              description: "Cutting-edge robotic and collaborative robot solutions for precise, repetitive tasks. Our services include system design, programming, integration, and operator training. Perfect for warehousing, assembly, material handling, and specialized manufacturing applications. We provide both traditional industrial robots and safe, flexible cobots.",              tags: ["Robotics", "Cobots", "Material Handling"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/advanced-collaborative-robot-with-articu-1773981131004-a16eab70.png?_wi=1",              imageAlt: "Advanced collaborative robots performing complex tasks"},
+            {
+              id: "packaging-machinery",              title: "Packaging Machinery Solutions",              author: "Production Optimization",              description: "Advanced packaging systems for food, pharmaceutical, and consumer goods industries. We provide high-speed, reliable packaging with integrated quality control. Services include system selection, customization, installation, and comprehensive operator training and support.",              tags: ["Packaging", "QC Integration", "High-Speed Systems"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/state-of-the-art-automatic-packaging-sys-1773981131749-3c44c882.png?_wi=1",              imageAlt: "Automatic packaging system with multiple processing stations"},
+            {
+              id: "smart-gate",              title: "Smart Gate & Access Systems",              author: "Security & Convenience",              description: "Premium automatic gate solutions for residential, commercial, and industrial properties. Includes remote control, RFID integration, advanced security features, and mobile app control. We handle design consultation, installation, integration with existing systems, and ongoing maintenance.",              tags: ["Smart Gates", "Access Control", "Security"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/modern-premium-automatic-sliding-gate-wi-1773981131408-069d06de.png?_wi=1",              imageAlt: "Modern automatic sliding gate with remote control"},
+            {
+              id: "custom-engineering",              title: "Custom Engineering Solutions",              author: "Tailored Innovation",              description: "Bespoke automation and engineering solutions designed specifically for your unique operational requirements. From initial concept and design through implementation and ongoing support, we create integrated systems that perfectly match your business needs.",              tags: ["Custom Design", "Integration", "Support"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/custom-engineered-automation-solution-be-1773981131850-3c480c9d.png?_wi=1",              imageAlt: "Custom engineered automation solution being installed"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="service-process" data-section="service-process">
+        <MetricCardEleven
+          tag="OUR PROCESS"
+          tagIcon={BarChart3}
+          tagAnimation="slide-up"
+          title="Structured Approach to Automation Excellence"
+          description="We follow a proven methodology that ensures your project succeeds from start to finish. Each phase is carefully managed with clear timelines, transparent communication, and measurable results."
+          metrics={[
+            {
+              id: "consultation",              value: "1",              title: "Consultation & Assessment",              description: "We analyze your operations, identify automation opportunities, and discuss your goals and budget."},
+            {
+              id: "design",              value: "2",              title: "Design & Planning",              description: "Our engineers develop detailed technical specifications, 3D designs, and implementation timelines for your approval."},
+            {
+              id: "implementation",              value: "3",              title: "Implementation & Installation",              description: "Expert technicians install, configure, and integrate systems with minimal disruption to operations."},
+            {
+              id: "training",              value: "4",              title: "Training & Handover",              description: "Comprehensive operator training and documentation ensure your team can maximize system capabilities."},
+            {
+              id: "support",              value: "5",              title: "Support & Optimization",              description: "24/7 technical support and proactive optimization ensure continued peak performance and ROI."},
+            {
+              id: "maintenance",              value: "6",              title: "Maintenance Contracts",              description: "Ongoing maintenance and upgrade services keep your systems running smoothly for years to come."},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="benefits" data-section="benefits">
+        <ProductCardTwo
+          tag="WHY CHOOSE OUR SERVICES"
+          tagIcon={CheckCircle}
+          tagAnimation="slide-up"
+          title="Measurable Benefits & Results"
+          description="When you partner with Milestones Technologies, you gain access to proven expertise and comprehensive services designed to transform your operations."
+          products={[
+            {
+              id: "benefit-1",              brand: "Efficiency",              name: "Average Productivity Increase",              price: "Up to 40%",              rating: 5,
+              reviewCount: "500+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/complete-industrial-automation-installa-1773981131997-d20ced9d.png?_wi=1",              imageAlt: "Efficient automated production line"},
+            {
+              id: "benefit-2",              brand: "ROI Timeline",              name: "Return on Investment",              price: "8-12 Months",              rating: 5,
+              reviewCount: "450+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-robot-arm-performing-precise--1773981130354-3aca37a1.png?_wi=1",              imageAlt: "Precision robotic assembly"},
+            {
+              id: "benefit-3",              brand: "Quality",              name: "Defect Reduction",              price: "Up to 50%",              rating: 5,
+              reviewCount: "480+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/state-of-the-art-automatic-packaging-sys-1773981131749-3c44c882.png?_wi=1",              imageAlt: "High-quality packaging system"},
+            {
+              id: "benefit-4",              brand: "Satisfaction",              name: "Client Satisfaction Rate",              price: "98%",              rating: 5,
+              reviewCount: "460+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/warehouse-with-collaborative-robots-mana-1773981131081-518034f7.png?_wi=1",              imageAlt: "Satisfied client warehouse operation"},
+            {
+              id: "benefit-5",              brand: "Downtime",              name: "System Uptime Guarantee",              price: "99.7%",              rating: 5,
+              reviewCount: "420+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-engineering-team-working-on-1773981131698-7cf7cd5d.png?_wi=1",              imageAlt: "Professional technical support team"},
+            {
+              id: "benefit-6",              brand: "Support",              name: "Round-the-Clock Assistance",              price: "24/7/365",              rating: 5,
+              reviewCount: "490+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/luxury-residential-complex-entrance-with-1773981131885-7d86d7ce.png?_wi=1",              imageAlt: "Smart gate access system with support"},
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactText
+          text="Ready to transform your operations with professional automation services? Contact our team today for a free consultation and custom proposal."
+          background={{ variant: "animated-grid" }}
+          buttons={[
+            {
+              text: "Request Free Consultation",              href: "/contact"},
+            {
+              text: "Schedule a Site Visit",              href: "tel:+6621234567"},
+          ]}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Milestones Technologies"
+          copyrightText="© 2025 Milestones Technologies. All rights reserved."
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file