Recently, We launched our Templates Section at aceternity and I happened to build a template that had to cater to AI SaaS use cases.

After much brainstorming and research, I decided that I want something minimal, highly focused and clean design that ultimately conveys the value proposition of the product.

Hence, I built this template with a minimalistic approach, focusing on the core features of the product and nothing else.

Features of AI SaaS Template

The template contains 5 pages that focuses on 5 core areas of an AI Startup

• Landing page: A modern and sleek design that focuses on the product as a whole, walking the user through the features of the application.
• Pricing page: A standard pricing page with monthly and yearly pricing, along with a table of features that are included in each plan.
• Blog page: A content page that focuses on providing value to the end user (sort of what we are doing here)
• Contact page: Easiest way for the end user to contact you
• Login and Signup page: Register on the platform and let the user enter into your application.

Now there can be a lot of other pages like features and changelog but the page structure is such that you can easily copy paste any of the existing pages and with minimum modifications, you can create any other page.

What makes this template stand out

There are a lot of templates out there that are clean and beautiful, so what makes this template stand out?

It's simple -- we have introduced features like micro-interactions and modern design paradigms like bento grid.

Not even that, this template has been designed keeping in mind that the end user actually understands what they're looking at, which is, your product.

For example, for the product features section, we have a bento grid of 4 items, each is spread out in an uneven manner.

This will have the user look at each feature separately, which then inturn consists of beautiful animations that conveys the goal of the bento grid item.

Let's take a look at the testimonials section

Looking at the pricing section -- its fairly straightforward with monthly and yearly switch.

Every form on the website is properly validated. We use react-hook-forms and zod for form validations and creation. Since the right side of the contact form generally remains empty, it is almost definitely a good idea to show some customer testimonials to build trust.

You get the point, it was easy to design and build once we had the sections in place.

The next part was to make sure it is performance optimized and had good SEO.

Tech Stack Performance Optimizations

This is the tech stack that we use to build AI SaaS Template at Aceternity:

• Next.js : The core framework that we use to build this template, Great for server rendered apps that gets found on search engined and a great React framework overall.
• Tailwind CSS : We've styled this template with Tailwind, Our absolute favourite when it comes to styling and CSS.
• Framer motion: For subtle animations and micro-interactions.
• MDX: For writing blogs on the website, write markdown and it gets converted into a blog.

The application is hosted on Vercel.

There were a lot of considerations when it comes to performance. We had to carefully pick what to show on the website and what NOT to.

• Since we have some images going on the website, It was best to use Next.js Image component for Image optimizations.

• For accessibility, we ensured that all components of the template are compliant with WCAG guidelines, providing keyboard navigability and screen reader support to make our product usable for everyone.

• Every page has its own title, description and og image links so that it stands out and ranks on search engines.

All of these combined and we were able to achieve an outstanding score on google lighthouse.

Conclusion

To summarize the article, the idea was to create a template that was:

• easy to customise
• is performance optimized
• looked modern, minimal and beautiful
• has correct sections in place

I absolutely loved working on this template from design to development. Every section of this website is built with love and care. I'm proud of what we have here and really excited to share it with the world.

If you want to purchase this template, Here's a link to the template's page where we have a limited time offer of $99 for the entire bundle.

Please reach out to me on Twitter or on the chat at the bottom right of your screen if you have any queries.