Awesome

React.js landing page template v2

<a href="https://react-landing-page-template-2021.vercel.app/"> LIVE DEMO</a>

Description

This is a React.js/Next.js based landing page plug-n-play template, ideal for startups/companies/service providers wanting to showcase their vision in a single page sleek and modern landing page.

Features

• 📱 Responsive design

• 🔥 Next.js for Static Site Generator

• 🎨 Integrate with Tailwind CSS (w/ JIT mode)

• 💅 PostCSS for processing Tailwind CSS and integrated to styled-jsx

• 🎉 Type checking TypeScript

• 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript

• 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO

• 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)

Built-in feature from Next.js:

• ☕ Minify HTML & CSS
• 💨 Live reload
• ✅ Cache busting

Make it your own

1. Clone repo

git clone https://github.com/issaafalkattan/react-landing-page-template-2021.git
cd react-landing-page-template-2021
yarn

Then, you can run locally in development mode with live reload:

yarn dev

Open http://localhost:3000 with your favorite browser to see your project.

2. Add your own content

1. Content: change the configuration in the src/config/index.json file to change the content of the landing page to match your use src/config/index.json folder and .
2. Images: add any images/icons..etc to the public/assets/images folder and update their reference source in src/config/index.json.
3. Theme: to change the theme, update the tailwind.config.js file to match the theme of your branding. Tutorial.

3. Deploy to production

Deploy manually

You can see the results locally in production mode with:

yarn build
yarn start

The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from Tailwind CSS.

You can create an optimised production build with:

yarn build-prod

Contributions

Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.

License

Licensed under the MIT License, Copyright © 2021

Liked this template? <a href="https://www.buymeacoffee.com/issaaf">Buy me a coffee ☕️</a>

Looking for v1? <a href="https://github.com/issaafalkattan/React-Landing-Page-Template">V1</a>