Notes

In this episode, I added a landing page design to the app that I’m building. By using a Tailwind CSS landing page template, I could fit the design in with my existing CSS tools.

I showed some available templates that I discovered while researching for Tailwind-based landing pages. Once I found a decent template, I copied the source of sample landing page into my index page template.

Since I copy and pasted from the landing page, the initial look was terrible. The HTML markup didn’t fit with my existing design and I needed to remold the template to fit things in.

My first change was to fix the spacing in my UI so that the content of the landing page design fit in the right space. After that, I removed the extra navigation and footers that weren’t needed since my site already had those elements.

Once the major layout and elements were cleaned up, I switched to changing colors to match up with my theme. I spent a lot of time focusing on the gradient that exists in the theme. I also cleaned up text colors that needed to change.

The final thing I did was to look for a hero image that I could apply to the top of the page.