Add portfolio items

src/pages/portfolio.astro

@@ -1,29 +1,320 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/Layout.astro'
+
+const portfolioItems = [
+  {
+    name: "Lungfinler",
+    url: "https://lungfinler.com",
+    category: "webdev",
+    thumbnail: "/images/portfolio/lungfinler.png",
+    description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง",
+    services: ["Website", "Branding", "Graphic Design"]
+  },
+  {
+    name: "Jet Industries",
+    url: "https://jetindustries.co.th",
+    category: "webdev",
+    thumbnail: "/images/portfolio/jetindustries.png",
+    description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี",
+    services: ["Website", "Industrial"]
+  },
+  {
+    name: "สำนักงานกฎหมาย ตถาตา",
+    url: "https://lawyernoom.com",
+    category: "webdev",
+    thumbnail: "/images/portfolio/lawyernoom.png",
+    description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา",
+    services: ["Website", "Legal"]
+  },
+  {
+    name: "Underdog Marketing",
+    url: "https://underdog.run",
+    category: "webdev",
+    thumbnail: "/images/portfolio/underdog.png",
+    description: "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู",
+    services: ["Website", "Content Marketing"]
+  },
+  {
+    name: "Baofuling Shop",
+    url: "https://baofulingshop.com",
+    category: "ecommerce",
+    thumbnail: "/images/portfolio/baofuling.png",
+    description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน",
+    services: ["E-commerce", "Beauty"]
+  },
+  {
+    name: "เทรนเนอร์ซันนี่",
+    url: "https://trainersunny.com",
+    category: "webdev",
+    thumbnail: "/images/portfolio/trainersunny.png",
+    description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill",
+    services: ["Website", "Training"]
+  },
+  {
+    name: "เลือดจระเข้วานิไทย",
+    url: "https://เลือดจระเข้วานิไทย.com",
+    category: "ecommerce",
+    thumbnail: "/images/portfolio/luadjob.png",
+    description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ",
+    services: ["E-commerce", "Health"]
+  },
+  {
+    name: "ทวนทอง 99",
+    url: "https://tuanthong99.com",
+    category: "ecommerce",
+    thumbnail: "/images/portfolio/tuanthong.png",
+    description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง",
+    services: ["E-commerce", "Thai Herbal"]
+  },
+  {
+    name: "Odoo Portal",
+    url: "https://odooportal.com",
+    category: "marketing",
+    thumbnail: "/images/portfolio/odooportal.png",
+    description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย",
+    services: ["Odoo ERP", "System Implementation"]
+  }
+]
+
+const categories = [
+  { id: 'all', name: 'ทั้งหมด' },
+  { id: 'webdev', name: 'พัฒนาเว็บไซต์' },
+  { id: 'ecommerce', name: 'อีคอมเมิร์ซ' },
+  { id: 'marketing', name: 'ที่ปรึกษาการตลาด' }
+]
 ---
 
-<Layout title="ผลงาน" description="ตัวอย่างผลงานการพัฒนาเว็บไซต์และระบบของ MoreminiMore">
+<Layout title="ผลงานของเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
-  <section class="page-header">
+  
-    <div class="container">
+  <!-- Hero Section -->
-      <h1>ผลงานของเรา</h1>
+  <section class="relative py-32 overflow-hidden bg-black">
-      <p>ตัวอย่างผลงานที่ผ่านมา</p>
+    <!-- Background with geometric pattern -->
+    <div class="absolute inset-0">
+      <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-black to-gray-900"></div>
+      <!-- Decorative circles -->
+      <div class="absolute top-20 left-10 w-64 h-64 border border-white/5 rounded-full"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 border border-primary/10 rounded-full"></div>
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] border border-white/5 rounded-full"></div>
+    </div>
+    
+    <div class="container mx-auto px-4 relative z-10">
+      <div class="text-center">
+        <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold text-white mb-6 tracking-tight">
+          ผลงาน
+        </h1>
+        <p class="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto">
+          รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ
+        </p>
+      </div>
     </div>
   </section>
 
-  <section class="content">
+  <!-- Filter Section -->
-    <div class="container">
+  <section class="py-8 bg-black border-b border-gray-800 sticky top-0 z-50">
-      <p>ผลงานกำลังจะมาเร็วๆ นี้</p>
+    <div class="container mx-auto px-4">
+      <div class="flex flex-wrap justify-center gap-3" id="category-filters">
+        {categories.map((cat) => (
+          <button 
+            class="filter-btn px-6 py-2.5 rounded-full font-medium transition-all duration-300 text-sm"
+            data-category={cat.id}
+          >
+            {cat.name}
+          </button>
+        ))}
+      </div>
     </div>
   </section>
-</Layout>
 
