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.jsonfile to change the content of the landing page to match your usesrc/config/index.jsonfolder and . - Images: add any images/icons..etc to the
public/assets/imagesfolder and update their reference source insrc/config/index.json. - Theme: to change the theme, update the
tailwind.config.jsfile 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