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

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