Maren - Beauty Landing Page

Create a complete, polished, responsive beauty ecommerce website named “maren”.

Build the entire experience in one pass: homepage, product catalog, product details, search, mobile navigation, and shopping bag. The specification below is the complete design brief. Make implementation decisions independently and finish the working website without requiring additional design references.

BRAND AND VISUAL IDENTITY

Maren is a contemporary skincare, lip, and body-care brand. Its personality is warm, understated, editorial, and thoughtful.

The website should resemble a carefully art-directed beauty storefront:
- Large natural-light product photography.
- Cream packaging, frosted glass, amber oil, rosewood tubes, and linen accessories.
- Warm beige stone surfaces and soft sunlight.
- Restrained typography and generous whitespace.
- Thin borders and predominantly square corners.
- Clean layouts with minimal decorative elements.

Colors:
- Main homepage background: warm ivory #F7F4EF.
- Header and catalog background: white #FFFFFF.
- Primary text: charcoal #24211E.
- Secondary text: warm gray #79736D.
- Borders: pale warm gray #E3DED6.
- Footer: muted slate blue #4D637E.
- Accent colors come primarily from product photography and the selected lip-tint shade.

Typography:
- Use Jost for navigation, body text, buttons, product names, and most headings.
- Use Instrument Serif Italic sparingly for editorial accents.
- Body text approximately 15–16px.
- Desktop section headings approximately 36–48px.
- Mobile headings approximately 28–34px.
- Small uppercase labels use restrained letter spacing.
- Render the logo as lowercase “maren”, medium-weight sans serif with generous letter spacing.

Use Phosphor icons consistently. Keep their stroke weight, size, and optical alignment uniform.

Avoid generic SaaS styling, pill-shaped cards, heavy shadows, glass effects, decorative gradients, emoji icons, and excessive rounded corners.

PAGE STRUCTURE

1. PROMOTION BAR AND HEADER

Add a slim charcoal promotion bar with light text:
- Centered promotional message.
- Previous and next arrows.
- Close icon on the right.
- Three rotating dummy promotions.
- Closing dismisses it until the page is refreshed.

Promotions:
“Free shipping over $50 · A free mini with every order”
“Meet your everyday essentials”
“Join the Maren Club for exclusive rewards”

Below it, create a white sticky header with a subtle bottom border.

Desktop:
- Left navigation: Shop, Skin, Lip, Body, Sets, Find your shade.
- Centered maren wordmark.
- Right navigation: Search, Rewards, Account, Bag (quantity).
- Approximately 76–84px high.

Mobile:
- Menu icon and “Menu” on the left.
- Centered wordmark.
- Bag (quantity) on the right.
- Approximately 64px high.

Keep the logo geometrically centered regardless of navigation widths.

2. HERO CAMPAIGN

Create a large landscape editorial photograph:
A rosewood lip-tint tube, frosted facial mist, small amber body-oil bottle, and beige linen pouch arranged on a sunlit travertine vanity.

Products occupy the left and center of the photograph, with balanced negative space.

Place a restrained ivory information panel near the lower-left:
- Eyebrow: New
- Heading: The Weekend Glow Kit
- Description: Cloud Tint, Barrier Mist and a travel-size Body Oil in a reusable linen pouch. Made for slow mornings, wherever they happen.
- Link: Shop the kit, followed by a small caret.

Make the photograph the dominant element. On mobile, arrange the image and information panel so both remain readable without covering the products.

3. CATEGORY CARDS

Display three equally sized photographic category cards:
- Skin + Tinted Care
- Cloud Tint Lip
- Sensitive-Skin Essentials

Use warm skincare photography, close-up lip imagery, and product compositions respectively.

Each card includes a small eyebrow, category title, and “Shop now” arrow link.

Use three columns on desktop and a readable stacked arrangement on mobile.

4. BRAND STATEMENT

Create a spacious centered editorial section:
Heading: Beauty, with intention.
Use italic serif for “intention.”

Description:
“A considered edit of skin, lip and body essentials — fewer steps, better formulas, made to fit into your day.”

Link: About Maren.

5. CLOUD TINT COLLECTION

Create a full-width interactive section:
Heading: The Cloud Tint Collection
Description: Sheer, buildable colour for lips and cheeks. Five shades, one tube.

Show five upright lip-tint tubes with ivory caps.

Shades and background colors:
- Bare — #D9B49E
- Petal — #EDB8BF
- Rosewood — #99545A
- Fig — #6E3446
- Coral — #E58A72

Start with Rosewood selected.

Desktop:
- Selected product stays exactly in the center.
- Its tube is approximately 380px tall.
- Neighboring tubes are approximately 80% of its size.
- Arrange the five products evenly across the section.
- Circular previous and next controls sit at the outer edges.

