Part 1: Source code - Astro project structure and components
This commit is contained in:
Kunthawat Greethong
144
src/pages/portfolio.astro
Normal file
144
src/pages/portfolio.astro
Normal file
@@ -0,0 +1,144 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="ผลงาน - ดีล พลัส เทค" description="ผลงานติดตั้งระบบน้ำของ ดีล พลัส เทค จำกัด">
|
||||
<!-- Hero -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-4">ผลงาน</h1>
|
||||
<p class="text-lg text-primary-100">ตัวอย่างโครงการที่ได้รับความไว้วางใจจากลูกค้าทั่วประเทศ</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Grid -->
|
||||
<section class="py-16 lg:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Project 1 - Cyber World -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/cyber-world.jpg" alt="Cyber World" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">Cyber World</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ PPR</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 2 - Toyox -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/toyox.jpg" alt="Toyox" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">Toyox</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่ออุตสาหกรรม</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 4 - Ethanol Factory -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/ethanol-factory.jpg" alt="โรงงานเอธานอล" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">โรงงานเอธานอล</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่ออุตสาหกรรม</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 6 - Seacon Bang Khae -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/seacon-bang-khae.jpg" alt="ซีคอนบางแค" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">ซีคอนบางแค (Seacon Bang Khae)</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 7 - CP Ram Ladkrabang -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/cp-ram-ladkrabang.jpg" alt="ซีพีแรม ลาดกระบัง" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">ซีพีแรม ลาดกระบัง (CP Ram Ladkrabang)</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 9 - Begrim -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/begrim.jpg" alt="บริษัท บีกริม" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">บริษัท บีกริม (Begrim Co., Ltd.)</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 11 - Eminent Air Factory -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/eminent-air-factory.jpg" alt="Eminent Air Factory" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">Eminent Air Factory</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 12 - Thai Nam Tip -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/thai-nam-tip.jpg" alt="ไทยน้ำทิพย์" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">ไทยน้ำทิพย์ (Thai Nam Tip)</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 13 - Essilor Factory -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/essilor-factory.jpg" alt="Essilor Factory" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">Essilor Factory</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 15 - Pracharat Project -->
|
||||
<div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
|
||||
<div class="aspect-video img-hover bg-neutral-200">
|
||||
<img src="/images/portfolio/pracharat-project.jpg" alt="โครงการประชารัฐ" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-primary-700 group-hover:text-primary-600">โครงการประชารัฐ (Pracharat Project)</h3>
|
||||
<p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-3xl font-bold mb-6">ต้องการให้เราดูแลโครงการของคุณ?</h2>
|
||||
<p class="text-lg text-primary-100 mb-8">ติดต่อเราวันนี้ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/contact-us" class="bg-white text-primary-700 py-3 px-8 rounded-xl font-semibold hover:bg-primary-50 transition-colors">ติดต่อเรา</a>
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" rel="noopener" class="bg-accent-500 hover:bg-accent-600 text-white py-3 px-8 rounded-xl font-semibold transition-colors">แอดไลน์</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user