# Atelier Nord — AI website prompt and React landing page template

> Editorial architecture-studio page on warm paper with a huge serif headline, a self-drawing elevation, and a project index whose rows redraw a line-drawing preview on hover.

- Style: Editorial serif · Light
- Tags: agency, portfolio, editorial, light
- Live preview: https://pixelpapa.com/sites/site-atelier-nord

## The prompt

Paste this into Claude, Cursor, v0 or Lovable, then describe your product.

```text
Build a single-page portfolio site for "Atelier Nord", a small Nordic architecture studio that designs houses, libraries and civic buildings for harsh climates.

## Art direction
- Mood: an architecture monograph on warm uncoated paper; quiet, airy, aligned to hairlines.
- Palette: paper #f2ede3, drawing-sheet tint #ece6d8, ink #1b1a17, muted #7a7466, rust accent #b4532a (lighter #d9764a on dark). Hairlines are ink at 25%. No shadows, radii or gradients.
- Type: a characterful display serif at light weight for all headlines, up to ~150px, leading 0.9, tracking −0.045em, with one italic rust word per headline. Body in a clean grotesk at 15–17px. Labels 11px uppercase, 0.2em tracking; annotations 10px mono. Sections open with "(01) Label" on a hairline.

## Layout
1. Nav: serif wordmark with a rust full stop, four uppercase links, mono coordinates "Oslo · 59.91° N".
2. Hero: two-line headline "Quiet buildings / for loud weather.", second line indented. Below, a 12-column grid: 4 columns with a label, studio paragraph and underlined link; 8 columns with a framed architectural elevation drawn in thin SVG lines — gabled house, low wing, trees, dimension lines, crop marks, a rust sun and a mono title block.
3. Project index: left, five rows (number, large serif name, type and place, year, arrow); right, a sticky drawing sheet with a line drawing of the active project.
4. Approach, on an ink background: one large serif statement offset to the right, then three numbered principles (i, ii, iii) in columns.
5. Studio: a line-drawn floor plan with a north arrow on the left; a serif headline and a hairline facts table on the right.
6. Journal: three entries, each a hatched tile with a rust italic letter and serif title.
7. Contact: "Have a site in mind?" at display size, a large email link, two addresses, colophon.

## Motion
- Headline lines slide up from behind a mask, 1.1s, ease [0.22, 1, 0.36, 1], 120ms stagger.
- Every drawing draws itself: each SVG path animates pathLength 0→1 over 1.5s, staggered 90ms, when it enters view.
- Hovering or focusing an index row turns its name italic rust, shifts it 12px and cross-fades the sheet while the new drawing redraws.
- Sections fade up 32px when 20% visible, once.

## Rules
- React + Tailwind CSS v4 + Motion (motion/react), lucide-react icons, one file.
- No external images or fonts: draw every visual in CSS and inline SVG.
- Responsive to 360px with no horizontal scroll; the drawing sheet moves above the list.
- Accessible: semantic HTML, visible focus, AA contrast; index rows are buttons with aria-pressed.
- Respect prefers-reduced-motion. Fictional names, specific copy.

Replace the brand, copy and palette with mine: <describe your product here>
```

## Or install the code

```bash
npx shadcn@latest add "https://pixelpapa.com/r/site-atelier-nord.json"
```

The whole page is one file (406 lines) with no external images: visuals are drawn in CSS and SVG.

## Source