Mobile:
- Selected tube remains centered.
- Show neighboring tubes at smaller scale where space allows.
- Support horizontal swipe.
- Avoid clipping the active tube.

Below the products, center:
- Cloud Tint
- Shade name
- Short shade description
- Five circular color swatches
- A thin bordered “Add to bag” button with $24
- Learn more arrow link

Use white text for Rosewood and Fig; dark text for lighter shades.

Interactions:
- Clicking a tube or swatch brings that shade to the center.
- Previous and next controls loop through exactly five shades.
- Move the product track smoothly and scale products during selection.
- Transition the background color with the product selection.
- Movement should take approximately 650–700ms with gentle deceleration.
- Allow repeated clicks while movement is in progress.
- Keep neighboring products mounted and loaded throughout movement.
- Never show empty slots, disappearing products, or visible reset jumps.
- Support keyboard arrow navigation.

Both circular arrows must remain transparent at rest, hover, focus, and after clicking. Use identical borders and centered Phosphor arrow icons.

6. SKINCARE EDITORIAL SECTION

Use a balanced two-column layout:
- Editorial copy and three small product previews on the left.
- A large warm photograph of a woman using facial mist on the right.

Heading: Skincare
Description: Clinically tested formulas to cleanse, treat and protect — in three steps.
Link: Shop all skincare.

Product previews:
Barrier Mist, Daily Gel Cream, Soft Cleanse Balm.

Stack the composition cleanly on mobile.

7. EVERYDAY ESSENTIALS

Heading: Effortless, everyday essentials.
Link: Shop bestsellers.

Display four product cards:
- Overnight Lip Mask — $24
- Daily Gel Cream — $34
- Barrier Mist — $28
- Body Silk Oil — $38

Each card contains:
- Square product photograph.
- Product name.
- Short description.
- Size selector.
- Full-width add-to-bag row with price.

Add a dark rectangular Bestseller badge to the lip mask and a New badge to the gel cream. A small slate-blue circular “Best of ’26” badge can appear on the lip mask and mist.

Use four columns on desktop and two columns on mobile.

8. BODY EDITORIAL SECTION

Reverse the skincare composition:
- Large photograph on the left.
- Copy and small product previews on the right.

Photography: a woman applying body oil in a warm, sunlit setting.

Heading: Body
Description: Rich, quick-absorbing textures that turn an everyday shower into a small ritual.
Link: Shop all body.

Product previews:
Body Silk Oil, Smoothing Body Polish, Hand Cream Duo.

9. THE SETS

Heading: The Sets
Description: Our bestsellers, thoughtfully paired. A complete ritual — or a little something for someone else.
Link: Shop all sets.

Three independent portrait photographs, approximately 6:7:
- The Intro Set — $68:
  Facial mist, gel-cream jar, rosewood tint, and linen drawstring pouch.
- The Glow Duo — $52:
  Amber body-oil bottle and rosewood tint on a small travertine slab.
- Five-Minute Morning — $96:
  Facial mist, gel-cream jar, rosewood tint, open linen pouch, and ivory comb.

Keep every product and accessory entirely inside its photograph, with balanced margins and consistent lighting.

Desktop shows three cards.
Mobile shows one complete centered card.

Provide previous/next arrows, mobile swipe, looping navigation, and a subtle three-position progress indicator.

Animate the actual card movement over approximately 500–550ms. Do not instantly replace card contents.

10. REWARDS

Create a two-column section with an accordion and a large editorial photograph.

Heading: Beauty you look forward to.

Accordion items:
- Join the Maren Club — Rewards
- Subscribe & save — Save 15%
- Refill & return — $10 credit

Use thin separators, compact benefit labels, and Phosphor plus/minus icons. Expand and collapse smoothly.

11. FOOTER

Create a generous slate-blue footer with light text.

Top:
“Follow us @maren.beauty”

Below it, display five square photographs:
- Woman enjoying a skincare ritual.
- Close-up of a rosewood tint beside lips.
- Body-oil application.
- Woman holding a skincare jar.
- Maren products with a linen pouch.

Desktop shows all five in one row. Mobile may use a horizontally scrollable strip.

Main footer:
- Left: Stay in the loop newsletter form.
- Right: Shop, About, Help, and Account link columns.

Newsletter:
- Email field.
- Optional mobile-number field.
- Short marketing consent text.
- Thin bordered Subscribe button.
- Accessible confirmation message.

Below the form:
“Skin, slowly.” in large italic serif.
Instagram, TikTok, Pinterest, YouTube links.

Bottom row:
Copyright, Terms of use, Privacy policy, Cookie preferences.

