Next.js 14 SaaS Landing Page

🌐 Live Demo

Explore the live demonstration of the project: nextjs14-saas-landing-page

📝 Description

Brainwave is a Modern UI/UX website, developed using React.js and Tailwind CSS, exemplifies modern UI/UX principles. Its sleek design, seamless animations, and overall user experience set a high standard, serving as a reference or inspiration for future modern applications or websites in general.

Folder Structure

nextjs14-saas-landing-page/
├── .vscode/
│   └── settings.json
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── page.tsx
│   └── layout.tsx
├── components/
│   ├── atoms/
│   │   ├── button.tsx
│   │   ├── generating.tsx
│   │   ├── heading.tsx
│   │   └── tagline.tsx
│   ├── design/
│   │   ├── benefits.tsx
│   │   ├── collaboration.tsx
│   │   ├── hero.tsx
│   │   ├── navbar.tsx
│   │   ├── pricing.tsx
│   │   ├── roadmap.tsx
│   │   └── services.tsx
│   ├── layout/
│   │   ├── footer.tsx
│   │   ├── navbar.tsx
│   │   └── section.tsx
│   ├── sections/
│   │   ├── benefits/index.tsx
│   │   ├── collaboration/index.tsx
│   │   ├── hero/
│   │   │   ├── company-logos.tsx
│   │   │   ├── notification.tsx
│   │   │   └── index.tsx
│   │   ├── pricing/
│   │   │   ├── pricing-list.tsx
│   │   │   └── index.tsx
│   │   ├── roadmap/index.tsx
│   │   └── services/index.tsx
│   └── svg/
│       ├── arrow.tsx
│       ├── brackets.tsx
│       ├── button-gradient.tsx
│       ├── chat-bubble-wing.tsx
│       ├── clip-path.tsx
│       ├── menu-svg.tsx
│       ├── plus-svg.tsx
│       └── section-svg.tsx
├── constants/
│   └── index.ts
├── hooks/
│   └── use-get-call-by-id.ts
├── lib/
│   └── utils.ts
├── public/
│   ├── assets/[[...slug]]/[[...]].{png,svg,jpg}
│   ├── thumbnail.png
│   ├── next.svg
│   └── vercel.svg
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── README.md
├── tailwind.config.ts
└── tsconfig.json

📖 Table of Contents

Table of Contents

Live Demo
Description
Technologies Used
Get Started
Deployment
Contributing
- Bug / Feature Request
Acknowledgements
Contact Us
License

✨ Technologies Used

Brianwave is built using the following technologies:

TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Next.js: Next.js is a React framework for building server-side rendered and statically generated web applications.
Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
Prettier: Prettier is an opinionated code formatter.
React Just Parallax: React Just Parallax is a simple and lightweight parallax component for React.
Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

🧰 Get Started

To get this project up and running in your development environment, follow these step-by-step instructions.

📋 Prerequisites

In order to install and run this project locally, you would need to have the following installed on your local machine.

⚙️ Installation and Run Locally

Step 1:

Download or clone this repo by using the link below:

git clone https://github.com/ladunjexa/nextjs14-saas-landing-page.git

Step 2:

Execute the following command in the root directory of the downloaded repo in order to install dependencies:

npm install

Step 3:

Execute the following command in order to run the development server locally:

npm run dev

Step 4:

Open http://localhost:3000 with your browser to see the result.

📜 Scripts

All scripts are defined in the package.json file. Here is a list of all scripts:

Script	Action
`npm install`	Installs dependencies
`npm run dev`	Starts local dev server at `localhost:3000`
`npm run build`	Build your production site to `./dist/`
`npm run start`	Start your production site locally
`npm run lint`	Run ESLint
`npm run ts:check:`	Run TypeScript type checking

🚀 Deployment

Deploy to production (manual)

You can create an optimized production build with the following command:

npm run build

Deploy on Vercel (recommended)

The easiest way to deploy this Next.js app is to use the Vercel Platform.

Deploy on Netlify

You can also deploy this Next.js app with Netlify.

Check out Next.js deployment documentation for more details.

🔧 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

To fix a bug or enhance an existing module, follow these steps:

Fork the repo
Create a new branch (git checkout -b improve-feature)
Make the appropriate changes in the files
Commit your changes (git commit -am 'Improve feature')
Push to the branch (git push origin improve-feature)
Create a Pull Request 🎉

📩 Bug / Feature Request

If you find a bug (failure of a module to execute its intended function), kindly open an issue here by including the issue with a title and clear description.

If you'd like to request a new function, feel free to do so by opening an issue here. Please include sample queries and their corresponding results.

💎 Acknowledgements

I'd like to express my gratitude to the following people who helped me with this project and made it possible:

📞 Contact Us

📋 License

Brianwave is open source software licensed as MIT and is free to use — See LICENSE for more details.

ladunjexa / nextjs14-saas-landing-page Goto Github PK