Hey there! Maheen here. Today we’re going to do something fun because, well, I feel like it. What exactly? Okay, so we’re going to make a landing page for an app, any app (you can edit the components and the templates to cater to your needs, of course) using a template from TUK. In the words of the greatest bro of all time, Pewdiepie, let’s just jump right into it.
Pause.
A bit about TUK
If you haven’t read the previous articles of mine, let me just catch you up to speed about TUK. It’s a UI Kit built using Tailwind CSS and it has support for Vanilla JS, React, Angular, and upcoming support for Vue.js Also, it’s got more than 350 drop-in ready components and 10 templates with 50 screens. That’s not all, either. There are going to be more components and templates coming soon. You’re going to have a blast creating UIs using TUK. Their entire mantra is making UIs — and websites by extension — more accessible, and isn’t that an awesome cause?
App Landing Page Template
I recently used the App Landing Page (find the link attached) template for a recent project of mine and I’m going to emulate a bit of it here in this article-story-thing.
Let’s have a look-see, why don’t we?
First, visit the TUK website and click on the templates page. There you will be able to view the different templates provided by TUK with over 50 screens.
Scroll to the landing page section and click on Download HTML in the App Landing page template.
Firing up Visual Studio Code
Once your download is complete, extract the file and open it in your Visual Studio Code (VSC).
Voila! You would be able to open your website with the Live Server in VSC.
You are now ready to start making changes to the landing page. Let’s look at how to change the different sections one by one.
The different components have been labeled through comments in the HTML file which makes it really easy to navigate the website.
Hero
Let’s look at how to change the Hero section first. I first replaced the logo with the logo for my application. I changed the heading and the description according to my meal planning app.
Lastly, I replaced the image with a mockup for my mobile application.
Features
In the features section, I replace the text according to the functionality of my mobile application. You can also replace the icons easily.
For the third section, which was also the features section, but a different version. I added the details of the functionality the mobile application was offering. I also replaced the image on the right side with images of my mobile application.
Pricing
Changing the details of the pricing section was fairly simple. I simply changed the description in the list tag and replaced it with what my meal planning application was offering.
Call to Action
After the pricing section, there is a call to action section on the landing page. All you need to do is change the text and the images according to your mobile application. You can, of course, remove a section completely or add a new component depending on your need.
Frequently Asked Questions
Frequently Asked Questions (FAQ) section is a rather important one to add to your landing page, especially when you are marketing your application. This enables you to easily answer common questions to get ahead in the game. Again, I changed the text according to my application.
Testimonials
In the Testimonial section, you can add reviews from your customers to increase the credibility of your brand.
Let the world know about the founders of the application. Change the images by changing the link in the source tag. You can also change the description in the paragraph tag.
Blog and Logo
You can also include a blog post for your business. Changing the images and the text shouldn’t take more than three minutes. I simply removed this section as I felt it wasn’t relevant to my business.
You can also include the logos of your collaborators. This often has a huge impact on establishing credibility and the trust factor when customers visit your landing page.
Contact
I changed the information on the Contact section and added my information to make it easier for the customers to directly contact me.
Newsletter
Lastly, I changed the text in the Newsletter section according to my needs.
Footer
I did not make any changes to the Footer, you can always add, remove, or change your social media icons according to your business.
Changing colors
I also changed the color of the landing page to a pleasant green. If you are looking at what colors to add, visit the Tailwind CSS website where you will get an overview of the colors that are available with Tailwind CSS.
And there you have it, folks. A landing page for your app in a couple of easily-followable steps, thanks to the convenience that TUK offers on top of the accessibility, the responsiveness, and the bespokeness.
Check it out here if you haven’t already.
Thanks for reading, I hope you have an awesome day, and I hope that this information helped you out in some way.
Signing off,
Maheen.
