https://github.com/makcoder-2004/next.js-landing-page
A modern SaaS landing page built with Next.js, Tailwind CSS, and Framer Motion. This was my first complete frontend project, created with help from a YouTube tutorial to kickstart my journey into frontend development.
https://github.com/makcoder-2004/next.js-landing-page
animation css framer-motion frontend-web javascript landing-page nextjs15 react saas-application tailwindcss
Last synced: 2 months ago
JSON representation
A modern SaaS landing page built with Next.js, Tailwind CSS, and Framer Motion. This was my first complete frontend project, created with help from a YouTube tutorial to kickstart my journey into frontend development.
- Host: GitHub
- URL: https://github.com/makcoder-2004/next.js-landing-page
- Owner: MakCoder-2004
- Created: 2025-04-27T21:31:17.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-29T09:47:37.000Z (about 1 year ago)
- Last Synced: 2025-04-29T10:45:11.883Z (about 1 year ago)
- Topics: animation, css, framer-motion, frontend-web, javascript, landing-page, nextjs15, react, saas-application, tailwindcss
- Language: TypeScript
- Homepage: https://next-js-landing-page-three-livid.vercel.app
- Size: 789 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SaaS Landing Page - Frontend Project
This is a modern, responsive SaaS landing page built using **Next.js**, styled with **Tailwind CSS**, and animated using **Framer Motion**. It serves as a professional landing page for a Software as a Service (SaaS) product.
## 🚀 Project Purpose
The project was created as a hands-on learning experience to strengthen my frontend development skills. With guidance from a YouTube tutorial, this project represents my first complete frontend website and serves as a foundation for tackling more complex web applications in the future.
## 🛠️ Tech Stack
- **Framework**: [Next.js](https://nextjs.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **Animations**: [Framer Motion](https://www.framer.com/motion/)
## 📁 Project Structure
The project is organized into reusable components and larger sections for maintainability:
```
components/
├─┐ Avatar.tsx
├─┐ CustomButton.tsx
├─┐ FeatureCard.tsx
├─┐ IntegrationColumn.tsx
├─┐ KeyboardKey.tsx
├─┐ Pointers.tsx
└─┐ Tag.tsx
sections/
├─┐ CallToAction.tsx
├─┐ Faqs.tsx
├─┐ Features.tsx
├─┐ Footer.tsx
├─┐ Hero.tsx
├─┐ Integrations.tsx
├─┐ Introduction.tsx
├─┐ LogoTicker.tsx
└─┐ Navbar.tsx
```
- **components/**: Small, reusable UI elements like buttons, avatars, and tags.
- **sections/**: Larger page sections like the Hero, Features, and Footer.
## ✨ Features
- Fully responsive design
- Smooth animations using Framer Motion
- Tailwind CSS for rapid styling
- Modular and reusable component-based structure
## 📚 Learning Experience
This project helped me understand:
- Component-based architecture with React/Next.js
- Responsive design with Tailwind CSS
- Animation handling with Framer Motion
- File structure and code modularity best practices
## 📸 Preview
## 🔗 Live Demo
[Demo Website](https://next-js-landing-page-wheat.vercel.app/)
## 🧠 Future Plans
- Add form handling and validation
- Integrate with backend or CMS
- Explore TypeScript best practices more deeply
- Implement dark mode
---
Thanks for checking out my project! Feel free to leave feedback or suggestions to help me grow as a frontend developer.