I'll build the Amply homepage with the exact editorial aesthetic described. Let me start by reading the existing project files and setting up the typography.
Now let me install the fonts package for the motion library, and then build out all the components.
Now let me build the entire site. I'll update globals.css, layout.tsx, and create all the section components.
Now let me create all the section components and the main page:
Now let me write the main page that composes all sections:
Let me check the build output to make sure everything renders properly:
The server started cleanly. Let me check for any client-side compilation issues by waiting a moment for the page to compile:
Everything compiled cleanly. The Amply homepage is built with all 8 sections exactly as specified:
- Nav — Serif "Amply" logo left, mono small-caps links (Work, About, Contact) right. No CTA button.
- Hero — Large serif headline with the exact copy, mono subhead in muted tone, single "See the work →" text link below the fold line.
- Proof bar — Single-line outcomes with mono "Recent outcomes" label, inline client results separated by middots, bordered above and below.
- The Situation — Mono eyebrow "THE PROBLEM", two-column layout with serif statement left and body copy right.
- Services — Three workstreams (Brand & Visual Identity, Web Design, Webflow Development) separated by thin rules with mono numbering, serif titles, and sans descriptions.
- Case study callout — Full-width dark section with subtle grain texture, "Awardco" in large serif, $165M accent number, contextual copy, and case study link.
- The close — Two serif lines about strategic-first design, then a single "Start a conversation →" CTA link.
- Footer — Logo left, email right, single-line copyright.
The design uses a strict 4-color palette (#0A0A0A dark background, #F0EDE6 off-white type, #7A766E muted, #C9A96E muted amber accent), pairs Instrument Serif for headlines with DM Mono for labels and Inter for body, and applies subtle staggered fade-in animations with underline-reveal hover states.
The screenshot shows Amply's actual site with a dark-mode palette featuring deep black backgrounds, white headings, muted gray body text, and purple/violet accents throughout (top banner gradient, icon highlights, button states). Let me update the color system to match this.
Let me first read the current files to make precise edits:
Now I have all the context. The key change is swapping the warm amber/gold accent (#C9A96E) and warm gray muted (#7A766E) tones for a purple/violet accent palette with cooler neutrals to match the screenshot. The primary color mapping from the image:
- Background:
#0B0B0F(deep blue-black) - Foreground:
#F5F5F7(clean white) - Muted foreground:
#8A8A9A(cool gray with slight violet tint) - Accent:
#9B6DFF(purple/violet) - Card bg:
#141418(slightly lighter dark) - Border:
#1E1E24(subtle cool gray)
I only need to update globals.css since all components use the semantic tokens:
Now update the selection highlight and link underline accent colors to match:
The entire color palette has been updated by only editing globals.css -- since every component references the semantic design tokens (text-foreground, text-muted-foreground, text-accent, bg-background, bg-card, border-border), the purple/violet theme propagates across all 8 sections automatically. The palette now matches the screenshot: deep blue-black background (#0B0B0F), clean white text (#F5F5F7), cool gray muted (#8A8A9A), and purple accent (#9B6DFF) for links, highlights, and the case study dollar figure.