Now let me read the existing files to understand the project structure before building:

Now let me generate the product images for the page:

Now let me build the full application. I'll start with the theme and layout, then create all the components:

Now let me add the font-serif to the theme:

Now update layout.tsx with the fonts and metadata:

Update the font references in globals.css:

Now let me build all the components. I'll start with the data/types file, then the individual components:

Now let me create the main page that ties everything together:

Now let me verify the images are correct and make a quick check on Next.js config for images:

Good, images are set to unoptimized. Let me verify the generated images and check the preview looks correct by viewing one:

The hero image looks perfect. Let me also check a couple product images:

All images look great. The full landing page is now built with the following flow and features:

Your Hair Ritual is a complete Kerastase-inspired subscription landing page with an elegant warm pastel palette (cream, blush, rose gold) and a Cormorant Garamond serif for headings paired with DM Sans for body text. The experience flows through a full-screen editorial hero, a smart brush hair profile recap (6 data points from the salon visit), an interactive goals quiz (8 selectable tiles), three subscription tier cards (Le Petit Soin / Le Rituel Doux / L'Indulgence for 3, 5, and 9 products with 15-30% savings), a full product builder where users add/remove products up to their tier limit with live pricing, a delightful accessories add-on section (brush, scrunchies, silk pillowcase, headband, towel, comb), and a detailed order summary with savings breakdown and CTA. Everything is fully interactive with state managed through the page, and the cart icon in the nav updates in real-time.