Create a modern **iso illustration hero**: navbar, **centered** headline + subtitle, **three absolutely stacked SVG layers** (same viewBox / artboard), then a **partner / trust logos** strip from inline SVG. Use **React + TypeScript + Tailwind CSS**. ## Background ### Iso hero surface (required) Apply as the root hero **full-bleed background** (`min-h-screen` / full preview height), **below** any optional video/image from the Background tab: - Iso surface fill: solid `#e8edf5`. ### Background tab media (optional layer) No background-tab media — hero shows **Iso surface fill** only (plus elevated content). - Semantic tokens below still apply to text and chrome; do not replace the Iso surface fill with `hsl(var(--background))` unless no custom surface is configured. ## Fonts - Display: **Cormorant Garamond** (weights 400) - Body: **Inter** (weights 400, 500) - **Iso hero H1**: **Petrona** (load weights 400 — headline uses **600**) - Stylesheet: `` ## Color tokens (HSL, match preview root) - Background: 201 100% 13% - Foreground: 0 0% 100% - Muted foreground: 240 4% 66% ## Navigation (Avalon-style single row) - Outer `

`: max-width `80rem`, horizontal padding `2rem`, vertical `1.5rem`. - **Header rule**: enabled — bottom edge `1px solid` color \`rgba(15, 23, 42, 0.06)\` (must match preview). - **Column frame**: centered column max-width **80rem** with vertical `1px` borders in \`rgba(15, 23, 42, 0.08)\` wrapping **nav + hero section** (headline, subtext, illustration ghost row, hero CTA, partner logos). Isometric art stays **inside** this bordered column (`relative` wrapper, `w-full`). - **Three zones** inside a `relative flex items-center justify-between gap-4` row: 1. **Left**: Logo — builder logo (SVG ~36px tall cap or wordmark `text-xl font-semibold`, body font, foreground color). 2. **Center**: Nav links — absolutely centered (`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`), hidden on small screens, `md:flex`, horizontal gap ~`2.5rem`, `text-sm font-medium`. Inactive links use **Nav links (inactive)** color style from builder tokens; **active** link uses: - Iso nav active link: solid `#0f172a`. 3. **Right**: Two pill buttons (`rounded-full`, `text-sm`, body font): - **Outline pill**: "Contact sales" — fill - Iso outline pill surface: solid `#ffffff`., border `1px solid rgba(15, 23, 42, 0.12)`, label - Iso outline pill label: solid `#171717`. - **Solid pill**: "Begin Journey" — fill - Iso solid pill surface: solid `#2563eb`., label - Iso solid pill label: solid `#ffffff`. - Nav link list (exact labels): - Home (active) → # - Studio → # - About → # - Journal → # - Reach Us → # ## Hero layout (vertical rhythm — pixel gaps) - Outer section: `px-6 md:px-10`, centered column `max-w-5xl mx-auto text-center`. - **Margin-top below nav** (before optional pre-title row): **50px**. ### Pre-title row (above H1) - **Pill** (uppercase, compact height ~14px, bold ~9px): "NEW" — - Pre-title pill surface: solid `#bffab7`.; label - Pre-title pill text: solid `#3a5845`. (add subtle dark text-shadow like preview). - **Line** beside pill (wrap on small screens): "Now live — start using Avalon with credits" — - Pre-title line: solid `hsl(215 16% 42%)`. - **Gap pre-title → H1**: **16px** - **H1 (single phrase — match builder Iso headline)** - Copy (exact, one line): "The AI platform to automate your reach" - **Wrapper**: `width: 100%`; `max-width: 56rem` on the headline container (center with `mx-auto` when aligned center). - Typography (CSS — implement with `

