feat(frontend): update pages, components and branding
Refresh Astro frontend implementation including new pages (Portfolio, Teams, Services), components, and styling updates.
This commit is contained in:
@@ -1,57 +1,225 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
/**
|
||||
* Portfolio Listing Page - 案例分享列表頁
|
||||
* Pixel-perfect implementation based on Webflow design
|
||||
*/
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import PortfolioCard from '../components/PortfolioCard.astro'
|
||||
|
||||
// Placeholder portfolios
|
||||
const portfolios = [
|
||||
{ slug: 'web-design-project-2', title: 'Project 2', description: 'Description...' },
|
||||
// Add more
|
||||
];
|
||||
// Metadata for SEO
|
||||
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: 'ecommerce-site-1',
|
||||
title: '電商平台建置',
|
||||
description: 'B2C 電商網站，包含會員系統、購物車、金流整合等完整功能。',
|
||||
image: '/placeholder-portfolio-2.jpg',
|
||||
tags: ['電商網站', '金流整合'],
|
||||
},
|
||||
{
|
||||
slug: 'brand-website-1',
|
||||
title: '品牌形象網站',
|
||||
description: '以視覺故事為核心的品牌網站，展現品牌獨特價值與理念。',
|
||||
image: '/placeholder-portfolio-3.jpg',
|
||||
tags: ['品牌網站', '視覺設計'],
|
||||
},
|
||||
{
|
||||
slug: 'landing-page-1',
|
||||
title: '活動行銷頁面',
|
||||
description: '高轉換率的活動頁面設計，有效的 CTA 配置與使用者體驗規劃。',
|
||||
image: '/placeholder-portfolio-4.jpg',
|
||||
tags: ['活動頁面', '行銷'],
|
||||
},
|
||||
]
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<section class="portfolio-section">
|
||||
<Layout title={title} description={description}>
|
||||
<!-- Portfolio Header -->
|
||||
<section class="portfolio-header" aria-labelledby="portfolio-heading">
|
||||
<div class="container">
|
||||
<h1>網站設計作品</h1>
|
||||
<div class="portfolio-grid">
|
||||
{portfolios.map(item => (
|
||||
<div class="portfolio-item">
|
||||
<h2><a href={`/webdesign-profolio/${item.slug}`}>{item.title}</a></h2>
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Portfolio Grid -->
|
||||
<section class="portfolio-grid-section" aria-label="作品列表">
|
||||
<ul class="portfolio-grid">
|
||||
{
|
||||
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>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.portfolio-section {
|
||||
padding: 40px 0;
|
||||
/* 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;
|
||||
padding: 0 20px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.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(auto-fill, minmax(300px, 1fr));
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.portfolio-item {
|
||||
border: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
/* CTA Section */
|
||||
.portfolio-cta {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.portfolio-item a {
|
||||
|
||||
.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;
|
||||
color: #333;
|
||||
transition: all var(--transition-base, 0.3s ease);
|
||||
}
|
||||
.portfolio-item a:hover {
|
||||
color: #007bff;
|
||||
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 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