Page structure

Let's decide what makes a great landing page, do we want Testimonials? Pricing? ....

Lightning Landing comes with one landing page design by default. All the sections are carefully designed and placed to guide the visitor toward converting into a user or potential customer. Please feel free to change any existing section with any other design from the following libraries, The boilerplate has DaisyUI and Tailwind by default so any of the components can easily be copy-pasted:

Navbar in Lightning Landing boilerplate

The fixed navigation bar stays at the top of the page and contains your logo, company name, and main menu items.

Hero Section

Example Hero in Lightning Landing

The hero section is the first thing visitors see. Lightning Landing comes with a default split text image hero.

Problem Statement

Problem statement section in Lightning Landing

This section highlights the problem your service solves. It comes in second position on the landing page, so users identify with the pain.

Services/Benefits

Services section on Lightning Landing

A visual grid showcasing your key services or benefits. Use descriptions and visual elements like screenshots or illustrations.

Pricing Section

Pricing section in Lightning Landing

Many startup pages hide their pricing. This can be frustrating for users who come to your site to assess whether you are the correct option for them. So, if you believe you have competitive pricing, don't hesitate to add it to the homepage. It might increase your conversion rates.

Testimonials

Testimonials section in Lightning Landing

Social proof section featuring customer reviews, if you can get videos on these testimonial cards, your social proof will be as strong as possible.

FAQ Section

FAQ section in Lightning Landing

Addresses common customer questions, this section is often placed right after the pricing section as it should answer the exact questions that arose from looking at your pricing description. It should do the trick to convert the visitor into a user by clearing any doubts they might have.

Final CTA

Final CTA sction in Lightning Landing

This is the last chance to convert visitors, remind the visitors of your value proposition, and make a clear call to action.

Footer in Lightning Landing boilerplate

Contains essential links and information.


That's it for the HTML structure of your landing page.

Nest, we will look at how to publish your Landing page for free on Github 🚀

Last updated

Was this helpful?