feat(frontend): update pages, components and branding
Refresh Astro frontend implementation including new pages (Portfolio, Teams, Services), components, and styling updates.
This commit is contained in:
@@ -1,97 +1,157 @@
|
||||
---
|
||||
import { Image } from 'astro:assets';
|
||||
// Footer component with client-side data fetching
|
||||
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)] py-10 mt-auto">
|
||||
<div class="max-w-5xl mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-8">
|
||||
<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 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" class="flex items-center mb-2">
|
||||
<Image src="/fb-icon.svg"
|
||||
alt="Phone Icon" class="h-auto w-6 mb-2"
|
||||
width={16}
|
||||
height={16}
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</a>
|
||||
<p class="text-[var(--color-st-tropaz)] mb-2">諮詢電話:<br> 02 5570 0527</p>
|
||||
<a href="mailto:enchuntaiwan@gmail.com" class="text-primary hover:text-secondary transition-colors">enchuntaiwan@gmail.com</a>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4">行銷方案</h3>
|
||||
<ul class="space-y-2" id="marketing-solutions">
|
||||
<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="space-y-2" id="marketing-articles">
|
||||
<li><span class="text-gray-500">載入中...</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="bg-[var(--color-tropical-blue)] py-10 mt-auto relative">
|
||||
<div class="max-w-5xl mx-auto px-4">
|
||||
<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 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"
|
||||
>
|
||||
<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-[var(--color-st-tropaz)] mb-2">
|
||||
諮詢電話:<br /> 02 5570 0527
|
||||
</p>
|
||||
<a
|
||||
href="mailto:enchuntaiwan@gmail.com"
|
||||
class="text-primary hover:text-secondary transition-colors"
|
||||
>enchuntaiwan@gmail.com</a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4"
|
||||
>
|
||||
行銷方案
|
||||
</h3>
|
||||
<ul class="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="font-normal text-[var(--color-st-tropaz)] hover:text-[var(--color-dove-gray)] transition-colors">
|
||||
{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="space-y-2" id="marketing-articles">
|
||||
{categories.length > 0
|
||||
? categories.map((cat: any) => (
|
||||
<li>
|
||||
<a href={`/blog/category/${cat.slug}`}
|
||||
class="font-normal text-[var(--color-st-tropaz)] hover:text-[var(--color-dove-gray)] transition-colors"
|
||||
title={cat.nameEn || cat.title}>
|
||||
{cat.title}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
: <li><span class="text-gray-500">暫無分類</span></li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-x-0 w-screen bg-[var(--color-amber)] py-3 text-center -left-4"
|
||||
>
|
||||
<p class="text-[var(--color-tarawera)]">
|
||||
copyright © Enchun digital 2018 - {currentYear}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 w-screen bg-[var(--color-amber)] py-3 text-center">
|
||||
<p class="text-[var(--color-tarawera)]">copyright © Enchun digital 2018 - {new Date().getFullYear()}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Client-side data fetching for footer
|
||||
interface LinkItem {
|
||||
link?: {
|
||||
url?: string;
|
||||
label?: string;
|
||||
};
|
||||
}
|
||||
|
||||
async function loadFooterData() {
|
||||
try {
|
||||
console.log('Fetching footer data...');
|
||||
const response = await fetch('/api/globals/footer?depth=2&draft=false&locale=undefined&trash=false');
|
||||
const data = await response.json();
|
||||
console.log('Footer data loaded:', data);
|
||||
|
||||
// Update marketing solutions
|
||||
const marketingUl = document.getElementById('marketing-solutions');
|
||||
if (marketingUl && data.navItems?.[0]?.childNavItems) {
|
||||
const links = data.navItems[0].childNavItems.map((item: LinkItem) =>
|
||||
`<li><a href="${item.link?.url || '#'}" class="font-normal text-[var(--color-st-tropaz)] hover:text-[var(--color-dove-gray)] transition-colors">${item.link?.label}</a></li>`
|
||||
).join('');
|
||||
marketingUl.innerHTML = links;
|
||||
}
|
||||
|
||||
// Update marketing articles (行銷放大鏡)
|
||||
const articlesUl = document.getElementById('marketing-articles');
|
||||
if (articlesUl && data.navItems?.[1]?.childNavItems) {
|
||||
const links = data.navItems[1].childNavItems.map((item: LinkItem) =>
|
||||
`<li><a href="${item.link?.url || '#'}" class="font-normal text-[var(--color-st-tropaz)] hover:text-[var(--color-dove-gray)] transition-colors">${item.link?.label}</a></li>`
|
||||
).join('');
|
||||
articlesUl.innerHTML = links;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load footer data:', error);
|
||||
<style>
|
||||
/* Footer specific styles */
|
||||
footer a {
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
// Load footer data when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', loadFooterData);
|
||||
} else {
|
||||
loadFooterData();
|
||||
}
|
||||
</script>
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user