Fix website-creator: add missing functions and templates with IDs
This commit is contained in:
Kunthawat Greethong
@@ -0,0 +1,131 @@
|
||||
---
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const quickLinks = [
|
||||
{ name: 'หน้าแรก', href: '/' },
|
||||
{ name: 'เกี่ยวกับเรา', href: '/about' },
|
||||
{ name: 'บริการ', href: '/services' },
|
||||
{ name: 'สินค้า', href: '/products' },
|
||||
{ name: 'ติดต่อเรา', href: '/contact' },
|
||||
];
|
||||
|
||||
const services = [
|
||||
{ name: 'บริการติดตั้ง', href: '/services/installation' },
|
||||
{ name: 'บริการให้คำปรึกษา', href: '/services/consultation' },
|
||||
{ name: 'บริการซ่อมบำรุง', href: '/services/maintenance' },
|
||||
];
|
||||
|
||||
const legalLinks = [
|
||||
{ name: 'นโยบายความเป็นส่วนตัว', href: '/privacy-policy' },
|
||||
{ name: 'ข้อกำหนดและเงื่อนไข', href: '/terms-and-conditions' },
|
||||
{ name: 'นโยบายคุกกี้', href: '/cookie-policy' },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ name: 'Facebook', href: 'https://facebook.com', icon: 'facebook' },
|
||||
{ name: 'Line', href: 'https://line.me', icon: 'line' },
|
||||
{ name: 'YouTube', href: 'https://youtube.com', icon: 'youtube' },
|
||||
];
|
||||
---
|
||||
|
||||
<footer id="footer-component" class="bg-secondary-900 text-white pt-16 pb-8">
|
||||
<div id="footer-container" class="container-custom">
|
||||
<!-- Main Footer Content -->
|
||||
<div id="footer-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||||
<!-- Company Info -->
|
||||
<div id="footer-company">
|
||||
<div id="footer-logo-container" class="mb-4">
|
||||
<img id="footer-logo" src="/images/logo.png" alt="Logo" class="h-12" />
|
||||
</div>
|
||||
<div id="footer-description">
|
||||
<p class="text-secondary-300 mb-4">
|
||||
บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบท่อและอุปกรณ์ติดตั้งคุณภาพสูง
|
||||
</p>
|
||||
</div>
|
||||
<!-- Social Links -->
|
||||
<div id="footer-social">
|
||||
<div id="social-links-container" class="flex space-x-4">
|
||||
{socialLinks.map((social, index) => (
|
||||
<a id={`social-${social.icon}`} href={social.href} target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-secondary-800 rounded-full flex items-center justify-center hover:bg-primary-600 transition-colors" aria-label={social.name}>
|
||||
<span class="text-sm font-medium">{social.name[0]}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div id="footer-quick-links">
|
||||
<h3 id="quick-links-title" class="text-lg font-bold mb-4">ลิงก์ด่วน</h3>
|
||||
<ul id="quick-links-list" class="space-y-2">
|
||||
{quickLinks.map((link, index) => (
|
||||
<li>
|
||||
<a id={`quick-link-${index}`} href={link.href} class="text-secondary-300 hover:text-white transition-colors">
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div id="footer-services">
|
||||
<h3 id="services-title" class="text-lg font-bold mb-4">บริการ</h3>
|
||||
<ul id="services-list" class="space-y-2">
|
||||
{services.map((service, index) => (
|
||||
<li>
|
||||
<a id={`service-link-${index}`} href={service.href} class="text-secondary-300 hover:text-white transition-colors">
|
||||
{service.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div id="footer-contact">
|
||||
<h3 id="contact-title" class="text-lg font-bold mb-4">ติดต่อเรา</h3>
|
||||
<div id="contact-info" class="space-y-3">
|
||||
<div id="contact-address" class="flex items-start">
|
||||
<span class="text-secondary-400 mr-2">📍</span>
|
||||
<span class="text-secondary-300">123 ถนนสุขุมวิท กรุงเทพมหานคร 10110</span>
|
||||
</div>
|
||||
<div id="contact-phone" class="flex items-center">
|
||||
<span class="text-secondary-400 mr-2">📞</span>
|
||||
<a href="tel:021234567" class="text-secondary-300 hover:text-white transition-colors">02-123-4567</a>
|
||||
</div>
|
||||
<div id="contact-email" class="flex items-center">
|
||||
<span class="text-secondary-400 mr-2">✉️</span>
|
||||
<a href="mailto:info@example.com" class="text-secondary-300 hover:text-white transition-colors">info@example.com</a>
|
||||
</div>
|
||||
<div id="contact-hours" class="flex items-center">
|
||||
<span class="text-secondary-400 mr-2">🕐</span>
|
||||
<span class="text-secondary-300">วันจันทร์-เสาร์ 08:00-18:00 น.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Footer -->
|
||||
<div id="footer-bottom" class="border-t border-secondary-800 pt-8">
|
||||
<div id="footer-bottom-content" class="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div id="copyright">
|
||||
<p class="text-secondary-400 text-sm">
|
||||
© {currentYear} บริษัท ดีล พลัส เทค จำกัด สงวนลิขสิทธิ์
|
||||
</p>
|
||||
</div>
|
||||
<div id="footer-legal-links">
|
||||
<ul id="legal-links-list" class="flex flex-wrap gap-4 text-sm">
|
||||
{legalLinks.map((link, index) => (
|
||||
<li>
|
||||
<a id={`legal-link-${index}`} href={link.href} class="text-secondary-400 hover:text-white transition-colors">
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
Reference in New Issue
Block a user