CleanLandingPro-react-template — Vite 企业官网模板

SHA-256: e0c20b7462df70391ff385a4cf577a22c7b5001c6447772d8635b79ea0848b28

2026-10-16T14:37:34.929Z

# CleanLanding Pro

CleanLanding Pro is a React + Vite launch kit with a polished marketing site and optional Flask/PostgreSQL backend for capturing leads. It ships with production-ready sections (hero, demo preview, pricing, testimonials, FAQ, affiliate highlights, metrics, and contact) plus a responsive playground to showcase device-specific mocks.

---

## Overview

- **Responsive by default** – carefully tuned layouts for desktop, tablet, and mobile, including a hero sandbox that scales between mock devices.
- **Real-world sections** – pricing tiers, testimonials, FAQ accordions, affiliate highlights, performance metrics, and more.
- **Live contact flow** – React form posts to a Flask API (SQLAlchemy + Postgres) and returns a ticket ID for follow-up.
- **Customization-first** – color tokens, copy arrays, and assets are modular so you can swap branding in minutes.
- **Testing & CI** – Vitest + Testing Library cover key flows; GitHub Actions runs lint, tests, and build on every push.

---

## Tech Stack

| Layer      | Stack                                                                       |
| ---------- | ---------------------------------------------------------------------------- |
| Frontend   | React 19, Vite, CSS modules                                                  |
| Backend    | Flask, SQLAlchemy, PostgreSQL, python-dotenv                                 |
| Tooling    | ESLint, Vitest, React Testing Library, jsdom, GitHub Actions, Netlify-ready |

---

## Getting Started

```bash
cd frontend
# Install deps (pnpm, npm, or yarn)
pnpm install
# Launch development server
pnpm run dev
```

The app runs at http://localhost:5173. You can hot reload each React component as you customize copy or styles.

**Quick start with backend (optional)**

```bash
cd backend
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env  # configure DB + secret key
flask --app app run
```

This exposes the contact API at http://localhost:5000; ensure `frontend/.env` points `VITE_API_URL` to that address.

---
## Scripts

| Command                | Description                                  |
| ---------------------- | -------------------------------------------- |
| `pnpm run dev`         | Start Vite with hot module reload.           |
| `pnpm run build`       | Produce the optimized bundle in `dist/`.     |
| `pnpm run preview`     | Preview the production build locally.        |
| `pnpm run lint`        | ESLint (`eslint.config.js`).                 |
| `pnpm run test`        | Vitest suite (jsdom + Testing Library).      |
| `pnpm run test:watch`  | Watch mode for Vitest.                       |
| `pnpm run test:coverage` | Generate coverage via V8.                  |

> The repo ships with `package-lock.json`. If you use pnpm or yarn, remove the existing lockfile before installing.

---

## Project Structure

```
CleanLandingPro/
├── backend/
│   ├── app.py
│   ├── config.py
│   ├── database.py
│   ├── models.py
│   ├── routes/
│   ├── requirements.txt
│   └── .env.example
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json
│   ├── package-lock.json
│   ├── vite.config.js
│   ├── eslint.config.js
│   ├── .env.example
│   └── index.html
├── netlify.toml
├── README.md
├── USABILITY_TEST.md
└── LICENSE
```

---


![CleanLanding Pro screenshot](frontend/public/screenshot.jpeg)

---

## Backend API

The backend is optional but ready if you need server-side persistence.

```bash
cd backend
python -m venv .venv
source .venv/bin/activate          # Windows: .venv\Scripts\activate
pip install -r requirements.txt
cp .env.example .env                # set DATABASE_URL, SECRET_KEY, etc.
flask --app app run                 # http://localhost:5000
```

- **Routes**
  - `POST /api/contact` – validates `{name, email, message}` (plus optional fields), stores them in Postgres, and returns `{message, ticketId}`.
  - `GET /api/health` – simple heartbeat for uptime monitors.
- **Database** – default URL expects `cleanlanding` database locally. Update `DATABASE_URL` for Render, Railway, Fly.io, etc.
- **CORS** – `CORS_ORIGINS` in `.env` controls allowed frontends.

Deploy the backend separately and set `VITE_API_URL` (frontend) to the deployed API URL.

---

## Environment Variables

Front-end `.env.example` (under `frontend/`):

```
VITE_API_URL=http://localhost:5000
```

Backend `.env.example` includes `DATABASE_URL`, `SECRET_KEY`, `CORS_ORIGINS`, and `PORT`. Copy each `.env.example` to `.env`, then adjust values for local development and production (Netlify, Render, etc.).

---

## Customization Guide

| Area                | How to customize                                                   |
| ------------------- | ------------------------------------------------------------------ |
| Branding / Tokens   | Update CSS variables in `src/index.css`.                           |
| Copy / Content      | Edit component arrays (e.g., testimonials, pricing) in `src/components/`. |
| Demo Preview        | Adjust `devicePresets` in `src/components/DemoPreview.jsx`.        |
| Affiliate Logos     | Drop assets in `public/images` and update `src/components/Affiliate.jsx`. |
| Analytics           | Replace `trackEvent` in `src/utils/analytics.js` with your provider. |
| Hero / imagery      | Swap PNG/SVGs under `public/images` and update components.         |

After tweaking copy or assets, run `pnpm run dev` to preview changes instantly.

---

## Testing

Vitest + Testing Library keep core flows verified.

```bash
pnpm run test        # single run
pnpm run test:watch  # watch mode
pnpm run test:coverage
```

Current suites cover:

- **DemoPreview** – ensures device tab and theme toggles update state.
- **ContactForm** – validates client-side errors clear and fetch calls fire.

Add new specs under `src/components/__tests__/` for any new section or interaction.

---

## Deployment

### Frontend

1. `cd frontend && pnpm run build`
2. Deploy `frontend/dist/` (Netlify, Vercel, S3/CloudFront, etc.).

Netlify-specific settings:

- Base directory: `frontend`
- Build command: `npm run build`
- Publish directory: `dist`
- `_redirects` already ensures SPA routing + FAQ deep links.
- `netlify.toml` locks Node 20 and adds `VITE_APP_ENV`.

### Backend

- Host Flask (Render, Railway, Fly.io, ECS, etc.).
- Configure `DATABASE_URL`, `SECRET_KEY`, `CORS_ORIGINS`.
- Expose `VITE_API_URL` in the frontend environment so the contact form points to the right API.

### CI

`.github/workflows/ci.yml` runs lint, tests, and build on pushes/PRs to `main` and `release/**`. Extend it with Lighthouse, preview deploys, or additional checks as needed.
---

## Contribution Guide

1. **Fork and branch**
   ```bash
   git checkout -b feature/my-update
   ```
2. **Coding standards**
   - Follow ESLint (`npm run lint`).
   - Prefer functional components and hooks.
   - Keep styles mobile-first.
3. **Testing**
   - Update or add Vitest suites for new behavior.
   - Ensure `npm run test` passes before committing.
4. **Commit style**
   - Use clear, descriptive commit messages (e.g., `feat: add scroll spy to nav`).
   - Avoid bundling unrelated changes.
5. **Pull requests**
   - Describe the change, include screenshots or Looms for UI updates.
   - Note any backend/env changes so reviewers can test properly.
6. **Code review**
   - Respond promptly, rebase if requested, and keep history tidy.

Bug reports and feature requests are welcome via GitHub Issues. Please include reproduction steps or a short Loom demo when possible.

---

## License

MIT © CleanLanding Pro. Use it freely for personal or commercial projects. Attribution appreciated but not required.