Sorrel - Company Profile

Create a complete, responsive company-profile website for “Sorrel Studio”,
an interior and hospitality design practice based in Jakarta, Bali,
and Singapore.

The site should communicate architectural taste, operational knowledge,
and a clear path to collaboration. Combine a disciplined corporate grid
with warm interior photography and expressive blue script typography.

TECH STACK
Use Vite, React, TypeScript, and TanStack Router.
Use native CSS, CSS variables, Grid, and Flexbox.
Use CSS transitions and keyframes, IntersectionObserver for reveals,
and requestAnimationFrame for count-up metrics.
Use text arrows →, ↗, and ↓.
Draw accordion plus/minus icons with two thin CSS lines inside square
controls. No external icon library is required.

VISUAL SYSTEM
- Main background: pale gray #F4F5F7.
- Text and dark sections: navy #0F1B2D.
- Main accent: royal blue #2747D6.
- Secondary accent: #2F54EB.
- Highlight panels: pale blue #DCE4FF.
- Archivo for bold headings and the brand name.
- Geist for body text, navigation, labels, and data.
- Pinyon Script for oversized decorative words.
- Use bold, compact sans-serif headings, often uppercase.
- Decorative script may overlap empty space around section headings,
  but must remain behind readable content.
- Use rectangular images and cards with sharp or nearly sharp corners.
- Use circles primarily for avatars and pills for small tags and
  before/after controls.
- Keep desktop gutters around 24px, with generous section spacing.
- Photograph contemporary tropical interiors with timber, stone,
  greenery, woven pendants, natural light, and blue furniture accents.

PAGE STRUCTURE, IN THIS ORDER

1. HEADER
Create a compact navigation cluster aligned left and a separate
“Get in touch” button aligned right.
The navigation cluster is a white, nearly square-cornered rectangle.
It contains:
- A dark 28px square with a white “S”.
- “Sorrel Studio”.
- A thin vertical divider.
- Studio, Projects, Services, Process, Journal, and Press links.
The contact button contains a text label and a dark square arrow tile.
On mobile, replace the desktop links with “+ Menu”, changing to
“− Menu” when expanded.

2. TWO-COLUMN HERO
Left: small blue eyebrow “INTERIOR & HOSPITALITY DESIGN STUDIO”.
Add a large heading:
“Interior design
partner for
hospitality brands.”
Place a pale-blue rectangular highlight behind “partner”.
Below it, explain that the studio creates places guests remember,
teams enjoy, and owners see value in.
Add two actions:
- A navy “Book a discovery call” button with a white arrow tile.
- A white company-profile download button with a dark arrow tile.
Place a small credibility statement near the bottom of the text column.
Right: a large portrait photograph of a boutique hotel lobby with
a navy sofa, timber furniture, hanging woven lights, and tropical greenery.
Below the image, add a project caption and “View project →”.

3. HERO METADATA AND CLIENT LOGOS
Create a thin-rule metadata row containing:
Established: 2014, Jakarta.
Studios: Jakarta · Bali · Singapore.
Focus: Hospitality, residential, workplace.
Add “Scroll to explore ↓” at the far right.
Follow with a quiet strip of six client wordmarks.

4. STUDIO INTRODUCTION
Create a full-width navy section.
Place an oversized royal-blue script “Sorrel” partly overlapping its
upper area.
Center a white uppercase statement explaining that the studio is a
collective of interior designers, architects, and makers.
Add a smaller supporting paragraph.
Below it, place four evenly spaced metric columns:
2014, 120+, 3, and 28, each with a descriptive label.
Animate these demo metrics once when visible.

5. SELECTED PROJECTS
Use a left-aligned heading:
“SPACES WITH A STORY — AND THE NUMBERS TO SHOW FOR IT.”
Place a large blue script “Projects” toward the upper-right.
Create a two-column, two-row project grid.
Include a boutique hotel, restaurant, fintech workplace, and garden home.
Each project card contains:
- A top information row with name and short summary on the left.
- A large demo outcome metric on the right.
- A prominent rectangular interior photograph.
- A white floating Before/After pill centered near the image bottom.
- Location and year metadata below.
The selected segment is a dark moving pill with white text.
Switch images with a crossfade. Each comparison operates independently.
Add “Explore selected projects →” below the grid.

