---
/**
 * Portfolio Listing Page - 案例分享列表頁
 * Pixel-perfect implementation based on Webflow design
 */
import Layout from "../layouts/Layout.astro";
import PortfolioCard from "../components/PortfolioCard.astro";
import SectionHeader from "../components/SectionHeader.astro";
import HeaderBg from "../components/HeaderBg.astro";
import CtaSection from "../components/CtaSection.astro";

// Metadata for SEO
const title = "案例分享 | 恩群數位行銷";
const description =
  "瀏覽恩群數位的成功案例，包括企業官網、電商網站、品牌網站等設計作品。";

// Portfolio items - can be fetched from Payload CMS
const portfolioItems = [
  {
    slug: "corporate-website-1",
    title: "Saas 一頁式頁面",
    description:
      "現代SaaS一頁式網站，吸引目標客戶並提升轉化率而設計。採用React、Tailwind CSS和TypeScript等先進技術構建，響應式流暢導航、視覺效果和性能。非常適合初創公司和科技新創",
    image:
      "https://enchun-cms.anlstudio.cc/api/media/file/67a99c71f1be7be0b6fb5b6b_saas_website_design-p-1080.webp",
    tags: ["SaaS", "一頁式頁面"],
  },
  {
    slug: "ecommerce-site-1",
    title: "BioNova銷售頁",
    description:
      "本網站以簡潔、專業、易於操作的介面，向受眾傳達 BioNova 超能複方菁萃膠囊的產品特色、優勢及功效，並鼓勵消費者立即購買。",
    image:
      "https://enchun-cms.anlstudio.cc/api/media/file/67a9a0aa4ef074c15c2b4409_landingpage_website_design-p-1080.webp",
    tags: ["電商網站", "金流整合"],
  },
  {
    slug: "brand-website-1",
    title: "美髮業預約頁面",
    description:
      "美髮官網線上預約系統，透過便捷高效的線上預約系統已成為吸引顧客、提升服務品質的關鍵。一個專業、時尚、易於操作的線上平台，讓顧客隨時隨地輕鬆預約美髮服務，同時展示美髮店的專業形象、服務特色及最新資訊。",
    image:
      "https://enchun-cms.anlstudio.cc/api/media/file/67aacde54fbce6ce004c18d2_booking_website_design_alt-p-1080.webp",
    tags: ["品牌網站", "視覺設計"],
  },
  {
    slug: "landing-page-1",
    title: "物流業官方網站",
    description:
      "專業、高效的物流網站已成為必然趨勢，透過設計出操作便捷的物流網站，以滿足現代物流業務的需求。提供線上客服功能，解答客戶疑問提供幫助。",
    image:
      "https://enchun-cms.anlstudio.cc/api/media/file/67a9acb0737c25d4ba894081_freight_website_design-p-1080.webp",
    tags: ["活動頁面", "行銷"],
  },
];
---

<Layout title={title} description={description}>
  <HeaderBg />
  <SectionHeader
    title="案例分享"
    subtitle="Selected Works"
    sectionBg="bg-white"
  />

  <!-- Portfolio Grid -->
  <section
    class="py-0 px-5 pb-20 bg-white lg:px-4 lg:pb-10"
    aria-label="作品列表"
  >
    <ul
      class="grid grid-cols-2 gap-5 max-w-3xl mx-auto p-0 list-none lg:gap-8 md:grid-cols-2 md:gap-6"
    >
      {portfolioItems.map((item) => <PortfolioCard item={item} />)}
    </ul>
  </section>

  <!-- CTA Section -->
  <CtaSection />
</Layout>