SaaS Marketing Boost: Build a Landing Page with AI Fast
TLDR: In this article, I share my experience of building a SaaS marketing landing page with an email subscription function using various AI tools in just a few hours. You can view the webpage here: https://go.choley.bahridd.in/
Over the past few months, I've been developing a SaaS app for table tennis clubs (the app itself is beyond the scope of this article). After completing the MVP, I realized I needed a strategy to market my product. An online suggestion was to create a simple marketing website with an email subscription form before the official launch. This approach allows you to:
Compile a list of potential customers who are interested enough to provide their email addresses.
Connect with some of them to understand their needs and the problems they hope your app will solve.
Given my busy schedule and full-time job, I wanted to build and deploy this quickly and cost-effectively. This was the perfect opportunity to leverage AI tools to the fullest.
The plan was straightforward:
Create the UI using HTML and CSS.
Develop a minimal backend to capture emails and store them.
Deploy the application.
For the first step, I used Readdy.AI, which generated a decent landing page from the initial prompt:
It used React and Shadcn UI components to create the page. A few adjustments I wanted to make included:
The hero image was unsettling, resembling a horror movie intro đź‘». However, this was easily fixable by replacing the image.
I wanted to add a screenshot of the app to give customers a preview.
After few more prompts, Readdy made a good progress.
I later discovered it wasn't responsive—viewing the link on a mobile device illustrates this issue. I resolved it by hiding the screenshot on mobile screens.
I also updated the email form in the footer to collect more information than just the email address, such as feedback and the user's role (player or club admin). I figured that if users reached the end of the page, they were interested enough to provide additional details.
For the backend and deployment, I sought help from ChatGPT, which recommended using Next.js and Vercel. Despite having no prior experience with these technologies, the process went smoothly. I used Google Spreadsheet for email storage. All other technical details were implemented using ChatGPT and Cursor IDE with its AI features:
Registering Google Cloud API to write to the spreadsheet
Implementing backend code to write to the spreadsheet
Adding DNS records
In summary, I used free tiers of Readdy.ai, ChatGPT, and Pro version of Cursor. All the code is publicly available. You can visit the landing page here: https://go.choley.bahridd.in/
