https://github.com/amirallami-code/framer-landing-page
A modern, responsive SaaS landing page built with Next.js 15, TypeScript, and Tailwind CSS. Features a sleek design with smooth animations, testimonials, pricing tiers, and a mobile-first approach.
https://github.com/amirallami-code/framer-landing-page
framer-motion lucide-react nextjs npm npmjs shadcn-ui tailwindcss typescript
Last synced: about 2 months ago
JSON representation
A modern, responsive SaaS landing page built with Next.js 15, TypeScript, and Tailwind CSS. Features a sleek design with smooth animations, testimonials, pricing tiers, and a mobile-first approach.
- Host: GitHub
- URL: https://github.com/amirallami-code/framer-landing-page
- Owner: amirallami-code
- Created: 2025-08-07T16:43:26.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-14T11:57:28.000Z (10 months ago)
- Last Synced: 2025-08-14T13:23:23.638Z (10 months ago)
- Topics: framer-motion, lucide-react, nextjs, npm, npmjs, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://framer-amirallami.vercel.app
- Size: 4.01 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Framer Landing Page
A modern, responsive SaaS landing page built with Next.js 15, TypeScript, and Tailwind CSS. Features a sleek design with smooth animations, testimonials, pricing tiers, and a mobile-first approach.
[View Live Site](https://framer-amirallami.vercel.app/) · [Report Bug](https://github.com/amirallami-code/framer-landing-page/issues) · [Ask a question](https://github.com/amirallami-code/framer-landing-page/issues)
## ✨ Features
- **Modern Design** - Clean, professional layout with gradient backgrounds and glassmorphism effects
- **Fully Responsive** - Mobile-first design that looks great on all devices
- **TypeScript** - Type-safe development with full TypeScript support
- **Tailwind CSS** - Utility-first CSS framework for rapid UI development
- **shadcn/ui Components** - High-quality, accessible UI components
- **Performance Optimized** - Built with Next.js 15 for optimal performance
- **SEO Ready** - Optimized for search engines
- **Smooth Animations** - Framer Motion integration for fluid animations
## 🛠️ Tech Stack
- **Framework:** [Next.js 15](https://nextjs.org/)
- **Language:** [TypeScript](https://www.typescriptlang.org/)
- **Styling:** [Tailwind CSS](https://tailwindcss.com/)
- **UI Components:** [shadcn/ui](https://ui.shadcn.com/)
- **Animations:** [Framer Motion](https://www.framer.com/motion/)
- **Icons:** [Lucide React](https://lucide.dev/)
- **Package Manager:** [npm](https://www.npmjs.com/)
## 📋 Prerequisites
Before you begin, ensure you have the following installed:
- Node.js (version 18 or higher)
- npm or yarn package manager
## ⚡ Quick Start
1. **Clone the repository**
```bash
git clone https://github.com/your-username/framer-landing-page.git
cd framer-landing-page
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
```
3. **Run the development server**
```bash
npm run dev
# or
yarn dev
```
4. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000) to see the result.
## 📁 Project Structure
```
framer-landing-page/
├── app/ # Next.js app directory
├── components/
│ ├── ui/ # shadcn/ui components
│ │ ├── button.tsx
│ │ ├── navigation-menu.tsx
│ │ └── sheet.tsx
│ ├── CallToAction.tsx # CTA section
│ ├── Footer.tsx # Footer component
│ ├── Header.tsx # Navigation header
│ ├── Hero.tsx # Hero section
│ ├── LogoTicker.tsx # Logo carousel
│ ├── Pricing.tsx # Pricing tiers
│ ├── ProductShowcase.tsx # Product showcase
│ └── Testimonials.tsx # Customer testimonials
├── lib/
│ └── utils.ts # Utility functions
├── public/ # Static assets
│ ├── shapes/ # Shape graphics
│ ├── logos/ # Company logos
│ └── avatar/ # User avatars
├── components.json # shadcn/ui configuration
└── README.md
```
## 🎯 Key Features
### Responsive Design
- Mobile-first approach
- Smooth breakpoint transitions
- Touch-friendly interactions
### Performance
- Server-side rendering with Next.js
- Optimized images and assets
- Fast loading times
### Accessibility
- ARIA-compliant components
- Keyboard navigation support
- Screen reader friendly
### Animations
- Framer Motion integration
- Smooth scroll effects
- Hover animations
## 🛠️ Available Scripts
```bash
# Development server with Turbopack
npm run dev
# Production build
npm run build
# Start production server
npm start
# Run ESLint
npm run lint
```
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 👤 Author
**Amir Allami**
- Website: [amirallami.com](https://amirallami.com/)
- GitHub: [@amirallami-code](https://github.com/amirallami-code)
## 🙏 Acknowledgments
- Design inspiration from modern SaaS landing pages
- [shadcn/ui](https://ui.shadcn.com/) for the beautiful components
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first approach
- [Framer Motion](https://www.framer.com/motion/) for smooth animations
## 📧 Support
If you have any questions or need help, please open an issue or contact me directly.
---
⭐ If you found this project helpful, please give it a star on GitHub!