pkupuk
173905ecd3
Reduces duplication across marketing pages by converting sections into reusable components like CtaSection and HeaderBg. Consolidates styling patterns to improve maintainability and consistency of the user interface.
81 lines
3.1 KiB
Plaintext
81 lines
3.1 KiB
Plaintext
---
|
||
/**
|
||
* 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>
|