pukpuklouis/website-enchun-mgr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract generic UI components

Browse Source 
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:
Louis Chen
2026-02-28 04:55:25 +08:00
parent b199f89998
commit 173905ecd3
14 changed files with 902 additions and 1413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/frontend/src/pages/about-enchun.astro
View File

@@ -3,21 +3,37 @@
* About Page - 關於恩群數位
* 展示公司特色、服務優勢和與其他公司的差異
*/
import Layout from '../layouts/Layout.astro'
import AboutHero from '../sections/AboutHero.astro'
import FeatureSection from '../sections/FeatureSection.astro'
import ComparisonSection from '../sections/ComparisonSection.astro'
import CTASection from '../sections/CTASection.astro'
import Layout from "../layouts/Layout.astro";
import AboutHero from "../sections/AboutHero.astro";
import FeatureSection from "../sections/FeatureSection.astro";
import ComparisonSection from "../sections/ComparisonSection.astro";
import CTASection from "../sections/CTASection.astro";
import SectionHeader from "../components/SectionHeader.astro";
import CtaSection from "@/components/CtaSection.astro";
// Metadata for SEO
const title = '關於恩群數位 | 專業數位行銷服務團隊'
const description = '恩群數位行銷成立於2018年，提供全方位數位行銷服務。我們在地化優先、數據驅動，是您最可信赖的數位行銷夥伴。'
const title = "關於恩群數位 | 專業數位行銷服務團隊";
const description =
"恩群數位行銷成立於2018年，提供全方位數位行銷服務。我們在地化優先、數據驅動，是您最可信赖的數位行銷夥伴。";
---
<Layout title={title} description={description}>
<!-- Hero Section -->
<AboutHero />
<AboutHero
title="關於恩群數位"
subtitle="About Enchun digital"
backgroundImage={{
url: "https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b2535942cd4_IMG_9090%201.jpg",
alt: "關於恩群數位的背景圖",
}}
/>
<!-- Section Header -->
<SectionHeader
title="關於恩群"
subtitle="About Enchun"
sectionBg="bg-white"
/>
<!-- Service Features Section -->
<FeatureSection />
@@ -25,14 +41,5 @@ const description = '恩群數位行銷成立於2018年，提供全方位數位
<ComparisonSection />
<!-- CTA Section -->
<CTASection
homeData={{
ctaSection: {
headline: '準備好開始新的旅程了嗎',
description: '讓我們一起為您的品牌打造獨特的數位行銷策略',
buttonText: '聯絡我們',
buttonLink: '/contact-us',
},
}}
/>
<CtaSection />
</Layout>

390
apps/frontend/src/pages/contact-us.astro
View File

