light-saas-landing-site — Next.js SaaS模板

SHA-256: 87c9433f00fe3058486a06750a196325450df462d31c2bb10a348d86e694be9e

2026-10-02T18:49:25.247Z

# Light SaaS Landing Page

> A modern, production-ready landing page for SaaS products with a clean light theme. Built with Next.js, React, and Tailwind CSS.

## 📋 Table of Contents

- [Overview](#overview)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Project Structure](#project-structure)
- [Available Scripts](#available-scripts)
- [Configuration](#configuration)
- [Deployment](#deployment)
- [Contributing](#contributing)
- [License](#license)
- [Resources](#resources)

## Overview

This project is a fully responsive SaaS landing page featuring a clean light theme with smooth animations and modern design patterns. Built with the latest versions of Next.js and React, it leverages TypeScript for type safety and Tailwind CSS for styling.

Perfect for showcasing your SaaS product with sections for hero content, logo ticker, product showcase, testimonials, pricing, and calls-to-action.

## ✨ Features

- **Responsive Design** - Mobile-first approach, optimized for all screen sizes
- **Light Theme** - Clean, modern color scheme with excellent readability
- **Smooth Animations** - Framer Motion animations for engaging interactions
- **TypeScript** - Full type safety and better developer experience
- **SEO Ready** - Optimized for search engines with proper Next.js configurations
- **Performance Optimized** - Automatic code splitting and image optimization
- **Tailwind CSS** - Utility-first styling with minimal custom CSS
- **Easy to Customize** - Modular component structure for quick modifications
- **SVG Support** - SVGR integration for seamless SVG component usage

## 🛠️ Tech Stack

- **Framework**: [Next.js](https://nextjs.org/) 16.0.7
- **Language**: [TypeScript](https://www.typescriptlang.org/) 5
- **UI Library**: [React](https://react.dev/) 19.2.1
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) 3.4.1
- **Animation**: [Framer Motion](https://www.framer.com/motion/) 11.2.14
- **Development**: [ESLint](https://eslint.org/) 9.39.1, [PostCSS](https://postcss.org/) 8.5.3
- **SVG Handling**: [@svgr/webpack](https://react-svgr.com/) 8.1.0
- **Utilities**: [clsx](https://github.com/lukeed/clsx) 2.1.1, [tailwind-merge](https://github.com/dcastil/tailwind-merge) 2.4.0

## 📦 Prerequisites

Before you begin, ensure you have the following installed:

- **Node.js** 18.17 or later
- **npm**, **yarn**, **pnpm**, or **bun** (recommended: npm)
- **Git** (for version control)

## 🚀 Installation

1. **Clone the repository**

```bash
git clone https://github.com/jmarellanes/light-saas-landing-site.git
cd light-saas-landing-page
```

2. **Install dependencies**

```bash
npm install
```

Or with your preferred package manager:

```bash
yarn install
# or
pnpm install
# or
bun install
```

## 🏃 Getting Started

### Development

Start the development server:

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.

The app will automatically reload when you make changes to files. Start editing `src/app/page.tsx` to see updates in real time.

### Building for Production

Create an optimized production build:

```bash
npm run build
```

### Starting the Production Server

After building, start the production server:

```bash
npm run start
```

## 📁 Project Structure

```
src/
├── app/
│   ├── page.tsx              # Main landing page
│   ├── layout.tsx            # Root layout component
│   └── globals.css           # Global styles
├── components/
│   ├── [Component files]     # Reusable UI components
├── sections/
│   ├── Header.tsx            # Navigation header
│   ├── Hero.tsx              # Hero section
│   ├── LogoTicker.tsx        # Company logos carousel
│   ├── ProductShowcase.tsx   # Product demo section
│   ├── Testimonials.tsx      # Client testimonials
│   ├── Pricing.tsx           # Pricing plans
│   ├── CallToAction.tsx      # Call-to-action section
│   └── Footer.tsx            # Footer section
├── assets/
│   ├── icons/                # SVG icons
│   └── images/               # Images and graphics
public/                       # Static assets

Configuration Files:
├── next.config.mjs           # Next.js configuration
├── tailwind.config.ts        # Tailwind CSS configuration
├── tsconfig.json             # TypeScript configuration
├── postcss.config.mjs        # PostCSS configuration
├── package.json              # Project dependencies
└── LICENSE                   # Project license
```

## 📜 Available Scripts

| Script | Command | Description |
|--------|---------|-------------|
| `dev` | `npm run dev` | Start development server |
| `build` | `npm run build` | Build optimized production bundle |
| `start` | `npm run start` | Start production server |
| `lint` | `npm run lint` | Run ESLint to check code quality |

## ⚙️ Configuration

### Tailwind CSS

Customize colors, fonts, and other design tokens in `tailwind.config.ts`. The project uses utility-first CSS for rapid styling.

### TypeScript

Modify TypeScript settings in `tsconfig.json`. The project is pre-configured with strict type checking for better code quality.

### Next.js

Configure Next.js behavior in `next.config.mjs` (e.g., image optimization, SVG handling with webpack).

### ESLint

ESLint configuration includes Tailwind CSS plugin for linting class names. See `.eslintrc.json` for customization.

### Environment Variables

Create a `.env.local` file in the root directory for environment-specific variables:

```bash
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
```

## 🌐 Deployment

### Deploy on Vercel (Recommended)

The easiest way to deploy is using [Vercel](https://vercel.com), created by the Next.js team:

1. Push your code to GitHub, GitLab, or Bitbucket
2. Visit [Vercel Dashboard](https://vercel.com/dashboard)
3. Click "New Project" and import your repository
4. Click "Deploy"

Your site will be live with automatic deployments on every push to your main branch.

### Deploy Elsewhere

#### Netlify

1. Connect your GitHub repository to Netlify
2. Set build command: `npm run build`
3. Set publish directory: `.next`
4. Deploy

#### Docker

```dockerfile
FROM node:18-alpine AS base
WORKDIR /app

FROM base AS deps
COPY package.json package-lock.json ./
RUN npm ci

FROM base AS builder
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM base AS runtime
RUN apk add --no-cache dumb-init
COPY --from=deps /app/node_modules ./node_modules
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
ENTRYPOINT ["dumb-init", "--"]
CMD ["npm", "start"]
```

#### AWS Amplify

Follow the [AWS Amplify Next.js deployment guide](https://docs.amplify.aws/nextjs/start/quickstart/) for step-by-step instructions.

#### Other Platforms

- **Railway**: Connect your GitHub repo and Railway will auto-detect Next.js
- **Render**: Similar to Railway, great for hobby and production projects
- **GitHub Pages**: Use `next export` (static export) for static site hosting

## 🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Make your changes
4. Commit changes (`git commit -m 'Add amazing feature'`)
5. Push to branch (`git push origin feature/amazing-feature`)
6. Open a Pull Request

## 📄 License

This project is licensed under the license specified in the LICENSE file. See [LICENSE](LICENSE) for details.

## 🔗 Resources

- [Next.js Documentation](https://nextjs.org/docs)
- [React Documentation](https://react.dev)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Framer Motion Documentation](https://www.framer.com/motion/)
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
- [Web Accessibility (WCAG)](https://www.w3.org/WAI/WCAG21/quickref/)

## 💬 Support

For issues and feature requests, please [open an issue](../../issues) on the repository.

---

**Built with ❤️ for SaaS founders and product teams.**