```tsx
"use client";
import { ArrowDown, ArrowUpRight } from "lucide-react";
import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";

const RUST = "#b4532a";
const ease = [0.22, 1, 0.36, 1] as const;

type Project = { no: string; name: string; place: string; kind: string; year: string; area: string; sheet: string; paths: string[]; accent: string };

const PROJECTS: Project[] = [
  {
    no: "01", name: "Fjordhus", place: "Lofoten", kind: "Private house", year: "2024", area: "142 m²", sheet: "Section A–A · 1:50",
    paths: ["M20 250H380", "M120 212V132L200 82L280 132V212Z", "M135 212V250M200 212V250M265 212V250", "M150 150H250V196H150ZM200 150V196", "M20 250L86 150L128 206", "M292 196L330 120L380 250", "M30 268q15-8 30 0t30 0t30 0t30 0"],
    accent: "M312 62a16 16 0 1 0 32 0a16 16 0 1 0-32 0",
  },
  {
    no: "02", name: "Bibliotek Vågen", place: "Bergen", kind: "Public library", year: "2023", area: "3 800 m²", sheet: "North elevation · 1:200",
    paths: ["M20 240H380", "M50 240V150L100 108V150L150 108V150L200 108V150L250 108V150L300 108V150L350 108V240", "M50 172H350", "M80 240V172M120 240V172M160 240V172M200 240V172M240 240V172M280 240V172M320 240V172", "M186 240V200H214V240", "M100 108V96M200 108V96M300 108V96"],
    accent: "M50 262H350M50 256V268M350 256V268",
  },
  {
    no: "03", name: "Tårn 14", place: "Oslo", kind: "Housing, 14 storeys", year: "2022", area: "6 250 m²", sheet: "West elevation · 1:250",
    paths: ["M20 256H380", "M150 256V46H250V256", "M150 76H250M150 106H250M150 136H250M150 166H250M150 196H250M150 226H250", "M250 90H268V106H250M250 150H268V166H250M250 210H268V226H250", "M150 120H132V136H150M150 180H132V196H150", "M250 256V176H330V256M270 196H310M270 216H310", "M70 256V210M70 210l-16 30h32zM70 190l-13 26h26z"],
    accent: "M200 46V22M190 22H210",
  },
  {
    no: "04", name: "Naust", place: "Senja", kind: "Boathouse & sauna", year: "2021", area: "64 m²", sheet: "Section B–B · 1:50",
    paths: ["M20 236H380", "M90 236V170A110 96 0 0 1 310 170V236", "M126 236V178A74 64 0 0 1 274 178V236", "M200 74V236", "M150 236V200H250V236", "M322 250q24 14 52 0M330 250V226l22 14", "M20 262q15-8 30 0t30 0t30 0t30 0t30 0"],
    accent: "M60 104a14 14 0 1 0 28 0a14 14 0 1 0-28 0",
  },
  {
    no: "05", name: "Kulturhus Elva", place: "Tromsø", kind: "Concert hall", year: "2019", area: "9 100 m²", sheet: "Long section · 1:400",
    paths: ["M20 244H380", "M40 244V204H100V164H160V124H230", "M230 124L346 96V244", "M230 124V244", "M100 204V244M160 164V244", "M250 150H330M250 176H330M250 202H330", "M56 204V190M76 204V190M116 164V150M136 164V150M176 124V110M196 124V110"],
    accent: "M230 124L346 96",
  },
];

const HERO_PATHS = [
  "M20 330H880",
  "M180 330V190L300 110L420 190V330",
  "M166 200L300 98L434 200",
  "M420 210H736M408 200H748V210",
  "M720 210V330",
  "M330 132V92H352V146",
  "M215 330V232H385V330M272 232V330M328 232V330",
  "M286 165a14 14 0 1 0 28 0a14 14 0 1 0-28 0",
  "M440 242H700M455 242V330M485 242V330M515 242V330M545 242V330M575 242V330M605 242V330M635 242V330M665 242V330M695 242V330",
  "M95 330V282M61 250a34 34 0 1 0 68 0a34 34 0 1 0-68 0",
  "M800 330V248M800 248l-22 42h44zM800 222l-17 34h34zM800 200l-12 26h24z",
  "M848 330V280M848 280l-15 28h30zM848 262l-11 22h22z",
  "M180 60H736M180 52V68M420 52V68M736 52V68",
  "M140 110V330M132 110H148M132 330H148",
  "M30 342l10-12M60 342l10-12M90 342l10-12M120 342l10-12M150 342l10-12M750 342l10-12M780 342l10-12M810 342l10-12M840 342l10-12M870 342l10-12",
];

function Stroke({ d, i = 0, accent, w = 1.2 }: { d: string; i?: number; accent?: boolean; w?: number }) {
  return (
    <motion.path
      d={d}
      fill="none"
      stroke={accent ? RUST : "currentColor"}
      strokeWidth={w}
      strokeLinecap="round"
      strokeLinejoin="round"
      vectorEffect="non-scaling-stroke"
      initial={{ pathLength: 0, opacity: 0 }}
      whileInView={{ pathLength: 1, opacity: 1 }}
      viewport={{ once: true }}
      transition={{ pathLength: { duration: 1.5, delay: i * 0.09, ease: "easeInOut" }, opacity: { duration: 0.2, delay: i * 0.09 } }}
    />
  );
}

function Reveal({ children, className, delay = 0 }: { children: ReactNode; className?: string; delay?: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 32 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.2 }}
      transition={{ duration: 0.9, delay, ease }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

function Rule({ n, label, right }: { n: string; label: string; right?: string }) {
  return (
    <div className="flex items-baseline justify-between gap-4 border-t border-[#1b1a17]/25 pt-4 text-[11px] tracking-[0.2em] text-[#7a7466] uppercase">
      <span>
        <span className="text-[#b4532a]">({n})</span> {label}
      </span>
      {right && <span className="hidden sm:inline">{right}</span>}
    </div>
  );
}

function Hero() {
  const line = { hidden: { y: "105%" }, shown: { y: 0, transition: { duration: 1.1, ease } } };
  return (
    <section className="mx-auto max-w-[1400px] px-5 sm:px-10">
      <header className="flex items-center justify-between py-6 text-[11px] tracking-[0.2em] uppercase">
        <a href="#" className="font-serif text-[22px] tracking-[-0.02em] normal-case">
          Atelier Nord<span className="text-[#b4532a]">.</span>
        </a>
        <nav className="hidden gap-9 md:flex">
          {["Work", "Studio", "Journal", "Contact"].map((l) => (
            <a key={l} href="#" className="relative after:absolute after:-bottom-1 after:left-0 after:h-px after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-500 hover:after:scale-x-100">
              {l}
            </a>
          ))}
        </nav>
        <span className="font-mono text-[10.5px] tracking-[0.12em] text-[#7a7466]">Oslo · 59.91° N</span>
      </header>

      <motion.div initial="hidden" animate="shown" transition={{ staggerChildren: 0.12 }} className="border-t border-[#1b1a17]/25 pt-8 sm:pt-12">
        <h1 className="font-serif text-[clamp(3.1rem,10.4vw,9.4rem)] leading-[0.9] font-light tracking-[-0.045em]">
          <span className="block overflow-hidden pb-[0.08em]">
            <motion.span variants={line} className="block">Quiet buildings</motion.span>
          </span>
          <span className="block overflow-hidden pb-[0.14em] lg:pl-[13%]">
            <motion.span variants={line} className="block">
              for <em className="pr-[0.04em] text-[#b4532a]">loud</em> weather.
            </motion.span>
          </span>
        </h1>

        <div className="mt-8 grid gap-10 pb-20 sm:mt-10 lg:grid-cols-12 lg:gap-8 lg:pb-28">
          <motion.div variants={{ hidden: { opacity: 0, y: 20 }, shown: { opacity: 1, y: 0, transition: { duration: 0.9, ease } } }} className="flex flex-col lg:col-span-4">
            <p className="text-[11px] tracking-[0.2em] text-[#7a7466] uppercase">Arkitektur &amp; landskap — est. 2009</p>
            <p className="mt-5 max-w-sm text-[17px] leading-[1.55] text-pretty">
              A fourteen-person practice in Oslo and Tromsø. We design houses, libraries and small civic buildings for places where winter does most of the talking.
            </p>
            <a href="#" className="group mt-8 inline-flex w-fit items-center gap-3 border-b border-[#1b1a17] pb-1.5 text-[11px] tracking-[0.2em] uppercase lg:mt-auto">
              Selected work <ArrowDown className="size-3.5 transition-transform duration-500 group-hover:translate-y-1" />
            </a>
          </motion.div>
          <motion.figure variants={{ hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: 0.6 } } }} className="relative lg:col-span-8">
            <div className="relative border border-[#1b1a17]/25 bg-[#ece6d8] px-3 pt-8 pb-3 sm:px-8 sm:pt-10 sm:pb-6">
              {["top-2 left-2 border-t border-l", "top-2 right-2 border-t border-r", "bottom-2 left-2 border-b border-l", "right-2 bottom-2 border-r border-b"].map((c) => (
                <span key={c} aria-hidden className={cn("absolute size-3 border-[#1b1a17]/50", c)} />
              ))}
              <svg viewBox="0 0 900 380" className="w-full" role="img" aria-label="South elevation of a timber house with a gabled living room and a long low wing">
                {HERO_PATHS.map((d, i) => (
                  <Stroke key={d} d={d} i={i} w={i < 12 ? 1.3 : 0.8} />
                ))}
                <Stroke d="M610 96a28 28 0 1 0 56 0a28 28 0 1 0-56 0" i={6} accent w={1.4} />
                <g className="fill-[#7a7466] font-mono text-[11px]">
                  <text x="300" y="46" textAnchor="middle">7 200</text>
                  <text x="578" y="46" textAnchor="middle">9 450</text>
                  <text x="126" y="224" textAnchor="middle" transform="rotate(-90 126 224)">6 800</text>
                  <text x="746" y="228">+3.60</text>
                  <text x="30" y="322">±0.00</text>
                </g>
              </svg>
              <figcaption className="mt-2 flex flex-wrap justify-between gap-x-6 gap-y-1 border-t border-[#1b1a17]/25 pt-3 font-mono text-[10px] tracking-[0.1em] text-[#7a7466] uppercase">
                <span>A-201 · South elevation</span>
                <span>Fjordhus, Lofoten</span>
                <span>1:100</span>
              </figcaption>
            </div>
          </motion.figure>
        </div>
      </motion.div>
    </section>
  );
}

function Work() {
  const [active, setActive] = useState(0);
  const p = PROJECTS[active];
  return (
    <section className="mx-auto max-w-[1400px] px-5 pb-24 sm:px-10 sm:pb-36">
      <Rule n="01" label="Index of selected work" right="2016 — 2026 · 61 built" />
      <div className="mt-8 grid gap-8 lg:grid-cols-12 lg:gap-8">
        <Reveal className="lg:order-2 lg:col-span-5">
          <div className="border border-[#1b1a17]/25 bg-[#ece6d8] p-4 sm:p-6 lg:sticky lg:top-8">
            <div className="flex justify-between font-mono text-[10px] tracking-[0.1em] text-[#7a7466] uppercase">
              <span>No. {p.no}</span>
              <span>{p.sheet}</span>
            </div>
            <div className="relative aspect-[4/3]">
              <AnimatePresence mode="wait">
                <motion.svg key={p.no} viewBox="0 0 400 300" className="absolute inset-0 size-full" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }} aria-hidden>
                  {p.paths.map((d, i) => (
                    <Stroke key={d} d={d} i={i * 0.6} />
                  ))}
                  <Stroke d={p.accent} i={3} accent w={1.4} />
                </motion.svg>
              </AnimatePresence>
            </div>
            <div className="flex items-end justify-between border-t border-[#1b1a17]/25 pt-4">
              <p className="font-serif text-3xl tracking-[-0.02em] italic">{p.name}</p>
              <p className="font-mono text-[10px] tracking-[0.1em] text-[#7a7466] uppercase">{p.area}</p>
            </div>
          </div>
        </Reveal>

        <ul className="lg:order-1 lg:col-span-7">
          {PROJECTS.map((pr, i) => {
            const on = i === active;
            return (
              <li key={pr.no} className="border-b border-[#1b1a17]/25 first:border-t">
                <button
                  type="button"
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                  aria-pressed={on}
                  className="group grid w-full grid-cols-[2.2rem_1fr_auto] items-baseline gap-x-3 py-5 text-left outline-none focus-visible:bg-[#1b1a17]/5 sm:grid-cols-[3rem_1.5fr_1fr_auto] sm:py-7"
                >
                  <span className="font-mono text-[11px] text-[#7a7466]">{pr.no}</span>
                  <span className={cn("font-serif text-[30px] leading-none tracking-[-0.03em] transition-all duration-500 sm:text-[46px]", on ? "translate-x-3 text-[#b4532a] italic" : "translate-x-0")}>
                    {pr.name}
                    <span className="mt-2 block font-sans text-[12px] tracking-normal text-[#7a7466] not-italic sm:hidden">{pr.kind} · {pr.place}</span>
                  </span>
                  <span className="hidden text-[13px] leading-snug text-[#7a7466] sm:block">
                    {pr.kind}
                    <br />
                    {pr.place}
                  </span>
                  <span className="flex items-center gap-3 font-mono text-[11px] text-[#7a7466]">
                    {pr.year}
                    <ArrowUpRight className={cn("size-4 text-[#1b1a17] transition-all duration-500", on ? "opacity-100" : "-translate-x-2 opacity-0")} />
                  </span>
                </button>
              </li>
            );
          })}
          <li className="pt-6 text-[11px] tracking-[0.2em] uppercase">
            <a href="#" className="border-b border-[#1b1a17] pb-1">Full archive (61)</a>
          </li>
        </ul>
      </div>
    </section>
  );
}

function Approach() {
  const items = [
    ["Site before sketch", "Every commission starts with four seasons of site visits. The first drawing is always a section through the ground."],
    ["Three materials, no more", "Local spruce, in-situ concrete, raw glass. If it can't be repaired with hand tools, it doesn't go on the façade."],
    ["Details for fifty years", "We draw for the second owner: gutters you can reach, cladding you can replace board by board."],
  ];
  return (
    <section className="bg-[#1b1a17] text-[#f2ede3]">
      <div className="mx-auto max-w-[1400px] px-5 py-24 sm:px-10 sm:py-36">
        <div className="flex items-baseline justify-between border-t border-[#f2ede3]/25 pt-4 text-[11px] tracking-[0.2em] text-[#a39c8b] uppercase">
          <span><span className="text-[#d9764a]">(02)</span> Approach</span>
          <span className="hidden sm:inline">Three rules we keep</span>
        </div>
        <Reveal>
          <p className="mt-12 max-w-[20ch] font-serif text-[clamp(2.3rem,6vw,5.6rem)] leading-[1.02] font-light tracking-[-0.035em] text-balance lg:ml-[16.6%]">
            We draw slowly, build once, and come back every winter to see how the timber has <em className="text-[#d9764a]">greyed.</em>
          </p>
        </Reveal>
        <div className="mt-20 grid gap-12 md:grid-cols-3 md:gap-8 lg:mt-28">
          {items.map(([t, body], i) => (
            <Reveal key={t} delay={i * 0.1} className="border-t border-[#f2ede3]/25 pt-5">
              <p className="font-serif text-lg text-[#d9764a] italic">{["i", "ii", "iii"][i]}.</p>
              <h3 className="mt-8 font-serif text-[28px] leading-tight tracking-[-0.02em]">{t}</h3>
              <p className="mt-4 max-w-sm text-[15px] leading-relaxed text-[#bdb6a6]">{body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const PLAN = [
  "M40 40H360V360H40Z",
  "M52 52H348V348H52Z",
  "M180 52V200H52M180 262V348M262 200H348M262 52V140",
  "M180 200V242M180 242A42 42 0 0 0 222 200",
  "M272 222H332M272 238H332M272 254H332M272 270H332M272 286H332M272 222V300M332 222V300",
  "M87 282a28 28 0 1 0 56 0a28 28 0 1 0-56 0",
  "M75 95H150V150H75ZM214 80H240V170H214Z",
  "M40 380H360M40 374V386M360 374V386",
];

function Studio() {
  const facts = [
    ["Founded", "2009, by Ingrid Solheim & Mats Aune"],
    ["People", "14 architects, 1 joiner, 1 dog"],
    ["Built works", "61 across Norway, Sweden and the Faroes"],
    ["Offices", "Oslo (Sagene) · Tromsø (Skansen)"],
    ["Recognition", "Nordic Timber Prize 2023 · Northern Building Award, shortlist 2021"],
  ];
  return (
    <section className="mx-auto max-w-[1400px] px-5 py-24 sm:px-10 sm:py-36">
      <Rule n="03" label="Studio" right="Currently taking briefs for 2027" />
      <div className="mt-10 grid gap-12 lg:grid-cols-12 lg:gap-8">
        <Reveal className="lg:col-span-4">
          <svg viewBox="0 0 400 400" className="w-full max-w-[340px]" role="img" aria-label="Floor plan of the Oslo studio">
            {PLAN.map((d, i) => (
              <Stroke key={d} d={d} i={i} w={i === 0 ? 1.6 : 1} />
            ))}
            <Stroke d="M330 78V44M322 56L330 44L338 56" i={5} accent w={1.4} />
            <text x="200" y="398" textAnchor="middle" className="fill-[#7a7466] font-mono text-[11px]">12 400</text>
          </svg>
          <p className="mt-4 font-mono text-[10px] tracking-[0.1em] text-[#7a7466] uppercase">Plan, level 02 — former sail loft, Sagene</p>
        </Reveal>
        <div className="lg:col-span-7 lg:col-start-6">
          <Reveal>
            <h2 className="font-serif text-[clamp(2.2rem,4.6vw,4.2rem)] leading-[1.04] font-light tracking-[-0.03em] text-balance">
              One room, one long table, and a model shop that is always <em>too small.</em>
            </h2>
          </Reveal>
          <dl className="mt-12">
            {facts.map(([k, v], i) => (
              <Reveal key={k} delay={i * 0.05} className="grid grid-cols-[7.5rem_1fr] gap-4 border-t border-[#1b1a17]/25 py-4 text-[15px] last:border-b sm:grid-cols-[12rem_1fr]">
                <dt className="pt-0.5 text-[11px] tracking-[0.2em] text-[#7a7466] uppercase">{k}</dt>
                <dd className="leading-snug">{v}</dd>
              </Reveal>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}

function Journal() {
  const posts = [
    ["Essay", "Why our drawings still start at 1:1", "Oct 2026", "9 min"],
    ["Field notes", "Fjordhus, one winter later", "Mar 2026", "6 min"],
    ["Open studio", "Forty models from the Vågen library competition", "Jan 2026", "Event"],
  ];
  return (
    <section className="mx-auto max-w-[1400px] px-5 pb-24 sm:px-10 sm:pb-36">
      <Rule n="04" label="Journal" right="Notes from site & studio" />
      <div className="mt-10 grid gap-10 md:grid-cols-3 md:gap-8">
        {posts.map(([tag, title, date, len], i) => (
          <Reveal key={title} delay={i * 0.1}>
            <a href="#" className="group block">
              <div className="relative flex aspect-[5/3] items-end overflow-hidden border border-[#1b1a17]/25 bg-[#ece6d8] p-5">
                <div aria-hidden className="absolute inset-0 opacity-60 transition-transform duration-[1200ms] ease-out group-hover:scale-110" style={{ backgroundImage: `repeating-linear-gradient(${[115, 90, 0][i]}deg, rgba(27,26,23,0.16) 0 1px, transparent 1px ${[14, 22, 18][i]}px)` }} />
                <span className="relative font-serif text-7xl leading-none font-light text-[#b4532a] italic">{["a", "b", "c"][i]}</span>
              </div>
              <p className="mt-5 flex justify-between text-[11px] tracking-[0.2em] text-[#7a7466] uppercase">
                <span>{tag}</span>
                <span>{date} · {len}</span>
              </p>
              <h3 className="mt-3 font-serif text-[26px] leading-[1.15] tracking-[-0.02em] text-balance decoration-[#b4532a] decoration-1 underline-offset-[6px] group-hover:underline">{title}</h3>
            </a>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function Contact() {
  return (
    <footer className="border-t border-[#1b1a17]/25">
      <div className="mx-auto max-w-[1400px] px-5 sm:px-10">
        <Reveal className="py-24 sm:py-36">
          <p className="text-[11px] tracking-[0.2em] text-[#7a7466] uppercase"><span className="text-[#b4532a]">(05)</span> New commissions</p>
          <h2 className="mt-8 font-serif text-[clamp(3rem,10vw,9rem)] leading-[0.92] font-light tracking-[-0.045em]">
            Have a site <em className="text-[#b4532a]">in mind?</em>
          </h2>
          <div className="mt-12 flex flex-wrap items-end justify-between gap-8">
            <a href="#" className="group inline-flex items-center gap-4 border-b border-[#1b1a17] pb-2 font-serif text-2xl tracking-[-0.02em] sm:text-4xl">
              studio@ateliernord.example
              <ArrowUpRight className="size-6 transition-transform duration-500 group-hover:translate-x-1 group-hover:-translate-y-1 sm:size-8" />
            </a>
            <p className="max-w-xs text-[15px] leading-relaxed text-[#7a7466]">Send a map pin and two sentences. We answer every enquiry within a week, usually with questions about the wind.</p>
          </div>
        </Reveal>
        <div className="grid gap-8 border-t border-[#1b1a17]/25 py-10 text-[13px] leading-relaxed sm:grid-cols-2 lg:grid-cols-4">
          <p className="font-serif text-[22px] tracking-[-0.02em]">Atelier Nord<span className="text-[#b4532a]">.</span></p>
          <p>Sagveien 23 B<br />0459 Oslo, Norway<br /><span className="text-[#7a7466]">+47 22 55 01 42</span></p>
          <p>Skansegata 7<br />9008 Tromsø, Norway<br /><span className="text-[#7a7466]">+47 77 60 01 18</span></p>
          <ul className="flex gap-6 text-[11px] tracking-[0.2em] uppercase lg:justify-end">
            {["Instagram", "Are.na", "Press"].map((l) => (
              <li key={l}><a href="#" className="border-b border-transparent pb-1 hover:border-current">{l}</a></li>
            ))}
          </ul>
        </div>
        <div className="flex flex-wrap justify-between gap-2 border-t border-[#1b1a17]/25 py-5 font-mono text-[10px] tracking-[0.1em] text-[#7a7466] uppercase">
          <span>© 2026 Atelier Nord AS · Org. 918 204 551</span>
          <span>Drawn by hand, then by plotter</span>
        </div>
      </div>
    </footer>
  );
}

export default function SiteAtelierNord() {
  return (
    <MotionConfig reducedMotion="user">
      <div className="w-full overflow-x-clip bg-[#f2ede3] font-sans text-[#1b1a17] antialiased selection:bg-[#b4532a]/25">
        <Hero />
        <Work />
        <Approach />
        <Studio />
        <Journal />
        <Contact />
      </div>
    </MotionConfig>
  );
}
```