This is Part 3 in our deep-dive into how to develop a professionally designed, high-end NextJS + Payload CMS website from start to finish.
In this episode, we're diving deep into React. You'll learn how a design agency organizes its components and you'll start to see a lot of the CSS boilerplate that we defined in Episode 2 start being put to use. We're going to build and animate the Header, Footer, and Mega Menu—all in React and TypeScript.
Table of Contents
- 0:00 - Intro
- 3:33 - The logo - an SVG React component
- 12:02- Animating the hamburger button
- 25:13 - Retrieving menu global data from Payload
- 32:27- Building the main menu
- 38:48- Building a CMSLink component
- 48:25- The animated "Let's Talk" SVG call to action
- 55:35- Building the Footer
- 1:14:06- Outro
Use Payload for free
Check out Payload for free, forever. The Personal License gives you everything Payload does, all for free. We think you'll find Payload's developer experience second to none. It just feels right to build sites and apps with it.
Feedback welcome
As always, let us know what you think about the video - and about Payload!
Top comments (1)
Hi, it's great that you share your knowledge and experience, thanks! there is also a good post about footer design and its components gapsystudio.com/blog/website-foote... highly recommended reading.