@@ -12,102 +12,102 @@ const description = '有任何問題嗎？歡迎聯絡恩群數位行銷，我
---
<Layout title={title} description={description}>
<section class="contact-section" id="contact">
<div class="contactus_wrapper">
<section class="py-16 bg-background scroll-mt-20 lg:py-8 md:py-8" id="contact">
<div class="grid grid-cols-2 gap-12 items-center max-w-[1200px] mx-auto px-5 lg:grid-cols-1 lg:gap-8">
<!-- Contact Form Side -->
<div class="contact_form_wrapper">
<h1 class="contact_head">聯絡我們</h1>
<p class="contact_parafraph">
<div class="w-full">
<h1 class="text-[2.5rem] font-bold leading-tight text-text-primary mb-4 lg:text-2xl md:text-[1.5rem]">聯絡我們</h1>
<p class="text-lg font-normal leading-relaxed text-slate-600 mb-2">
有任何問題嗎？歡迎聯絡我們，我們將竭誠為您服務。
</p>
<p class="contact_reminder">
<p class="text-sm italic text-text-muted mb-8">
* 標註欄位為必填
</p>
<!-- Contact Form -->
<form id="contact-form" class="contact_form" novalidate>
<form id="contact-form" class="p-8 bg-surface rounded-lg shadow-lg lg:p-6 md:p-4" novalidate>
<!-- Success Message -->
<div id="form-success" class="w-form-done" style="display: none;">
<div id="form-success" class="p-4 px-6 rounded-md mt-4 text-center font-medium bg-[#d4edda] text-[#155724] border border-[#c3e6cb] animate-[slideUp_0.3s_ease-out]" style="display: none;">
感謝您的留言！我們會盡快回覆您。
</div>
<!-- Error Message -->
<div id="form-error" class="w-form-fail" style="display: none;">
<div id="form-error" class="p-4 px-6 rounded-md mt-4 text-center font-medium bg-[#f8d7da] text-[#721c24] border border-[#f5c6cb] animate-[slideUp_0.3s_ease-out]" style="display: none;">
送出失敗，請稍後再試或直接來電。
</div>
<!-- Form Fields -->
<div class="contact-form-grid">
<div class="grid grid-cols-2 gap-6 mb-6 md:grid-cols-1 md:gap-4">
<!-- Name Field -->
<div class="contact_field_wrapper">
<label for="Name" class="contact_field_name">
姓名 <span>*</span>
<div class="flex flex-col mb-6">
<label for="Name" class="text-sm font-semibold text-text-primary mb-2 block">
姓名 <span class="text-primary">*</span>
</label>
<input
type="text"
id="Name"
name="Name"
class="input_field"
class="w-full px-4 py-3 border border-border rounded-md text-base leading-normal bg-background transition-all duration-150 font-sans text-text-primary focus:outline-none focus:border-primary focus:shadow-[0_0_0_3px_rgba(56,152,236,0.1)] focus:-translate-y-0.5 placeholder:text-text-muted [&.error]:border-[#dc3545] [&.error]:bg-[#fff5f5]"
required
minlength="2"
maxlength="256"
placeholder="請輸入您的姓名"
/>
<span class="error-message" id="Name-error"></span>
<span class="error-message text-[#dc3545] text-sm mt-1 hidden" id="Name-error"></span>
</div>
<!-- Phone Field -->
<div class="contact_field_wrapper">
<label for="Phone" class="contact_field_name">
聯絡電話 <span>*</span>
<div class="flex flex-col mb-6">
<label for="Phone" class="text-sm font-semibold text-text-primary mb-2 block">
聯絡電話 <span class="text-primary">*</span>
</label>
<input
type="tel"
id="Phone"
name="Phone"
class="input_field"
class="w-full px-4 py-3 border border-border rounded-md text-base leading-normal bg-background transition-all duration-150 font-sans text-text-primary focus:outline-none focus:border-primary focus:shadow-[0_0_0_3px_rgba(56,152,236,0.1)] focus:-translate-y-0.5 placeholder:text-text-muted [&.error]:border-[#dc3545] [&.error]:bg-[#fff5f5]"
required
placeholder="請輸入您的電話號碼"
/>
<span class="error-message" id="Phone-error"></span>
<span class="error-message text-[#dc3545] text-sm mt-1 hidden" id="Phone-error"></span>
</div>
</div>
<!-- Email Field -->
<div class="contact_field_wrapper">
<label for="Email" class="contact_field_name">
Email <span>*</span>
<div class="flex flex-col mb-6">
<label for="Email" class="text-sm font-semibold text-text-primary mb-2 block">
Email <span class="text-primary">*</span>
</label>
<input
type="email"
id="Email"
name="Email"
class="input_field"
class="w-full px-4 py-3 border border-border rounded-md text-base leading-normal bg-background transition-all duration-150 font-sans text-text-primary focus:outline-none focus:border-primary focus:shadow-[0_0_0_3px_rgba(56,152,236,0.1)] focus:-translate-y-0.5 placeholder:text-text-muted [&.error]:border-[#dc3545] [&.error]:bg-[#fff5f5]"
required
placeholder="請輸入您的 Email"
/>
<span class="error-message" id="Email-error"></span>
<span class="error-message text-[#dc3545] text-sm mt-1 hidden" id="Email-error"></span>
</div>
<!-- Message Field -->
<div class="contact_field_wrapper">
<label for="Message" class="contact_field_name">
聯絡訊息 <span>*</span>
<div class="flex flex-col mb-8">
<label for="Message" class="text-sm font-semibold text-text-primary mb-2 block">
聯絡訊息 <span class="text-primary">*</span>
</label>
<textarea
id="Message"
name="Message"
class="input_field"
class="w-full px-4 py-3 border border-border rounded-md text-base leading-normal bg-background transition-all duration-150 font-sans text-text-primary focus:outline-none focus:border-primary focus:shadow-[0_0_0_3px_rgba(56,152,236,0.1)] focus:-translate-y-0.5 placeholder:text-text-muted min-h-[120px] resize-y [&.error]:border-[#dc3545] [&.error]:bg-[#fff5f5]"
minlength="10"
maxlength="5000"
required
placeholder="請輸入您的訊息（至少 10 個字元）"
></textarea>
<span class="error-message" id="Message-error"></span>
<span class="error-message text-[#dc3545] text-sm mt-1 hidden" id="Message-error"></span>
</div>
<!-- Submit Button -->
<button type="submit" class="submit-button" id="submit-btn">
<button type="submit" class="bg-primary text-white border-none rounded-md px-8 py-[0.875rem] text-base font-semibold cursor-pointer transition-all duration-150 text-center inline-flex items-center justify-center min-w-[200px] w-full hover:bg-primary-hover hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 disabled:bg-slate-500 disabled:cursor-not-allowed disabled:opacity-80" id="submit-btn">
<span class="button-text">送出訊息</span>
<span class="button-loading" style="display: none;">送出中...</span>
</button>
@@ -115,26 +115,27 @@ const description = '有任何問題嗎？歡迎聯絡恩群數位行銷，我
</div>
<!-- Contact Image Side -->
<div class="contact-image">
<div class="image-wrapper">
<div class="flex flex-col gap-8 justify-center items-center">
<div class="w-full rounded-lg overflow-hidden shadow-md bg-slate-100 aspect-[3/2]">
<img
src="/placeholder-contact.jpg"
alt="聯絡恩群數位"
width="600"
height="400"
class="w-full h-full object-cover"
/>
</div>
<!-- Contact Info Card -->
<div class="contact-info-card">
<h3>聯絡資訊</h3>
<div class="info-item">
<svg class="info-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1.45-.17 2.53-.5.36-.11.74-.47 1.02-.75l2.2-2.2c.27-.27.36-.67.24-1.02-.37-1.12-.57-2.33-.57-3.57 0-.55.17-1.45.5-2.53.36-.11.74.47-1.14.75-1.02zM2.05 21.05c.15.35.48.59.84.59l2.2.73c.36.12.74.12 1.06-.05.13-.07.22-.17.28-.28l2.2-2.2c.27-.27.36-.67.24-1.02-.37-1.12-.57-2.33-.57-3.57 0-.55.17-1.45.5-2.53.36-.11.74.47 1.14.75 1.02L2.05 21.05zM19.95 2.95c-.15-.35-.48-.59-.84-.59l-2.2-.73c-.36-.12-.74-.12-1.06.05-.13.07-.22.17-.28.28l-2.2 2.2c-.27.27-.36.67-.24 1.02.37 1.12.57 2.33.57 3.57 0 .55-.17 1.45-.5 2.53-.36.11-.74-.47-1.14-.75l1.02-1.02 2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1.45-.17 2.53-.5.36-.11.74-.47 1.02-.75l2.2-2.2c.27-.27.36-.67.24-1.02-.37-1.12-.57-2.33-.57-3.57 0-.55.17-1.45.5-2.53z"/></svg>
<div class="w-full p-6 bg-white rounded-lg shadow-lg">
<h3 class="text-xl font-semibold text-text-primary mb-4">聯絡資訊</h3>
<div class="flex items-center gap-3 mb-4 text-[0.95rem] text-text-secondary">
<svg class="w-5 h-5 flex-shrink-0 text-primary" viewBox="0 0 24 24"><path fill="currentColor" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1.45-.17 2.53-.5.36-.11.74-.47 1.02-.75l2.2-2.2c.27-.27.36-.67.24-1.02-.37-1.12-.57-2.33-.57-3.57 0-.55.17-1.45.5-2.53.36-.11.74.47-1.14.75-1.02L2.05 21.05c.15.35.48.59.84.59l2.2.73c.36.12.74.12 1.06-.05.13-.07.22-.17.28-.28l2.2-2.2c.27-.27.36-.67.24-1.02-.37-1.12-.57-2.33-.57-3.57 0-.55.17-1.45.5-2.53.36-.11.74.47 1.14.75 1.02L2.05 21.05zM19.95 2.95c-.15-.35-.48-.59-.84-.59l-2.2-.73c-.36-.12-.74-.12-1.06.05-.13.07-.22.17-.28.28l-2.2 2.2c-.27.27-.36.67-.24 1.02.37 1.12.57 2.33.57 3.57 0 .55-.17 1.45-.5 2.53-.36.11.74-.47-1.14-.75l1.02-1.02 2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1.45-.17 2.53-.5.36-.11.74-.47 1.02-.75l2.2-2.2c.27-.27.36-.67.24-1.02-.37-1.12-.57-2.33-.57-3.57 0-.55.17-1.45.5-2.53.36-.11.74.47 1.02.75 1.02L2.05 21.05c-.15-.35-.48-.59-.84-.59l-2.2-.73c-.36-.12-.74-.12-1.06.05-.13.07-.22.17-.28.28l-2.2 2.2c-.27.27-.36.67-.24 1.02.37 1.12.57 2.33.57 3.57 0 .55-.17 1.45-.5 2.53-.36-.11-.74.47-1.14.75l1.02-1.02 2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1.45-.17 2.53-.5.36-.11.74-.47 1.02-.75l2.2-2.2c.27-.27.36-.67.24-1.02-.37-1.12-.57-2.33-.57-3.57 0-.55.17-1.45.5-2.53.36-.11-.74.47 1.14.75 1.02L2.05 21.05c.15.35.48.59.84.59l2.2.73c.36.12.74.12 1.06-.05.13-.07.22-.17.28-.28l2.2-2.2c.27-.27.36-.67.24-1.02-.37-1.12-.57-2.33-.57-3.57 0-.55.17-1.45.5-2.53.36-.11.74.47 1.14.75 1.02z"/></svg>
<span>諮詢電話: 02 5570 0527</span>
</div>
<div class="info-item">
<svg class="info-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<span>Email: <a href="mailto:enchuntaiwan@gmail.com">enchuntaiwan@gmail.com</a></span>
<div class="flex items-center gap-3 mb-4 text-[0.95rem] text-text-secondary">
<svg class="w-5 h-5 flex-shrink-0 text-primary" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<span>Email: <a href="mailto:enchuntaiwan@gmail.com" class="text-primary no-underline hover:underline">enchuntaiwan@gmail.com</a></span>
</div>
</div>
</div>
@@ -142,315 +143,6 @@ const description = '有任何問題嗎？歡迎聯絡恩群數位行銷，我
</section>
</Layout>
<style>
/* Contact Section Styles - Pixel-perfect from Webflow */
.contact-section {
padding: 4rem 0;
background: var(--color-background);
scroll-margin-top: 80px;
}
.contactus_wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Form Side */
.contact_form_wrapper {
width: 100%;
}
/* Headings */
.contact_head {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-text-primary);
margin-bottom: 1rem;
}
.contact_parafraph {
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
color: var(--color-gray-600);
margin-bottom: 0.5rem;
}
.contact_reminder {
font-size: 0.875rem;
font-style: italic;
color: var(--color-text-muted);
margin-bottom: 2rem;
}
/* Form Container */
.contact_form {
padding: 2rem;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
/* Form Grid */
.contact-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
/* Field Wrapper */
.contact_field_wrapper {
display: flex;
flex-direction: column;
margin-bottom: 1.5rem;
}
.contact_field_wrapper:last-child {
margin-bottom: 2rem;
}
/* Field Label */
.contact_field_name {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
display: block;
}
.contact_field_name span {
color: var(--color-primary);
}
/* Input Fields */
.input_field {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: 1rem;
line-height: 1.5;
background: var(--color-background);
transition: all var(--transition-fast);
font-family: inherit;
color: var(--color-text-primary);
}
.input_field:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(56, 152, 236, 0.1);
transform: translateY(-1px);
}
.input_field::placeholder {
color: var(--color-text-muted);
}
.input_field.error {
border-color: #dc3545 !important;
background-color: #fff5f5;
}
#Message {
min-height: 120px;
resize: vertical;
}
/* Error Message */
.error-message {
color: #dc3545;
font-size: 0.875rem;
margin-top: 0.25rem;
display: none;
}
.error-message:not(:empty) {
display: block;
}
/* Submit Button */
.submit-button {
background: var(--color-primary);
color: white;
border: none;
border-radius: var(--radius);
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 200px;
width: 100%;
}
.submit-button:hover:not(:disabled) {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.submit-button:active:not(:disabled) {
transform: translateY(0);
}
.submit-button:disabled {
background: var(--color-gray-500);
cursor: not-allowed;
opacity: 0.8;
}
/* Form Success/Error Messages */
.w-form-done,
.w-form-fail {
padding: 1rem 1.5rem;
border-radius: var(--radius);
margin-top: 1rem;
text-align: center;
font-weight: 500;
animation: slideUp 0.3s ease-out;
}
.w-form-done {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.w-form-fail {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Image Side */
.contact-image {
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
align-items: center;
}
.image-wrapper {
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
background: var(--color-gray-100);
aspect-ratio: 3/2;
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Contact Info Card */
.contact-info-card {
width: 100%;
padding: 1.5rem;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
.contact-info-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 1rem;
}
.info-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
font-size: 0.95rem;
color: var(--color-text-secondary);
}
.info-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-primary);
}
.info-item a {
color: var(--color-primary);
text-decoration: none;
}
.info-item a:hover {
text-decoration: underline;
}
/* Responsive Adjustments */
@media (max-width: 991px) {
.contactus_wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact_head {
font-size: 2rem;
}
}
@media (max-width: 767px) {
.contact-section {
padding: 2rem 0;
}
.contact_form {
padding: 1.5rem;
}
.contact-form-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.submit-button {
min-width: 160px;
}
}
@media (max-width: 479px) {
.contact_form {
padding: 1rem;
}
.contact_head {
font-size: 1.5rem;
}
}
</style>
<script>
// Form validation and submission handler

207
apps/frontend/src/pages/news.astro
View File

@@ -39,29 +39,29 @@ const validCategories = categories.filter(c =>
<Layout title={title} description={description}>
<!-- Blog Hero Section -->
<section class="blog-hero" aria-labelledby="blog-heading">
<div class="container">
<div class="section_header_w_line">
<div class="divider_line"></div>
<div class="header_subtitle">
<h2 id="blog-heading" class="header_subtitle_head">行銷放大鏡</h2>
<p class="header_subtitle_paragraph">Marketing Blog</p>
<section class="py-[60px] px-5 bg-white lg:py-10 md:py-10 md:px-4" aria-labelledby="blog-heading">
<div class="max-w-[1200px] mx-auto">
<div class="flex items-center justify-center gap-4 md:flex-wrap md:gap-3">
<div class="w-10 h-0.5 bg-link-hover md:w-[30px]"></div>
<div class="text-center">
<h2 id="blog-heading" class="text-2xl font-bold text-link-hover mb-2 lg:text-[1.75rem] md:text-[1.5rem]">行銷放大鏡</h2>
<p class="text-base text-slate-600 font-accent md:text-[0.9375rem]">Marketing Blog</p>
</div>
<div class="divider_line"></div>
<div class="w-10 h-0.5 bg-link-hover md:w-[30px]"></div>
</div>
</div>
</section>
<!-- Category Filter -->
<section class="filter-section">
<div class="container">
<section class="bg-white pb-5">
<div class="max-w-[1200px] mx-auto">
<CategoryFilter categories={validCategories} />
</div>
</section>
<!-- Blog Posts Grid -->
<section class="blog-section" aria-label="文章列表">
<div class="container">
<section class="py-10 px-5 pb-[60px] bg-slate-100 min-h-[60vh] md:py-[30px] md:px-4 md:pb-[50px]" aria-label="文章列表">
<div class="max-w-[1200px] mx-auto">
{
posts.length > 0 ? (
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10 w-full max-w-[1200px] mx-auto">
@@ -70,8 +70,8 @@ const validCategories = categories.filter(c =>
))}
</div>
) : (
<div class="empty-state">
<p class="empty-text">暫無文章</p>
<div class="text-center py-20 px-5">
<p class="text-lg text-slate-500">暫無文章</p>
</div>
)
}
@@ -79,13 +79,13 @@ const validCategories = categories.filter(c =>
<!-- Pagination -->
{
totalPages > 1 && (
<nav class="pagination" aria-label="分頁導航">
<div class="pagination-container">
<nav class="pt-5" aria-label="分頁導航">
<div class="flex items-center justify-center gap-6 md:gap-4">
{
hasPreviousPage && (
<a
href={`?page=${page - 1}`}
class="pagination-link pagination-link-prev"
class="inline-flex items-center gap-2 px-5 py-[10px] bg-white border-2 border-slate-300 rounded-md text-slate-700 text-[0.9375rem] font-medium no-underline transition-all duration-[250ms] hover:border-link-hover hover:text-link-hover hover:bg-[rgba(35,96,140,0.05)] md:px-4 md:py-2 md:text-[0.875rem]"
aria-label="上一頁"
>
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
@@ -96,17 +96,17 @@ const validCategories = categories.filter(c =>
)
}
<div class="pagination-info">
<span class="current-page">{page}</span>
<span class="page-separator">/</span>
<span class="total-pages">{totalPages}</span>
<div class="flex items-center gap-2 font-accent text-base text-slate-600">
<span class="font-bold text-link-hover">{page}</span>
<span class="text-slate-400">/</span>
<span>{totalPages}</span>
</div>
{
hasNextPage && (
<a
href={`?page=${page + 1}`}
class="pagination-link pagination-link-next"
class="inline-flex items-center gap-2 px-5 py-[10px] bg-white border-2 border-slate-300 rounded-md text-slate-700 text-[0.9375rem] font-medium no-underline transition-all duration-[250ms] hover:border-link-hover hover:text-link-hover hover:bg-[rgba(35,96,140,0.05)] md:px-4 md:py-2 md:text-[0.875rem]"
aria-label="下一頁"
>
下一頁
@@ -124,166 +124,3 @@ const validCategories = categories.filter(c =>
</section>
</Layout>
<style>
/* Blog Hero Section */
.blog-hero {
padding: 60px 20px;
background-color: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section_header_w_line {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.header_subtitle {
text-align: center;
}
.header_subtitle_head {
color: var(--color-enchunblue, #23608c);
font-family: "Noto Sans TC", sans-serif;
font-weight: 700;
font-size: 2rem;
margin-bottom: 8px;
}
.header_subtitle_paragraph {
color: var(--color-gray-600, #666);
font-family: "Quicksand", "Noto Sans TC", sans-serif;
font-weight: 400;
font-size: 1rem;
}
.divider_line {
width: 40px;
height: 2px;
background-color: var(--color-enchunblue, #23608c);
}
/* Filter Section */
.filter-section {
background-color: #ffffff;
padding-bottom: 20px;
}
/* Blog Section */
.blog-section {
padding: 40px 20px 60px;
background-color: #f8f9fa;
min-height: 60vh;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 80px 20px;
}
.empty-text {
font-size: 1.125rem;
color: var(--color-gray-500, #999);
}
/* Pagination */
.pagination {
padding-top: 20px;
}
.pagination-container {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.pagination-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #ffffff;
border: 2px solid var(--color-gray-300, #e0e0e0);
border-radius: 8px;
color: var(--color-gray-700, #555);
font-family: "Noto Sans TC", sans-serif;
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
transition: all 0.25s ease;
}
.pagination-link:hover {
border-color: var(--color-enchunblue, #23608c);
color: var(--color-enchunblue, #23608c);
background: rgba(35, 96, 140, 0.05);
}
.pagination-info {
display: flex;
align-items: center;
gap: 8px;
font-family: "Quicksand", sans-serif;
font-size: 1rem;
color: var(--color-gray-600, #666);
}
.current-page {
font-weight: 700;
color: var(--color-enchunblue, #23608c);
}
.page-separator {
color: var(--color-gray-400, #ccc);
}
/* Responsive Adjustments */
@media (max-width: 991px) {
.header_subtitle_head {
font-size: 1.75rem;
}
}
@media (max-width: 767px) {
.blog-hero {
padding: 40px 16px;
}
.section_header_w_line {
flex-wrap: wrap;
gap: 12px;
}
.divider_line {
width: 30px;
}
.blog-section {
padding: 30px 16px 50px;
}
.pagination-container {
gap: 16px;
}
.pagination-link {
padding: 8px 16px;
font-size: 0.875rem;
}
.header_subtitle_head {
font-size: 1.5rem;
}
.header_subtitle_paragraph {
font-size: 0.9375rem;
}
}
</style>

178
apps/frontend/src/pages/teams.astro
View File

@@ -4,20 +4,28 @@
* 展示工作環境、公司故事和員工福利
* Pixel-perfect implementation based on Webflow design
*/
import Layout from '../layouts/Layout.astro'
import TeamsHero from '../sections/TeamsHero.astro'
import EnvironmentSlider from '../sections/EnvironmentSlider.astro'
import CompanyStory from '../sections/CompanyStory.astro'
import BenefitsSection from '../sections/BenefitsSection.astro'
import Layout from "../layouts/Layout.astro";
import TeamsHero from "../sections/TeamsHero.astro";
import EnvironmentSlider from "../sections/EnvironmentSlider.astro";
import CompanyStory from "../sections/CompanyStory.astro";
import BenefitsSection from "../sections/BenefitsSection.astro";
// Metadata for SEO
const title = '恩群大本營 | 恩群數位行銷'
const description = '加入恩群數位的團隊，享受優質的工作環境與完善的員工福利。我們重視個人的特質發揮，歡迎樂於學習、善於建立關係的你加入我們。'
const title = "恩群大本營 | 恩群數位行銷";
const description =
"加入恩群數位的團隊，享受優質的工作環境與完善的員工福利。我們重視個人的特質發揮，歡迎樂於學習、善於建立關係的你加入我們。";
---
<Layout title={title} description={description}>
<!-- Hero Section -->
<TeamsHero />
<TeamsHero
title="恩群大本營"
subtitle="Team members of Enchun"
backgroundImage={{
url: "https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b3141942d00_IMG_9088%20copy.JPG",
alt: "Teams Hero",
}}
/>
<!-- Environment Slider Section -->
<EnvironmentSlider />
@@ -29,15 +37,25 @@ const description = '加入恩群數位的團隊，享受優質的工作環境
<BenefitsSection />
<!-- CTA Section -->
<section class="section-call4action" aria-labelledby="cta-heading">
<div class="container w-container">
<div class="c4a-grid">
<div class="c4a-content">
<h3 id="cta-heading" class="career-c4a-heading">
<section
class="py-20 px-5 bg-slate-100 text-center lg:py-[60px] lg:px-4 md:py-10"
aria-labelledby="cta-heading"
>
<div class="max-w-[1200px] mx-auto">
<div
class="grid grid-cols-[1fr_auto] gap-8 items-center relative lg:grid-cols-1 lg:text-center"
>
<div class="text-left lg:text-center">
<h3
id="cta-heading"
class="text-[1.75rem] font-semibold text-[#23608c] mb-4 leading-snug lg:text-[1.5rem] md:text-[1.5rem]"
>
以人的成長為優先<br />
創造人的最大價值
</h3>
<p class="career-c4a-paragraph">
<p
class="text-base text-slate-600 leading-relaxed max-w-[500px] lg:max-w-full md:text-[0.95rem]"
>
在恩群數位裡我們重視個人的特質能夠完全發揮，只要你樂於學習、善於跟人建立關係，並且重要的是你有一個善良的心，恩群數位歡迎你的加入
</p>
</div>
@@ -45,137 +63,15 @@ const description = '加入恩群數位的團隊，享受優質的工作環境
href="https://www.104.com.tw/company/1a2x6bkoaj?jobsource=joblist_r_cust"
target="_blank"
rel="noopener noreferrer"
class="c4a-button"
class="inline-flex items-center justify-center bg-link-hover text-white px-8 py-4 rounded-md font-semibold text-base transition-all duration-200 whitespace-nowrap hover:-translate-y-0.5 hover:shadow-md hover:bg-[#1a4d6e] lg:w-full lg:max-w-[300px] md:py-[14px] md:px-6 md:text-[0.95rem]"
>
立刻申請面試
</a>
<div class="c4a-bg"></div>
<div
class="absolute inset-0 bg-gradient-to-br from-[rgba(35,96,140,0.05)] to-[rgba(35,96,140,0.02)] rounded-lg -z-10 lg:hidden"
>
</div>
</div>
</div>
</section>
</Layout>
<style>
/* CTA Section Styles - Pixel-perfect from Webflow */
.section-call4action {
padding: 80px 20px;
text-align: center;
background-color: var(--color-gray-100, #f8f9fa);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.w-container {
max-width: 1200px;
margin: 0 auto;
}
.c4a-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
position: relative;
}
.c4a-content {
text-align: left;
}
.career-c4a-heading {
font-family: "Noto Sans TC", sans-serif;
font-weight: 600;
font-size: 1.75rem;
color: var(--color-tarawera, #23608c);
margin-bottom: 16px;
line-height: 1.4;
}
.career-c4a-paragraph {
font-family: "Noto Sans TC", sans-serif;
font-weight: 400;
font-size: 1rem;
color: var(--color-gray-600);
line-height: 1.6;
max-width: 500px;
}
.c4a-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-enchunblue);
color: white;
padding: 16px 32px;
border-radius: var(--radius, 8px);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: all var(--transition-base, 0.3s ease);
white-space: nowrap;
}
.c4a-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);
}
.c4a-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(35, 96, 140, 0.05) 0%, rgba(35, 96, 140, 0.02) 100%);
border-radius: var(--radius-lg, 12px);
z-index: -1;
}
/* Responsive Adjustments */
@media (max-width: 991px) {
.section-call4action {
padding: 60px 16px;
}
.c4a-grid {
grid-template-columns: 1fr;
text-align: center;
}
.c4a-content {
text-align: center;
}
.career-c4a-paragraph {
max-width: 100%;
}
.c4a-button {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 767px) {
.section-call4action {
padding: 40px 16px;
}
.career-c4a-heading {
font-size: 1.5rem;
}
.career-c4a-paragraph {
font-size: 0.95rem;
}
.c4a-button {
padding: 14px 24px;
font-size: 0.95rem;
}
}
</style>

249
apps/frontend/src/pages/website-portfolio.astro
View File

@@ -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>