feat(frontend): update pages, components and branding

Refresh Astro frontend implementation including new pages (Portfolio, Teams, Services), components, and styling updates.
2026-02-11 11:50:42 +08:00
parent be7fc902fb
commit 9c2181f743
49 changed files with 9699 additions and 899 deletions
--- a/apps/frontend/src/sections/CTASection.astro
+++ b/apps/frontend/src/sections/CTASection.astro
@@ -0,0 +1,147 @@
+---
+/**
+ * CTASection - Call to action section (Pixel-perfect from Webflow)
+ * Features: 2-column grid, notification-red button, hover effects
+ */
+import type { HomeData } from '@/lib/api/home'
+
+interface Props {
+  homeData?: HomeData | null
+}
+
+const { homeData } = Astro.props
+
+// Get CTA config from CMS or use defaults - matching reference HTML
+const ctaSection = homeData?.ctaSection
+const headline = ctaSection?.headline || '準備好開始新的旅程了嗎 歡迎與我們聯絡'
+const description = ctaSection?.description || '' // Reference has no description
+const buttonText = ctaSection?.buttonText || '預約諮詢 phone_callback'
+const buttonLink = ctaSection?.buttonLink || 'https://heyform.itslouis.cc/form/7mYtUNjA'
+---
+
+<section
+  class="section-call4action"
+  aria-labelledby="cta-heading"
+>
+  <div class="max-w-6xl mx-auto px-4">
+    <div class="c4a-grid">
+      <!-- Text Content -->
+      <div class="c4a-content">
+        <h3 id="cta-heading" class="c4a-heading">
+          {headline}
+        </h3>
+        {
+          description && (
+            <p class="c4a-description">
+              {description}
+            </p>
+          )
+        }
+      </div>
+
+      <!-- CTA Button -->
+      <a
+        href={buttonLink}
+        class="c4a-button"
+      >
+        <span class="c4a-button-text">
+          {buttonText}
+        </span>
+      </a>
+    </div>
+  </div>
+</section>
+
+<style>
+  /* CTA Section Styles - Pixel-perfect from Webflow */
+  .section-call4action {
+    padding: 105px 0 126px 0;
+  }
+
+  .c4a-grid {
+    display: grid;
+    grid-column-gap: 60px;
+    grid-template-columns: max-content max-content;
+    place-items: center;
+    justify-content: center;
+  }
+
+  .c4a-content {
+    text-align: left;
+  }
+
+  /* Heading - 1.88em */
+  .c4a-heading {
+    color: var(--color-dark-blue);
+    font-size: 1.88em;
+    font-weight: 500;
+    line-height: 1.1;
+    margin-bottom: 16px;
+  }
+
+  /* Description */
+  .c4a-description {
+    font-size: 1.1em;
+    color: var(--color-gray-700);
+    line-height: 1.5;
+  }
+
+  /* Button */
+  .c4a-button {
+    background-color: var(--color-notification-red);
+    border-radius: 15px;
+    padding: 18px 24px;
+    text-decoration: none;
+    display: inline-block;
+    transition: all var(--transition-base, 200ms ease-in-out);
+  }
+
+  .c4a-button:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+  }
+
+  .c4a-button-text {
+    color: #f2f2f2;
+    font-size: 1.56em;
+    line-height: 1.1;
+    text-align: center;
+    font-weight: 500;
+    display: block;
+  }
+
+  /* Responsive Adjustments */
+  @media (max-width: 991px) {
+    .section-call4action {
+      padding: 64px 0;
+    }
+
+    .c4a-grid {
+      grid-template-columns: 1fr;
+      grid-column-gap: 32px;
+      text-align: center;
+    }
+
+    .c4a-content {
+      text-align: center;
+    }
+
+    .c4a-heading {
+      font-size: 1.5em;
+    }
+  }
+
+  @media (max-width: 767px) {
+    .section-call4action {
+      padding: 48px 0;
+    }
+
+    .c4a-button {
+      min-width: 160px;
+    }
+
+    .c4a-button-text {
+      font-size: 1.2em;
+    }
+  }
+</style>