VAPING SHOP

เจ้าของผลงานเล่าไว้แบบนี้

Vaping Shop E-commerce Website - Next.js + Tailwind CSS https://vaping-shop.vercel.app # 💨 VAPING SHOP เว็บไซต์ร้านขายพอตบุหรี่ไฟฟ้า สร้างด้วย Next.js 14 + Tailwind CSS + TypeScript --- ## 🎨 Design System ### ฟ้อน - **Prompt** - ฟ้อนไทยที่ออกแบบมาสำหรับหน้าจอ รองรับ Thai + Latin ### สี (Color Palette) | ชื่อ | โค้ด | ใช้กับ | |-----|------|--------| | Neon Orange | `#ff6b00` | Primary, CTA buttons | | Neon Purple | `#9333ea` | Accents, gradients | | Neon Blue | `#3b82f6` | Accents, gradients | | Neon Pink | `#ec4899` | Badges, highlights | | Dark 100 | `#1a1a2e` | Cards background | | Dark 200 | `#16213e` | Section background | | Dark 300 | `#0f0f23` | Navbar/Footer | | Dark 400 | `#0a0a1a` | Main background | ### Effects - **Glassmorphism** - Blur + transparency สำหรับ cards และ navbar - **Neon Glow** - Box-shadow gradient effect - **Gradient Text** - ตัวหนังสือไล่สี - **Hover Animations** - Scale, translate, glow effects --- ## 📂 Project Structure ``` vaping-shop/ ├── src/ │ ├── app/ # Next.js App Router │ │ ├── layout.tsx # Root layout (Header + Footer) │ │ ├── page.tsx # หน้าแรก (Landing Page) │ │ ├── globals.css # Global styles + animations │ │ └── products/ │ │ ├── page.tsx # หน้ารายการสินค้า │ │ └── [id]/page.tsx # หน้ารายละเอียดสินค้า │ │ │ ├── components/ # React Components │ │ ├── Header.tsx # Navbar + Dropdown menu │ │ ├── Footer.tsx # Footer พร้อม links │ │ ├── Hero.tsx # Hero section หน้าแรก

โดย pod4u · ดูโพสต์ต้นทาง