React.js landing page template v2
LIVE DEMO
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 tostyled-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
- 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.
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