From 173905ecd38552994ceab8bf107c0c48504de721 Mon Sep 17 00:00:00 2001
From: pkupuk <pukpuk.tw@gmail.com>
Date: Sat, 28 Feb 2026 04:55:25 +0800
Subject: [PATCH] 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.
---
 apps/frontend/src/components/CtaSection.astro |  34 ++
 apps/frontend/src/components/Header.astro     | 520 ++++++++++--------
 apps/frontend/src/components/HeaderBg.astro   |  10 +
 .../src/components/PortfolioCard.astro        |  75 +--
 .../src/components/SectionHeader.astro        |  37 +-
 apps/frontend/src/pages/about-enchun.astro    |  43 +-
 apps/frontend/src/pages/contact-us.astro      | 390 ++-----------
 apps/frontend/src/pages/news.astro            | 207 +------
 apps/frontend/src/pages/teams.astro           | 178 ++----
 .../src/pages/website-portfolio.astro         | 249 ++-------
 apps/frontend/src/sections/AboutHero.astro    |  76 ++-
 .../src/sections/FeatureSection.astro         | 176 +-----
 apps/frontend/src/sections/TeamsHero.astro    |  76 ++-
 apps/frontend/src/styles/theme.css            | 244 +++++---
 14 files changed, 902 insertions(+), 1413 deletions(-)
 create mode 100644 apps/frontend/src/components/CtaSection.astro
 create mode 100644 apps/frontend/src/components/HeaderBg.astro

diff --git a/apps/frontend/src/components/CtaSection.astro b/apps/frontend/src/components/CtaSection.astro
new file mode 100644
index 0000000..518a47a
--- /dev/null
+++ b/apps/frontend/src/components/CtaSection.astro
@@ -0,0 +1,34 @@
+---
+/**
+ * CTA Section Component
+ */
+---
+
+<section
+    class="py-20 px-5 bg-white text-center mx-auto lg:py-[60px] lg:px-5 md:py-10"
+    aria-labelledby="cta-heading"
+>
+    <div class="max-w-3xl mx-auto">
+        <div class="flex flex-row items-center justify-center gap-10">
+            <div class="flex flex-col items-start">
+                <h2
+                    id="cta-heading"
+                    class="text-xl font-bold text-(--dark-blue) lg:text-3xl"
+                >
+                    準備好開始新的旅程了嗎?
+                </h2>
+                <p
+                    class="text-xl font-semibold text-(--dark-blue) mb-4 lg:text-3xl"
+                >
+                    歡迎與我們聯絡
+                </p>
+            </div>
+            <a
+                href="http://heyform.anlstudio.cc/form/FdA22OCm"
+                class="flex text-xl bg-(--color-notification-red) text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:bg-(--color-accent-dark)"
+            >
+                預約諮詢
+            </a>
+        </div>
+    </div>
+</section>
diff --git a/apps/frontend/src/components/Header.astro b/apps/frontend/src/components/Header.astro
index 36e3bbb..556133a 100644
--- a/apps/frontend/src/components/Header.astro
+++ b/apps/frontend/src/components/Header.astro
@@ -1,29 +1,65 @@
 ---
-import { Image } from "astro:assets";
 // Header component with scroll-based background and enhanced mobile animations
 
+// --- TypeScript Interfaces (from payload-types.ts Header global) ---
+interface NavLink {
+    type?: ("reference" | "custom") | null;
+    newTab?: boolean | null;
+    reference?:
+        | ({ relationTo: "pages"; value: string | { slug: string } } | null)
+        | ({ relationTo: "posts"; value: string | { slug: string } } | null);
+    url?: string | null;
+    label: string;
+}
+
+interface NavItem {
+    link: NavLink;
+    id?: string | null;
+}
+
+// --- Hardcoded fallback nav (used when CMS is unavailable) ---
+const FALLBACK_NAV: NavItem[] = [
+    { link: { type: "custom", url: "/about-enchun", label: "關於恩群" } },
+    {
+        link: {
+            type: "custom",
+            url: "/marketing-solutions",
+            label: "行銷方案",
+        },
+    },
+    { link: { type: "custom", url: "/marketing-lens", label: "行銷放大鏡" } },
+    { link: { type: "custom", url: "/enchun-basecamp", label: "恩群大本營" } },
+    { link: { type: "custom", url: "/website-portfolio", label: "網站設計" } },
+    { link: { type: "custom", url: "/contact", label: "聯絡我們" } },
+];
+
 // Use local backend in development, production URL from dev.vars/wrangler
 const isDev = import.meta.env.DEV;
 const PAYLOAD_CMS_URL = isDev
-    ? "http://localhost:3000" // Local backend in dev (port may vary)
+    ? "http://localhost:3000"
     : import.meta.env.PAYLOAD_CMS_URL || "https://enchun-admin.anlstudio.cc";
 
 // Fetch navigation data from Payload CMS server-side
-let navItems: any[] = [];
+let navItems: NavItem[] = [];
 try {
     const response = await fetch(
-        `${PAYLOAD_CMS_URL}/api/globals/header?depth=2&draft=false&locale=undefined&trash=false`,
+        `${PAYLOAD_CMS_URL}/api/globals/header?depth=2&draft=false&trash=false`,
     );
     if (response.ok) {
         const data = await response.json();
-        navItems = data?.navItems || data || [];
+        navItems = data?.navItems || [];
     }
 } catch (error) {
     console.error("[Header SSR] Failed to fetch navigation:", error);
 }
 
+// Use fallback when CMS returns empty
+if (!navItems.length) {
+    navItems = FALLBACK_NAV;
+}
+
 // Helper to get link URL
