Refactor frontend sections to use Tailwind CSS

Convert custom CSS styling to Tailwind utility classes across marketing
and about pages. Improve responsive layouts in feature grids, service
lists, and sliders. Consolidate section headers using the shared
SectionHeader component to maintain visual consistency.

apps/frontend/src/pages/about-enchun.astro

@@ -28,12 +28,6 @@ const description =
     }}
   />
 
-  <!-- Section Header -->
-  <SectionHeader
-    title="關於恩群"
-    subtitle="About Enchun"
-    sectionBg="bg-white"
-  />
   <!-- Service Features Section -->
   <FeatureSection />
 

apps/frontend/src/pages/marketing-solutions.astro

@@ -4,24 +4,28 @@
  * Pixel-perfect implementation based on Webflow design
  * Data fetched from Payload CMS Pages Collection API
  */
-import Layout from '../layouts/Layout.astro'
-import SolutionsHero from '../sections/SolutionsHero.astro'
-import ServicesList from '../sections/ServicesList.astro'
-import { getMarketingSolutionsPage } from '../lib/api/marketing-solution'
-import SectionHeader from '../components/SectionHeader.astro'
+import Layout from "../layouts/Layout.astro";
+import SolutionsHero from "../sections/SolutionsHero.astro";
+import ServicesList from "../sections/ServicesList.astro";
+import { getMarketingSolutionsPage } from "../lib/api/marketing-solution";
+import SectionHeader from "../components/SectionHeader.astro";
+import CtaSection from "../components/CtaSection.astro";
 
 // Fetch page data from CMS
-const pageData = await getMarketingSolutionsPage()
+const pageData = await getMarketingSolutionsPage();
 
 // Use CMS data or fallback to defaults
-const heroTitle = pageData?.heroTitle || '行銷解決方案'
-const heroSubtitle = pageData?.heroSubtitle || '提供全方位的數位行銷服務，協助您的品牌在數位時代脫穎而出'
-const heroImage = pageData?.heroImage
-const services = pageData?.services || []
+const heroTitle = pageData?.heroTitle || "行銷解決方案";
+const heroSubtitle =
+  pageData?.heroSubtitle ||
+  "提供全方位的數位行銷服務，協助您的品牌在數位時代脫穎而出";
+const heroImage = pageData?.heroImage;
+const services = pageData?.services || [];
 
 // Metadata for SEO
-const title = '行銷解決方案 | 恩群數位行銷'
-const description = '恩群數位行銷提供全方位的數位行銷服務，包括 Google Ads、社群代操、論壇行銷、網紅行銷、網站設計等，協助您的品牌在數位時代脫穎而出。'
+const title = "行銷解決方案 | 恩群數位行銷";
+const description =
+  "恩群數位行銷提供全方位的數位行銷服務，包括 Google Ads、社群代操、論壇行銷、網紅行銷、網站設計等，協助您的品牌在數位時代脫穎而出。";
 ---
 
 <Layout title={title} description={description}>
@@ -39,4 +43,5 @@ const description = '恩群數位行銷提供全方位的數位行銷服務，
   />
   <!-- Services List -->
   <ServicesList services={services} />
+  <CtaSection />
 </Layout>

apps/frontend/src/pages/teams.astro

@@ -9,7 +9,8 @@ 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 SectionHeader from "../components/SectionHeader.astro";
+import CtaHrCompoents from "../sections/Cta-Hr-compoents.astro";
 // Metadata for SEO
 const title = "恩群大本營 | 恩群數位行銷";
 const description =
@@ -28,50 +29,23 @@ const description =
   />
 
   <!-- Environment Slider Section -->
+
   <EnvironmentSlider />
 
   <!-- Company Story Section -->
   <CompanyStory />
 
   <!-- Benefits Section -->
+
   <BenefitsSection />
 
   <!-- CTA Section -->
-  <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="text-base text-slate-600 leading-relaxed max-w-[500px] lg:max-w-full md:text-[0.95rem]"
-          >
-            在恩群數位裡我們重視個人的特質能夠完全發揮，只要你樂於學習、善於跟人建立關係，並且重要的是你有一個善良的心，恩群數位歡迎你的加入
-          </p>
-        </div>
-        <a
-          href="https://www.104.com.tw/company/1a2x6bkoaj?jobsource=joblist_r_cust"
-          target="_blank"
-          rel="noopener noreferrer"
-          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="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>
+  <CtaHrCompoents
+    title="以人的成長為優先<br />創造人的最大價值"
+    description="在恩群數位裡我們重視個人的特質能夠完全發揮，只要你樂於學習、善於跟人建立關係，並且重要的是你有一個善良的心，恩群數位歡迎你的加入"
+    image={{
+      url: "https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b4723942d01_工作環境-銘言底圖-1400x659.jpg",
+      alt: "工作環境",
+    }}
+  />
 </Layout>