Kunthawat Greethong
b26c8199a5
Changes: - Add FAL_KEY and GEMINI_API_KEY to .env.example - Update picture-it to use ~/.config/opencode/.env (unified creds) - Remove shodh-memory skill (no longer used) - Remove alphaear-* skills (deprecated) - Remove thai-frontend-dev skill (replaced by website-creator) - Remove theme-factory skill - Add mql-developer skill (MQL5 trading) - Add ecommerce-astro skill (Astro e-commerce) - Add website-creator skill (Next.js + Payload CMS) - Update install script for new skills
164 lines
7.6 KiB
Plaintext
164 lines
7.6 KiB
Plaintext
---
|
|
import Layout from '../layouts/Layout.astro';
|
|
import Header from '../components/layout/Header';
|
|
import Footer from '../components/layout/Footer';
|
|
import ProductCard from '../components/product/ProductCard.astro';
|
|
import CartDrawer from '../components/cart/CartDrawer';
|
|
import CartBadge from '../components/cart/CartBadge';
|
|
|
|
// Fetch featured products
|
|
const response = await fetch(`${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/products?select=*&featured=eq.true&status=eq.active&limit=8`, {
|
|
headers: {
|
|
'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY
|
|
}
|
|
});
|
|
const featuredProducts = await response.json();
|
|
|
|
// Fetch categories
|
|
const categoriesRes = await fetch(`${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/categories?select=*&isnull=parent_id&order=name.asc`, {
|
|
headers: {
|
|
'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY
|
|
}
|
|
});
|
|
const categories = await categoriesRes.json();
|
|
|
|
// Fetch new arrivals
|
|
const newArrivalsRes = await fetch(`${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/products?select=*&status=eq.active&order=created_at.desc&limit=8`, {
|
|
headers: {
|
|
'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY
|
|
}
|
|
});
|
|
const newArrivals = await newArrivalsRes.json();
|
|
---
|
|
|
|
<Layout title="ยินดีต้อนรับสู่ร้านของเรา">
|
|
<Header />
|
|
|
|
<!-- Hero Section -->
|
|
<section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">
|
|
สินค้าคุณภาพดี ราคาถูกใจ
|
|
</h1>
|
|
<p class="text-xl mb-8 text-blue-100 max-w-2xl mx-auto">
|
|
รวบรวมสินค้าดีๆ จากร้านค้าทั่วประเทศไทย พร้อมจัดส่งฟรี!
|
|
</p>
|
|
<div class="flex gap-4 justify-center">
|
|
<a href="/products" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
|
|
ช้อปเลย
|
|
</a>
|
|
<a href="/vendors" class="border-2 border-white text-white px-8 py-3 rounded-lg font-medium hover:bg-white/10 transition-colors">
|
|
ดูร้านค้า
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Categories -->
|
|
{categories.length > 0 && (
|
|
<section class="py-12 bg-white">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-2xl font-bold mb-8 text-center">หมวดหมู่สินค้า</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
{categories.map(category => (
|
|
<a href={`/products?category=${category.id}`} class="bg-gray-50 rounded-xl p-4 text-center hover:shadow-lg hover:bg-blue-50 transition-all duration-300">
|
|
<div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span class="text-2xl">{category.icon || '📦'}</span>
|
|
</div>
|
|
<p class="font-medium text-gray-800">{category.name}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- Featured Products -->
|
|
{featuredProducts.length > 0 && (
|
|
<section class="py-12">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h2 class="text-2xl font-bold">สินค้าแนะนำ</h2>
|
|
<a href="/products" class="text-blue-600 hover:text-blue-800 font-medium">
|
|
ดูทั้งหมด →
|
|
</a>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{featuredProducts.map((product, index) => (
|
|
<ProductCard product={product} index={index} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- New Arrivals -->
|
|
{newArrivals.length > 0 && (
|
|
<section class="py-12 bg-gray-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h2 class="text-2xl font-bold">สินค้าใหม่ล่าสุด</h2>
|
|
<a href="/products?sort=newest" class="text-blue-600 hover:text-blue-800 font-medium">
|
|
ดูทั้งหมด →
|
|
</a>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{newArrivals.map((product, index) => (
|
|
<ProductCard product={product} index={index} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- Features -->
|
|
<section class="py-16 bg-white">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid md:grid-cols-3 gap-8 text-center">
|
|
<div class="p-6">
|
|
<div class="w-20 h-20 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">จัดส่งฟรี</h3>
|
|
<p class="text-gray-600">สั่งซื้อตั้งแต่ 500 บาท จัดส่งฟรีทั่วประเทศ</p>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="w-20 h-20 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">สินค้าคุณภาพ</h3>
|
|
<p class="text-gray-600">ตรวจสอบคุณภาพก่อนส่งทุกชิ้น ให้คุณมั่นใจในสินค้าที่ได้รับ</p>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="w-20 h-20 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-10 h-10 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">ติดต่อง่าย</h3>
|
|
<p class="text-gray-600">พร้อมตอบคำถาม 24 ชั่วโมง ผ่านแชทและโทรศัพท์</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<h2 class="text-3xl font-bold mb-4">พร้อมเริ่มช้อปออนไลน์หรือยัง?</h2>
|
|
<p class="text-xl mb-8 text-blue-100">สมัครสมาชิกวันนี้ รับส่วนลดพิเศษ 10% สำหรับสั่งซื้อครั้งแรก!</p>
|
|
<a href="/register" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
|
|
สมัครสมาชิกฟรี
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
<CartDrawer client:load />
|
|
<CartBadge client:load />
|
|
</Layout>
|