Creating a landing page with AI: how to get professional results

This article is part of the series "Rebuilding a website with AI". Previous episode: Turning a podcast into blog articles.

The problem

AsuOs offers two main services: the Sprint (intensive development over a short period) and Custom SaaS (cloud application development). But on the website, these offerings had no dedicated page. A prospect who wanted to understand our services had to guess, or contact me directly.

There was also no proper 404 page. Just the default Next.js message. Not very professional.

The Custom SaaS page

Claude Code created a complete page at app/[locale]/saas-sur-mesure-suisse/page.tsx, over 260 lines, with a hero section containing the hook and a clear value proposition, a problems/solutions section presenting client pain points and our approach to solving them, a step-by-step development process presented visually, the tech stack with the reasoning behind our choices, a FAQ for common prospect questions, and Schema.org structured data with Service markup for SEO.

Everything fully translated into all 3 languages via next-intl keys. No hardcoded text in the component.

What impressed me

Claude Code didn't create a generic page. It read the other pages on the site, understood the tone, the design system (Tailwind with the orange palette), and produced something consistent with the rest. The CSS classes, spacing, typographic hierarchy — everything was aligned without me having to specify a thing.

The Sprint page

The Sprint page is more complex. It includes a client component (SprintClient.tsx) of over 220 lines with a full presentation of the offering (what a sprint is, who it's for, what results to expect), client testimonials with photos and feedback, a step-by-step process as a visual timeline, a pricing grid with different tiers, and an interactive FAQ section as an accordion with open/close animations.

Claude Code also added Schema.org structured data for sprint services, which helps Google understand exactly what we offer — including price, duration, and service area.

The custom 404 page

It's a small detail, but it makes a difference. Instead of a cold error page, Claude Code created a 404 that displays a friendly message in the user's language, offers navigation links to help them find their way, includes a custom image, and works automatically in all 3 languages.

The emerging pattern

What's striking about these pages is the working pattern. I describe the intent: "I need a page for our SaaS offering." Claude Code looks at existing pages to understand the style. It creates the page while respecting the project conventions. And I adjust the business content: pricing, promises, positioning.

The technical code (React components, Server Components, metadata, structured data, responsive design) is handled automatically. My role focuses on what truly matters: does this page say what we want to say to our clients?

A concrete time saving

Creating a professional-quality landing page typically takes 2 to 4 hours of design (even with a design system), 4 to 8 hours of development, 1 to 2 hours of SEO integration (metadata, structured data), and 1 to 2 hours of testing and responsive adjustments. That's 1 to 2 days per page, minimum.

Here, all three pages were created in under one hour total. And they were already responsive, SEO-ready, and trilingual from the start.

Tomorrow, we leave content and structure behind to enter the most fun territory of this rebuild: animations. How to bring a site to life with spectacular page transitions, a ripple effect on the theme toggle, and animated infinite scroll. All while staying accessible. This was my favourite episode to experience live.