Now let me read the accordion component since we'll use it for the FAQ section, and generate design inspiration and images in parallel:
Now let me update the globals.css with the proper design tokens, the layout with the right fonts, and build all the components:
Now let me update the layout with the correct fonts and metadata:
Now update the font-family in globals.css:
Now let me build all the components. I'll create the individual components first, then the page:
Now let me compose the main page:
The full advertorial landing page is now built. Here's a summary of what was created:
<html lang="de"> and proper SEO metadata.--primary with a green --success token for pro/con icons, all themed through CSS custom properties.TopBar (affiliate disclaimer), SiteHeader (clean blog branding), ArticleHeader (H1 + author byline), ArticleBody (storytelling paragraphs + hero image), EvaluationCriteria (numbered blue circles), CourseCards (3 cards with pros/cons grid + CTA buttons), FaqSection (Radix accordion), ArticleConclusion (closing CTA + team image), CommentsSection (styled comments with author reply highlight), and SiteFooter (dark footer with legal links + disclaimer).Let me first check the reference site and understand the current codebase state, then build the complete advertorial package.
Now I have a complete picture. The reference site (maplelives.com/reliefs/) is a clean, editorial-style advertorial with a personal story format, blockquotes, a subtle CTA box, and a clean footer. I need to:
Let me set up a task list and start building:
Now let me rebuild all the components with the expanded content, the maplelives editorial style, and the Fillout CTA link. I'll generate an additional image for the mid-article section:
Now let me rebuild all components with expanded content and the maplelives editorial style:
Now update the layout with Open Graph tags and the main page:
You can send messages while the preview loads