Norte - Agency Landing Page

Create a complete, responsive website for “Norte Studio”, an independent
brand communication studio working across fashion, beauty, and lifestyle.

The website should feel like a contemporary editorial publication:
confident typography, cinematic photography, numbered chapters, precise
metadata, and generous negative space. Build the entire page and its
working interactions from this brief.

TECH STACK
Use Vite, React, TypeScript, and TanStack Router.
Use native CSS with variables, Grid, Flexbox, transitions, and keyframes.
Use IntersectionObserver for viewport reveals.
For UI icons, use typographic symbols: →, ↗, ↓, +, −, ×, and ✦.
Use bracketed text controls such as “[ MENU ]” and “[ + INFO ]”.
Create brand emblems as SVG assets. No icon library is required.

VISUAL SYSTEM
- Background: warm off-white #F3F1EC.
- Primary text and footer: near-black #0D0D0D.
- Dividers: warm gray #CFCCC4.
- Secondary text: muted gray #5E5C57.
- Small electric-blue accents for the NEW badge and decorative stars.
- Zalando for oversized wordmarks and uppercase display headings.
- Geist for body copy and manifesto text.
- Geist Mono for navigation, chapter numbers, captions, and project codes.
- Desktop outer gutters around 24px; mobile gutters around 16px.
- Use sharp rectangular photographs, thin rules, and open layouts.
- Reserve rounded geometry for the floating menu button.
- Use approximately 80–160px of desktop vertical spacing where appropriate.
  Let sections follow their content rather than forcing every section
  to fill the viewport.

PAGE STRUCTURE, IN THIS ORDER

1. STICKY TOP BAR
Create a slim, full-width off-white bar approximately 50px tall.
Place “NORTE®” at the left.
Center a chapter indicator containing “CH. 00”, a thin horizontal
progress track, and “/ 07 — PROLOGUE”.
Place “[ LET’S TALK ]” at the right.
Use small uppercase monospace text throughout.
Update the chapter label and progress as the visitor scrolls.

2. OVERSIZED WORDMARK
Below the bar, place “NORTE” as an enormous black wordmark spanning
almost the full width. Keep the letter spacing tight and the surrounding
space minimal. This should be a defining visual element.

3. PROLOGUE HERO
Place a full-bleed rectangular fashion photograph below the wordmark,
approximately 780px tall at a 1440px desktop width.
Show two models wearing cream and black outfits on a concrete runway
with natural light and restrained architectural surroundings.
Overlay:
- “( PROLOGUE )” at the top-left.
- “FASHION · BEAUTY · LIFESTYLE” at the top-right.
- Large “00” around the middle-left.
- “SCROLL ↓” around the middle-right.
- “WE MAKE BRANDS VISIBLE. THEN UNFORGETTABLE.” at the bottom-left.
Make the second sentence slightly translucent.
Use a subtle bottom gradient for readability.

4. CHAPTER 01 — THE BEGINNING
Start with a narrow chapter header separated by a 1px rule.
Place the chapter title on the left and “[01/07]” on the right.
Below it, use a two-column manifesto layout.
Left: an SVG emblem and “EST. 2019 — JAKARTA”.
Right: a large sentence explaining that a brand is a company’s most
valuable asset and that Norte builds reputation and desire around it.
Below the statement, place a smaller supporting paragraph beside a
vertical list: “[ HONEST ]”, “[ INTEGRATED ]”, “[ CURIOUS ]”.

5. CHAPTER 02 — WHAT WE DO
Introduce the section with:
“FOUR DISCIPLINES. ONE STORY, TOLD EVERYWHERE.”
Create four large accordion rows:
Communication, Influence, Events, and Content.
Each desktop row contains:
- A small index such as “(01)”.
- An oversized uppercase service name.
- A concise description.
- A right-aligned “[ + INFO ]” or “[ − CLOSE ]” control.
Separate rows with thin horizontal rules.
Open Communication by default; allow one open row at a time.
The expanded panel contains five portrait photographs in a horizontal,
scrollable strip. At desktop scale, use approximately 300×380px frames,
small gaps, and scroll snapping.
Match the imagery to press, creator partnerships, events, and campaigns.

