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.
- Host: GitHub
- URL: https://github.com/codedpro/saasify
- Owner: codedpro
- Created: 2025-04-22T12:46:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-19T11:07:32.000Z (11 months ago)
- Last Synced: 2025-05-19T12:26:49.429Z (11 months ago)
- Topics: conversion-optimized, framer-motion, landing-page, lucide-icons, marketing-page, nextjs, radix-ui, react, react-hook-form, saas, tailwindcss, typescript, zod
- Language: TypeScript
- Homepage: https://nesters-saas-landing-page.vercel.app
- Size: 95.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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