Extract generic UI components
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.
This commit is contained in:
@@ -3,223 +3,78 @@
|
||||
* Portfolio Listing Page - 案例分享列表頁
|
||||
* Pixel-perfect implementation based on Webflow design
|
||||
*/
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import PortfolioCard from '../components/PortfolioCard.astro'
|
||||
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 = '瀏覽恩群數位的成功案例，包括企業官網、電商網站、品牌網站等設計作品。'
|
||||
const title = "案例分享 | 恩群數位行銷";
|
||||
const description =
|
||||
"瀏覽恩群數位的成功案例，包括企業官網、電商網站、品牌網站等設計作品。";
|
||||
|
||||
// Portfolio items - can be fetched from Payload CMS
|
||||
const portfolioItems = [
|
||||
{
|
||||
slug: 'corporate-website-1',
|
||||
title: '企業官網設計案例',
|
||||
description: '為知名製造業打造的現代化企業官網，整合產品展示與新聞發佈功能。',
|
||||
image: '/placeholder-portfolio-1.jpg',
|
||||
tags: ['企業官網', '響應式設計'],
|
||||
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: '電商平台建置',
|
||||
description: 'B2C 電商網站，包含會員系統、購物車、金流整合等完整功能。',
|
||||
image: '/placeholder-portfolio-2.jpg',
|
||||
tags: ['電商網站', '金流整合'],
|
||||
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: '/placeholder-portfolio-3.jpg',
|
||||
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: '高轉換率的活動頁面設計，有效的 CTA 配置與使用者體驗規劃。',
|
||||
image: '/placeholder-portfolio-4.jpg',
|
||||
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}>
|
||||
<!-- Portfolio Header -->
|
||||
<section class="portfolio-header" aria-labelledby="portfolio-heading">
|
||||
<div class="container">
|
||||
<h1 id="portfolio-heading" class="portfolio-title">案例分享</h1>
|
||||
<p class="portfolio-subtitle">Selected Works</p>
|
||||
<div class="divider-line"></div>
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
</section>
|
||||
<HeaderBg />
|
||||
<SectionHeader
|
||||
title="案例分享"
|
||||
subtitle="Selected Works"
|
||||
sectionBg="bg-white"
|
||||
/>
|
||||
|
||||
<!-- Portfolio Grid -->
|
||||
<section class="portfolio-grid-section" aria-label="作品列表">
|
||||
<ul class="portfolio-grid">
|
||||
{
|
||||
portfolioItems.map((item) => (
|
||||
<PortfolioCard item={item} />
|
||||
))
|
||||
}
|
||||
<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 -->
|
||||
<section class="portfolio-cta" aria-labelledby="cta-heading">
|
||||
<div class="container">
|
||||
<h2 id="cta-heading" class="cta-title">
|
||||
有興趣與我們合作嗎？
|
||||
</h2>
|
||||
<p class="cta-description">
|
||||
讓我們一起為您的品牌打造獨特的數位體驗
|
||||
</p>
|
||||
<a href="/contact-us" class="cta-button">
|
||||
聯絡我們
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<CtaSection />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
/* Portfolio Page Styles - Pixel-perfect from Webflow */
|
||||
|
||||
/* Header Section */
|
||||
.portfolio-header {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.portfolio-title {
|
||||
font-family: "Noto Sans TC", sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-enchunblue);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.portfolio-subtitle {
|
||||
font-family: "Quicksand", "Noto Sans TC", sans-serif;
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
background-color: var(--color-enchunblue);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.divider-line:last-child {
|
||||
width: 60px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Grid Section */
|
||||
.portfolio-grid-section {
|
||||
padding: 0 20px 60px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.portfolio-cta {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-family: "Noto Sans TC", sans-serif;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-enchunblue);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-description {
|
||||
font-size: 1rem;
|
||||
color: var(--color-gray-600);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background-color: var(--color-enchunblue);
|
||||
color: white;
|
||||
padding: 16px 32px;
|
||||
border-radius: var(--radius, 8px);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-base, 0.3s ease);
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
|
||||
background-color: var(--color-enchunblue-hover, #1a4d6e);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 991px) {
|
||||
.portfolio-header {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
|
||||
.portfolio-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.portfolio-header {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.portfolio-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.portfolio-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.portfolio-grid-section {
|
||||
padding: 0 16px 40px;
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.portfolio-cta {
|
||||
padding: 60px 16px;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user