# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

V_LOG MEDIA website - A Next.js 14 production website for a Vietnamese media production company specializing in video content, TVC advertising, livestream services, and multi-platform media campaigns. The site is built with TypeScript, Tailwind CSS, Framer Motion animations, and features a modern light theme with gradient designs, blog system, service sections, and comprehensive pricing pages.

## Development Commands

```bash
# Start development server (runs on http://localhost:3000 by default)
npm run dev

# Build for production
npm run build

# Start production server (runs on port 3001 by default)
npm start

# Lint code
npm run lint

# Export static site (currently commented out in next.config.js)
npm run export

# Run custom server (uses server.js)
node server.js
```

## Architecture & Code Structure

### App Router Architecture (Next.js 14)
- Uses Next.js App Router (`app/` directory) with server and client components
- Root layout at `app/layout.tsx` includes Header, Footer, ScrollToTop, and FloatingContactButtons
- Main page (`app/page.tsx`) imports metadata and delegates rendering to `pages/HomeClient.tsx`
- All pages are Vietnamese language (lang="vi")

### Key Directories
- `app/` - Next.js App Router pages and layouts
  - `app/goc-kien-thuc/[slug]/` - Dynamic blog post routes with slug-based routing
  - `app/ve-chung-toi/` - About page (uses AboutClient.tsx)
  - `app/bang-gia/` - Pricing page (uses PricingClient.tsx)
  - `app/chinh-sach-hoan-tien/` - Refund policy page (uses RefundPolicyClient.tsx)
  - `app/lien-he/` - Contact page (uses ContactClient.tsx)
  - `app/api/send-email/` - API endpoint for quick consultation form (name + phone)
  - `app/api/send-contact/` - API endpoint for full contact form (name + phone + email + message)
- `pages/` - **Parent client components for each major page**
  - `pages/HomeClient.tsx` - Homepage with all sections
  - `pages/AboutClient.tsx` - Complete about page
  - `pages/BlogClient.tsx` - Blog listing with search and filters
  - `pages/PricingClient.tsx` - Pricing page with features and benefits
  - `pages/ContactClient.tsx` - Contact page with form
  - `pages/RefundPolicyClient.tsx` - Refund policy page
- `components/` - Reusable React components organized by feature
- `config/` - Configuration files including routes.ts
- `types/` - TypeScript type definitions (blog, menu, brand, testimonial, section)
- `data/` - Static data files (videoList.ts)
- `utils/` - Utility functions (slug generation, routing)
- `styles/` - Global CSS files

### Component Organization
Components are self-contained with index.tsx files:
- `Header/` - Navigation with menuData.tsx (Contact link points to /lien-he page)
- `Blog/` - Blog listing with animations, detail components, and blogData.tsx
- `VideoSection/` - Video player, popup, and gallery components
- `Common/` - Shared components (Breadcrumb, SectionTitle, ScrollUp, ConsultModal)
- `Contact/` - Professional contact form with info cards and validation
- Specialized sections with animations and gradient designs:
  - `Hero/` - Hero section with gradient overlay and CTA buttons
  - `About/` - About section with CheckCircle icons and feature cards
  - `StatisticSection/` - Animated stats with blur decorations
  - `ServiceSection/` - Call-to-action section with animated backgrounds
  - `CompoGuarantee/` - Money-back guarantee cards with gradients
  - `PricingStarter/` - Pricing cards with hover effects
  - `VideoFAQSection/` - Video FAQ accordion
  - `FloatingContactButtons/` - Floating action buttons

### Routing & Navigation
- Routes centralized in `config/routes.ts`:
  - `HOME: "/"` - Homepage with all sections
  - `ABOUT: "/ve-chung-toi"` - About page
  - `BLOG: "/goc-kien-thuc"` - Blog listing
  - `PRICING: "/bang-gia"` - Pricing page
  - `CONTACT: "/lien-he"` - Contact page
  - `REFUND_POLICY: "/chinh-sach-hoan-tien"` - Refund policy
