Add portfolio items
This commit is contained in:
MoreminiMore
@@ -1,29 +1,320 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
|
||||
const portfolioItems = [
|
||||
{
|
||||
name: "Lungfinler",
|
||||
url: "https://lungfinler.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/lungfinler.png",
|
||||
description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง",
|
||||
services: ["Website", "Branding", "Graphic Design"]
|
||||
},
|
||||
{
|
||||
name: "Jet Industries",
|
||||
url: "https://jetindustries.co.th",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/jetindustries.png",
|
||||
description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี",
|
||||
services: ["Website", "Industrial"]
|
||||
},
|
||||
{
|
||||
name: "สำนักงานกฎหมาย ตถาตา",
|
||||
url: "https://lawyernoom.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/lawyernoom.png",
|
||||
description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา",
|
||||
services: ["Website", "Legal"]
|
||||
},
|
||||
{
|
||||
name: "Underdog Marketing",
|
||||
url: "https://underdog.run",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/underdog.png",
|
||||
description: "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู",
|
||||
services: ["Website", "Content Marketing"]
|
||||
},
|
||||
{
|
||||
name: "Baofuling Shop",
|
||||
url: "https://baofulingshop.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/baofuling.png",
|
||||
description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน",
|
||||
services: ["E-commerce", "Beauty"]
|
||||
},
|
||||
{
|
||||
name: "เทรนเนอร์ซันนี่",
|
||||
url: "https://trainersunny.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/trainersunny.png",
|
||||
description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill",
|
||||
services: ["Website", "Training"]
|
||||
},
|
||||
{
|
||||
name: "เลือดจระเข้วานิไทย",
|
||||
url: "https://เลือดจระเข้วานิไทย.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/luadjob.png",
|
||||
description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ",
|
||||
services: ["E-commerce", "Health"]
|
||||
},
|
||||
{
|
||||
name: "ทวนทอง 99",
|
||||
url: "https://tuanthong99.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/tuanthong.png",
|
||||
description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง",
|
||||
services: ["E-commerce", "Thai Herbal"]
|
||||
},
|
||||
{
|
||||
name: "Odoo Portal",
|
||||
url: "https://odooportal.com",
|
||||
category: "marketing",
|
||||
thumbnail: "/images/portfolio/odooportal.png",
|
||||
description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย",
|
||||
services: ["Odoo ERP", "System Implementation"]
|
||||
}
|
||||
]
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', name: 'ทั้งหมด' },
|
||||
{ id: 'webdev', name: 'พัฒนาเว็บไซต์' },
|
||||
{ id: 'ecommerce', name: 'อีคอมเมิร์ซ' },
|
||||
{ id: 'marketing', name: 'ที่ปรึกษาการตลาด' }
|
||||
]
|
||||
---
|
||||
|
||||
<Layout title="ผลงาน" description="ตัวอย่างผลงานการพัฒนาเว็บไซต์และระบบของ MoreminiMore">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>ผลงานของเรา</h1>
|
||||
<p>ตัวอย่างผลงานที่ผ่านมา</p>
|
||||
<Layout title="ผลงานของเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative py-32 overflow-hidden bg-black">
|
||||
<!-- Background with geometric pattern -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-black to-gray-900"></div>
|
||||
<!-- Decorative circles -->
|
||||
<div class="absolute top-20 left-10 w-64 h-64 border border-white/5 rounded-full"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 border border-primary/10 rounded-full"></div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] border border-white/5 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="text-center">
|
||||
<h1 class="text-6xl md:text-7xl lg:text-8xl font-bold text-white mb-6 tracking-tight">
|
||||
ผลงาน
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto">
|
||||
รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<p>ผลงานกำลังจะมาเร็วๆ นี้</p>
|
||||
<!-- Filter Section -->
|
||||
<section class="py-8 bg-black border-b border-gray-800 sticky top-0 z-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap justify-center gap-3" id="category-filters">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
class="filter-btn px-6 py-2.5 rounded-full font-medium transition-all duration-300 text-sm"
|
||||
data-category={cat.id}
|
||||
>
|
||||
{cat.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
</style>
|
||||
<!-- Masonry Portfolio Grid -->
|
||||
<section class="py-16 bg-black">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6" id="portfolio-grid">
|
||||
{portfolioItems.map((item, index) => (
|
||||
<article
|
||||
class="portfolio-card break-inside-avoid group relative rounded-2xl overflow-hidden bg-gray-900"
|
||||
data-category={item.category}
|
||||
style={`animation-delay: ${index * 0.05}s`}
|
||||
>
|
||||
<!-- Image -->
|
||||
<div class="relative">
|
||||
<img
|
||||
src={item.thumbnail}
|
||||
alt={item.name}
|
||||
class="w-full h-auto object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<!-- Gradient Overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-500"></div>
|
||||
|
||||
<!-- Hover Content -->
|
||||
<div class="absolute inset-0 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-4 group-hover:translate-y-0">
|
||||
<span class="inline-block bg-primary text-black text-xs font-bold px-3 py-1 rounded-full mb-3 self-start">
|
||||
{item.category === 'webdev' ? 'เว็บไซต์' : item.category === 'ecommerce' ? 'อีคอมเมิร์ซ' : 'ที่ปรึกษา'}
|
||||
</span>
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="bg-white text-black px-5 py-2.5 rounded-full font-semibold text-sm self-start hover:bg-primary transition-colors inline-flex items-center gap-2"
|
||||
>
|
||||
เยี่ยมชมเว็บไซต์
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content (visible on mobile, hidden on hover) -->
|
||||
<div class="p-5 group-hover:opacity-0 transition-opacity duration-300">
|
||||
<h3 class="text-xl font-bold text-white mb-2">{item.name}</h3>
|
||||
<p class="text-gray-400 text-sm mb-3 line-clamp-2">{item.description}</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{item.services.slice(0, 3).map((service) => (
|
||||
<span class="bg-gray-800 text-gray-300 px-2 py-1 rounded text-xs">
|
||||
{service}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="empty-state" class="hidden text-center py-20">
|
||||
<svg class="w-20 h-20 mx-auto mb-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<h3 class="text-2xl font-bold text-white mb-2">ไม่พบผลงาน</h3>
|
||||
<p class="text-gray-500">ลองเลือกหมวดหมู่อื่นๆ ดูนะครับ</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="py-20 bg-gray-900">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||
<div>
|
||||
<div class="text-5xl font-bold text-primary mb-2">50+</div>
|
||||
<div class="text-gray-400">โปรเจกต์</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-5xl font-bold text-primary mb-2">40+</div>
|
||||
<div class="text-gray-400">ลูกค้า</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-5xl font-bold text-primary mb-2">5+</div>
|
||||
<div class="text-gray-400">ปีประสบการณ์</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-5xl font-bold text-primary mb-2">100%</div>
|
||||
<div class="text-gray-400">ความพึงพอใจ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-20 bg-primary">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
อยากได้เว็บไซต์แบบนี้บ้าง?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-800 mb-8">
|
||||
ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/contact-us" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-all duration-300 hover:scale-105 inline-flex items-center justify-center">
|
||||
ปรึกษาฟรี
|
||||
</a>
|
||||
<a href="tel:0809955945" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 inline-flex items-center justify-center">
|
||||
080-995-5945
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const portfolioCards = document.querySelectorAll('.portfolio-card');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const grid = document.getElementById('portfolio-grid');
|
||||
|
||||
// Set initial active state
|
||||
filterBtns[0]?.classList.add('active');
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const category = btn.getAttribute('data-category');
|
||||
|
||||
// Update active button
|
||||
filterBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
// Filter cards
|
||||
let visibleCount = 0;
|
||||
portfolioCards.forEach(card => {
|
||||
const cardCategory = card.getAttribute('data-category');
|
||||
if (category === 'all' || cardCategory === category) {
|
||||
(card as HTMLElement).style.display = 'block';
|
||||
(card as HTMLElement).style.animation = 'fadeInUp 0.5s ease forwards';
|
||||
visibleCount++;
|
||||
} else {
|
||||
(card as HTMLElement).style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide empty state
|
||||
if (visibleCount === 0 && emptyState) {
|
||||
emptyState.classList.remove('hidden');
|
||||
grid?.classList.add('hidden');
|
||||
} else {
|
||||
emptyState?.classList.add('hidden');
|
||||
grid?.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.filter-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #9ca3af;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #fed400;
|
||||
color: #000;
|
||||
border-color: #fed400;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user