Keep the footer in normal document flow. Its last row must remain reachable by scrolling, without cutoff or artificial space underneath.

PRODUCT CATALOG

Create /shop with the heading:
“Your everyday essentials.”
Use italic serif for “essentials.”

Supporting text:
“A considered edit of skin, lip and body care.”

Include exactly these 16 products:
1. Overnight Lip Mask — $24
2. Daily Gel Cream — $34
3. Barrier Mist — $28
4. Body Silk Oil — $38
5. Soft Cleanse Balm — $26
6. Smoothing Body Polish — $30
7. Hand Cream Duo — $22
8. The Intro Set — $68
9. The Glow Duo — $52
10. Five-Minute Morning — $96
11. The Weekend Glow Kit — $78
12. Cloud Tint — Bare — $24
13. Cloud Tint — Petal — $24
14. Cloud Tint — Rosewood — $24
15. Cloud Tint — Fig — $24
16. Cloud Tint — Coral — $24

Product appearance:
- Lip mask: dusty rose jar with ivory lid.
- Gel cream: frosted cream jar with ivory lid.
- Mist: tall frosted bottle with ivory spray pump.
- Body oil: clear amber-oil bottle with ivory cap.
- Cleanse balm: open ivory jar showing pale balm.
- Body polish: beige speckled jar with ivory lid.
- Hand cream duo: two tubes, one nude pink and one ivory.
- Cloud Tint: upright colored tube with ivory cap.
- Kits and Sets: the complete product groups described above.

Use four columns on desktop and two on mobile.

Every product card uses the same square image frame.
Show Cloud Tint as a complete, centered tube with breathing room inside that square; never let its portrait proportions make the card taller than adjacent cards.

Use dedicated catalog photography for kits rather than cropping a landscape campaign photograph.

IMAGES

Create or source a coherent set of realistic Maren product and editorial photographs.

Maintain:
- Consistent packaging and brand spelling.
- Warm natural light.
- Cream, beige, rosewood, and amber palette.
- Realistic glass, linen, stone, and skincare textures.
- Correct product count.
- Full product caps and bases.
- Balanced compositions.

Do not use unrelated stock products, random image assignments, stitched photographs, visible contact-sheet fragments, or cropped packshots.

Preserve image aspect ratios. Use contained fitting for product photographs and intentional cover fitting for editorial imagery.

Use one shared image renderer across catalog cards, homepage previews, search results, product details, and bag thumbnails.

FUNCTIONAL EXPERIENCE

Create a working detail page for every product with:
- Correct product image.
- Name and description.
- Price.
- Quantity control.
- Add to bag.

Search current products and open their detail pages.

Use matching side-drawer dimensions for Menu and Bag:
- Maximum width approximately 520px.
- On mobile, leave approximately 32px of the screen visible outside the drawer.
- Independently scrollable content.
- Consistent close control and typography.

Bag includes:
- Current product image and variant name.
- Quantity controls and remove action.
- Free-shipping progress toward $50.
- Subtotal.
- Accessible checkout demo action.

Keep the bag summary reachable in short landscape viewports.

Persist valid cart items in localStorage. Discard unknown or retired product entries without deleting valid current items.

Dialogs must support Escape, focus containment, focus restoration, and correct scroll unlocking. Complete the exit animation before closing.

RESPONSIVENESS AND MOTION

Use generous desktop spacing, approximately 80–120px between major sections, and comfortable mobile spacing around 48–64px.

Use approximately 24px outer gutters on desktop and 16px on mobile, adapting wider layouts as needed.

Verify 320px, 390px, 430px, 768px, 1024px, 1440px, and 1920px.

Prevent horizontal overflow, overlapping navigation, clipped packshots, footer cutoff, and oversized catalog images.

Size-selector carets must be vertically centered and inset approximately 14–16px from the right, with sufficient text padding.

Use restrained hover feedback, gentle editorial reveals, smooth accordion motion, and complete dialog entrance/exit transitions.

Honor prefers-reduced-motion. Content must remain accessible without animations.

IMPLEMENTATION AND DELIVERY

Use React, TypeScript, Vite, TanStack Router, and Phosphor icons. Prefer straightforward reusable components, shared catalog data, and responsive CSS variables.

Finish with:
- A successful production build.
- Working navigation, search, product pages, and bag.
- Visual inspection of all 16 catalog products.
- Desktop and mobile checks.
- Chrome and Safari/WebKit verification.
- Repeated carousel clicks and looping checks.
- Arrow consistency checks at rest, hover, focus, and after clicking.
- Scrolling verification through the final footer row.

Deliver the finished working website, not a static mockup or an incomplete homepage.