Update src/app/projects/page.tsx
This commit is contained in:
@@ -1,21 +1,24 @@
|
||||
"use client";
|
||||
|
||||
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 ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { CheckCircle, Award, Zap } from "lucide-react";
|
||||
import { CheckCircle, Filter } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>("all");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Solutions", id: "solutions" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Blog", id: "blog" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
@@ -58,33 +61,40 @@ export default function ProjectsPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const allProjects = [
|
||||
const projects = [
|
||||
{
|
||||
id: "project-1", brand: "Automotive Manufacturer", name: "Complete Assembly Line Automation", price: "2.5M THB", rating: 5,
|
||||
reviewCount: "12", 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: "Complete automotive assembly line with multiple robotic arms working in sequence. Complex multi-stat"},
|
||||
reviewCount: "12", category: "industrial-automation", 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: "Complete automotive assembly line with multiple robotic arms working in sequence"},
|
||||
{
|
||||
id: "project-2", brand: "Food Processing Plant", name: "High-Speed Packaging System", price: "1.8M THB", rating: 5,
|
||||
reviewCount: "8", 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 with integrated packaging machinery. Automated filling, sealing, and labeli"},
|
||||
reviewCount: "8", category: "packaging-machinery", 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 with integrated packaging machinery"},
|
||||
{
|
||||
id: "project-3", brand: "Electronics Warehouse", name: "Cobot Material Handling System", price: "1.2M THB", rating: 5,
|
||||
reviewCount: "9", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/warehouse-with-collaborative-robots-mana-1773981131081-518034f7.png?_wi=1", imageAlt: "Warehouse with collaborative robots managing material handling and logistics. Cobots picking and pla"},
|
||||
reviewCount: "9", category: "robot-cobot", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/warehouse-with-collaborative-robots-mana-1773981131081-518034f7.png?_wi=1", imageAlt: "Warehouse with collaborative robots managing material handling"},
|
||||
{
|
||||
id: "project-4", brand: "Luxury Residential Complex", name: "Smart Gate Access System", price: "800K THB", rating: 5,
|
||||
reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/luxury-residential-complex-entrance-with-1773981131885-7d86d7ce.png?_wi=1", imageAlt: "Luxury residential complex entrance with installed smart gate system. Beautiful modern gate integrat"},
|
||||
reviewCount: "15", category: "smart-gate", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/luxury-residential-complex-entrance-with-1773981131885-7d86d7ce.png?_wi=1", imageAlt: "Luxury residential complex entrance with smart gate system"},
|
||||
{
|
||||
id: "project-5", brand: "Chemical Manufacturing", name: "Custom Robotic Production Line", price: "3.2M THB", rating: 5,
|
||||
reviewCount: "7", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/chemical-manufacturing-facility-with-rob-1773981131785-741649af.png?_wi=1", imageAlt: "Chemical manufacturing facility with robotic production line. Safe automated chemical processing wit"},
|
||||
reviewCount: "7", category: "custom-engineering", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/chemical-manufacturing-facility-with-rob-1773981131785-741649af.png?_wi=1", imageAlt: "Chemical manufacturing facility with robotic production line"},
|
||||
{
|
||||
id: "project-6", brand: "Pharmaceutical Facility", name: "Integrated Packaging & QC System", price: "2.1M THB", rating: 5,
|
||||
reviewCount: "11", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/pharmaceutical-facility-with-integrated--1773981135234-da2258a8.png?_wi=1", imageAlt: "Pharmaceutical facility with integrated packaging and quality control system. Automated pill/tablet "},
|
||||
{
|
||||
id: "project-7", brand: "Beverage Manufacturer", name: "Production Line Optimization", price: "1.5M THB", rating: 5,
|
||||
reviewCount: "10", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/beverage-production-line-optimization-1773981131900-a1b2c3d4.png?_wi=1", imageAlt: "Beverage manufacturing production line with automated filling and capping systems"},
|
||||
{
|
||||
id: "project-8", brand: "Hospital Facility", name: "Smart Access Control System", price: "900K THB", rating: 5,
|
||||
reviewCount: "14", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/hospital-access-control-system-1773981131850-e5f6g7h8.png?_wi=1", imageAlt: "Hospital facility with smart access control and security systems"},
|
||||
reviewCount: "11", category: "packaging-machinery", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/pharmaceutical-facility-with-integrated--1773981135234-da2258a8.png?_wi=1", imageAlt: "Pharmaceutical facility with integrated packaging and quality control"},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ id: "all", label: "All Projects" },
|
||||
{ id: "industrial-automation", label: "Industrial Automation" },
|
||||
{ id: "robot-cobot", label: "Robot & Cobot" },
|
||||
{ id: "packaging-machinery", label: "Packaging" },
|
||||
{ id: "smart-gate", label: "Smart Gates" },
|
||||
{ id: "custom-engineering", label: "Custom Engineering" },
|
||||
];
|
||||
|
||||
const filteredProjects = selectedCategory === "all"
|
||||
? projects
|
||||
: projects.filter(p => p.category === selectedCategory);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -110,15 +120,13 @@ export default function ProjectsPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
title="Our Project Portfolio"
|
||||
description="Explore our comprehensive portfolio of successful automation projects across manufacturing, warehousing, packaging, and smart living sectors. Each project demonstrates our commitment to delivering tailored solutions that drive measurable results."
|
||||
tag="PORTFOLIO & CASE STUDIES"
|
||||
description="Discover our completed installations and successful implementations across industrial automation, robotics, packaging systems, and smart gate solutions. Each project showcases our commitment to excellence and innovation."
|
||||
tag="PORTFOLIO & INSTALLATIONS"
|
||||
tagIcon={CheckCircle}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Similar Solution", href: "/contact"},
|
||||
{
|
||||
text: "View Full Portfolio", href: "#projects"},
|
||||
text: "Request a Quote", href: "/contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
@@ -126,70 +134,68 @@ export default function ProjectsPage() {
|
||||
{
|
||||
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 robot arm performing precise assembly"},
|
||||
{
|
||||
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"},
|
||||
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: "High-speed packaging machinery in operation"},
|
||||
{
|
||||
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 in operation"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/warehouse-with-collaborative-robots-mana-1773981131081-518034f7.png?_wi=1", imageAlt: "Warehouse with collaborative robots"},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/smart-gate-control-system-display-with-d-1773981131975-1ea8ba37.png?_wi=1", imageAlt: "Smart gate control system display"},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardTwo
|
||||
tag="FEATURED & RECENT PROJECTS"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
title="Complete Project Showcase"
|
||||
description="Browse through our diverse portfolio of successful installations, each delivering significant improvements in efficiency, safety, and operational performance."
|
||||
products={allProjects}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="projects-showcase" data-section="projects-showcase" 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 Projects</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 id="project-details" data-section="project-details">
|
||||
<FeatureCardTwentyFour
|
||||
tag="PROJECT MANAGEMENT & SUPPORT"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
title="Our Project Delivery Approach"
|
||||
description="We follow a structured methodology to ensure every project is delivered on time, within budget, and exceeds expectations."
|
||||
features={[
|
||||
{
|
||||
id: "consultation", title: "Initial Consultation", author: "Planning Phase", description: "In-depth analysis of your requirements, facility assessment, and custom solution design. We understand your specific challenges before proposing automation solutions.", tags: ["Assessment", "Design", "Planning"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-engineering-team-working-on-1773981131698-7cf7cd5d.png?_wi=1", imageAlt: "Engineering consultation"},
|
||||
{
|
||||
id: "engineering", title: "Engineering & Design", author: "Technical Development", description: "Our expert engineers develop detailed technical specifications, system designs, and implementation plans tailored to your requirements.", tags: ["CAD Design", "3D Modeling", "Specifications"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/custom-engineered-automation-solution-be-1773981131850-3c480c9d.png?_wi=1", imageAlt: "Engineering design"},
|
||||
{
|
||||
id: "installation", title: "Professional Installation", author: "Execution Phase", description: "Our certified technicians manage all installation activities, ensuring minimal disruption to your operations and adherence to safety standards.", tags: ["Installation", "Testing", "Commissioning"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/completed-industrial-automation-installa-1773981131997-d20ced9d.png?_wi=1", imageAlt: "Installation process"},
|
||||
{
|
||||
id: "training", title: "Training & Documentation", author: "Knowledge Transfer", description: "Comprehensive training programs for your team, complete with technical documentation and operational manuals for long-term success.", tags: ["Staff Training", "Documentation", "Manuals"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-engineering-team-working-on-1773981131698-7cf7cd5d.png?_wi=1", imageAlt: "Team training"},
|
||||
{
|
||||
id: "support", title: "Ongoing Support", author: "Maintenance & Support", description: "24/7 technical support, preventive maintenance, spare parts availability, and system upgrades to ensure continuous optimal performance.", tags: ["24/7 Support", "Maintenance", "Updates"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/smart-gate-control-system-display-with-d-1773981131975-1ea8ba37.png?_wi=1", imageAlt: "Control system monitoring"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredProjects.map((project) => (
|
||||
<div key={project.id} className="bg-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
|
||||
<img
|
||||
src={project.imageSrc}
|
||||
alt={project.imageAlt}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<p className="text-sm text-accent mb-2">{project.brand}</p>
|
||||
<h3 className="text-xl font-semibold mb-2">{project.name}</h3>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-lg font-bold text-primary-cta">{project.price}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-yellow-500">★</span>
|
||||
<span className="font-semibold">{project.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-foreground opacity-75">{project.reviewCount} reviews</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactText
|
||||
text="Ready to join our portfolio of successful clients? Contact us today to discuss your automation project and receive a free consultation."
|
||||
text="Ready to discuss your next project? Our team is here to help bring your automation vision to life."
|
||||
background={{ variant: "animated-grid" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Your Project", href: "/contact"},
|
||||
{
|
||||
text: "Schedule Consultation", href: "tel:+6621234567"},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user