An open API service indexing awesome lists of open source software.

https://github.com/codedpro/saasify

SaaSify – A modern, conversion-optimized SaaS landing page template built with Next.js, Tailwind CSS, and beautiful UI components.
https://github.com/codedpro/saasify

conversion-optimized framer-motion landing-page lucide-icons marketing-page nextjs radix-ui react react-hook-form saas tailwindcss typescript zod

Last synced: 19 days ago
JSON representation

SaaSify – A modern, conversion-optimized SaaS landing page template built with Next.js, Tailwind CSS, and beautiful UI components.

Awesome Lists containing this project

README

          

# SaaSify πŸš€

**SaaSify** is a sleek and high-converting SaaS landing page template, built to showcase your product, attract leads, and drive conversions. With responsive layouts, modern components, and beautiful UI elements β€” it’s your go-to starter for any SaaS business.

🌐 Live Preview: [nesters-saas-landing-page.vercel.app](https://nesters-saas-landing-page.vercel.app/)

---

## πŸš€ Features

* **Hero Section**: Capture attention instantly with a bold, modern hero design.
* **Features Grid**: Highlight your core selling points with icons and descriptions.
* **Pricing Plans**: Display flexible pricing models clearly.
* **Testimonials**: Build trust with customer feedback.
* **Responsive Design**: Looks perfect on all screen sizes.
* **Dark Mode**: Seamless theme switching built-in.
* **CTA Sections**: Strong, reusable calls to action throughout.

---

## πŸ› οΈ Tech Stack

* **Framework**: Next.js 15.2.4
* **Language**: TypeScript
* **Styling**: Tailwind CSS 3.4.17, tailwindcss-animate
* **UI Components**: Radix UI, Lucide React, Sonner
* **Animations**: Framer Motion
* **Forms**: React Hook Form, Zod, @hookform/resolvers
* **Theme Management**: next-themes
* **Carousel**: Embla Carousel
* **Utilities**: clsx, class-variance-authority, tailwind-merge

---

## πŸ“¦ Installation

1. **Clone the repository**:

```bash
git clone https://github.com/codedpro/SaaSify.git
cd SaaSify
```

2. **Install dependencies**:

```bash
npm install
# or
yarn install
```

3. **Run the development server**:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

---

## πŸ“ Project Structure

```bash
β”œβ”€β”€ components/ # Reusable UI components
β”œβ”€β”€ pages/ # Next.js pages
β”œβ”€β”€ public/ # Static assets
β”œβ”€β”€ styles/ # Global styles and Tailwind configurations
β”œβ”€β”€ utils/ # Utility functions
β”œβ”€β”€ types/ # TypeScript type definitions
β”œβ”€β”€ package.json # Project metadata and scripts
└── tailwind.config.js # Tailwind CSS configuration
```

---

## πŸ§ͺ Scripts

* `npm run dev` – Start the development server
* `npm run build` – Build for production
* `npm run start` – Start the production server
* `npm run lint` – Run ESLint to analyze code quality

---

## πŸ™Œ Acknowledgments

* [Radix UI](https://www.radix-ui.com/) – Headless UI components
* [Tailwind CSS](https://tailwindcss.com/) – Utility-first styling
* [Framer Motion](https://www.framer.com/motion/) – Smooth animations
* [Lucide Icons](https://lucide.dev/) – Beautiful icon system
* [Zod](https://zod.dev/) – Schema validation
* [React Hook Form](https://react-hook-form.com/) – Form state management