6. SERVICES
Center the heading:
“WE ACT AS YOUR IN-HOUSE DESIGN DEPARTMENT.”
Highlight “IN-HOUSE” using pale blue.
Add a short introduction.
Create six white cards in a 3×2 desktop grid:
Interior Architecture, Hospitality Concepts, Furniture & Objects,
Styling & Art Direction, Project Management, and Brand Environments.
Each card contains a small navy number tile, uppercase title,
short paragraph, and two compact outlined tags.

7. PROCESS
Use a left-aligned heading:
“WE SHAPE THE PROCESS AROUND YOUR PROJECT.”
Create three full-width accordion rows:
Hospitality, Residential, and Workplace & Retail.
Each row contains its title, a short summary, and a square plus/minus
control at the far right.
The open row uses blue emphasis and reveals a neatly arranged list
of process points. Keep only one row open within this group.

8. COLLABORATION MODELS
Center the heading:
“DIFFERENT PROJECTS NEED DIFFERENT SETUPS.”
Make the second phrase muted.
Display four rectangular white cards in one desktop row:
Full Service, Design & Build, Refresh Sprint, and Space Audit.
Each card contains a short client question at the top, then an arrow,
bold model name, and duration near the bottom.
Clicking a card opens contact with that model preselected.

9. CLIENT STORIES
Center the heading:
“CLIENTS COME FOR THE DESIGN. THEY STAY FOR THE PARTNERSHIP.”
Create one wide pale-blue featured testimonial.
Left: category pills, large quote, circular avatar, name, and role.
Right: a large demo metric and explanatory label.
Below it, place two smaller white testimonial cards side by side,
each containing tags, quote, avatar, and an outcome metric.

10. EXPERIENCE
Create a centered heading and five compact accordion rows:
Hotels & Resorts, Restaurants & Bars, Workplaces, Residences,
and Retail & Showrooms.
Each row includes a count badge and a square plus/minus control.
The open panel contains an aligned project table with project name,
description, and year. Use thin separators between entries.

11. TEAM
Use a heading on the left and an introductory paragraph on the right.
Below, display four equal-width portrait cards.
Use rectangular professional portraits in natural interior settings,
with each person’s name and role underneath.

12. JOURNAL
Create a full-width navy section with white text.
Place a large blue script “Notes” behind the centered heading
“NOTES FROM THE STUDIO”.
Feature one large landscape image of a sculptural blue chair.
Overlay an article number and date at the top, and a bold title plus
“Read the column →” at the bottom over a gradient.
Below, display three smaller image-led article cards.
Finish with an archive link and a small square arrow control.

13. FAQ
Use two columns.
Left: “YOU HAVE QUESTIONS. WE HAVE ANSWERS.” and contact text.
Right: compact white accordion rows with thin dividers and square
plus/minus controls. Keep one answer open at a time.

14. CONTACT BANNER
Use a full-width interior photograph.
Overlay a white rectangular card containing a blue eyebrow,
“LET’S MAKE A PLACE WORTH STAYING IN.”, and contact/download actions.

15. FOOTER
Use a navy background.
At the top, build three large geometric shapes in equal columns:
- An off-white rectangle.
- A pale-blue vertical arch with a semicircular top and flat bottom.
- A royal-blue block with a large rounded upper-left quarter-circle.
Below, create four navigation columns: Site, More, Follow, and Join Us.
Add another four-column row for Jakarta, Bali, Singapore, and Press.
Finish with a copyright row, privacy link, and Back to Top control.

SECONDARY PAGES AND BEHAVIOR
Create a filterable project archive, four project detail pages,
a journal archive, article pages, contact, press, and privacy pages.
Project details should include metadata, before/after photography,
The Brief, Our Approach, and a contact CTA.
Provide a downloadable company-profile PDF.
Use a contact form with labeled fields and a clear submission outcome.
If no backend is connected, prepare a mailto draft and explain that state.

MOTION, MOBILE, AND OPTIONAL FIGMA
Use staggered 24px reveals, restrained image hover scaling,
animated count-up values, before/after crossfades, and smooth accordions.
Keep metric widths stable during animation.
Respect prefers-reduced-motion and support keyboard controls.
On mobile, stack the hero, reduce script decoration, convert wide
card grids to one or two columns as appropriate, and let metadata wrap.
Keep the footer geometry recognizable at smaller widths.
Use English demo content and clearly identify illustrative metrics.

The first implementation must be complete without a Figma reference.
If Figma is supplied later, refine exact dimensions, fonts, spacing,
colors, image crops, and responsive proportions for pixel-perfect
alignment without discarding the established page structure.