-<style>
+  <!-- Masonry Portfolio Grid -->
-  .page-header {
+  <section class="py-16 bg-black">
-    background: var(--color-primary);
+    <div class="container mx-auto px-4">
-    padding: 4rem 0;
+      <div class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6" id="portfolio-grid">
-    text-align: center;
+        {portfolioItems.map((item, index) => (
-  }
+          <article 
-  .content {
+            class="portfolio-card break-inside-avoid group relative rounded-2xl overflow-hidden bg-gray-900"
-    padding: 4rem 0;
+            data-category={item.category}
-  }
+            style={`animation-delay: ${index * 0.05}s`}
-</style>
+          >
+            <!-- Image -->
+            <div class="relative">
+              <img 
+                src={item.thumbnail} 
+                alt={item.name}
+                class="w-full h-auto object-cover"
+                loading="lazy"
+              />
+              <!-- Gradient Overlay -->
+              <div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-500"></div>
+              
+              <!-- Hover Content -->
+              <div class="absolute inset-0 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-4 group-hover:translate-y-0">
+                <span class="inline-block bg-primary text-black text-xs font-bold px-3 py-1 rounded-full mb-3 self-start">
+                  {item.category === 'webdev' ? 'เว็บไซต์' : item.category === 'ecommerce' ? 'อีคอมเมิร์ซ' : 'ที่ปรึกษา'}
+                </span>
+                <a 
+                  href={item.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="bg-white text-black px-5 py-2.5 rounded-full font-semibold text-sm self-start hover:bg-primary transition-colors inline-flex items-center gap-2"
+                >
+                  เยี่ยมชมเว็บไซต์
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                </a>
+              </div>
+            </div>
+            
+            <!-- Content (visible on mobile, hidden on hover) -->
+            <div class="p-5 group-hover:opacity-0 transition-opacity duration-300">
+              <h3 class="text-xl font-bold text-white mb-2">{item.name}</h3>
+              <p class="text-gray-400 text-sm mb-3 line-clamp-2">{item.description}</p>
+              <div class="flex flex-wrap gap-2">
+                {item.services.slice(0, 3).map((service) => (
+                  <span class="bg-gray-800 text-gray-300 px-2 py-1 rounded text-xs">
+                    {service}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+
+      <!-- Empty State -->
+      <div id="empty-state" class="hidden text-center py-20">
+        <svg class="w-20 h-20 mx-auto mb-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+        </svg>
+        <h3 class="text-2xl font-bold text-white mb-2">ไม่พบผลงาน</h3>
+        <p class="text-gray-500">ลองเลือกหมวดหมู่อื่นๆ ดูนะครับ</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Stats Section -->
+  <section class="py-20 bg-gray-900">
+    <div class="container mx-auto px-4">
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+        <div>
+          <div class="text-5xl font-bold text-primary mb-2">50+</div>
+          <div class="text-gray-400">โปรเจกต์</div>
+        </div>
+        <div>
+          <div class="text-5xl font-bold text-primary mb-2">40+</div>
+          <div class="text-gray-400">ลูกค้า</div>
+        </div>
+        <div>
+          <div class="text-5xl font-bold text-primary mb-2">5+</div>
+          <div class="text-gray-400">ปีประสบการณ์</div>
+        </div>
+        <div>
+          <div class="text-5xl font-bold text-primary mb-2">100%</div>
+          <div class="text-gray-400">ความพึงพอใจ</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section class="py-20 bg-primary">
+    <div class="container mx-auto px-4">
+      <div class="max-w-3xl mx-auto text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
+          อยากได้เว็บไซต์แบบนี้บ้าง?
+        </h2>
+        <p class="text-lg text-gray-800 mb-8">
+          ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <a href="/contact-us" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-all duration-300 hover:scale-105 inline-flex items-center justify-center">
+            ปรึกษาฟรี
+          </a>
+          <a href="tel:0809955945" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 inline-flex items-center justify-center">
+            080-995-5945
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const filterBtns = document.querySelectorAll('.filter-btn');
+      const portfolioCards = document.querySelectorAll('.portfolio-card');
+      const emptyState = document.getElementById('empty-state');
+      const grid = document.getElementById('portfolio-grid');
+
+      // Set initial active state
+      filterBtns[0]?.classList.add('active');
+
+      filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const category = btn.getAttribute('data-category');
+          
+          // Update active button
+          filterBtns.forEach(b => b.classList.remove('active'));
+          btn.classList.add('active');
+
+          // Filter cards
+          let visibleCount = 0;
+          portfolioCards.forEach(card => {
+            const cardCategory = card.getAttribute('data-category');
+            if (category === 'all' || cardCategory === category) {
+              (card as HTMLElement).style.display = 'block';
+              (card as HTMLElement).style.animation = 'fadeInUp 0.5s ease forwards';
+              visibleCount++;
+            } else {
+              (card as HTMLElement).style.display = 'none';
+            }
+          });
+
+          // Show/hide empty state
+          if (visibleCount === 0 && emptyState) {
+            emptyState.classList.remove('hidden');
+            grid?.classList.add('hidden');
+          } else {
+            emptyState?.classList.add('hidden');
+            grid?.classList.remove('hidden');
+          }
+        });
+      });
+    });
+  </script>
+
+  <style>
+    .filter-btn {
+      background: rgba(255, 255, 255, 0.1);
+      color: #9ca3af;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    .filter-btn:hover {
+      background: rgba(255, 255, 255, 0.2);
+      color: #fff;
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+    
+    .filter-btn.active {
+      background: #fed400;
+      color: #000;
+      border-color: #fed400;
+    }
+
+    .line-clamp-2 {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
+</Layout>