Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/issaafalkattan/react-landing-page-template-2021
A sleek plug n play react landing page template.
https://github.com/issaafalkattan/react-landing-page-template-2021
branding company easy-to-use landing-page nextjs react react-landing-page responsive startup template typescript
Last synced: 6 days ago
JSON representation
A sleek plug n play react landing page template.
- Host: GitHub
- URL: https://github.com/issaafalkattan/react-landing-page-template-2021
- Owner: issaafalkattan
- License: mit
- Created: 2021-10-27T21:14:58.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-22T02:55:51.000Z (7 months ago)
- Last Synced: 2024-12-09T02:05:13.733Z (13 days ago)
- Topics: branding, company, easy-to-use, landing-page, nextjs, react, react-landing-page, responsive, startup, template, typescript
- Language: TypeScript
- Homepage: https://react-landing-page-template-2021.vercel.app
- Size: 10.3 MB
- Stars: 572
- Watchers: 8
- Forks: 309
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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](https://nextjs.org) for Static Site Generator
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com) (w/ JIT mode)
- 💅 PostCSS for processing Tailwind CSS and integrated to `styled-jsx`
- 🎉 Type checking [TypeScript](https://www.typescriptlang.org)
- 🗂 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 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](https://tailwindcss.com/docs/configuration).
#### 3. Deploy to production
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fissaafalkattan%2Freact-landing-page-template-2021)
##### 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](https://tailwindcss.com).
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? Buy me a coffee ☕️
---
### Looking for v1? V1