6. CHAPTER 03 — SELECTED WORK
Add a centered monospace label:
“( SELECTED WORK, 2023 — 2026 )”.
Create six horizontally scrolling project cards.
Each card has a portrait photograph, uppercase project title, year,
and an editorial code such as “(NRT_26_AUR)”.
Use approximately 352×450px image frames on desktop.
Place a small blue NEW badge on the first card.
Add a centered “[ VIEW ALL CASES ]” link below.

7. THREE EDITORIAL DOORS
Create an asymmetric three-column image composition:
- Our Work: twice the width of the other columns, with a tall image.
- Our Story: a shorter portrait image.
- Our Journal: an intermediate-height portrait image.
Place compact labels and bracketed actions above each image.
The images should have different heights rather than forming an
equal-height card grid.

8. CHAPTER 04 — WHERE WE COME FROM
Use a spacious centered statement:
“MADE IN JAKARTA. TOLD WORLDWIDE.”
Below it, position “JAKARTA” at the left, a short origin paragraph in
the center, and “SINGAPORE” at the right.
Add a small centered emblem.
Follow this with a large full-width backstage photograph and a
bottom caption containing “04” and the scene description.

9. CHAPTER 05 — BEYOND THE HEADLINES
Place three small blue star symbols above a very large two-line
heading: “MORE THAN / JUST PRESS.”
Position a Giving Back paragraph toward the right half of the page.
Below it, create three community rows separated by thin rules.
Each row contains an action column, a name and description column,
and a landscape photograph.
Use community subjects such as local makers, emerging designers,
and creative conversations.

10. CHAPTER 06 — IN THEIR WORDS
Use the centered heading “SAID BY THE BRANDS WE BUILD.”
Create four testimonial columns with thin vertical separators.
Each contains the client name, role, an index, and a short quote.
Keep these as editorial text blocks rather than boxed cards.

11. CHAPTER 07 — YOUR CHAPTER
Create a spacious centered contact composition:
small emblem, large headline, bracketed contact action, and email.
Headline: “SHALL WE WRITE THE NEXT CHAPTER OF YOUR BRAND?”

12. FOOTER
Use a near-black background with off-white text.
Include:
- A vertical navigation list.
- A newsletter form with an underline-only email field and “[ SEND ]”.
- Jakarta and Singapore contact columns.
- A social-links column.
- An enormous NORTE wordmark.
- A thin legal divider, copyright, EN/ID controls, and build credit.

FLOATING MENU AND SECONDARY PAGES
Keep a dark pill-shaped “[ MENU ]” button centered near the bottom
of the viewport.
It opens a rectangular off-white dialog above the button with eight
chapter links. Each link has a number, title, and ↗ symbol.
Include a close control and email link.
Journal and community stories can open rectangular content dialogs.
Create /work and /work/:slug pages using the same editorial language:
large title, metadata, prominent photograph, body copy, and contact link.

MOTION AND RESPONSIVENESS
Use gentle 20–24px upward reveals, smooth accordion expansion,
slight image scaling on hover, and subtle dialog entrance motion.
Respect prefers-reduced-motion.
On mobile, simplify the chapter indicator, stack text columns, retain
horizontal galleries, and prevent oversized typography from overflowing.
Show the first editorial door full-width, followed by the other two
side by side. Stack community rows and testimonials vertically.
Support keyboard navigation, Escape dismissal, and focus restoration.

CONTENT AND OPTIONAL FIGMA REFINEMENT
Use coherent English demo content and complete photography throughout.
Clearly identify newsletter submission as a preview if no service exists.
The website must be complete without a Figma reference.
If a Figma file is supplied later, use it to refine exact typography,
spacing, image crops, colors, and component dimensions for pixel-perfect
alignment while preserving the working structure and interactions.