landing-page-template-one — React SaaS模板

SHA-256: ee6728f79c5b05a1c73698520bafe7a5e6f3e5d7229c428a990b470b5c480148

2026-10-02T19:31:55.152Z

# Landing Page Template (React + Shadcn UI)

>A modern, fully responsive landing page template built with [React](https://react.dev/), [TypeScript](https://www.typescriptlang.org/), [Shadcn UI](https://ui.shadcn.com/), and [Tailwind CSS](https://tailwindcss.com/).

![Landing Page Preview](/screenshot.png)

## 🚀 Live Demo

[View Live Demo](https://anisafifi.com/)

---

## ✨ Features

- Beautiful, modern design with vibrant theme
- Fully responsive and mobile-friendly
- Dark mode support
- Modular React components for all sections
- TypeScript for type safety
- Easy customization (colors, content, layout)
- Smooth animations (Tailwind CSS + tailwindcss-animate)
- SEO-friendly meta tags
- Utility-first styling with Tailwind CSS

---

## 📁 Project Structure

```
├── public/
│   └── vite.svg
├── src/
│   ├── assets/           # Images & illustrations
│   ├── components/       # All React components (sections, UI, etc.)
│   │   ├── ui/           # Reusable UI primitives (button, card, etc.)
│   │   └── ...           # Section components (Hero, Features, etc.)
│   ├── lib/              # Utility functions
│   ├── App.css           # Tailwind & theme styles
│   ├── App.tsx           # Main app entry
│   └── main.tsx          # Vite entry point
├── tailwind.config.js    # Tailwind config
├── postcss.config.js     # PostCSS config
├── vite.config.ts        # Vite config
├── tsconfig.json         # TypeScript config
└── package.json          # Project metadata & scripts
```

---

## 🧩 Sections & Components

- **Navbar**: Responsive navigation bar with dark mode toggle
- **Sidebar**: Mobile navigation drawer
- **Hero**: Bold headline, subheadline, call-to-action, and visual
- **Sponsors**: Showcase of sponsors/partners
- **About**: Company/about section with image and stats
- **Statistics**: Key metrics display
- **How It Works**: Step-by-step or feature highlights
- **Features**: List of main features with images
- **Services**: Service offerings with icons
- **CTA**: Call-to-action section
- **Testimonials**: Customer feedback
- **Team**: Team member profiles
- **Pricing**: Pricing plans
- **Newsletter**: Email subscription form
- **FAQ**: Frequently asked questions
- **Footer**: Social links and copyright
- **ScrollToTop**: Floating button for quick navigation

---

## 🛠️ Getting Started

1. **Clone the repository:**
	```bash
	git clone https://github.com/anisafifi/landing-page-template-one.git
	cd landing-page-template-one
	```
2. **Install dependencies:**
	```bash
	npm install
	```
3. **Start the development server:**
	```bash
	npm run dev
	```
4. **Open your browser:**
	Visit [http://localhost:5173](http://localhost:5173) (or the port shown in your terminal)

---

## 📝 Customization

- Edit content in `src/components/` (each section/component is modular)
- Change theme colors in `src/App.css` (CSS variables)
- Add or remove sections as needed
- Update images in `src/assets/`
- Adjust Tailwind config in `tailwind.config.js`

---

## 📦 Scripts

- `npm run dev` – Start development server
- `npm run build` – Build for production
- `npm run preview` – Preview production build
- `npm run lint` – Lint code with ESLint

---

## 🤝 Credits

- [Shadcn UI](https://ui.shadcn.com/)
- [React](https://react.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Lucide Icons](https://lucide.dev/)
- [Radix UI](https://www.radix-ui.com/)

---

## 📄 License

MIT © [Anis Afifi](https://github.com/anisafifi)