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.
-
π± 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
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.
- Content: change the configuration in the
src/config/index.json
file to change the content of the landing page to match your usesrc/config/index.json
folder and . - Images: add any images/icons..etc to the
public/assets/images
folder and update their reference source insrc/config/index.json
. - Theme: to change the theme, update the
tailwind.config.js
file to match the theme of your branding. Tutorial.
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
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
Licensed under the MIT License, Copyright Β© 2021