131 lines
4.9 KiB
TypeScript
131 lines
4.9 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
export const metadata = {
|
|
title: 'ผลงานของเรา',
|
|
description: 'ผลงานโครงการต่างๆ ที่ดีลพลัสเทคได้ร่วมเป็นส่วนหนึ่ง',
|
|
};
|
|
|
|
const portfolioItems = [
|
|
{
|
|
title: 'Cyber World',
|
|
category: 'อาคารพาณิชย์',
|
|
image: '/images/2021/02/IMG_3089.jpg',
|
|
},
|
|
{
|
|
title: 'Toyox',
|
|
category: 'อุตสาหกรรม',
|
|
image: '/images/2021/02/IMG_2226.jpg',
|
|
},
|
|
{
|
|
title: 'PPR PIPE',
|
|
category: 'ท่อ PPR',
|
|
image: '/images/2021/02/Image1.jpg',
|
|
},
|
|
{
|
|
title: 'โรงงานเอธานอล',
|
|
category: 'อุตสาหกรรม',
|
|
image: '/images/2021/02/ลพบุรี5.jpg',
|
|
},
|
|
{
|
|
title: 'บจก.หยั่น หว่อ หยุ่น',
|
|
category: 'อุตสาหกรรม',
|
|
image: '/images/2021/02/สมุทรสาคร2.jpg',
|
|
},
|
|
{
|
|
title: 'ซีคอนบางแค',
|
|
category: 'อาคารพาณิชย์',
|
|
image: '/images/2021/02/บางแค1.jpg',
|
|
},
|
|
{
|
|
title: 'ซีพีแรม ลาดกระบัง',
|
|
category: 'อาคารพาณิชย์',
|
|
image: '/images/2021/02/ลาดกระบัง1.jpg',
|
|
},
|
|
{
|
|
title: 'ซีพีแรม (บ่อเงิน)',
|
|
category: 'อาคารพาณิชย์',
|
|
image: '/images/2021/02/บ่อเงิน3.jpg',
|
|
},
|
|
{
|
|
title: 'บริษัท บีกริม',
|
|
category: 'อุตสาหกรรม',
|
|
image: '/images/2021/02/บีกริม-จำกัด-e1503304339753.jpg',
|
|
},
|
|
{
|
|
title: 'เอฟแอนด์เอฟ ฟูด',
|
|
category: 'อาหาร',
|
|
image: '/images/2021/02/เอฟแอนดืเอฟ2-horz.jpg',
|
|
},
|
|
{
|
|
title: 'Eminent Air Factory',
|
|
category: 'อุตสาหกรรม',
|
|
image: '/images/2021/02/บางพลี1-horz.jpg',
|
|
},
|
|
{
|
|
title: 'ไทยน้ำทิพย์',
|
|
category: 'อุตสาหกรรม',
|
|
image: '/images/2021/02/ไทยน้ำทิพย์1-horz.jpg',
|
|
},
|
|
{
|
|
title: 'Essilor Factory',
|
|
category: 'อุตสาหกรรม',
|
|
image: '/images/2021/02/Essilor1-horz.jpg',
|
|
},
|
|
{
|
|
title: 'Dog Food Factory',
|
|
category: 'อาหาร',
|
|
image: '/images/2021/02/บ.เอเชี่ยน1.jpg',
|
|
},
|
|
{
|
|
title: 'โครงการประชารัฐ',
|
|
category: 'ภาครัฐ',
|
|
image: '/images/2021/02/ประชารัฐ1-e1503323597848.jpg',
|
|
},
|
|
];
|
|
|
|
export default function PortfolioPage() {
|
|
return (
|
|
<div className="pt-32 pb-16">
|
|
<div className="container mx-auto px-4">
|
|
{/* Hero */}
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">
|
|
ผลงาน<span className="text-primary-600">ของเรา</span>
|
|
</h1>
|
|
<p className="text-xl text-secondary-600 max-w-2xl mx-auto">
|
|
โครงการต่างๆ ที่เราได้ร่วมเป็นส่วนหนึ่งในการจัดหาวัสดุ
|
|
</p>
|
|
</div>
|
|
|
|
{/* Portfolio Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{portfolioItems.map((item, index) => (
|
|
<div key={index} className="card group cursor-pointer overflow-hidden">
|
|
<div className="relative aspect-video bg-secondary-100 overflow-hidden">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
{/* Hover Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-secondary-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
{/* Hover Text - hidden by default, slides up on hover */}
|
|
<div className="absolute bottom-0 left-0 right-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
|
<span className="text-primary-400 text-sm">{item.category}</span>
|
|
<h3 className="text-white font-bold">{item.title}</h3>
|
|
</div>
|
|
</div>
|
|
{/* Static Info - only visible when NOT hovering */}
|
|
<div className="p-4 bg-white group-hover:hidden">
|
|
<span className="text-xs text-primary-600 font-semibold">{item.category}</span>
|
|
<h3 className="text-lg font-bold text-secondary-900 mt-1">{item.title}</h3>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|