From eaedcfda12e4e69dfd4e729b85672975dbe8bf07 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 20 Mar 2026 04:48:57 +0000
Subject: [PATCH] Update src/app/blog/page.tsx

---
 src/app/blog/page.tsx | 131 +++++++++++++-----------------------------
 1 file changed, 39 insertions(+), 92 deletions(-)

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index ace7bf1..2836091 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -4,15 +4,12 @@ import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
-import BlogCardOne from "@/components/sections/blog/BlogCardOne";
+import BlogCardThree from "@/components/sections/blog/BlogCardThree";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { BookOpen } from "lucide-react";
-import { useState } from "react";
+import { BookOpen, Zap } from "lucide-react";
 
 export default function BlogPage() {
-  const [selectedCategory, setSelectedCategory] = useState<string>("all");
-
   const navItems = [
     { name: "Home", id: "home" },
     { name: "About", id: "about" },
@@ -61,33 +58,6 @@ export default function BlogPage() {
     },
   ];
 
-  const blogs = [
-    {
-      id: "blog-1",      category: "industrial-automation",      title: "The Future of Industrial Automation in Southeast Asia",      excerpt: "Explore emerging trends and technologies shaping the automation landscape across Thailand and the region.",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-robot-arm-performing-precise--1773981130354-3aca37a1.png?_wi=1",      imageAlt: "Future of industrial automation",      authorName: "Somchai Thaichai",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-execu-1773981130512-3b9ae1e1.png",      date: "January 15, 2025"},
-    {
-      id: "blog-2",      category: "robotics",      title: "Collaborative Robots: Transforming Manufacturing Safety",      excerpt: "Learn how collaborative robots (cobots) are revolutionizing workplace safety while boosting productivity in modern factories.",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/advanced-collaborative-robot-with-articu-1773981131004-a16eab70.png?_wi=1",      imageAlt: "Collaborative robots",      authorName: "Niran Suksomtree",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-facto-1773981130089-2c759151.png",      date: "January 12, 2025"},
-    {
-      id: "blog-3",      category: "packaging",      title: "Maximizing Efficiency: Advanced Packaging Solutions for Food Industry",      excerpt: "Discover how state-of-the-art packaging automation reduces waste, improves quality, and accelerates production timelines.",      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: "Packaging solutions",      authorName: "Wanida Kachuay",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-female-pro-1773981130978-eb2d4e1c.png",      date: "January 10, 2025"},
-    {
-      id: "blog-4",      category: "smart-solutions",      title: "Smart Gate Technology: Modern Security for Residential & Commercial Properties",      excerpt: "Understand the latest innovations in automated gate systems and how they enhance security and convenience for properties.",      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: "Smart gate technology",      authorName: "Pattarapol Moonkhan",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-busin-1773981131172-a7325777.png",      date: "January 8, 2025"},
-    {
-      id: "blog-5",      category: "industrial-automation",      title: "ROI in Industrial Automation: What You Need to Know",      excerpt: "A comprehensive guide to calculating return on investment and understanding the long-term benefits of automation projects.",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-automation-control-system-wit-1773981131808-cf06236c.png?_wi=1",      imageAlt: "ROI in automation",      authorName: "Somchai Thaichai",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-execu-1773981130512-3b9ae1e1.png",      date: "January 5, 2025"},
-    {
-      id: "blog-6",      category: "robotics",      title: "Custom Engineering Solutions: Tailoring Automation to Your Needs",      excerpt: "Explore how bespoke automation solutions can address unique operational challenges and drive competitive advantages.",      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 engineering solutions",      authorName: "Niran Suksomtree",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-facto-1773981130089-2c759151.png",      date: "January 2, 2025"},
-  ];
-
-  const categories = [
-    { id: "all", label: "All Articles" },
-    { id: "industrial-automation", label: "Industrial Automation" },
-    { id: "robotics", label: "Robotics" },
-    { id: "packaging", label: "Packaging" },
-    { id: "smart-solutions", label: "Smart Solutions" },
-  ];
-
-  const filteredBlogs = selectedCategory === "all"
-    ? blogs
-    : blogs.filter(b => b.category === selectedCategory);
-
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -112,9 +82,9 @@ export default function BlogPage() {
 
       <div id="hero" data-section="hero">
         <HeroBillboardGallery
-          title="Blog & Industry Insights"
-          description="Stay informed with the latest articles, case studies, and insights on industrial automation, robotics, packaging solutions, and smart technologies shaping the future of manufacturing and smart living."
-          tag="LATEST ARTICLES"
+          title="Blog & Articles"
+          description="Stay updated with industry insights, automation trends, engineering best practices, and case studies from Milestones Technologies. Learn how automation can transform your business."
+          tag="INSIGHTS & RESOURCES"
           tagIcon={BookOpen}
           tagAnimation="slide-up"
           buttons={[
@@ -125,75 +95,52 @@ export default function BlogPage() {
           background={{ variant: "animated-grid" }}
           mediaItems={[
             {
-              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 engineering team"},
+              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 engineering team working on automation project"},
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/completed-industrial-automation-installa-1773981131997-d20ced9d.png",              imageAlt: "Completed automation installation"},
+              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 system with PLC controllers"},
+            {
+              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 robot with articulated arms"},
           ]}
           mediaAnimation="blur-reveal"
         />
       </div>
 
-      <div id="articles-section" data-section="articles-section" className="py-12">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="mb-12">
-            <h2 className="text-3xl font-semibold mb-8 text-center">Filter Articles by Category</h2>
-            <div className="flex flex-wrap gap-3 justify-center">
-              {categories.map((cat) => (
-                <button
-                  key={cat.id}
-                  onClick={() => setSelectedCategory(cat.id)}
-                  className={`px-6 py-2 rounded-full transition-all ${
-                    selectedCategory === cat.id
-                      ? "bg-primary-cta text-white"
-                      : "bg-card text-foreground border border-accent"
-                  }`}
-                >
-                  {cat.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {filteredBlogs.map((blog) => (
-              <div key={blog.id} className="bg-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
-                <img
-                  src={blog.imageSrc}
-                  alt={blog.imageAlt}
-                  className="w-full h-48 object-cover"
-                />
-                <div className="p-6">
-                  <p className="text-xs font-semibold text-accent uppercase mb-2">{blog.category.replace("-", " ")}</p>
-                  <h3 className="text-lg font-semibold mb-3 line-clamp-2">{blog.title}</h3>
-                  <p className="text-sm text-foreground opacity-75 mb-4 line-clamp-2">{blog.excerpt}</p>
-                  <div className="flex items-center gap-3 mb-4">
-                    <img
-                      src={blog.authorAvatar}
-                      alt={blog.authorName}
-                      className="w-8 h-8 rounded-full object-cover"
-                    />
-                    <div>
-                      <p className="text-xs font-semibold">{blog.authorName}</p>
-                      <p className="text-xs text-foreground opacity-60">{blog.date}</p>
-                    </div>
-                  </div>
-                  <a href="#" className="inline-block text-primary-cta font-semibold text-sm hover:underline">
-                    Read More →
-                  </a>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
+      <div id="blog-articles" data-section="blog-articles">
+        <BlogCardThree
+          tag="LATEST ARTICLES"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          title="Featured Articles & Insights"
+          description="Explore our latest articles covering industrial automation, robotics, manufacturing trends, and engineering solutions to help optimize your operations."
+          blogs={[
+            {
+              id: "article-1",              category: "Automation Trends",              title: "The Future of Industrial Automation in Southeast Asia",              excerpt: "Discover how AI, IoT, and machine learning are revolutionizing manufacturing across Thailand and the region. Learn about emerging trends and technologies shaping the industry.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-robot-arm-performing-precise--1773981130354-3aca37a1.png?_wi=1",              imageAlt: "Industrial automation technology",              authorName: "Dr. Suda Nakprasert",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-execu-1773981130512-3b9ae1e1.png",              date: "January 15, 2025"},
+            {
+              id: "article-2",              category: "Case Study",              title: "How Automotive Manufacturer Increased Efficiency by 35% with Our Systems",              excerpt: "Learn how a leading automotive manufacturer achieved significant productivity gains and reduced defects through our comprehensive automation solutions.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/complete-automotive-assembly-line-with-m-1773981131944-e95865db.png?_wi=1",              imageAlt: "Automotive assembly line",              authorName: "Niran Suksomtree",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-facto-1773981130089-2c759151.png",              date: "January 10, 2025"},
+            {
+              id: "article-3",              category: "Technology Guide",              title: "Collaborative Robots (Cobots) vs Traditional Industrial Robots",              excerpt: "Compare the benefits and applications of collaborative robots with traditional industrial robots. Understand which solution works best for your facility.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/advanced-collaborative-robot-with-articu-1773981131004-a16eab70.png?_wi=1",              imageAlt: "Collaborative robot technology",              authorName: "Wanida Kachuay",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-female-pro-1773981130978-eb2d4e1c.png",              date: "January 5, 2025"},
+            {
+              id: "article-4",              category: "Industry Insights",              title: "Smart Gates & Access Control Systems for Modern Facilities",              excerpt: "Explore the latest developments in smart gate technology, including RFID integration, remote control capabilities, and advanced security features.",              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: "Smart gate system",              authorName: "Pattarapol Moonkhan",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-busin-1773981131172-a7325777.png",              date: "December 28, 2024"},
+            {
+              id: "article-5",              category: "Best Practices",              title: "ROI Calculation: Measuring the Value of Automation Investments",              excerpt: "Learn how to calculate and measure return on investment (ROI) for your automation projects. Understand key metrics and success indicators.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/high-speed-packaging-machinery-in-operat-1773981132057-91de9d07.png?_wi=1",              imageAlt: "Packaging machinery efficiency",              authorName: "Dr. Suda Nakprasert",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-execu-1773981130512-3b9ae1e1.png",              date: "December 20, 2024"},
+            {
+              id: "article-6",              category: "Industry News",              title: "Latest Innovations in Food Processing & Packaging Automation",              excerpt: "Stay informed about the newest technologies and innovations in food processing automation, quality control, and high-speed packaging systems.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/food-processing-facility-with-integrated-1773981131923-cf0c3dab.png?_wi=1",              imageAlt: "Food processing facility",              authorName: "Niran Suksomtree",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-facto-1773981130089-2c759151.png",              date: "December 15, 2024"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
       </div>
 
       <div id="cta" data-section="cta">
         <ContactText
-          text="Want to share your automation story or collaborate with us? Get in touch with our content team."
+          text="Have questions about our automation solutions? Subscribe to our newsletter for industry insights or contact our team for personalized recommendations."
           background={{ variant: "animated-grid" }}
           buttons={[
             {
-              text: "Contact Our Team",              href: "/contact"},
+              text: "Subscribe Now",              href: "/contact"},
+            {
+              text: "Contact Us",              href: "/contact"},
           ]}
           useInvertedBackground={false}
         />
@@ -208,4 +155,4 @@ export default function BlogPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}