Code Monkey home page Code Monkey logo

adrinlol / landy-react-template Goto Github PK

View Code? Open in Web Editor NEW
1.2K 16.0 435.0 1.04 MB

Landy is an open-source React landing page template designed for developers and startups, who want to create a quick and professional landing page for their business or project.

Home Page: https://landy-web.netlify.app/

License: MIT License

HTML 5.82% TypeScript 94.18%
react-boilerplate landy react-template typescript boilerplate boilerplate-template react reactjs styled-components

landy-react-template's Introduction

landy

Landy React Template License Landy React Template Release Date Landy React TemplateStars Landy React Template Language Landy React Template TypeScript

Free React landing page template

Landy is an open-source React landing page template written in TypeScript, designed for developers and startups, who want to create a quick and professional landing page for their business or project.

This React template comes with multi-lingual support, smooth animations, set of ready to use sections and most importantly, all of the content is stored in the JSON files, so that you can manage the texts without having any prior knowledge in React.js.

Table of contents

Features

Your project will have everything you need to build a modern single-page React app:

  • 🎁 Modern – Template created using the latest features of React (State management using Hooks, Code-Splitting to reduce the bundle size)

  • πŸ’» Responsive – Highly responsive and reusable UI components, that change depending on the provided props

  • πŸš€ Fast – Buttery smooth experience thanks to the implementation of best practices and no third party dependencies, resulting in PERFECT Google Lighthouse scores

  • 🏷 TypeScript support – Landy is written in TypeScript to improve the DX

  • 🌍 Internationalization - Prebuilt standalone file that works in every environment and doesn't require reloading the page to translate the content

  • πŸ›Έ Routing - Each file inside the src/pages directory will generate its own route, so you don't have to manually handle the routing

  • πŸ€™ Contact Form - Contact form written in React Hooks, with uncontrolled form validation to reduce unnecessary performance penalty. You just need to provide the endpoint

  • βš™οΈ Maintenance - All of the content is stored in the JSON files, so that you can easily manage the content of the website

Google Lighthouse

1

Google Lighthouse is an open-source, automated tool for measuring the quality of web pages. Google Lighthouse audits performance, accessibility and search engine optimization of web pages.

Performance

Audits for metrics like first paint and time to interactive to determine lag.

Accessibility

Checks for common issues that may prevent users from accessing your content.

Best Practices

Looks for everything from HTTPS usage to correct image aspect ratios.

SEO

Checks for best practices to ensure your site is discoverable.

Demo

Check the live demo here πŸ‘‰οΈ https://landy-web.netlify.app/

Installation

You’ll need to have Node 10.16.0 or later version on your local development machine (but it’s not required on the server). I recommend using the latest LTS version.

To create a new app, you have to:

Begin by cloning this repository to establish your own local copy. This process is straightforward and ensures you have all the necessary files and resources at your fingertips. You can find step-by-step instructions in this helpful article: Cloning a repository on GitHub.com.

What's included

  • antd - React UI library that contains a set of high quality components.
  • react-awesome-reveal - High performance library that adds reveal animations using the Intersection Observer API.
  • styled-componets - Variant on β€œCSS-in-JS”—which solves many of the problems with traditional CSS.
  • i18next - Internationalization-framework written in and for JavaScript.

Special thanks

whoooa - Use fantastic, handmade illustrations with easily changeable colors and different styles.

Usage

Use it for whatever you want, and be sure to reach out to me on Twitter if you have any questions, or build something cool with it.

License

Licensed under the MIT license.

landy-react-template's People

Contributors

adrinlol avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

landy-react-template's Issues

Javascript

is this template available in javascript along with webpack?

Button doesn't define onClick handler

For instance, MiddleBlock is instansiating component and with an onClick prop, but the Button component itself is not doing anything with the onClick prop.

Horizontal overflow on mobile

Description:

When the landy webpage is visisted with an mobile a layout problem occurs. A horizontal scrollbar appears and the user is able to scroll into an empty and white part of the site.

Reproduce:

Oben landy on mobile.
Let the reveal start from the right side.
Swipe on mobile to the right side.
You come to an empty part of the website.

-> Sometimes the layout keeps in this state and you will still be able to scroll horizontal
-> Sometimes the layout refreshes and resets the layout, but resets your scrolling position (which is even worse)

Aufzeichnung.2024-05-13.200841.mp4

Hire a professional designer

Get a professional designer to create a modern and clean design of multiple pages for the Saas/web solutions website.

errors when submitting the form

Request Footer stick to bottom

Hey,

I would like to request if you can make a footer stick to the bottom of the page via a param?

<Footer stickBottom/>

Some pages, do not have lots of content and would be visually appealing.

Installation failure on v1.3.6

Hey, awesome project!

Installation for me failed on the latest version (v1.3.6). Using v1.3.4 worked.

Here's the error:

SyntaxError: /Local/Path/node_modules/cra-template-adrinlol/template.json: Unexpected token } in JSON at position 564
    at parse (<anonymous>)

I have Node v16 btw.

Project not working!

I downloaded the project, executed npm install and got errors, spent hours trying to manually fix but every time I fix something, another error pops up , please review the project

Issue using yarn_start

I get this error whenever I try to run yarn start.

``
PS D:\startupwebsite> yarn start
yarn run v1.22.17
$ react-scripts start
node:internal/modules/cjs/loader:488
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in D:\startupwebsite\node_modules\postcss-safe-parser\node_modules\postcss\package.json
at new NodeError (node:internal/errors:371:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
at resolveExports (node:internal/modules/cjs/loader:482:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (D:\startupwebsite\node_modules\postcss-safe-parser\lib\safe-parser.js:1:17) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v17.0.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
``

Missing react-router-dom

Hi,

I just created a project with your template, seems awesome, excited to explore it! :)

Just to point out that, at first run after install following your instructions on Readme, the package.json is missing 'react-router-dom' called in index.tsx.

I just npm i react-router-dom to correct it.

Thanks for your project :)

Preact support

Hello, love the concept, thanks for sharing.

It seems like the React lib/bundle might be rather overweight for the intended purpose; is their any consideration for supporting Preact in the future?

Cheers!

installation

how can i install nodes modules from template.json What i should run, please help

Contact Submit question

Hello first thank you for this template. I'm getting this error on contact submit

ERROR
Request failed with status code 404
    at createError (http://0.0.0.0:3000/static/js/vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js-n-46ba66.chunk.js:3361:15)
    at settle (http://0.0.0.0:3000/static/js/vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js-n-46ba66.chunk.js:3579:12)
    at XMLHttpRequest.onloadend (http://0.0.0.0:3000/static/js/vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js-n-46ba66.chunk.js:2814:7)   

i see this line where it says to set your url


so does that mean that I need to setup another web server to wait for these messages? I'm just logging the event instead now. Wondering what you and others are doing for it. Maybe send myself a text message or notify a discord channel? but I wouldn't wanna just make that info public.

Contact form doesn't clean after submit

I'm trying to understand why the contact form doesn't clean after submitting the form.

I looked around and even the published template and the current code isn't working. Looks like the object is cleaned because if I tried to submit the same form twice the errors are shown up, but the form keeps filled out.

published

  useEffect(() => {
    if (Object.keys(errors).length === 0 && shouldSubmit) {
      setValues("");
      openNotificationWithIcon();
    }
  }, [errors, shouldSubmit]);

current code

  useEffect(() => {
    if (Object.keys(errors).length === 0 && shouldSubmit) {
      setValues((values) => (values = { name: "", email: "", message: "" }));
      openNotificationWithIcon();
    }
  }, [errors, shouldSubmit]);

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.