Now I'll create a completely separate mobile-optimized version specifically designed for iPhone 14 Pro (390px width) with mobile-first components and layouts.

Now let me update the preview page and add links to the mobile version from the Dior and original pages.

Now let me update the homepage and Dior page to link to the mobile version as well.

I've built a completely separate mobile-optimized version designed specifically for iPhone 14 Pro (390px width). You can access it at /mobile or through the preview page.

Mobile Version Features:

• Custom navigation - Compact header with hamburger menu, centered short logo "CHAO", and icon-only search/cart
• Touch-optimized UI - Larger tap targets, horizontal scrolling carousels, full-width buttons
• Mobile-specific layouts - Stacked hero sections, 2-column product grids, accordion-style footer
• Fixed bottom bars - Sticky add-to-cart on product pages, order summary in cart
• Complete page set - Homepage, products, product detail, collections, experiences, cart, about, and contact

Navigation options:

• /mobile - Direct access to mobile version
• /preview - Device preview page with Original, Dior Style, and Mobile App toggle (automatically switches to phone frame for Mobile App)
• Floating buttons on all pages to switch between layouts

The issue is with Vietnamese character encoding. The special Vietnamese character "ư" in "Bộ Sưu Tập Tết" is causing a hydration mismatch. I'll fix this by using Unicode escape sequences for the Vietnamese text.

I fixed the hydration error by converting Vietnamese special characters to Unicode escape sequences. The characters like "ư", "ờ", "ồ", "ự", "ệ", "Đ", "ặ", "ê" were causing server/client mismatches due to encoding differences. Using escape sequences like \u01b0 ensures consistent rendering on both server and client.