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 · Report Bug · Ask a question

✨ 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
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Animations: Framer Motion
• Icons: Lucide React
• Package Manager: npm

📋 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

   git clone https://github.com/your-username/framer-landing-page.git
   cd framer-landing-page

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to 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

# 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 file for details.

👤 Author

Amir Allami

• Website: amirallami.com
• GitHub: @amirallami-code

🙏 Acknowledgments

• Design inspiration from modern SaaS landing pages
• shadcn/ui for the beautiful components
• Tailwind CSS for the utility-first approach
• Framer 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!