painters-nextjs-template — Next.js 启动器模板

SHA-256: 387d78f6a022b2c8727ba19e3711c8788c1fcb7fc0344f9b41e6e5356ac9b172

2026-10-14T23:12:07.164Z

# 🎨 Vanguard Painting Co. — Premium Next.js 16 Website Template

[![Next.js 16](https://img.shields.io/badge/Next.js-16.3.4-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
[![React 19](https://img.shields.io/badge/React-19.2.8-blue?style=for-the-badge&logo=react)](https://react.dev/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
[![Tailwind CSS v4](https://img.shields.io/badge/Tailwind_CSS-v4.3-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](./LICENSE)

A high-converting, production-ready, open-source website template engineered for professional painting contractors, commercial fitout specialists, and trade service businesses. Built with **Next.js 16 (App Router & Turbopack)**, **React 19**, **Tailwind CSS v4**, **Radix UI**, and **Lucide Icons**.

---

## 📸 Homepage Variations

This project includes **two distinct, production-grade homepage experiences** out of the box, switchable via the navigation header:

| Variation | Route | Target Audience & Aesthetic |
|---|---|---|
| **Home (V1)** | `/` | **Flagship Residential & Heritage**: High-end editorial aesthetic with master painter craftsmanship storytelling, 6 detailed service cards with feature bullets, filterable portfolio showcase, 4-step client timeline, 3 verified reviews, and 2-column FAQ. |
| **Home 2 (V2)** | `/home-2` | **Commercial Fitouts & Trade Architecture**: High-impact commercial identity featuring full-bleed image-overlay cards, dark interactive project showcase slider with arrow navigation, dedicated **Surface Preparation** feature section, 2x2 trust grid with on-site trade photos, full-width blue contact bar, and interactive Adelaide service map. |

---

## 🗺️ System & User Journey Flow

### 1. Dual-Route Architecture
```mermaid
graph TD
    A[Visitor Arrives] --> B[Sticky Header Navigation]
    B -->|Click 'Home'| C[Route: / - Flagship Editorial Homepage]
    B -->|Click 'Home 2'| D[Route: /home-2 - Commercial Showcase Homepage]
    B -->|Click 'Get A Free Quote'| E[Smooth Scroll to #contact]
    
    subgraph "Home (V1) Flow"
        C --> C1[Hero with 5.0 Google Badge]
        C1 --> C2[Trust Metrics Bar]
        C2 --> C3[About & Master Craft Story]
        C3 --> C4[Editorial Services Grid]
        C4 --> C5[Filterable Portfolio Showcase]
        C5 --> C6[Why Choose Us - 4 Pillars]
        C6 --> C7[4-Step Client Process]
        C7 --> C8[Verified Customer Reviews]
        C8 --> C9[2-Column FAQ Accordion]
        C9 --> C10[High-Impact Final CTA]
        C10 --> C11[Quote Form & Adelaide Office]
    end

    subgraph "Home 2 (V2) Flow"
        D --> D1[Commercial Painting Hero]
        D1 --> D2[Trust Metrics Bar]
        D2 --> D3[Overlay Image Cards: Fitouts, Offices, Medical]
        D3 --> D4[Dark Carousel Showcase with Arrow Controls]
        D4 --> D5[Stacked FAQ with Direct Contact Button]
        D5 --> D6[Dedicated Surface Preparation Section]
        D6 --> D7[Why Choose Us: 2x2 Icons + Painters Photo]
        D7 --> D8[Full-Width Blue Contact Bar Strip]
        D8 --> D9[Talk To Our Painters + Adelaide Map Hub]
    end
    
    C11 --> F[Footer & Suburb Directory]
    D9 --> F
```

### 2. Lead Conversion Pipeline
```mermaid
sequenceDiagram
    autonumber
    actor Client as Property Owner
    participant Web as Next.js Website
    participant Form as Quote Engine
    participant Team as Trade Estimator

    Client->>Web: Explores Services / Surface Prep / Portfolio
    Client->>Web: Clicks 'Get a Free Quote' or 'Book An Estimate'
    Web->>Client: Scrolls directly to Quote Form (#contact)
    Client->>Form: Enters Name, Phone, Email, Property Type & Suburb
    Form->>Web: Validates inputs & triggers instant confirmation state
    Form->>Team: Delivers lead specification for 24-hr on-site measure
    Team->>Client: Schedules complimentary property inspection & fixed quote
```

---

## ✨ Key Features

- **⚡ Next.js 16 with Turbopack**: Blazing-fast page compilation (<800ms) and static page pre-rendering.
- **🎨 Tailwind CSS v4 & Radix UI**: Contemporary token-based styling, smooth scrolling, and accessible interactive primitives.
- **📱 True Mobile-First Responsiveness**: Hand-tuned layouts for mobile (375px–480px), tablet (768px), and wide monitors (1440px+).
- **🔎 Local SEO & Structured Data**: Built-in `HomeAndConstructionBusiness` Schema.org JSON-LD structured data for Google Rich Results.
- **🗂️ Centralized Data Architecture**: All copy, services, projects, stats, phone numbers, and suburbs are configured in a single file: `lib/data.ts`.
- **♿ Accessible by Design**: ARIA attributes, semantic landmarks, keyboard navigation support, and high-contrast color ratios.

---

## 🛠️ Tech Stack

| Layer | Technology |
|---|---|
| **Framework** | [Next.js 16.3.4](https://nextjs.org/) (App Router, Turbopack) |
| **Language** | [TypeScript 5.9](https://www.typescriptlang.org/) |
| **UI Library** | [React 19](https://react.dev/) |
| **Styling** | [Tailwind CSS v4](https://tailwindcss.com/) + [tw-animate-css](https://www.npmjs.com/package/tw-animate-css) |
| **Primitives** | [Radix UI](https://www.radix-ui.com/) + [shadcn/ui](https://ui.shadcn.com/) |
| **Icons** | [Lucide React](https://lucide.dev/) |
| **Fonts** | Google Fonts ([Outfit](https://fonts.google.com/specimen/Outfit) & [DM Sans](https://fonts.google.com/specimen/DM+Sans)) via `next/font` |

---

## 🚀 Getting Started

### Prerequisites
- Node.js `20.x` or later
- Package manager: `pnpm` (recommended), `npm`, or `yarn`

### Installation

1. **Clone the repository**:
   ```bash
   git clone https://github.com/YOUR_USERNAME/painters-nextjs-template.git
   cd painters-nextjs-template
   ```

2. **Install dependencies**:
   ```bash
   pnpm install
   ```

3. **Start the local development server**:
   ```bash
   pnpm dev
   ```

4. Open your browser and navigate to:
   - **Home (V1)**: [http://localhost:3000](http://localhost:3000)
   - **Home 2 (V2)**: [http://localhost:3000/home-2](http://localhost:3000/home-2)

---

## 📁 Project Structure

```
├── app/
│   ├── globals.css                # Tailwind CSS v4 setup & theme variables
│   ├── layout.tsx                 # Root layout with Google Fonts & JSON-LD schema
│   ├── page.tsx                   # Flagship Editorial Homepage (Home V1)
│   └── home-2/
│       └── page.tsx               # Commercial Showcase Homepage (Home 2 V2)
├── components/
│   ├── layout/
│   │   ├── header.tsx             # Sticky header with active route pills & mobile drawer
│   │   └── footer.tsx             # Multi-column footer & Adelaide suburb directory
│   └── home/
│       ├── hero.tsx               # Flagship hero with Google 5.0 rating badge
│       ├── hero-v2.tsx            # Commercial uppercase hero
│       ├── trust-stats.tsx        # 4 trust metrics strip
│       ├── about.tsx              # Asymmetric editorial master painter story
│       ├── services.tsx           # Editorial 6-card services with feature bullets
│       ├── services-v2.tsx        # Full-bleed image-overlay service cards
│       ├── featured-projects.tsx   # Filterable portfolio gallery with category tabs
│       ├── featured-projects-v2.tsx# Dark interactive project slider with arrow navigation
│       ├── why-choose-us.tsx      # 4 numbered pillars (01-04) + 70/30 prep highlight
│       ├── why-choose-us-v2.tsx   # 2x2 blue square icon grid + trade painters photo
│       ├── surface-prep.tsx       # Dedicated dark Surface Preparation feature section
│       ├── process.tsx            # 4-stage client journey timeline
│       ├── testimonials.tsx       # 3 verified customer reviews + 5.0 Google card
│       ├── faq.tsx                # 2-column FAQ with telephone support card
│       ├── faq-v2.tsx             # Stacked heading FAQ with clean divider accordion
│       ├── contact-bar.tsx        # Full-width vibrant blue quick-contact strip
│       ├── contact-section.tsx    # Comprehensive contact details + quote form
│       ├── contact-section-v2.tsx # Quote form + interactive Adelaide Map hub card
│       └── final-cta.tsx          # Twilight architectural banner with dual CTAs
├── lib/
│   ├── data.ts                    # Centralized data: business info, services, projects, FAQs
│   └── utils.ts                   # Tailwind class merge helper (cn)
├── public/                        # Static assets & favicons
├── next.config.ts                 # Next.js config with Unsplash remotePatterns
├── package.json
└── tsconfig.json
```

---

## ⚙️ Customization Guide

### 1. Update Company Information & Branding
Open [`lib/data.ts`](./lib/data.ts) to configure your business details globally:

```typescript
export const COMPANY_INFO = {
  name: "Your Painting Co.",
  phone: "(08) 1234 5678",
  email: "[email protected]",
  address: "Your Street Address, City, State, Postcode",
  buildersLicense: "BLD 123456",
  serviceAreas: ["City CBD", "Eastern Suburbs", "Hills District", "Coastal Suburbs"],
  // ...
}
```

### 2. Change Brand Colors
Open [`app/globals.css`](./app/globals.css) and customize the color tokens in `@theme inline` or replace the primary accent blue (`#2563EB`) with your brand's color.

### 3. Add Custom Projects & Services
Add or modify items directly in the typed arrays `SERVICES_DATA` and `PROJECTS_DATA` within [`lib/data.ts`](./lib/data.ts).

---

## 🧪 Available Scripts

| Command | Description |
|---|---|
| `pnpm dev` | Starts local development server on Turbopack (`http://localhost:3000`) |
| `pnpm build` | Compiles optimized production bundle and generates static pages |
| `pnpm start` | Runs the production build locally |
| `pnpm typecheck` | Validates TypeScript types across the entire project (`tsc --noEmit`) |
| `pnpm lint` | Runs ESLint to check for code quality and conventions |

---

## 🚢 Deployment

### Deploy to Vercel (Recommended)
1. Push your code to GitHub.
2. Import the repository into [Vercel](https://vercel.com).
3. Vercel will automatically detect Next.js and build with zero extra configuration needed.

---

## 📄 License

This project is licensed under the [MIT License](./LICENSE) — you are free to use, modify, and distribute it for personal and commercial projects.