How I Created Jaydai's Landing Page with AI
Let's give credit where credit is due.
We are very proud to present the new Jaydai landing page on which you are currently 🍾🍾We wanted to make this landing page as beautiful and informative as possible, and I don't know about you, but we are super happy with the result!
But what if I told you that it took us just one week in total to build this showcase from A to Z?
You probably wouldn't believe me...
A responsive, multilingual, multi-theme (night/day) landing page with so many visual effects and information? Of course, and I'm the King of England (I've always known this expression about the Queen of England, but we have to keep up with the times)?So I'll tell you right away: no, this site wasn't made solely by an AI. And no, I'm not at risk of being replaced by algorithms.However, accomplishing this in one week, with zero budget, would have been 100% impossible without AI.And before detailing the exact process of this project (with evidence), I wanted to share a few lessons learned:
TL;DR (Too Long; Didn't Read)
For those who want to get to the essentials:
Never take for granted that AI can't do something. I've tried generating sites with AI dozens of times, and it never worked. But that was before the release of Manus, which is the tool I used. AI advances quickly, and its limitations change too, so never hesitate to "try again".
A single AI tool is rarely enough for a major project. In my case, I used Claude, ChatGPT, and Manus. And obviously my own intelligence and technical knowledge.
It's time to raise our ambitions. We would never have attempted a similar version for a landing page like ours; it would have taken far too much time. And using a basic no-code tool, we might have taken 2 days instead of 7, but we would have had a version ten times less impressive (and not the same conversion rates we currently have 😉)
The steps
Now let's look at the step-by-step approach.
1
Discovering Manus
Check out their website to learn more, but in a few words: Manus is a generalist AI agent with its own Operating System. This means you send it a prompt, and it doesn't respond immediately, but analyzes the situation, asks you complementary questions, and uses its internal computer to respond to your request.
2
THE prompt
About Manus: in the free version, you can send prompts with fewer than 1000 characters and you get 1000 credits as a welcome gift. Each request consumes credits (mine was worth about 300 credits). After the initial prompt, Manus clarifies and starts coding on its own (a good ten minutes in my case). You'll find below the exact conversation I had: 👉 The Replay
3
The verification
Honestly, when checking what it had done, I didn't have much faith. And it was too tedious to check all the code. So I chose the offensive solution: deploy the code without touching it. If you want to reproduce this at home:
- Download the jaydai-landing-code.zip file and open it
- Open a terminal, go to this folder and run the following command:
pnpm install && pnpm run dev - Open
localhost:3000and you have the original version.
4
Using this base to generate ideas with Claude
I put my code on GitHub, and since Claude can read GitHub repositories, it had access to all my code and generated quite a few things that I integrated (especially in the enterprise version).
5
Generating high-quality images
In this case, I used ChatGPT to generate images that match Jaydai's colors. With the new version of the image generator, it's very effective.
6
Coding on your own... With the help of AI tools
There was still some work to do (about a week) to make all the buttons work, create a small backend to collect contact requests, etc. Fortunately, I was able to use some tools like Claude (very useful for translations), ChatGPT (very useful for images), Cursor (very useful for code), and a bit of Manus too, especially for SEO optimization.
7
Opening a good beer with your partner and enjoying the moment 🍻
Evidence below 👇
Don't try this at home
All the prompts I used
If you want to reproduce a project like this at home, here are the details of the different prompts I used.I've left them in their original form (often in English because it's often better for code, and with spelling mistakes to show you that this is not what matters most when prompting) 😉.
All the prompts for creating this landing page
Feel free to copy-paste and test for yourself...
Generate the structure with Manus
First attempt to generate a functional landing page with Manus
Agent IACode frontend
I will send you some information about my company, and I want you to create a Next.js landing page using tailwnd css, shadcn and 21st dev omponents.
My landing page need to have :
- an animated hero section (for example https://21st.dev/mikolajdobrucki/hero-section/default)
- A hero video dialog (https://magicui.design/docs/components/hero-video...
Résultat du prompt
I'll help you create a Next.js landing page with all the components you've requested. I'll use Tailwind CSS, shadcn, and 21st.dev components to build an engaging and modern landing page. Let me get started on this right away. I'll first set up the Next.js project with the necessary dependencies, then implement each of the components you've mentione...
Commentaires
By already giving Manus the language it should use, public examples of components I find pretty, and a list of what I expect, I increase the chances that it will produce exactly what I have in mind
Generate additional ideas (especially for the enterprise section)
Generate plenty of ideas for inspiration and to have an even larger code base to draw from when I start coding myself.
LLMCode frontendDesign
You are a Software Engineer with great design skills and specialist of creating amazing landing pages with Next.js, Tailwind CSS, ShadCN, 21st.dev (or any similar component libraries).
I have created a first draft for my landing page (attached). I will send you some informations about Jaydai (my product), and I would like you to find ways to add m...
Résultat du prompt
I'd love to help you create impressive design ideas for your Jaydai landing page!
Looking at your files, you already have a solid foundation with components using Next.js, Tailwind CSS, and motion animations.
Let's create an "ideas" page with fresh design concepts that will make your landing page even more engaging and conversion-focused.
First,...
Commentaires
This is the time to give more freedom. I continue giving it guidance on the tools available (tailwind, shadcn, etc.), but I give it a description of Jaydai so it can suggest design ideas I might not have thought of myself.
Generate images for the landing page
Find a prompt that will create an image that suits me and keep at it until I generate new images.
ImageDesign
Canvas Create an image for my landing page that illustrates this point:
{
"id": "training",
"title": "Team Training & Coaching",
"description": "Equip your workforce with the skills to leverage AI effectively in their daily tasks.",
"features": [
"Customized workshop programs",
"Role-specific training modules",
"Practical use ca...
Résultat du prompt
The image used to illustrate coaching in the services section of the enterprise page.
Commentaires
By giving it Jaydai's colors (in digital format), I ensure the overall coherence of my site. An even more impressive feat given that I'm color blind...
Create the landing page blog
A landing page without a blog? Please...
Code FrontendDatabase Design
You are a Software Engineer.
I am developing a landing page (I will send you the codebase).
I want to add a new page: blog.
I have created a Supabase table (attached: the SQL query that I ran in Supabase) that will contain all blog articles.
The blog page will display all these blog articles.
Please create:
- The blog section components
- The bl...
Résultat du prompt
I'll help you create a blog section for your landing page.
Based on the codebase you provided, I see that it's a Next.js application with Tailwind CSS styling and internationalization support.
You want to add a blog page that will display articles stored in a Supabase table.
You didn't provide the SQL query for the Supabase table structure, so I...
Commentaires
I used this prompt after coding on the project myself for a week. The prompt is much shorter because by sharing my code, Claude already has a lot of information about what I have in mind...
One more for the road: generate the FAQ with an official Jaydai prompt
Enter a few variables into our template, and voilà: job done
MarketingCreate a FAQ
Discover it in our extension
Résultat du prompt
The FAQs (individual and business) for our site
Commentaires
The full prompt is available in our extension, come test it yourself!
Conclusion
And there you have it, you've seen what happens "under the hood" as they say. As you can see, a large part of this code was generated or written with AI. But since I started by giving credit where credit is due, I'll finish by giving myself a bit of credit too: Without the hours I spent coding and debugging, this landing page wouldn't be as beautiful!
I hope you enjoyed this first blog post and that you learned something. If you want to receive more examples of prompts, tips, advice, and tricks about AI to become experts with ChatGPT, feel free to subscribe to our newsletter The Tunnel.
See you soon 👋
Share this experience with your colleagues
Did you find this approach interesting? Share this article with your friends and colleagues who are interested in AI and web development.