https://github.com/jdegand/chakra-landing-page

Basic Chakra UI Landing Page
https://github.com/jdegand/chakra-landing-page

chakra-ui react react-router

Last synced: 14 days ago
JSON representation

Basic Chakra UI Landing Page

• Host: GitHub
• URL: https://github.com/jdegand/chakra-landing-page
• Owner: jdegand
• Created: 2022-02-11T18:42:58.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-08T01:54:45.000Z (4 months ago)
• Last Synced: 2024-11-21T16:44:25.104Z (3 months ago)
• Topics: chakra-ui, react, react-router
• Language: JavaScript
• Homepage:
• Size: 292 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Chakra Landing Page


## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

  - [Thoughts](#thoughts)

- [Useful Resources](#useful-resources)

## Overview

![Light](screenshots/chakra-landing-light.png)

***

![Dark](screenshots/chakra-landing-dark.png)

***

### Built With

- React

- Chakra UI

- React Router  

### Thoughts

- Used outdated tutorial to test out Chakra UI. 

- Upgraded from React Router 5 to 6.

- Used the create-react-app chakra template.

- Putting the CSS inside the components etc does bloat the code and can get in the way of reasoning about the code. 

- Almost have to indent and put all props on separate lines.

- Unsplash source was used for main image and it had to be replaced after Unsplash changed APIs.

- I added a random image from `lorempicker`.

## Useful Resources

- [Blog](https://raptis.wtf/blog/build-a-landing-page-with-chakra-ui-part-1/) - landing page with chakra

- [Chakra Templates](https://chakra-templates.dev/page-sections/footer) - Footer

- [Send Pulse](https://sendpulse.com/blog/landing-page-structure) - landing page structure

- [Blog](https://shaunhogg.com/insights/7-things-your-landing-pages-should-include/) - 7 things landing page should include