How I made a modular React landing page that isn’t a flat, verbose mess
TLDR; I made a not-garbage landing page template (which we’re actually using at Vivid) that uses React, Next, and Tailwind. It’s actually maintainable, accessible, and pretty!
Okay, now onto why that matters.
Landing page templates seem to be the most common thing on the tech side of the internet (along with opinions about TailwindCSS and PHP).
Why so many? They’re easy to put together, easy to use, and look great… in theory.
As anyone who’s used these templates knows, the vast majority either look great but have terribly messy code, have decent code but look terrible, or both.
A template that just looks bad is very clearly awful, so I won’t talk about that here. Instead, I want to touch on how a template sensibly built with modern technologies makes a world of difference for anyone using it.
But wait, it ~is~ pretty right?
YES! It is pretty. Fully responsive in mobile views too!
I’ll get that out of the way with some screenshots and then we can move on to the ✨tech✨.
Self-Documenting
The biggest benefit of having an organized template is that you actually know what’s going on when you look at it.
Instead of having to hunt through a series of poorly maintained comments describing what parts of the template do (I’m being generous, basically none of these templates come commented), you can see what’s going on just by reading out component names.
Everything from Background to Title to WaitlistForm to GradientText says exactly what it does. Compare this to the div soup you end up seeing in other templates and it’s clear which one’s easier to understand.
Consistency
Another major benefit of quality code is that things are defined once and used multiple times—you no longer have 10 different title styles for each of your 10 different titles.
This makes it incredibly easy to ensure that things like padding, font size, and colors are consistent throughout the page.
Customization
Closely linked to consistency, customization is also incredibly easy in an organized codebase.
For components, like buttons or sections, things can be changed at the React level. To change a component everywhere, you can simply modify the definition, and to change it in one place, you can modify the call. The components I made pass down regular HTML props so basically everything is customizable.
This is even easier using Vivid since you can access the call and definition by just Command+Clicking in your browser!
For other parts of the design system, like colors and fonts, Tailwind makes it easy to switch things up either via tailwind.config.js or the globals.css file.
Accessibility (& SEO)
An often overlooked point of web development, especially in landing page templates I’ve seen, is making a site accessible to users who access the internet in alternative ways. This has the added bonus of boosting SEO by helping out crawlers that visit the page.
This is less about this template being organized well, and more about me putting in the accessibility effort to make your life a little easier:
- All images and videos on the page have
altattributes to describe them - Headings are ordered and semantic HTML is used wherever possible
- Responsiveness allows for zooming the page and text without content falling off the screen
- Colors contrast enough to be readable
- Inputs are labelled clearly
- Keyboard navigation using tabbing order allows access to the entire page
- Screen readers can understand all content and focusable elements on the page
Among others, these are just some of the things that I did to make the page accessible. To be honest, they didn’t take long to put together and they have a huge impact for many people who come across the page!
Try it Yourself
If you’d like to use this template for your own projects or just play around with it, you can check it out here! Feel free to share what you make with us on our Slack too.
Let me know if there’s anything you’d do differently, and if you use it for making anything yourself!
