A sleek plug n play react landing page template.

Home Page: https://react-landing-page-template-2021.vercel.app

License: MIT License

Shell 0.45% JavaScript 5.63% TypeScript 92.96% CSS 0.95%

react nextjs typescript react-landing-page landing-page template company startup branding easy-to-use

react-landing-page-template-2021's Introduction

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 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

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 .
Images: add any images/icons..etc to the public/assets/images folder and update their reference source in src/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

Liked this template? Buy me a coffee ☕️

Looking for v1? V1

react-landing-page-template-2021's People

Contributors

Stargazers

Watchers

Forkers

satyajit501 myszon01 stungkit vnln gumbon llpalliser deepikasajith wafzal714 ahmedbennaji kostagorod sert121 mohitnihalani hopelessdevloper ayoubalaouikadiri forderation aiforce2 mozillah ethinallen khiem20tc prim3us3r 7yhong codingconquerors kumar1202 chris-downs hassanrkbiz bcexpt1123 nikhil-azminds tfrenel burus86 ertprs cybershang yogeshwaran09102019 lmzacarias analogapp nuarc jakegruen himurali clementramos chadacaldwell jjzcru pacosegovia carlocayos santiblanco99 matt87c phillycheeeeez cerebellia michael-ruan responsive-landing-page-showcase phuyha retrovrs astandro mastrayasa anle20 remyweb icsl-jeon thelaughingheart kerainka extradeals abie-x maheshmahi1319 tinhlv mikeyhodl alvin-tosh sys-ng hari-regdb sankodan leonid066 reunionart pzenha monirshimul prasadprjc cursedeth pappanick dolfino ffelix1 vjiki rizafr windjuhh mabozeid tamoorchatha vivekdhami kkal3x steven-sosnick orudy01 royalexphillips andiks2018 mehmetyildiz7 openswoop carlossc94 nizaring animemandir hamdanhussein rds0751 imgovind bhaskersanil wilclefison anikaaasingh rinehartmumby jimlynchcodes muruga86

react-landing-page-template-2021's Issues

Build Fails

Why Add a "Publish to Prod" button if it just leads to a failing build?? @issaafalkattan