` or equivalent): - `font-family: 'Petrona', sans-serif;` - `font-style: normal;` - `font-weight: 600;` - `font-size: 60px;` - `line-height: 1;` (`100%` is acceptable if equivalent) - `text-align: center;` - `letter-spacing: -0.02em;` - Gradient text fill (stack two `background-image` layers, then clip to text): - Layer 1: `radial-gradient(47.57% 336.43% at 85.82% 50%, rgba(77, 151, 255, 0.66) 0%, rgba(19, 14, 46, 0) 100%)` - Layer 2 (fallback behind transparent stops): `linear-gradient(#130E2E, #130E2E)` - Clip: `-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;` - - Iso headline fill: gradient `background-image: radial-gradient(47.57% 336.43% at 85.82% 50%, rgba(77, 151, 255, 0.66) 0%, rgba(19, 14, 46, 0) 100%)` with `background-clip: text; -webkit-text-fill-color: transparent;` (fallback color: #130E2E). ### Iso headline — reference CSS (match builder) ```css /* The AI platform to automate your reach / width: 100%; max-width: 56rem; font-family: 'Petrona'; font-style: normal; font-weight: 600; font-size: 60px; line-height: 1; text-align: center; letter-spacing: -0.02em; background: radial-gradient(47.57% 336.43% at 85.82% 50%, rgba(77, 151, 255, 0.66) 0%, rgba(19, 14, 46, 0) 100%), #130E2E; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; ``` - Gap headline → subtext: 12px. - Subtext (normal wrapping / multi-line): "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work." — `clamp(0.875rem, 1vw + 0.75rem, 1rem)`, `1.45`, `styleSubtext`, `width: 100%`, `max-width: 42rem`, no forced single-line ellipsis. - Primary hero CTA (below subtext, above the illustration ghost row, centered): label "Begin Journey" — Iso-only chrome (independent of nav CTA): surface filled; if filled, - button fill: solid `#3248e2`.; border `(none)`; box-shadow `(none)`; inset `(none)`; label - button label: solid `#ffffff`. — font metrics still from Buttons → Hero CTA (`ctaHero`). - Gap subtext → hero CTA: 0px. - Gap hero CTA → illustration ghost: 0px. - Illustration stack: Background layer — `pointer-events-none` full-width rail inside the hero `relative` section, horizontally aligned with nav (`max-width: 80rem`, same `px-6 md:px-10` as hero copy). Headline/subtext/CTA stay in a foreground column (`relative z-10`). Do not break out with `w-screen`. - Layout height (flow only): below the CTA (or subtext), reserve space with a zero-height wrapper whose `padding-bottom` is `calc(30.3125% + 13.640624999999998%)` (percentage is relative to that wrapper’s width: natural aspect box 600/1920 × 97% ghost slot height; when illustration scale > 100%, add matching extra `%` so scaled art clears the partner row — match preview). - Painted stack: absolutely positioned (`left: 0; right: 0; top: -272px`) within the illustration row so vertical placement uses CSS `top`, not `translateY`, independent of the flow ghost height. - Layers: `absolute inset-0` over the aspect-ratio padded box; inside the scaled group use uniform scale `145%` (`transform: scale(1.45)`, `transform-origin: top center`). Static SVG stack: z-index 0 Back (floor / integrations — static), 10 Mid (static middle plate — no per-card motion if art is one flattened graphic), 20 Front (hub — static). Animated cards use separate DOM nodes (``, nested ``: - \`https://pub-8b59c1b8f03b4346b4d3ce57211992bf.r2.dev/images/minitool1-hero-partner-0-1778300387810.svg\` - \`https://pub-8b59c1b8f03b4346b4d3ce57211992bf.r2.dev/images/minitool1-hero-partner-2-1778300400867.svg\` - \`https://pub-8b59c1b8f03b4346b4d3ce57211992bf.r2.dev/images/minitool1-hero-partner-3-1778300443475.svg\` - \`https://pub-8b59c1b8f03b4346b4d3ce57211992bf.r2.dev/images/minitool1-hero-partner-4-1778300448427.svg\` - \`https://pub-8b59c1b8f03b4346b4d3ce57211992bf.r2.dev/images/minitool1-hero-partner-1-1778300393918.svg\` - \`https://pub-8b59c1b8f03b4346b4d3ce57211992bf.r2.dev/images/minitool1-hero-partner-5-1778304418488.svg\` Preserve intrinsic width/height — cap with `max-h-[52px] w-auto object-contain` (no fixed uniform height per logo). Prefer monochrome/black marks if assets allow. ### SVG — Partner logos strip (fallback when no hosted logo URLs) - Skip SVG strip when individual logo URLs are configured above. ## Motion (optional) - Reuse subtle fade-rise stagger from classic (`animate-fade-rise` family) for headline, subtext, illustration wrapper, and partner logos strip. ## Strict output mode (required) - Do not add extra sections/components outside this spec. - Do not rename labels, headings, or CTA text. - Keep spacing, durations, and hierarchy exactly as specified. - Keep icon usage and button presence aligned with the provided toggles/labels. - If a value is provided in quotes, reproduce it exactly.

Your AI shortcut to stunning landing pages

Freedom

Claris Hero

Founding Members Sale

Parcel

Oblivion

Eclectic