-function getLinkUrl(link: any): string {
+function getLinkUrl(link: NavLink): string {
     if (!link) return "#";
 
     if (link.type === "custom" && link.url) {
@@ -32,10 +68,8 @@ function getLinkUrl(link: any): string {
 
     if (link.type === "reference" && link.reference?.value) {
         if (typeof link.reference.value === "string") {
-            // It's an ID, construct URL based on relationTo
             return `/${link.reference.relationTo || "pages"}/${link.reference.value}`;
         } else if (link.reference.value.slug) {
-            // It's a populated object with slug
             return `/${link.reference.value.slug}`;
         }
     }
@@ -43,21 +77,16 @@ function getLinkUrl(link: any): string {
     return "#";
 }
 
-// Check if label should have a badge
-function getBadgeForLabel(label: string): string {
-    if (label.includes("行銷方案")) {
-        return `<span class="absolute -top-2 -right-3 bg-red-500 text-white text-[6px] font-bold px-1.5 py-0.5 rounded-full uppercase tracking-wider shadow-sm animate-pulse">Hot</span>`;
-    }
-    if (label.includes("行銷放大鏡")) {
-        return `<span class="absolute -top-2 -right-3 bg-red-500 text-white text-[6px] font-bold px-1.5 py-0.5 rounded-full uppercase tracking-wider shadow-sm">New</span>`;
-    }
-    return "";
+// Return badge type for label (data-driven, no HTML strings)
+function getBadgeType(label: string): "hot" | "new" | null {
+    if (label.includes("行銷方案")) return "hot";
+    if (label.includes("行銷放大鏡")) return "new";
+    return null;
 }
 
 // Check if link is active
 function isLinkActive(url: string): boolean {
-    const currentPath = Astro.url.pathname;
-    return currentPath === url || (url === "/" && currentPath === "/");
+    return Astro.url.pathname === url;
 }
 ---
 
@@ -65,53 +94,58 @@ function isLinkActive(url: string): boolean {
     class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-in-out will-change-transform"
     id="main-header"
 >
-<nav
+    <nav
         class="max-w-5xl mx-auto px-4 py-4 transition-all duration-300 ease-in-out"
         id="main-nav"
     >
         <ul class="flex items-center justify-between list-none">
             <li class="shrink-0">
                 <a href="/" class="block">
-                    <!-- Uses Astro's optimized Image component for the site logo -->
-                    <Image
+                    <img
                         src="/enchun-logo.svg"
                         alt="Enchun Digital Marketing"
-                        class="w-32 h-auto transition-opacity duration-300 drop-shadow-md"
-                        width={919}
-                        height={201}
+                        class="w-32 h-auto transition-transform duration-300 drop-shadow-md"
+                        width="919"
+                        height="201"
                         loading="eager"
                         decoding="async"
                     />
                 </a>
             </li>
-            <li class="hidden md:flex items-center space-x-6">
-                {
-                    navItems.map((item) => {
-                        const link = item.link;
-                        const href = getLinkUrl(link);
-                        const label = link.label || "未命名";
-                        const badge = getBadgeForLabel(label);
-                        const activeClass = isLinkActive(href)
-                            ? "nav-active"
-                            : "";
-                        const hasBadge = badge ? "relative inline-block" : "";
+            {
+                navItems.map((item) => {
+                    const link = item.link;
+                    const href = getLinkUrl(link);
+                    const label = link.label || "未命名";
+                    const badge = getBadgeType(label);
+                    const active = isLinkActive(href);
 
-                        return (
+                    return (
+                        <li class="hidden md:block">
                             <a
                                 href={href}
-                                class={`${hasBadge} text-base font-medium transition-all duration-200 px-3 py-2 rounded ${activeClass} hover:bg-white/10`}
+                                class:list={[
+                                    "nav-link text-base font-medium transition-all duration-200 px-3 py-2 rounded hover:bg-white/10",
+                                    { "relative inline-block": badge },
+                                    { "nav-active": active },
+                                ]}
                                 {...(link.newTab && {
                                     target: "_blank",
                                     rel: "noopener noreferrer",
                                 })}
                             >
                                 {label}
-                                {badge && <Fragment set:html={badge} />}
+                                {badge === "hot" && (
+                                    <span class="badge-nav badge-hot">Hot</span>
+                                )}
+                                {badge === "new" && (
+                                    <span class="badge-nav badge-new">New</span>
+                                )}
                             </a>
-                        );
-                    })
-                }
-            </li>
+                        </li>
+                    );
+                })
+            }
             <!-- Mobile menu button with animated hamburger/X icon -->
             <li class="md:hidden">
                 <button
@@ -154,55 +188,57 @@ function isLinkActive(url: string): boolean {
                 </button>
             </li>
         </ul>
-        <!-- Mobile menu with full-screen overlay -->
-<div
-            class="md:hidden fixed left-0 right-0 top-20 h-[calc(100vh-80px)] h-[calc(100dvh-80px)] bg-white/20 backdrop-blur-xl opacity-0 invisible transition-[opacity,visibility,top] duration-300 ease-in-out"
-            id="mobile-menu"
+    </nav>
+    <!-- Mobile menu with full-screen overlay (separate nav for semantics) -->
+    <nav
+        class="md:hidden fixed left-0 right-0 mobile-menu-top mobile-menu-height bg-white/20 backdrop-blur-xl opacity-0 invisible transition-[opacity,visibility,top] duration-300 ease-in-out"
+        id="mobile-menu"
+        aria-label="Mobile navigation"
+    >
+        <ul
+            class="flex flex-col items-center justify-center h-full space-y-6 px-4"
+            id="mobile-nav"
         >
-            <ul
-                class="flex flex-col items-center justify-center h-full space-y-6 px-4"
-                id="mobile-nav"
-            >
-                {
-                    navItems.map((item, index) => {
-                        const link = item.link;
-                        const href = getLinkUrl(link);
-                        const label = link.label || "未命名";
+            {
+                navItems.map((item, index) => {
+                    const link = item.link;
+                    const href = getLinkUrl(link);
+                    const label = link.label || "未命名";
 
-                        return (
-                            <li
-                                class={`opacity-0`}
-                                style={`animation-delay: ${index * 50}ms`}
+                    return (
+                        <li
+                            class="mobile-nav-item"
+                            style={`animation-delay: ${index * 50}ms`}
+                        >
+                            <a
+                                href={href}
+                                class="text-2xl text-gray-700 font-medium transition-all duration-200 hover:scale-105 p-3 min-h-12 flex items-center"
+                                {...(link.newTab && {
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                })}
                             >
-                                <a
-                                    href={href}
-                                    class="text-2xl text-grey-700 font-medium transition-all duration-200 hover:scale-105 p-3 min-h-12 flex items-center [text-shadow:0_1px_2px_rgba(0,0,0,0.05)] hover:[text-shadow:0_2px_4px_rgba(0,0,0,0.1)]"
-                                    {...(link.newTab && {
-                                        target: "_blank",
-                                        rel: "noopener noreferrer",
-                                    })}
-                                >
-                                    {label}
-                                </a>
-                            </li>
-                        );
-                    })
-                }
-            </ul>
-        </div>
+                                {label}
+                            </a>
+                        </li>
+                    );
+                })
+            }
+        </ul>
     </nav>
 </header>
 
 <script>
     // Scroll-based header with smooth hide/show animation
+    // Uses AbortController for cleanup on re-mount (View Transitions)
     let lastScrollY = 0;
     let ticking = false;
     let isHeaderHidden = false;
+    let abortController: AbortController | null = null;
 
     function initScrollEffect() {
         const header = document.getElementById("main-header");
         const nav = document.getElementById("main-nav");
-        const mobileMenu = document.getElementById("mobile-menu");
         if (!header || !nav) return;
 
         const handleScroll = () => {
@@ -210,90 +246,36 @@ function isLinkActive(url: string): boolean {
             const scrollDelta = scrollY - lastScrollY;
             const scrollDirection = scrollDelta > 0 ? "down" : "up";
 
-            // Only update lastScrollY if there's meaningful movement
             if (Math.abs(scrollDelta) > 1) {
                 lastScrollY = scrollY;
             }
 
-            // Header shrinks and gets background on scroll
+            // Toggle single class for scrolled state (CSS handles all visuals)
             if (scrollY > 10) {
-                if (!header.classList.contains("header-scrolled")) {
-                    header.classList.add(
-                        "bg-white/15",
-                        "backdrop-blur-xl",
-                        "shadow-md",
-                        "header-scrolled",
-                    );
-                    header.classList.remove("bg-transparent");
-                    nav.classList.add("py-2");
-                    nav.classList.remove("py-4");
-                    // Adjust mobile menu top position and height when header shrinks
-                    if (mobileMenu) {
-                        mobileMenu.classList.remove(
-                            "top-20",
-                            "h-[calc(100vh-80px)]",
-                            "h-[calc(100dvh-80px)]",
-                        );
-                        mobileMenu.classList.add(
-                            "top-16",
-                            "h-[calc(100vh-64px)]",
-                            "h-[calc(100dvh-64px)]",
-                        );
-                    }
-                }
+                header.classList.add("header-scrolled");
             } else {
-                if (header.classList.contains("header-scrolled")) {
-                    header.classList.remove(
-                        "bg-white/15",
-                        "bg-white/90",
-                        "backdrop-blur-xl",
-                        "shadow-md",
-                        "border-b",
-                        "border-gray-200/50",
-                        "header-scrolled",
-                    );
-                    header.classList.add("bg-transparent");
-                    nav.classList.remove("py-2");
-                    nav.classList.add("py-4");
-                    // Reset mobile menu top position and height when header expands
-                    if (mobileMenu) {
-                        mobileMenu.classList.remove(
-                            "top-16",
-                            "h-[calc(100vh-64px)]",
-                            "h-[calc(100dvh-64px)]",
-                        );
-                        mobileMenu.classList.add(
-                            "top-20",
-                            "h-[calc(100vh-80px)]",
-                            "h-[calc(100dvh-80px)]",
-                        );
-                    }
-                }
+                header.classList.remove("header-scrolled");
             }
 
-            // Hide/show header based on scroll direction - with threshold
-            const hideThreshold = 150; // Higher threshold before hiding
-            const showThreshold = 50; // Lower threshold to show (makes it feel smoother)
+            // Hide/show header based on scroll direction
+            const hideThreshold = 150;
+            const showThreshold = 50;
 
             if (
                 scrollY > hideThreshold &&
                 scrollDirection === "down" &&
                 !isHeaderHidden
             ) {
-                // Only hide if scrolling down consistently
                 if (scrollDelta > 5) {
-                    // Must be scrolling down with some speed
                     header.classList.remove("translate-in");
                     header.classList.add("translate-out");
                     isHeaderHidden = true;
                 }
             } else if (scrollDirection === "up" && isHeaderHidden) {
-                // Show immediately when scrolling up
                 header.classList.remove("translate-out");
                 header.classList.add("translate-in");
                 isHeaderHidden = false;
             } else if (scrollY < showThreshold) {
-                // Always show when near top
                 header.classList.remove("translate-out");
                 header.classList.add("translate-in");
                 isHeaderHidden = false;
@@ -302,44 +284,23 @@ function isLinkActive(url: string): boolean {
             ticking = false;
         };
 
+        const signal = abortController!.signal;
+
         window.addEventListener(
             "scroll",
             () => {
                 if (!ticking) {
-                    window.requestAnimationFrame(() => {
-                        handleScroll();
-                        ticking = false;
-                    });
+                    window.requestAnimationFrame(handleScroll);
                     ticking = true;
                 }
             },
-            { passive: true },
+            { passive: true, signal },
         );
 
         handleScroll();
-
-        // Animate mobile menu items on page load
-        setTimeout(() => {
-            const mobileItems = document.querySelectorAll("#mobile-nav li");
-            mobileItems.forEach((item) => {
-                item.classList.remove("opacity-0");
-                item.classList.add(
-                    "opacity-100",
-                    "translate-y-0",
-                    "transition-all",
-                    "duration-300",
-                    "ease-out",
-                );
-            });
-        }, 100);
     }
 
-    // Enhanced mobile menu toggle with animations
-    let mobileMenuInitialized = false;
-
     function initMobileMenu() {
-        if (mobileMenuInitialized) return;
-
         const button = document.getElementById("mobile-menu-button");
         const menu = document.getElementById("mobile-menu");
         const hamburgerIcon = document.getElementById("hamburger-icon");
@@ -348,79 +309,98 @@ function isLinkActive(url: string): boolean {
             .getElementById("mobile-nav")
             ?.querySelectorAll("li");
 
-        if (!button || !menu || !hamburgerIcon || !closeIcon) {
-            // Retry after a delay if elements aren't ready
-            setTimeout(initMobileMenu, 100);
-            return;
-        }
+        if (!button || !menu || !hamburgerIcon || !closeIcon) return;
 
-        button.addEventListener("click", () => {
-            const isMenuOpen = menu.classList.contains("opacity-100");
+        const signal = abortController!.signal;
 
-            if (isMenuOpen) {
-                menu.classList.remove("opacity-100", "visible");
-                menu.classList.add("opacity-0", "invisible");
-                hamburgerIcon.classList.remove("opacity-0", "rotate-90");
-                hamburgerIcon.classList.add("opacity-100");
-                closeIcon.classList.remove("opacity-100");
-                closeIcon.classList.add("opacity-0");
-                button.setAttribute("aria-expanded", "false");
+        button.addEventListener(
+            "click",
+            () => {
+                const isMenuOpen = menu.classList.contains("opacity-100");
 
-                mobileNavItems?.forEach((item) => {
-                    item.classList.remove("opacity-100", "translate-y-0");
-                    item.classList.add("opacity-0", "translate-y-4");
-                });
+                if (isMenuOpen) {
+                    menu.classList.remove("opacity-100", "visible");
+                    menu.classList.add("opacity-0", "invisible");
+                    hamburgerIcon.classList.remove("opacity-0", "rotate-90");
+                    hamburgerIcon.classList.add("opacity-100");
+                    closeIcon.classList.remove("opacity-100");
+                    closeIcon.classList.add("opacity-0");
+                    button.setAttribute("aria-expanded", "false");
 
-                document.body.style.overflow = "";
-            } else {
-                menu.classList.remove("opacity-0", "invisible");
-                menu.classList.add("opacity-100", "visible");
-                hamburgerIcon.classList.remove("opacity-100");
-                hamburgerIcon.classList.add("opacity-0", "rotate-90");
-                closeIcon.classList.remove("opacity-0");
-                closeIcon.classList.add("opacity-100");
-                button.setAttribute("aria-expanded", "true");
+                    mobileNavItems?.forEach((item) => {
+                        item.classList.remove("mobile-nav-visible");
+                        item.classList.add("mobile-nav-hidden");
+                    });
 
-                mobileNavItems?.forEach((item, index) => {
-                    setTimeout(() => {
-                        item.classList.remove("opacity-0", "translate-y-4");
-                        item.classList.add(
-                            "opacity-100",
-                            "translate-y-0",
-                            "transition-all",
-                            "duration-300",
-                            "ease-out",
-                        );
-                    }, index * 50);
-                });
+                    document.documentElement.classList.remove(
+                        "mobile-menu-open",
+                    );
+                } else {
+                    menu.classList.remove("opacity-0", "invisible");
+                    menu.classList.add("opacity-100", "visible");
+                    hamburgerIcon.classList.remove("opacity-100");
+                    hamburgerIcon.classList.add("opacity-0", "rotate-90");
+                    closeIcon.classList.remove("opacity-0");
+                    closeIcon.classList.add("opacity-100");
+                    button.setAttribute("aria-expanded", "true");
 
-                document.body.style.overflow = "hidden";
-            }
-        });
+                    mobileNavItems?.forEach((item, index) => {
+                        setTimeout(() => {
+                            item.classList.remove("mobile-nav-hidden");
+                            item.classList.add("mobile-nav-visible");
+                        }, index * 50);
+                    });
 
-        menu.addEventListener("click", (e) => {
-            if (e.target === menu) {
-                button.click();
-            }
-        });
+                    document.documentElement.classList.add("mobile-menu-open");
+                }
+            },
+            { signal },
+        );
 
-        document.addEventListener("keydown", (e) => {
-            if (e.key === "Escape" && menu.classList.contains("opacity-100")) {
-                button.click();
-            }
-        });
+        menu.addEventListener(
+            "click",
+            (e) => {
+                if (e.target === menu) {
+                    button.click();
+                }
+            },
+            { signal },
+        );
 
-        mobileMenuInitialized = true;
+        document.addEventListener(
+            "keydown",
+            (e) => {
+                if (
+                    e.key === "Escape" &&
+                    menu.classList.contains("opacity-100")
+                ) {
+                    button.click();
+                }
+            },
+            { signal },
+        );
     }
 
-    document.addEventListener("DOMContentLoaded", () => {
+    function init() {
+        // Cleanup previous listeners (View Transitions re-mount safety)
+        abortController?.abort();
+        abortController = new AbortController();
+
+        // Reset state
+        lastScrollY = 0;
+        ticking = false;
+        isHeaderHidden = false;
+
         initScrollEffect();
         initMobileMenu();
-    });
+    }
+
+    document.addEventListener("DOMContentLoaded", init);
+    document.addEventListener("astro:after-swap", init);
 </script>
 
 <style>
-    /* JS-controlled animation states - cannot be converted to Tailwind */
+    /* JS-controlled animation states */
     #main-header.translate-out {
         transform: translateY(-100%);
     }
@@ -429,13 +409,44 @@ function isLinkActive(url: string): boolean {
         transform: translateY(0);
     }
 
+    /* --- Scrolled state (all visual changes via single CSS class) --- */
+    #main-header.header-scrolled {
+        background: rgba(255, 255, 255, 0.15);
+        backdrop-filter: blur(24px);
+        -webkit-backdrop-filter: blur(24px);
+        box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+    }
+
+    #main-header:not(.header-scrolled) {
+        background: transparent;
+    }
+
+    #main-header.header-scrolled #main-nav {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+    }
+
     /* Logo shrinks when header is scrolled */
     #main-header.header-scrolled img {
         transform: scale(0.85);
-        transition: transform 0.3s ease-in-out;
     }
 
-    /* Navigation links - text-shadow not in Tailwind */
+    /* Mobile menu positioning: adjusts based on header scroll state */
+    .mobile-menu-top {
+        top: 5rem; /* = py-4 header height */
+    }
+
+    .mobile-menu-height {
+        height: calc(100dvh - 5rem);
+    }
+
+    #main-header.header-scrolled ~ #mobile-menu,
+    #main-header.header-scrolled #mobile-menu {
+        top: 4rem; /* = py-2 header height */
+        height: calc(100dvh - 4rem);
+    }
+
+    /* Navigation links */
     #main-nav a {
         color: var(--color-nav-link);
         text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
@@ -445,19 +456,53 @@ function isLinkActive(url: string): boolean {
         color: var(--color-primary);
     }
 
+    /* Nav link underline animation */
+    .nav-link {
+        position: relative;
+    }
+
     /* Active state */
     .nav-active {
+        position: relative;
         color: var(--color-enchunblue) !important;
         font-weight: 600;
     }
 
-    /* Badge positioning */
-    #main-nav a[class*="relative"] .absolute {
+    /* Badge positioning for nav */
+    .badge-nav {
+        position: absolute;
         top: -4px;
         right: -8px;
+        font-size: 6px;
+        font-weight: 700;
+        padding: 2px 6px;
+        border-radius: 9999px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: white;
+        box-shadow: var(--shadow-sm);
     }
 
-    /* Mobile menu - backdrop-blur-lg already in class */
+    .badge-nav.badge-hot {
+        background-color: var(--color-badge-hot, #ea384c);
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .badge-nav.badge-new {
+        background-color: var(--color-badge-hot, #ea384c);
+    }
+
+    @keyframes pulse {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+
+    /* Mobile menu */
     @media (max-width: 767px) {
         #mobile-menu {
             overflow-y: auto;
@@ -477,4 +522,31 @@ function isLinkActive(url: string): boolean {
             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
     }
+
+    /* Mobile nav item animation states (CSS-driven) */
+    .mobile-nav-item {
+        opacity: 0;
+        transform: translateY(1rem);
+        transition:
+            opacity 0.3s ease-out,
+            transform 0.3s ease-out;
+    }
+
+    .mobile-nav-item.mobile-nav-visible {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    .mobile-nav-item.mobile-nav-hidden {
+        opacity: 0;
+        transform: translateY(1rem);
+    }
+
+    /* iOS scroll lock */
+    :global(html.mobile-menu-open) {
+        overflow: hidden;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+    }
 </style>
diff --git a/apps/frontend/src/components/HeaderBg.astro b/apps/frontend/src/components/HeaderBg.astro
new file mode 100644
index 0000000..94ac3ce
--- /dev/null
+++ b/apps/frontend/src/components/HeaderBg.astro
@@ -0,0 +1,10 @@
+---
+
+---
+
+<!-- nav bg-placeholder -->
+<div
+    id="header-bg"
+    class="h-[90px] -mt-[100px] bg-linear-to-b from-(--color-dark-blue) to-(--color-enchunblue)"
+>
+</div>
diff --git a/apps/frontend/src/components/PortfolioCard.astro b/apps/frontend/src/components/PortfolioCard.astro
index 58d30b6..d300b78 100644
--- a/apps/frontend/src/components/PortfolioCard.astro
+++ b/apps/frontend/src/components/PortfolioCard.astro
@@ -5,28 +5,30 @@
  */
 
 interface PortfolioItem {
-  slug: string
-  title: string
-  description: string
-  image?: string
-  tags?: string[]
-  externalUrl?: string
+  slug: string;
+  title: string;
+  description: string;
+  image?: string;
+  tags?: string[];
+  externalUrl?: string;
 }
 
 interface Props {
-  item: PortfolioItem
+  item: PortfolioItem;
 }
 
-const { item } = Astro.props
+const { item } = Astro.props;
 
-const imageUrl = item.image || '/placeholder-portfolio.jpg'
-const title = item.title || 'Untitled'
-const description = item.description || ''
-const tags = item.tags || []
-const hasExternalLink = !!item.externalUrl
-const linkHref = hasExternalLink ? item.externalUrl : `/website-portfolio/${item.slug}`
-const linkTarget = hasExternalLink ? '_blank' : '_self'
-const linkRel = hasExternalLink ? 'noopener noreferrer' : ''
+const imageUrl = item.image || "/placeholder-portfolio.jpg";
+const title = item.title || "Untitled";
+const description = item.description || "";
+const tags = item.tags || [];
+const hasExternalLink = !!item.externalUrl;
+const linkHref = hasExternalLink
+  ? item.externalUrl
+  : `/website-portfolio/${item.slug}`;
+const linkTarget = hasExternalLink ? "_blank" : "_self";
+const linkRel = hasExternalLink ? "noopener noreferrer" : "";
 ---
 
 <li class="list-none">
@@ -36,37 +38,44 @@ const linkRel = hasExternalLink ? 'noopener noreferrer' : ''
     rel={linkRel}
     class="block bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 ease-in-out no-underline text-inherit hover:-translate-y-1 group"
   >
-    <!-- Image Wrapper -->
-    <div class="relative w-full aspect-video overflow-hidden">
-      <img
-        src={imageUrl}
-        alt={title}
-        class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
-        loading="lazy"
-        decoding="async"
-        width="800"
-        height="450"
-      />
-    </div>
-
     <!-- Content -->
-    <div class="p-6 md:p-5">
+    <div class="p-2 md:p-3">
       <!-- Title -->
-      <h3 class="font-['Noto_Sans_TC'] text-xl md:text-lg font-semibold text-[var(--color-tarawera)] mb-2">{title}</h3>
+      <h3
+        class="font-['Noto_Sans_TC'] text-xl md:text-2xl font-semibold text-[var(--color-tarawera)] mb-2"
+      >
+        {title}
+      </h3>
 
       <!-- Description -->
       {
         description && (
-          <p class="font-['Noto_Sans_TC'] text-sm md:text-[0.8125rem] text-[var(--color-gray-600)] leading-normal mb-4">{description}</p>
+          <p class="font-['Noto_Sans_TC'] font-thin text-sm md:text-sm text-(--color-gray-600) leading- tracking-wide mb-4">
+            {description}
+          </p>
         )
       }
+      <!-- Image Wrapper -->
+      <div class="relative w-full rounded-lg aspect-video mb-4 overflow-hidden">
+        <img
+          src={imageUrl}
+          alt={title}
+          class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
+          loading="lazy"
+          decoding="async"
+          width="800"
+          height="450"
+        />
+      </div>
 
       <!-- Tags -->
       {
         tags.length > 0 && (
           <div class="flex flex-wrap gap-2">
             {tags.map((tag) => (
-              <span class="px-2.5 py-1 bg-[var(--color-gray-100)] rounded-full text-xs font-medium text-[var(--color-gray-700)]">{tag}</span>
+              <span class="px-2.5 py-1 bg-(--color-accent-dark)/5 border-1 border-(--color-accent-dark)/20 rounded-full text-xs font-base text-(--color-accent-dark)">
+                {tag}
+              </span>
             ))}
           </div>
         )
diff --git a/apps/frontend/src/components/SectionHeader.astro b/apps/frontend/src/components/SectionHeader.astro
index c87c604..2564dc0 100644
--- a/apps/frontend/src/components/SectionHeader.astro
+++ b/apps/frontend/src/components/SectionHeader.astro
@@ -5,23 +5,40 @@
  */
 
 interface Props {
-  title: string
-  subtitle: string
-  class?: string
-  sectionBg?:string
+  title: string;
+  subtitle: string;
+  class?: string;
+  sectionBg?: string;
 }
 
-const { title, subtitle, class: className, sectionBg:classNameBg  } = Astro.props
+const {
+  title,
+  subtitle,
+  class: className,
+  sectionBg: classNameBg,
+} = Astro.props;
 ---
 
 <section class:list={classNameBg}>
-
-    <div class:list={['flex max-w-3xl items-center justify-center gap-4 py-12 mx-auto max-lg:flex-wrap', className]}>
+  <div
+    class:list={[
+      "flex flex-rows sm:max-w-lg px-8 md:px-0 md:max-w-xl lg:max-w-3xl items-center justify-center gap-4 py-12 mx-auto",
+      className,
+    ]}
+  >
     <div class="w-full h-px bg-(--color-enchunblue)"></div>
     <div class="text-center">
-        <h2 class="text-(--color-dark-blue) font-['Noto_Sans_TC'] font-bold text-3xl max-md:text-xl whitespace-nowrap">{title}</h2>
-        <p class="text-gray-600) font-['Quicksand'] font-thin text-2xl tracking-wider whitespace-nowrap">{subtitle}</p>
+      <h2
+        class="text-(--color-dark-blue) font-['Noto_Sans_TC'] font-bold text-xl md:text-3xl whitespace-nowrap"
+      >
+        {title}
+      </h2>
+      <p
+        class="text-gray-600) font-['Quicksand'] font-thin text-lg md:text-2xl tracking-wider whitespace-nowrap"
+      >
+        {subtitle}
+      </p>
     </div>
     <div class="w-full h-px bg-(--color-enchunblue)"></div>
-    </div>
+  </div>
 </section>
diff --git a/apps/frontend/src/pages/about-enchun.astro b/apps/frontend/src/pages/about-enchun.astro
index 4bd733c..1dcec69 100644
--- a/apps/frontend/src/pages/about-enchun.astro
+++ b/apps/frontend/src/pages/about-enchun.astro
@@ -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>
diff --git a/apps/frontend/src/pages/contact-us.astro b/apps/frontend/src/pages/contact-us.astro
index a62a60b..dfaad08 100644
--- a/apps/frontend/src/pages/contact-us.astro
+++ b/apps/frontend/src/pages/contact-us.astro
@@ -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
diff --git a/apps/frontend/src/pages/news.astro b/apps/frontend/src/pages/news.astro
index 446d1df..84f5ec7 100644
--- a/apps/frontend/src/pages/news.astro
+++ b/apps/frontend/src/pages/news.astro
@@ -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>
diff --git a/apps/frontend/src/pages/teams.astro b/apps/frontend/src/pages/teams.astro
index 6f9fdab..d827d7e 100644
--- a/apps/frontend/src/pages/teams.astro
+++ b/apps/frontend/src/pages/teams.astro
@@ -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>
diff --git a/apps/frontend/src/pages/website-portfolio.astro b/apps/frontend/src/pages/website-portfolio.astro
index 6236137..91da604 100644
--- a/apps/frontend/src/pages/website-portfolio.astro
+++ b/apps/frontend/src/pages/website-portfolio.astro
@@ -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>
diff --git a/apps/frontend/src/sections/AboutHero.astro b/apps/frontend/src/sections/AboutHero.astro
index 07e6573..0ef27a9 100644
--- a/apps/frontend/src/sections/AboutHero.astro
+++ b/apps/frontend/src/sections/AboutHero.astro
@@ -4,21 +4,73 @@
  * Pixel-perfect implementation based on Webflow design
  */
 interface Props {
-  title?: string
-  subtitle?: string
+  title?: string;
+  subtitle?: string;
+  backgroundImage?: {
+    url?: string;
+    alt?: string;
+  };
 }
 
 const {
-  title = '關於恩群數位',
-  subtitle = 'About Enchun digital',
-} = Astro.props
+  title = "關於恩群數位",
+  subtitle = "About Enchun digital",
+  backgroundImage,
+} = Astro.props;
+
+// Determine if we have a background image
+const hasBackgroundImage = backgroundImage?.url;
+const bgImageUrl = backgroundImage?.url || "";
 ---
 
-<header class="bg-white py-[120px] px-5 lg:py-20 md:py-15 text-center">
-  <div class="max-w-[1200px] mx-auto">
-    <div class="flex flex-col items-center">
-      <h1 class="text-[var(--color-enchunblue)] font-['Noto_Sans_TC','Quicksand'] font-bold text-3xl lg:text-[2.5rem] md:text-2xl leading-tight mb-4">{title}</h1>
-      <p class="text-[var(--color-enchunblue-dark)] font-['Quicksand','Noto_Sans_TC'] font-normal text-xl lg:text-[1.125rem] md:text-base leading-relaxed">{subtitle}</p>
-    </div>
+<section
+  class:list={[
+    // Base styles - relative positioning for overlay
+    "relative",
+    "flex",
+    "items-center",
+    "justify-center",
+    "overflow-hidden",
+    "text-center",
+    "px-5",
+    // Background color fallback
+    !hasBackgroundImage && "bg-(--color-dark-blue)",
+    // Background image styles
+    hasBackgroundImage && "bg-cover bg-center bg-no-repeat",
+    // Pull up to counteract layout's pt-20 padding (80px)
+    "-mt-20",
+    // Full viewport height
+    "min-h-dvh",
+    "z-0",
+  ]}
+  style={hasBackgroundImage
+    ? `background-image: url('${bgImageUrl}')`
+    : undefined}
+>
+  {/* Background image overlay for text readability */}
+  {
+    hasBackgroundImage && (
+      <div
+        class="absolute inset-0 bg-linear-to-b from-black/80 to-transparent z-1"
+        aria-hidden="true"
+      />
+    )
+  }
+
+  {/* Content container - relative z-index above overlay */}
+  <div class="relative z-2 max-w-6xl mx-auto">
+    <!-- Main Title -->
+    <h1
+      class="text-white text-shadow-md font-['Noto_Sans_TC',sans-serif]! font-bold leading-[1.2] -mb-1 text-6xl! md:text-5xl"
+    >
+      {title}
+    </h1>
+
+    <!-- Subtitle -->
+    <p
+      class="text-gray-100 text-shadow-md font-['Quicksand'] font-thin leading-[1.2] max-w-3xl mx-auto text-3xl! md:text-2xl"
+    >
+      {subtitle}
+    </p>
   </div>
-</header>
+</section>
diff --git a/apps/frontend/src/sections/FeatureSection.astro b/apps/frontend/src/sections/FeatureSection.astro
index 251acaf..495d162 100644
--- a/apps/frontend/src/sections/FeatureSection.astro
+++ b/apps/frontend/src/sections/FeatureSection.astro
@@ -16,187 +16,63 @@ const {
 // Four features data
 const features = [
   {
-    icon: 'location_on',
+    img: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528bec64942cd5_address-Bro-%E5%9C%A8%E5%9C%B0%E5%8C%96%E5%84%AA%E5%85%88%201.svg',
     title: '在地化優先',
-    description: '緊上線下結合曝光渠道，整合多方資訊，帶給消費者最佳的使用體驗，展現商家的獨特之處，順利的將潛在使用者帶到你的實際門市。',
+    description: '線上線下結合曝光渠道，整合多方資訊，帶給消費者最佳的使用體驗，展現商家的獨特之處，順利的將潛在使用者帶到你的實際門市。',
   },
   {
-    icon: 'account_balance',
+    img: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b582e942cd6_Banknote-bro-%E9%AB%98%E6%8A%95%E8%B3%87%E5%A0%B1%E9%85%AC%E7%8E%87%201.svg',
     title: '高投資轉換率',
     description: '你覺得網路行銷很貴嗎？恩群數位善用每一分廣告預算，讓你在網路上發揮最大效益，幫助店家鎖定精準客群，達成目標。',
   },
   {
-    icon: 'analytics',
+    img: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b517f942cd8_Social%20Dashboard-bro-%E6%95%B8%E6%93%9A%E5%84%AA%E5%85%88%201.svg',
     title: '數據優先',
     description: '想要精準行銷？恩群數位從數據中萃取洞察，根據數據分析廣告成效，更聰明、有策略的幫您省下行銷預算。',
   },
   {
-    icon: 'handshake',
+    img: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b26a1942cd7_Partnership-bro-%E9%97%9C%E4%BF%82%E5%84%AA%E5%85%88%201.svg',
     title: '關係優於銷售',
     description: '除了幫您拓展網路上的知名度，我們更是每家公司最專業的數位夥伴，你會知道有恩群的存在，事業路上你並不孤單。',
   },
 ]
 ---
 
-<section class="section_feature" aria-labelledby="feature-heading">
-  <div class="w-container">
+<section class="section_feature bg-white px-4 py-[60px] md:px-5 md:py-[80px]" aria-labelledby="feature-heading">
+  <div class="w-container mx-auto max-w-4xl">
     <!-- Section Header -->
-    <div class="section_header_w_line">
-      <h2 id="feature-heading" class="header_subtitle_head">
+    <div class="section_header_w_line mb-[60px] text-center">
+      <h2 id="feature-heading" class="header_subtitle_head my-4 text-[1.75rem] font-bold leading-[1.2] text-[var(--color-enchunblue)] md:text-[2.25rem]">
         {title}
       </h2>
-      <p class="header_subtitle_paragraph">
+      <p class="header_subtitle_paragraph mt-2 text-base font-normal text-[#666666]">
         {subtitle}
       </p>
-      <div class="divider_line"></div>
+      <div class="divider_line mx-auto h-[2px] w-[100px] bg-[var(--color-enchunblue)]"></div>
     </div>
 
     <!-- Features Grid -->
-    <div class="feature_grid">
+    <div class="grid grid-cols-1 gap-1 md:grid-cols-2 md:gap-2 lg:gap-6">
       {
         features.map((feature) => (
-        <div class="feature_card">
-          <!-- Icon -->
-          <div class="feature_image">
-            <span class="material-icon">{feature.icon}</span>
+        <div class="feature_card bg-white p-5 transition-all duration-[var(--transition-base)] hover:-translate-y-1 md:p-6 lg:p-8">
+          <div class="grid grid-cols-[120px_1fr] items-start gap-4 md:grid-cols-[110px_1fr] lg:grid-cols-[190px_1fr] lg:gap-6">
+            <!-- Icon -->
+            <div class="flex w-full items-center justify-center">
+              <img src={feature.img} alt={feature.title} class="h-auto w-full object-contain" />
+            </div>
+            
+            <div class="flex flex-col gap-2">
+              <!-- Title -->
+              <h3 class="font-['Noto_Sans_TC'] lg:text-3xl text-2xl font-semibold text-(--color-dark-blue)">{feature.title}</h3>
+
+              <!-- Description -->
+              <p class="font-['Noto_Sans_TC'] lg:text-base text-sm font-thin leading-[1.6] text-grey-2">{feature.description}</p>
+            </div>
           </div>
-
-          <!-- Title -->
-          <h3 class="feature_head">{feature.title}</h3>
-
-          <!-- Description -->
-          <p class="feature_description">{feature.description}</p>
         </div>
       ))
       }
     </div>
   </div>
 </section>
-
-<style>
-  /* Feature Section Styles - Pixel-perfect from Webflow */
-  .section_feature {
-    background-color: #ffffff;
-    padding: 80px 20px;
-  }
-
-  .w-container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  /* Section Header */
-  .section_header_w_line {
-    text-align: center;
-    margin-bottom: 60px;
-  }
-
-  .header_subtitle_head {
-    color: var(--color-enchunblue);
-    font-weight: 700;
-    font-size: 2.25rem;
-    line-height: 1.2;
-    margin: 16px 0;
-  }
-
-  .header_subtitle_paragraph {
-    color: #666666;
-    font-weight: 400;
-    font-size: 1rem;
-    margin-top: 8px;
-  }
-
-  .divider_line {
-    background-color: var(--color-enchunblue);
-    height: 2px;
-    width: 100px;
-    margin: 0 auto;
-  }
-
-  /* Features Grid */
-  .feature_grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 30px;
-  }
-
-  /* Feature Card */
-  .feature_card {
-    background: #ffffff;
-    border-radius: var(--radius-lg);
-    padding: 32px;
-    transition: all var(--transition-base);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
-
-  .feature_card:hover {
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-lg);
-  }
-
-  /* Icon */
-  .feature_image {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .material-icon {
-    font-size: 64px;
-    color: var(--color-enchunblue);
-  }
-
-  /* Title */
-  .feature_head {
-    color: #333333;
-    font-weight: 600;
-    font-size: 1.25rem;
-    margin-bottom: 12px;
-  }
-
-  /* Description */
-  .feature_description {
-    color: #666666;
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.6;
-  }
-
-  /* Responsive Adjustments */
-  @media (max-width: 991px) {
-    .feature_grid {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 24px;
-    }
-
-    .feature_card {
-      padding: 24px;
-    }
-  }
-
-  @media (max-width: 767px) {
-    .section_feature {
-      padding: 60px 16px;
-    }
-
-    .feature_grid {
-      grid-template-columns: 1fr;
-      gap: 16px;
-    }
-
-    .header_subtitle_head {
-      font-size: 1.75rem;
-    }
-
-    .feature_card {
-      padding: 20px;
-    }
-
-    .material-icon {
-      font-size: 48px;
-    }
-  }
-</style>
diff --git a/apps/frontend/src/sections/TeamsHero.astro b/apps/frontend/src/sections/TeamsHero.astro
index abd457c..7797979 100644
--- a/apps/frontend/src/sections/TeamsHero.astro
+++ b/apps/frontend/src/sections/TeamsHero.astro
@@ -4,21 +4,73 @@
  * Pixel-perfect implementation based on Webflow design
  */
 interface Props {
-  title?: string
-  subtitle?: string
+  title?: string;
+  subtitle?: string;
+  backgroundImage?: {
+    url?: string;
+    alt?: string;
+  };
 }
 
 const {
-  title = '恩群大本營',
-  subtitle = 'Team members of Enchun',
-} = Astro.props
+  title = "恩群大本營",
+  subtitle = "Team members of Enchun",
+  backgroundImage,
+} = Astro.props;
+
+// Determine if we have a background image
+const hasBackgroundImage = backgroundImage?.url;
+const bgImageUrl = backgroundImage?.url || "";
 ---
 
-<header class="bg-[var(--color-dark-blue)] pt-[120px] pb-20 px-5 lg:pt-20 lg:pb-15 md:pt-15 md:pb-10 md:px-4 text-center">
-  <div class="max-w-[1200px] mx-auto">
-    <div class="flex flex-col items-center">
-      <h1 class="text-white font-['Noto_Sans_TC'] font-bold text-[3.39em] lg:text-[2.45em] md:text-[7vw] leading-tight mb-4">{title}</h1>
-      <p class="text-[var(--color-gray-100)] font-['Quicksand','Noto_Sans_TC'] font-normal text-[1.5em] lg:text-[1.15em] md:text-[3.4vw] leading-tight">{subtitle}</p>
-    </div>
+<section
+  class:list={[
+    // Base styles - relative positioning for overlay
+    "relative",
+    "flex",
+    "items-center",
+    "justify-center",
+    "overflow-hidden",
+    "text-center",
+    "px-5",
+    // Background color fallback
+    !hasBackgroundImage && "bg-(--color-dark-blue)",
+    // Background image styles
+    hasBackgroundImage && "bg-size-[120vw] bg-center bg-no-repeat",
+    // Pull up to counteract layout's pt-20 padding (80px)
+    "-mt-20",
+    // Full viewport height
+    "min-h-dvh",
+    "z-0",
+  ]}
+  style={hasBackgroundImage
+    ? `background-image: url('${bgImageUrl}')`
+    : undefined}
+>
+  {/* Background image overlay for text readability */}
+  {
+    hasBackgroundImage && (
+      <div
+        class="absolute inset-0 bg-linear-to-b from-black/80 to-transparent z-1"
+        aria-hidden="true"
+      />
+    )
+  }
+
+  {/* Content container - relative z-index above overlay */}
+  <div class="relative z-2 max-w-6xl mx-auto">
+    <!-- Main Title -->
+    <h1
+      class="text-white text-shadow-md font-['Noto_Sans_TC',sans-serif]! font-bold leading-[1.2] -mb-1 text-6xl! md:text-5xl"
+    >
+      {title}
+    </h1>
+
+    <!-- Subtitle -->
+    <p
+      class="text-gray-100 text-shadow-md font-['Quicksand'] font-thin leading-[1.2] max-w-3xl mx-auto text-3xl! md:text-2xl"
+    >
+      {subtitle}
+    </p>
   </div>
-</header>
+</section>
diff --git a/apps/frontend/src/styles/theme.css b/apps/frontend/src/styles/theme.css
index ff74ee8..9d0588c 100644
--- a/apps/frontend/src/styles/theme.css
+++ b/apps/frontend/src/styles/theme.css
@@ -16,84 +16,140 @@
      ============================================ */
 
     /* Primary Colors (主要色) */
-    --color-primary: #3898ec; /* Primary blue */
-    --color-primary-dark: #0082f3; /* Deep blue */
-    --color-primary-light: #67aee1; /* Light blue */
-    --color-primary-hover: #2895f7; /* Hover blue */
+    --color-primary: #3898ec;
+    /* Primary blue */
+    --color-primary-dark: #0082f3;
+    /* Deep blue */
+    --color-primary-light: #67aee1;
+    /* Light blue */
+    --color-primary-hover: #2895f7;
+    /* Hover blue */
 
     /* Secondary Colors (次要色) */
-    --color-secondary: #f39c12; /* Secondary orange */
-    --color-secondary-light: #f6c456; /* Light pink */
-    --color-secondary-dark: #d84038; /* Deep orange */
+    --color-secondary: #f39c12;
+    /* Secondary orange */
+    --color-secondary-light: #f6c456;
+    /* Light pink */
+    --color-secondary-dark: #d84038;
+    /* Deep orange */
 
     /* Accent Colors (強調色) */
-    --color-accent: #d84038; /* Accent red-orange */
-    --color-accent-light: #f6c456; /* Light pink */
-    --color-accent-dark: #ea384c; /* Deep red */
-    --color-accent-pink: #bb8282; /* Pink */
-    --color-accent-rose: #c48383; /* Rose */
+    --color-accent: #d84038;
+    /* Accent red-orange */
+    --color-accent-light: #f6c456;
+    /* Light pink */
+    --color-accent-dark: #ea384c;
+    /* Deep red */
+    --color-accent-pink: #bb8282;
+    /* Pink */
+    --color-accent-rose: #c48383;
+    /* Rose */
 
     /* Link Colors (連結色) */
-    --color-link: #3083bf; /* Default link */
-    --color-link-hover: #23608c; /* Link hover */
+    --color-link: #3083bf;
+    /* Default link */
+    --color-link-hover: #23608c;
+    /* Link hover */
 
     /* Neutral Colors (中性色 - Tailwind Slate mapping) */
-    --color-white: #ffffff; /* White */
-    --color-black: #000000; /* Black */
-    --color-gray-50: #fafafa; /* Surface lightest */
-    --color-gray-100: #f5f5f5; /* Surface light */
-    --color-gray-200: #f3f3f3; /* Surface */
-    --color-gray-300: #eeeeee; /* Border light */
-    --color-gray-400: #dddddd; /* Border default */
-    --color-gray-500: #c8c8c8; /* Mid gray */
-    --color-gray-600: #999999; /* Text muted */
-    --color-gray-700: #828282; /* Text dark */
-    --color-gray-800: #758696; /* Dark gray 1 */
-    --color-gray-900: #5d6c7b; /* Dark gray 2 */
-    --color-gray-950: #4f4f4f; /* Darkest gray */
+    --color-white: #ffffff;
+    /* White */
+    --color-black: #000000;
+    /* Black */
+    --color-gray-50: #fafafa;
+    /* Surface lightest */
+    --color-gray-100: #f5f5f5;
+    /* Surface light */
+    --color-gray-200: #f3f3f3;
+    /* Surface */
+    --color-gray-300: #eeeeee;
+    /* Border light */
+    --color-gray-400: #dddddd;
+    /* Border default */
+    --color-gray-500: #c8c8c8;
+    /* Mid gray */
+    --color-gray-600: #999999;
+    /* Text muted */
+    --color-gray-700: #828282;
+    /* Text dark */
+    --color-gray-800: #758696;
+    /* Dark gray 1 */
+    --color-gray-900: #5d6c7b;
+    /* Dark gray 2 */
+    --color-gray-950: #4f4f4f;
+    /* Darkest gray */
 
     /* Semantic Colors (語意化顏色) */
-    --color-text-primary: #333333; /* Primary text */
-    --color-text-secondary: #222222; /* Secondary text */
-    --color-text-muted: #999999; /* Muted text */
-    --color-text-light: #758696; /* Light text on dark */
-    --color-text-inverse: #ffffff; /* Inverse (white) */
+    --color-text-primary: #333333;
+    /* Primary text */
+    --color-text-secondary: #222222;
+    /* Secondary text */
+    --color-text-muted: #999999;
+    /* Muted text */
+    --color-text-light: #758696;
+    /* Light text on dark */
+    --color-text-inverse: #ffffff;
+    /* Inverse (white) */
 
     /* Backgrounds (背景色) */
-    --color-background: #f2f2f2; /* Main background - Grey 6 from Webflow */
-    --color-surface: #fafafa; /* Surface background */
-    --color-surface2: #f3f3f3; /* Surface elevated */
-    --color-surface-dark: #2226; /* Dark background */
+    --color-background: #f2f2f2;
+    /* Main background - Grey 6 from Webflow */
+    --color-surface: #fafafa;
+    /* Surface background */
+    --color-surface2: #f3f3f3;
+    /* Surface elevated */
+    --color-surface-dark: #2226;
+    /* Dark background */
 
     /* Borders (邊框色) */
-    --color-border: #e2e8f0; /* Default border */
-    --color-border-light: #dddddd; /* Light border */
+    --color-border: #e2e8f0;
+    /* Default border */
+    --color-border-light: #dddddd;
+    /* Light border */
 
     /* Category Colors (文章分類) */
-    --color-category-google: #67aee1; /* Google小學堂 */
-    --color-category-meta: #8974de; /* Meta小學堂 */
-    --color-category-news: #3083bf; /* 行銷時事最前線 */
-    --color-category-enchun: #3898ec; /* 恩群數位 */
+    --color-category-google: #67aee1;
+    /* Google小學堂 */
+    --color-category-meta: #8974de;
+    /* Meta小學堂 */
+    --color-category-news: #3083bf;
+    /* 行銷時事最前線 */
+    --color-category-enchun: #3898ec;
+    /* 恩群數位 */
 
     /* Badge Colors (標籤) */
-    --color-badge-hot: #ea384c; /* Hot 標籤 (紅) */
-    --color-badge-new: #67aee1; /* New 標籤 (淡藍) */
+    --color-badge-hot: #ea384c;
+    /* Hot 標籤 (紅) */
+    --color-badge-new: #67aee1;
+    /* New 標籤 (淡藍) */
 
     /* Webflow Colors - Story 1-4 Global Layout (Verified against original) */
-    --color-enchunblue: #23608c; /* Enchun Blue - 品牌/主色 */
-    --color-enchunblue-dark: #3083bf; /* Enchun Blue Dark - 品牌/主色深色 */
-    --color-tropical-blue: #c7e4fa; /* Tropical Blue - 頁腳背景 (verified: rgb(199, 228, 250)) */
-    --color-st-tropaz: #5d7285; /* St. Tropaz - 頁腳文字 */
-    --color-amber: #f6c456; /* Amber - CTA/強調 */
-    --color-tarawera: #2d3748; /* Tarawera - 深色文字 */
-    --color-nav-link: var(--color-gray-200); /* Navigation Link - 使用灰色系 */
+    --color-enchunblue: #23608c;
+    /* Enchun Blue - 品牌/主色 */
+    --color-enchunblue-dark: #3083bf;
+    /* Enchun Blue Dark - 品牌/主色深色 */
+    --color-tropical-blue: #c7e4fa;
+    /* Tropical Blue - 頁腳背景 (verified: rgb(199, 228, 250)) */
+    --color-st-tropaz: #5d7285;
+    /* St. Tropaz - 頁腳文字 */
+    --color-amber: #f6c456;
+    /* Amber - CTA/強調 */
+    --color-tarawera: #2d3748;
+    /* Tarawera - 深色文字 */
+    --color-nav-link: var(--color-gray-200);
+    /* Navigation Link - 使用灰色系 */
 
     /* Webflow Additional Colors - Story 1-5 Homepage */
-    --color-notification-red: #d84038; /* Notification Red - CTA Button */
-    --color-dark-blue: #062841; /* Dark Blue - Headings */
-    --color-medium-blue: #67aee1; /* Medium Blue - Accents */
-    --color-grey5: #e0e0e0; /* Grey 5 - Borders */
-    --color-grey6: #f2f2f2; /* Grey 6 - Backgrounds */
+    --color-notification-red: #d84038;
+    /* Notification Red - CTA Button */
+    --color-dark-blue: #062841;
+    /* Dark Blue - Headings */
+    --color-medium-blue: #67aee1;
+    /* Medium Blue - Accents */
+    --color-grey5: #e0e0e0;
+    /* Grey 5 - Borders */
+    --color-grey6: #f2f2f2;
+    /* Grey 6 - Backgrounds */
 
     /* ============================================
      🔤 TYPOGRAPHY - From Webflow
@@ -111,13 +167,20 @@
      📏 SPACING - Based on Tailwind scale
      ============================================ */
 
-    --spacing-xs: 0.25rem; /* 4px */
-    --spacing-sm: 0.5rem; /* 8px */
-    --spacing-md: 1rem; /* 16px */
-    --spacing-lg: 1.5rem; /* 24px */
-    --spacing-xl: 2rem; /* 32px */
-    --spacing-2xl: 3rem; /* 48px */
-    --spacing-3xl: 4rem; /* 64px */
+    --spacing-xs: 0.25rem;
+    /* 4px */
+    --spacing-sm: 0.5rem;
+    /* 8px */
+    --spacing-md: 1rem;
+    /* 16px */
+    --spacing-lg: 1.5rem;
+    /* 24px */
+    --spacing-xl: 2rem;
+    /* 32px */
+    --spacing-2xl: 3rem;
+    /* 48px */
+    --spacing-3xl: 4rem;
+    /* 64px */
 
     /* Container */
     --container-max-width: 1200px;
@@ -128,14 +191,22 @@
      🔲 BORDER RADIUS
      ============================================ */
 
-    --radius-sm: 0.125rem; /* 2px */
-    --radius: 0.375rem; /* 6px (DEFAULT) */
-    --radius-md: 0.5rem; /* 8px */
-    --radius-lg: 0.75rem; /* 12px */
-    --radius-xl: 1rem; /* 16px */
-    --radius-2xl: 1.5rem; /* 24px */
-    --radius-3xl: 2rem; /* 32px */
-    --radius-full: 9999px; /* Full circle */
+    --radius-sm: 0.125rem;
+    /* 2px */
+    --radius: 0.375rem;
+    /* 6px (DEFAULT) */
+    --radius-md: 0.5rem;
+    /* 8px */
+    --radius-lg: 0.75rem;
+    /* 12px */
+    --radius-xl: 1rem;
+    /* 16px */
+    --radius-2xl: 1.5rem;
+    /* 24px */
+    --radius-3xl: 2rem;
+    /* 32px */
+    --radius-full: 9999px;
+    /* Full circle */
 
     /* ============================================
      💫 SHADOWS
@@ -178,9 +249,12 @@
        Small (≤479px): 13px
     */
     --html-font-size-desktop: 19px;
-    --html-font-size-tablet: 19px; /* 991px breakpoint */
-    --html-font-size-mobile: 16px; /* 767px breakpoint */
-    --html-font-size-small: 13px; /* 479px breakpoint */
+    --html-font-size-tablet: 19px;
+    /* 991px breakpoint */
+    --html-font-size-mobile: 16px;
+    /* 767px breakpoint */
+    --html-font-size-small: 13px;
+    /* 479px breakpoint */
 }
 
 /* ============================================
@@ -252,11 +326,9 @@ body {
 
 /* Text Gradient */
 .text-gradient {
-    background: linear-gradient(
-        135deg,
-        var(--color-primary),
-        var(--color-accent)
-    );
+    background: linear-gradient(135deg,
+            var(--color-primary),
+            var(--color-accent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -275,6 +347,7 @@ body {
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
@@ -285,6 +358,7 @@ body {
         opacity: 0;
         transform: translateY(1rem);
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -357,7 +431,7 @@ body {
     left: 0;
     width: 0;
     height: 2px;
-    background: var(--color-primary);
+    background: var(--color-secondary);
     transition: width var(--transition-fast);
 }
 
@@ -365,7 +439,11 @@ body {
     width: 100%;
 }
 
-/* Active Navigation Link */
+/* Active Navigation Link — position: relative ensures ::after stays within the link */
+.nav-active {
+    position: relative;
+}
+
 .nav-active::after {
     content: "";
     position: absolute;
@@ -402,9 +480,11 @@ body {
 .prose-custom h1 {
     font-size: 2.25rem;
 }
+
 .prose-custom h2 {
     font-size: 1.875rem;
 }
+
 .prose-custom h3 {
     font-size: 1.5rem;
 }
@@ -548,4 +628,4 @@ body {
 .badge-category-enchun {
     background-color: var(--color-category-enchun);
     color: white;
-}
+}
\ No newline at end of file