Goal

The goal is to add a landing page to round up the current set of Django views.

Choosing a template

I’m not a designer, and building an eye-pleasing design from scratch would be an unwise use of my time. So I’d need to find a landing page template that matches the aesthetics of my Tabler-based admin template. The templates from StartBootstrap, BootstrapMade, and official Bootstrap examples are all great and have been used by myself with great success in the past. But none of them fit Tabler’s aesthetics.

Then I realized, Tabler already have a landing page included with the template!

Adding the template

Adding the template is mostly a copy-paste effort. Of note is that I split out each page’s section into their own partials so that it’s easier to reuse and pick which parts to add in the landing page.

# src/lith/templates/lith/marketing/landing-page.html
{% block content %}
    {% include "lith/marketing/partials/navbar.html" %}
    {% include "lith/marketing/partials/hero.html" %}
    {% include "lith/marketing/partials/footer-links.html" %}
    {% include "lith/marketing/partials/footer.html" %}
{% endblock %}

The directory structure looks like this:

src/lith/templates/lith/marketing
├── landing-page.html
└── partials
    ├── faq.html
    ├── features-expanded-reverse.html
    ├── features-expanded.html
    ├── features.html
    ├── footer-links.html
    ├── footer.html
    ├── hero.html
    ├── mini-cta.html
    ├── navbar.html
    ├── stats.html
    ├── subscribe.html
    ├── testimonials.html
    └── trusted-by.html

After mixing and matching the sections and changing the page content, I got out with this neat landing page:

Conclusion

In this lab, I integrated Tabler’s marketing landing page and settled on a directory structure that promotes component reuse and modularity.

The source is available at the feature/008-landing-page branch.