[13:14:30.049] Cloning github.com/JimLynchCodes/gh-brokes (Branch: main, Commit: fa67ca4)
[13:14:30.288] Previous build cache not available
[13:14:30.989] Cloning completed: 939.134ms
[13:14:31.092] Running "vercel build"
[13:14:31.494] Vercel CLI 28.13.2
[13:14:31.712] Installing dependencies...
[13:14:31.973] yarn install v1.22.17
[13:14:32.024] warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[13:14:32.025] [1/4] Resolving packages...
[13:14:32.177] [2/4] Fetching packages...
[13:14:41.583] [3/4] Linking dependencies...
[13:14:41.585] warning "next > styled-jsx > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
[13:14:49.493] [4/4] Building fresh packages...
[13:14:49.683] $ husky install
[13:14:49.742] husky - Git hooks installed
[13:14:49.746] Done in 17.78s.
[13:14:49.765] Detected Next.js version: 12.0.0
[13:14:49.769] Running "yarn run build"
[13:14:49.914] yarn run v1.22.17
[13:14:49.937] $ next build
[13:14:50.533] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[13:14:50.533] This information is used to shape Next.js' roadmap and prioritize features.
[13:14:50.533] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[13:14:50.533] https://nextjs.org/telemetry
[13:14:50.533] 
[13:14:50.550] Browserslist: caniuse-lite is outdated. Please run:
[13:14:50.550] npx browserslist@latest --update-db
[13:14:50.550] 
[13:14:50.550] Why you should do it regularly:
[13:14:50.550] https://github.com/browserslist/browserslist#browsers-data-updating
[13:14:50.584] info  - Checking validity of types...
[13:14:54.543] warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
[13:14:57.138] info  - Creating an optimized production build...
[13:14:57.155] warn  - Disabled SWC because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
[13:14:57.447] Browserslist: caniuse-lite is outdated. Please run:
[13:14:57.447] npx browserslist@latest --update-db
[13:14:57.447] 
[13:14:57.447] Why you should do it regularly:
[13:14:57.448] https://github.com/browserslist/browserslist#browsers-data-updating
[13:14:58.047] info  - Using external babel configuration from /vercel/path0/.babelrc
[13:14:58.275] [styled-jsx] Loading plugin from path: /vercel/path0/node_modules/styled-jsx-plugin-postcss/index.js
[13:15:00.110] Browserslist: caniuse-lite is outdated. Please run:
[13:15:00.111]   npx browserslist@latest --update-db
[13:15:00.111]   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[13:15:00.143] 
[13:15:00.143] warn - You have enabled the JIT engine which is currently in preview.
[13:15:00.143] warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
[13:15:01.788] Failed to compile.
[13:15:01.788] 
[13:15:01.788] HookWebpackError: error:0308010C:digital envelope routines::unsupported
[13:15:01.788]     at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:45539:9)
[13:15:01.788]     at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:29467:12
[13:15:01.788]     at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140927:10), <anonymous>:91:1)
[13:15:01.788] -- inner error --
[13:15:01.789] Error: error:0308010C:digital envelope routines::unsupported
[13:15:01.789]     at new Hash (node:internal/crypto/hash:71:19)
[13:15:01.789]     at Object.createHash (node:crypto:133:10)
[13:15:01.789]     at getHashDigest (/vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:29141)
[13:15:01.789]     at /vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:31472
[13:15:01.789]     at String.replace (<anonymous>)
[13:15:01.789]     at Object.interpolateName (/vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:31381)
[13:15:01.789]     at /vercel/path0/node_modules/next/dist/build/webpack/plugins/copy-file-plugin.js:41:51
[13:15:01.789] caused by plugins in Compilation.hooks.processAssets
[13:15:01.789] Error: error:0308010C:digital envelope routines::unsupported
[13:15:01.790]     at new Hash (node:internal/crypto/hash:71:19)
[13:15:01.790]     at Object.createHash (node:crypto:133:10)
[13:15:01.790]     at getHashDigest (/vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:29141)
[13:15:01.790]     at /vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:31472
[13:15:01.790]     at String.replace (<anonymous>)
[13:15:01.790]     at Object.interpolateName (/vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:31381)
[13:15:01.791]     at /vercel/path0/node_modules/next/dist/build/webpack/plugins/copy-file-plugin.js:41:51
[13:15:01.791] 
[13:15:01.791] 
[13:15:01.791] > Build failed because of webpack errors
[13:15:01.867] error Command failed with exit code 1.
[13:15:01.867] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[13:15:01.884] Error: Command "yarn run build" exited with 1

Site returns a 404 by default

Thank you for creating and sharing this!

Describe the bug
Site returns a 404 by default

To Reproduce
Steps to reproduce the behavior:

git clone https://github.com/issaafalkattan/react-landing-page-template-2021.git
cd react-landing-page-template-2021
yarn
yarn dev
Visit http://localhost:3000/

Expected behavior
Returns a 200

Screenshots

Desktop (please complete the following information):

OS: [e.g. iOS] OSX
Browser [e.g. chrome, safari] Chrome
Version [e.g. 22] Version 97.0.4692.71 (Official Build) (x86_64)

Additional context
This is happening both locally and when I deploy my site to AWS Amplify

Thank you for creating this template!

Next.js is missing as dependency

This morning I tried to run yarn with the result "command next is not defined".

npm install yarn

did the trick. You might want to add it as dependency.

ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct.

Describe the bug
Can not commit the code after changing anything.

The error that comes out is:

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct.

The config "react-app" was referenced from the config file in "C:\Users\nsyig\Documents\My documents\naap\package.json".

I would like to export a static page to use with GitHub pages. build-prod produces something in the out directory, but an index.html file is missing. What do I have to do? I've already tried to add an export path map in next config, but to no sucess (module missing, 404 pages are generated containing the content, however).

Any advice?

Language selection

Describe the solution you'd like
I'm looking for a way to add support for a few languages. The way I imagine that is that you can see the flag icon in the header and after clicking it, you can see other flags that will convert the webpage to another language.

There are a few problems with the fact that not all the strings in the page come from config/index.json. However the real problem for me is that I don't know how o dynamically change the content of the config/index.js, so that the correct language is reloaded. Should I add another field in the config/index.js or create something like config/index-nl.js?

I'm not experienced frontend developer so I don't really know the conventions.

Thanks

issaafalkattan / react-landing-page-template-2021 Goto Github PK