- Menu data in `components/Header/menuData.tsx` links to dedicated pages
- Homepage sections use section IDs (hero, about, service, blog) for layout
- Blog uses slug-based routing via `utils/slug.ts` with `createBlogSlug()` function
- Dynamic routes in `app/goc-kien-thuc/[slug]/page.tsx` for blog posts

### Theme System
- Uses `next-themes` for theme management (configured in `app/providers.tsx`)
- **Currently forced to light mode**: `forcedTheme="light"` with dark mode disabled
- Tailwind dark mode configured with `class` strategy
- Custom color palette defined in `tailwind.config.js` includes primary (#4A6CF7), yellow (#FBB040), and dark mode variants

### Data Management
- Blog posts stored as static data in `components/Blog/blogData.tsx`
- Video data in `data/videoList.ts`
- No backend/CMS integration currently
- Images expected in `/public/images/` directory

### TypeScript Configuration
- Path alias `@/*` maps to project root
- Strict mode disabled (`strict: false`)
- Strict null checks enabled separately
- Target ES2017

### Styling
- Tailwind CSS with custom breakpoints (xs: 450px, sm: 575px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)
- **Design System**: Consistent red-orange-yellow gradient color scheme
  - Primary: Red (#EF4444, #DC2626) for CTAs and highlights
  - Secondary: Orange (#F97316, #EA580C) for accents
  - Tertiary: Yellow (#FBB040) for highlights
- Framer Motion animations extensively used across all components
- Gradient backgrounds with blur effects for modern aesthetic
- Swiper CSS imports in layout for carousel functionality
- Custom box shadows and hover effects
- Font: Inter from Google Fonts

## Important Notes

### Image Configuration
- Next.js Image component configured to allow `localhost` and `img.youtube.com` domains
- Remote patterns configured for Sanity CDN (https://cdn.sanity.io)

### Client vs Server Components
- Root layout is client component ("use client") to support ThemeProvider
- **All page parent components are client components** (pages/*Client.tsx)
  - `HomeClient.tsx` - Homepage with all sections and animations
  - `AboutClient.tsx` - About page with hero, achievements, story, values
  - `BlogClient.tsx` - Blog page with search, filters, and grid layout
  - `PricingClient.tsx` - Pricing page with features and benefits
  - `ContactClient.tsx` - Contact page with reasons and form
  - `RefundPolicyClient.tsx` - Refund policy with conditions and FAQs
- Metadata defined in server components (app/*/page.tsx)
- Most section components use 'use client' for animations and interactivity

### Blog System
- Static content stored in `components/Blog/blogData.tsx` with HTML content as strings
- Each blog has: id, title, paragraph, image, author, tags, publishDate, slug, content
- Slug generation via `createBlogSlug()` utility function
- **BlogClient features**:
  - Search functionality by title
  - Tag-based filtering with visual tag buttons
  - Featured blog (first item shown full-width)
  - Grid layout (3 columns) for remaining blogs
  - Empty state handling for no results
  - Stats section showing total blogs, authors, tags, views
  - Animated cards with hover effects
- Related posts and social sharing components available

### SEO & Metadata
- OpenGraph and Twitter card metadata configured in app/page.tsx
- Uses NEXT_PUBLIC_DOMAIN environment variable for canonical URLs
- Vietnamese locale (vi_VN)

### Email & Contact System
- Uses **nodemailer** (v7.0.9) with Gmail SMTP for sending emails
- Two API endpoints for contact functionality:
  - `/api/send-email` - Quick consultation form (name + phone only)
  - `/api/send-contact` - Full contact form (name + phone + email + message)
- Validates Vietnamese phone numbers: `(0|\+84)(3|5|7|8|9)[0-9]{8}`
- Emails formatted with HTML templates featuring gradient designs matching site theme
- Notification emails sent to configured admin email address

### Environment Variables
Required environment variables in `.env`:
```
NEXT_PUBLIC_DOMAIN=http://localhost:3000    # Public domain for SEO/metadata
GMAIL_USER=your-email@gmail.com             # Gmail account for sending emails
GMAIL_APP_PASSWORD=your-app-password        # Gmail app password (not regular password)
NOTIFICATION_EMAIL=recipient@email.com      # Email address to receive notifications
```

**Note**: Use Gmail App Password, not regular password. Generate at: https://myaccount.google.com/apppasswords

### Custom Server
- `server.js` provides custom Next.js server configuration
- Configured for production hostname: `https://vlogmd.vn/`
- Default port: 3001 (configurable via PORT environment variable)
- Handles custom routing logic if needed

### Libraries
- `framer-motion` (v12.11.0) - Animations
- `react-modal-video` (v2.0.0) - Video modals
- `swiper` (v11.2.6) - Carousels
- `lucide-react` (v0.536.0) - Icons
- `next-themes` (v0.2.1) - Theme switching
- `nodemailer` (v7.0.9) - Email sending functionality

## Animation Patterns

All components use consistent Framer Motion animation patterns:

### Standard Animation Props
```typescript
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
```

### Hover Effects
```typescript
whileHover={{ scale: 1.05, y: -5 }}
whileTap={{ scale: 0.95 }}
```

### Staggered Animations
Use delay increments for lists:
```typescript
transition={{ duration: 0.5, delay: index * 0.1 }}
```

### Background Decorations
Blur circles for depth:
```typescript
<div className="absolute top-20 right-20 w-72 h-72 bg-red-200 rounded-full blur-3xl" />
```

## Design Guidelines

### Color Usage
- **Gradients**: `bg-gradient-to-r from-red-500 to-red-600`
- **Hover states**: Darken gradient on hover
- **Text gradients**: Use `text-transparent bg-clip-text bg-gradient-to-r`
- **Backgrounds**: Use subtle gradients like `bg-gradient-to-b from-white via-red-50/20 to-white`

### Component Structure
1. Background decorations (blur circles)
2. Content wrapper with relative positioning
3. Animated sections with motion.div
4. Hover effects on interactive elements
5. Proper spacing (py-12 md:py-16 for sections)

### Typography
- Headings: Use bold/extrabold weights with gradient colors
- Body text: text-neutral-600 to text-neutral-700
- Highlighted text: text-red-500 or text-red-600
- Proper Vietnamese capitalization (Title Case for headings)

### Buttons
- Use gradient backgrounds: `bg-gradient-to-r from-red-500 to-red-600`
- Add shadow effects: `shadow-lg hover:shadow-xl`
- Include icons from lucide-react
- Add hover scale: `hover:scale-105`
- Rounded full: `rounded-full` for modern look

## Page Architecture

### Structure
Each major page follows this pattern:
1. **Server Component** (`app/*/page.tsx`) - Handles metadata and SEO
2. **Client Component** (`pages/*Client.tsx`) - Handles interactivity and rendering
3. **Section Components** - Reusable pieces used across pages

### Homepage Sections (HomeClient.tsx)
In order of appearance:
1. Hero - Main banner with CTA buttons
2. StatisticSection - Animated stats display
3. About - Company overview with features
4. CompoGuarantee - Money-back guarantee cards
5. ServiceSection - Call-to-action with animated background
6. VideoSection - Video showcase (from Google Sheets)
7. PricingStarter - Pricing overview
8. VideoFAQSection - FAQ accordion
9. Blog - Latest blog posts preview
10. Contact - Contact form (embedded in homepage)

### Video Data Integration
- Videos fetched from Google Sheets API
- Two types: `shortVideo` and `adVideo`
- Real-time data fetching in HomeClient on mount
- Loading states handled properly

## Recent Improvements (Latest Update)

### Component Enhancements
All child components of HomeClient have been modernized with:

1. **Hero Component**
   - Added gradient overlay for better text readability
   - Converted buttons to Link components with proper navigation
   - Added framer-motion animations with staggered timing
   - CTAs link to `/lien-he` (Contact) and `/bang-gia` (Pricing)

2. **StatisticSection**
   - Added animated background blur decorations
   - Implemented scale animations on numbers
   - Added hover effects (scale + rotate) on icons
   - Fixed typo: "5+" instead of "+5" for years of experience
   - Improved responsive typography

3. **About Component**
   - Complete redesign with gradient background
   - Replaced custom arrow icons with CheckCircle from lucide-react
   - Added comprehensive motion animations
   - Enhanced feature cards with hover effects
   - Better text: "Xem Thêm Thông Tin"

4. **CompoGuarantee**
   - Complete redesign with gradient backgrounds
   - Added animated background decorations
   - Improved text hierarchy with gradient effects
   - Better link styling with arrow icon animation
   - Two-card layout with distinct color schemes

5. **ServiceSection (Call-to-Action)**
   - Enhanced gradient overlay
   - Added animated floating blur circles
   - Added "Giải Pháp Sáng Tạo" badge
   - Added stats mini cards (500+ Projects, 300+ Clients, 5+ Years)
   - Better button: "Nhận Tư Vấn Ngay"

6. **Blog Component**
   - Converted to client component with animations
   - Added gradient background with blur decorations
   - Improved title: "Chia Sẻ Từ Kinh Nghiệm Thực Chiến"
   - Staggered animations for blog cards
   - Enhanced button: "Xem Thêm Bài Viết"

### Text Improvements
- Fixed spelling and capitalization throughout
- Improved Vietnamese text formatting (Title Case for headings)
- More formal and professional tone
- Consistent punctuation and spacing

## Best Practices

### When Creating New Components
1. Always add 'use client' if using animations or state
2. Include background decorations (blur circles) for depth
3. Use consistent animation patterns (initial, whileInView, viewport)
4. Add hover effects on interactive elements
5. Use gradient backgrounds from the design system
6. Include proper responsive classes (md:, lg:, xl:)
7. Add proper TypeScript types
8. Use lucide-react icons consistently

### Performance Considerations
- Use `viewport={{ once: true }}` to prevent re-animations on scroll
- Lazy load heavy components when possible
- Optimize images with Next.js Image component
- Keep animations smooth (duration: 0.3-0.6s)

### Accessibility
- Include proper alt text for images
- Use semantic HTML elements
- Ensure proper color contrast
- Add hover and focus states
- Support keyboard navigation

## Common Patterns

### Section Layout
```typescript
<section className="relative bg-gradient-to-b from-white via-red-50/20 to-white py-12 md:py-16 overflow-hidden">
  {/* Background decorations */}
  <div className="absolute inset-0 pointer-events-none opacity-30">
    <div className="absolute top-20 right-20 w-80 h-80 bg-red-200 rounded-full blur-3xl" />
  </div>

  {/* Content */}
  <div className="container px-4 relative z-10">
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6 }}
    >
      {/* Content here */}
    </motion.div>
  </div>
</section>
```

### Card Component
```typescript
<motion.div
  initial={{ opacity: 0, y: 30 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.5, delay: index * 0.1 }}
  whileHover={{ y: -8 }}
  className="group p-6 bg-white rounded-2xl border-2 border-red-100 hover:border-red-300 shadow-lg hover:shadow-2xl transition-all duration-300"
>
  {/* Card content */}
</motion.div>
```

### Button/Link Component
```typescript
<Link href={ROUTES.CONTACT}>
  <motion.button
    whileHover={{ scale: 1.05 }}
    whileTap={{ scale: 0.95 }}
    className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-red-500 to-red-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300"
  >
    Button Text
    <ArrowRight className="w-5 h-5" />
  </motion.button>
</Link>
```