pkupuk
b199f89998
Links the marketing solutions frontend page to the Payload CMS Pages collection via the new API library. Removes legacy static portfolio routes and components to consolidate marketing content. Enhances the Header and Footer Astro components with improved responsive styling.
165 lines
6.5 KiB
Plaintext
165 lines
6.5 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
// Footer component with server-side data fetching
|
|
|
|
// 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)
|
|
: import.meta.env.PAYLOAD_CMS_URL || "https://enchun-admin.anlstudio.cc";
|
|
|
|
// Fetch footer data from Payload CMS server-side
|
|
let footerNavItems: any[] = [];
|
|
try {
|
|
const response = await fetch(
|
|
`${PAYLOAD_CMS_URL}/api/globals/footer?depth=2&draft=false&locale=undefined&trash=false`,
|
|
);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
footerNavItems = data?.navItems || data || [];
|
|
}
|
|
} catch (error) {
|
|
console.error("[Footer SSR] Failed to fetch footer:", error);
|
|
}
|
|
|
|
// Fetch categories from Payload CMS server-side
|
|
let categories: any[] = [];
|
|
try {
|
|
const response = await fetch(
|
|
`${PAYLOAD_CMS_URL}/api/categories?sort=order&limit=6&depth=0&draft=false`,
|
|
);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
categories = (data?.docs || [])
|
|
.sort((a: any, b: any) => (a.order || 0) - (b.order || 0))
|
|
.slice(0, 6);
|
|
}
|
|
} catch (error) {
|
|
console.error("[Footer SSR] Failed to fetch categories:", error);
|
|
}
|
|
|
|
// Get current year for copyright
|
|
const currentYear = new Date().getFullYear();
|
|
---
|
|
|
|
<footer class="bg-[var(--color-tropical-blue)] pt-10 mt-auto relative">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-16">
|
|
<div class="col-span-2">
|
|
<Image
|
|
src="/enchun-logo.svg"
|
|
alt="Enchun Digital Logo"
|
|
class="h-auto w-32 mb-4"
|
|
width={919}
|
|
height={201}
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
<p
|
|
class="text-[var(--color-st-tropaz)] text-sm pr-8 font-light leading-relaxed"
|
|
>
|
|
恩群數位累積多年廣告行銷操作經驗，擁有全方位行銷人才，讓我們可以為客戶精準的規劃每一分廣告預算，讓你的品牌深入人心。更重要的是恩群的存在，為了成為每家公司最佳數位夥伴，作為彼此最堅強的後盾，你會知道有我們的陪伴
|
|
你並不孤單。
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3
|
|
class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4"
|
|
>
|
|
聯絡我們
|
|
</h3>
|
|
<a
|
|
href="https://www.facebook.com/EnChun-Taiwan-100979265112420"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="flex items-center mb-2 no-underline hover:underline transition-colors"
|
|
>
|
|
<Image
|
|
src="/fb-icon.svg"
|
|
alt="Facebook Icon"
|
|
class="h-auto w-6 mb-2"
|
|
width={16}
|
|
height={16}
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
</a>
|
|
<p class="text-sm text-[var(--color-st-tropaz)] mb-2">
|
|
諮詢電話:<br /> 02 5570 0527
|
|
</p>
|
|
<a
|
|
href="mailto:enchuntaiwan@gmail.com"
|
|
class="text-xs text-primary hover:text-secondary no-underline hover:underline transition-colors"
|
|
>enchuntaiwan@gmail.com</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<h3
|
|
class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4"
|
|
>
|
|
行銷方案
|
|
</h3>
|
|
<ul
|
|
class="text-sm font-thin space-y-2"
|
|
id="marketing-solutions"
|
|
>
|
|
{
|
|
footerNavItems.length > 0 &&
|
|
footerNavItems[0]?.childNavItems ? (
|
|
footerNavItems[0].childNavItems.map((item: any) => (
|
|
<li>
|
|
<a
|
|
href={item.link?.url || "#"}
|
|
class="text-(--color-st-tropaz) hover:text-(--color-dark-blue) hover:font-light no-underline transition-colors duration-300"
|
|
>
|
|
{item.link?.label || "連結"}
|
|
</a>
|
|
</li>
|
|
))
|
|
) : (
|
|
<li>
|
|
<span class="text-gray-500">載入中...</span>
|
|
</li>
|
|
)
|
|
}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3
|
|
class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4"
|
|
>
|
|
行銷放大鏡
|
|
</h3>
|
|
<ul class="text-sm font-thin space-y-2" id="marketing-articles">
|
|
{
|
|
categories.length > 0 ? (
|
|
categories.map((cat: any) => (
|
|
<li>
|
|
<a
|
|
href={`/blog/category/${cat.slug}`}
|
|
class="text-(--color-st-tropaz) hover:text-(--color-dark-blue) hover:font-light no-underline transition-colors duration-300"
|
|
title={cat.nameEn || cat.title}
|
|
>
|
|
{cat.title}
|
|
</a>
|
|
</li>
|
|
))
|
|
) : (
|
|
<li>
|
|
<span class="text-gray-500">暫無分類</span>
|
|
</li>
|
|
)
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-screen bg-[var(--color-amber)] font-['Quicksand'] text-[var(--color-tarawera)] py-2 text-xs text-center"
|
|
>
|
|
<p>
|
|
copyright © Enchun digital 2018 - {currentYear}
|
|
</p>
|
|
</div>
|
|
</footer>
|