Initial commit: New industrial design with green theme

src/app/portfolio/page.tsx

@@ -0,0 +1,82 @@
+import Image from 'next/image';
+
+export const metadata = {
+  title: 'ผลงานของเรา',
+  description: 'ผลงานโครงการต่างๆ ที่ดีลพลัสเทคได้ร่วมเป็นส่วนหนึ่ง',
+};
+
+const portfolioItems = [
+  {
+    title: 'โครงการอาคารสำนักงาน',
+    category: 'อาคารพาณิชย์',
+    image: '/images/2021/03/hdpe-pipe_000C.jpg',
+  },
+  {
+    title: 'โครงการโรงงานอุตสาหกรรม',
+    category: 'อุตสาหกรรม',
+    image: '/images/2021/03/ppr-pipe_000C.jpg',
+  },
+  {
+    title: 'โครงการบ้านพักอาศัย',
+    category: 'ที่อยู่อาศัย',
+    image: '/images/2021/03/pvc-pipe_000C.jpg',
+  },
+  {
+    title: 'โครงการระบบดับเพลิง',
+    category: 'ระบบดับเพลิง',
+    image: '/images/2021/03/realflex_000C.jpg',
+  },
+  {
+    title: 'โครงการระบบปรับอากาศ',
+    category: 'HVAC',
+    image: '/images/2021/03/grilles_000C.jpg',
+  },
+  {
+    title: 'โครงการระบบประปา',
+    category: 'ระบบประปา',
+    image: '/images/2021/03/upvc-pipe_000C.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">
+              <div className="relative aspect-video bg-secondary-100">
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-secondary-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                <div className="absolute bottom-0 left-0 right-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform">
+                  <span className="text-primary-400 text-sm">{item.category}</span>
+                  <h3 className="text-white font-bold">{item.title}</h3>
+                </div>
+              </div>
+              <div className="p-4 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>
+  );
+}