Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.
Building a Professionally Designed Website Episode 3 - Header & Footer, Hamburger Menu, Animating SVGs
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!