Brandt

# Recreate this reference faithfully: Brandt

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `brandt` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/brandt/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/brandt.webp

- Original reference visual: https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/60162/brandt-2ZGKQdSZMKD2fueo7HMWp8nFKgy0sx
- Exact source page: https://www.framer.com/marketplace/templates/brandt/

- Source format: Framer
- Creator credit: Svaco on Framer
- Source terms recorded by Foxora: Free · Framer Limited License

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://brandt.framer.website/
- Original listing and terms: https://www.framer.com/marketplace/templates/brandt/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: I help SaaS and B2B teams increase sign-ups, demos, and conversions through clear positioning and proven layouts.; BRANDT®; Projects,; About,; Contact; Book a call.
- Required layout zones: Brandt - Portfolio site for SaaS designers navigation; I help SaaS and B2B teams increase sign-ups, demos, and conversions through clear positioning and proven layouts. hero copy; Minimal typography, strict modular grids, crisp case-study media, and an understated professional palette.; first visible strategic positioning transition.
- Required working interactions: Book a call; strategic positioning; metrics-led case studies; lead qualification.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: white canvas; black type; neutral product mockups.

### Authority acceptance checks

- The normal root matches https://brandt.framer.website/, not merely the same design category.
- The first fold contains the captured copy: I help SaaS and B2B teams increase sign-ups, demos, and conversions through clear positioning and proven layouts..
- Navigation preserves: BRANDT® / Projects, / About, / Contact / Book a call.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "brandt",
  "kind": "Website",
  "source": "https://www.framer.com/marketplace/templates/brandt/",
  "poster": "https://showcase.foxora.studio/thumbnails/brandt.webp",
  "motion": null,
  "originalVisual": "https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/60162/brandt-2ZGKQdSZMKD2fueo7HMWp8nFKgy0sx",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 1050,
    "aspectRatio": 1.3333
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-B87EEDA6

- Product domain: Designer Portfolio website.
- Required root artifact: A faithful, responsive reconstruction of the Brandt homepage hero and first-fold transition.
- Root view: Brandt homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 1050px, aspect ratio 1.3333.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Minimal typography, strict modular grids, crisp case-study media, and an understated professional palette.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible designer portfolio workflow real and deterministic. Prioritize strategic positioning, metrics-led case studies, lead qualification, then add only the interactions implied by the source.
- Visible product entities: Designer Portfolio; strategic positioning; metrics-led case studies; lead qualification; primary call to action.
- Signature moments that must survive: strategic positioning; metrics-led case studies; lead qualification.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: brandt; designer; portfolio; strategic; positioning.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: strategic positioning.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Minimal typography, strict modular grids, crisp case-study media, and an understated professional palette.
- Motion or interaction: Implement only the transitions and state changes implied by strategic positioning, metrics-led case studies, lead qualification; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining strategic positioning with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://brandt.framer.website/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 1050px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 1050px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement strategic positioning as the dominant artifact.
5. Supporting reference cues: implement metrics-led case studies; lead qualification.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Brandt homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: strategic positioning state; metrics-led case studies state; lead qualification state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic designer portfolio website data for Designer Portfolio, strategic positioning, metrics-led case studies, lead qualification, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 1050px and compare side by side with https://showcase.foxora.studio/thumbnails/brandt.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Brandt, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the brandt homepage hero and first-fold transition in the designer portfolio website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: strategic positioning; metrics-led case studies; lead qualification.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.