Update src/app/blog/page.tsx
This commit is contained in:
@@ -4,15 +4,12 @@ import Link from "next/link";
|
|||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
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 ContactText from "@/components/sections/contact/ContactText";
|
||||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||||
import { BookOpen } from "lucide-react";
|
import { BookOpen, Zap } from "lucide-react";
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export default function BlogPage() {
|
export default function BlogPage() {
|
||||||
const [selectedCategory, setSelectedCategory] = useState<string>("all");
|
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ name: "Home", id: "home" },
|
{ name: "Home", id: "home" },
|
||||||
{ name: "About", id: "about" },
|
{ 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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="shift-hover"
|
defaultButtonVariant="shift-hover"
|
||||||
@@ -112,9 +82,9 @@ export default function BlogPage() {
|
|||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardGallery
|
<HeroBillboardGallery
|
||||||
title="Blog & Industry Insights"
|
title="Blog & Articles"
|
||||||
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."
|
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="LATEST ARTICLES"
|
tag="INSIGHTS & RESOURCES"
|
||||||
tagIcon={BookOpen}
|
tagIcon={BookOpen}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
buttons={[
|
buttons={[
|
||||||
@@ -125,75 +95,52 @@ export default function BlogPage() {
|
|||||||
background={{ variant: "animated-grid" }}
|
background={{ variant: "animated-grid" }}
|
||||||
mediaItems={[
|
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"
|
mediaAnimation="blur-reveal"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="articles-section" data-section="articles-section" className="py-12">
|
<div id="blog-articles" data-section="blog-articles">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<BlogCardThree
|
||||||
<div className="mb-12">
|
tag="LATEST ARTICLES"
|
||||||
<h2 className="text-3xl font-semibold mb-8 text-center">Filter Articles by Category</h2>
|
tagIcon={Zap}
|
||||||
<div className="flex flex-wrap gap-3 justify-center">
|
tagAnimation="slide-up"
|
||||||
{categories.map((cat) => (
|
title="Featured Articles & Insights"
|
||||||
<button
|
description="Explore our latest articles covering industrial automation, robotics, manufacturing trends, and engineering solutions to help optimize your operations."
|
||||||
key={cat.id}
|
blogs={[
|
||||||
onClick={() => setSelectedCategory(cat.id)}
|
{
|
||||||
className={`px-6 py-2 rounded-full transition-all ${
|
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"},
|
||||||
selectedCategory === cat.id
|
{
|
||||||
? "bg-primary-cta text-white"
|
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"},
|
||||||
: "bg-card text-foreground border border-accent"
|
{
|
||||||
}`}
|
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"},
|
||||||
>
|
{
|
||||||
{cat.label}
|
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"},
|
||||||
</button>
|
{
|
||||||
))}
|
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"},
|
||||||
</div>
|
{
|
||||||
</div>
|
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"},
|
||||||
|
]}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
animationType="slide-up"
|
||||||
{filteredBlogs.map((blog) => (
|
textboxLayout="default"
|
||||||
<div key={blog.id} className="bg-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
|
useInvertedBackground={false}
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div id="cta" data-section="cta">
|
<div id="cta" data-section="cta">
|
||||||
<ContactText
|
<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" }}
|
background={{ variant: "animated-grid" }}
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Contact Our Team", href: "/contact"},
|
text: "Subscribe Now", href: "/contact"},
|
||||||
|
{
|
||||||
|
text: "Contact Us", href: "/contact"},
|
||||||
]}
|
]}
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
/>
|
/>
|
||||||
@@ -208,4 +155,4 @@ export default function BlogPage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user