8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

topaz-single

byEugene | Digital Scholar

Build a single-page luxury brand landing (navbar + full-viewport hero only). Stack: React 18 + TypeScript + Vite + Tailwind CSS 3. No extra UI kits. Use lucide-react only for the Flower2 icon. Page title: Aurevon. Root wrapper: bg-black. html, body { overflow-x: hidden }. Global reset: margin: 0; padding: 0; box-sizing: border-box. Fonts Load Google Fonts exactly: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap Utility: .font-instrument { font-family: 'Instrument Serif', serif; } Use Instrument Serif only for the hero H1 and overlay nav links. Logo, nav pill, body copy, and CTA use Tailwind’s default sans (ui-sans-serif, system-ui, …). Easing (reuse everywhere) Entrance: cubic-bezier(0.16, 1, 0.3, 1) Menu overlay / hamburger morph: cubic-bezier(0.76, 0, 0.24, 1) NAVBAR (fixed) Fixed top-0 left-0 w-full z-50. Transparent until window.scrollY > 40, then bg-black/80 backdrop-blur-md. Transition: duration-500. Inner bar: max-w-[1440px] mx-auto px-6 md:px-10 flex items-center justify-between h-16 md:h-20. Left — logo Text link “Aurevon”, text-white text-xl md:text-2xl font-semibold tracking-tight z-50. Center — desktop only (hidden md:flex) Pill button: px-5 py-2 rounded-full border border-white/20 text-white/90 text-sm hover:bg-white/10, items-center gap-2. Label Navigate when closed, Close when overlay is open. Toggles overlay. Right — desktop only (hidden md:flex) Flower2 from lucide-react: w-7 h-7 text-white/90. Right — mobile (md:hidden) Hamburger w-8 h-8, flex-col items-center justify-center gap-1.5, aria-label="Toggle menu". Two bars: w-6 h-[2px] bg-white. When open: top bar rotate-45 translate-y-[4px], bottom -rotate-45 -translate-y-[4px]. Morph duration-500 with overlay easing. Navbar entrance (on load) After 100ms, set mounted. Elements start opacity-0 -translate-y-4, end opacity-100 translate-y-0. duration-700 + entrance easing. Delays when mounted: logo 0ms, Navigate/hamburger 200ms, flower 400ms. When overlay is open, set document.body.style.overflow = 'hidden'; restore on close. FULL-SCREEN OVERLAY MENU fixed inset-0 z-40 bg-black (under navbar z-50). Closed: opacity-0 invisible. Open: opacity-100 visible. Transition duration-700 + overlay easing. Center content: flex flex-col items-center justify-center. Links, stacked gap-8, centered: Home Story Collection Inquire Each: href="#", text-white font-instrument text-4xl md:text-6xl hover:opacity-60. Closed: opacity-0 translate-y-6. Open: opacity-100 translate-y-0. Duration 600ms, overlay easing. Stagger when opening: 150 + index * 80 ms (Home 150, Story 230, Collection 310, Inquire 390). Delay 0 when closing. Clicking a link closes the overlay. HERO (full viewport) <section class="relative w-full h-screen overflow-hidden flex items-end justify-center"> Background video (must be this exact URL) https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260819_212700_3bb9329b-5c50-4257-a09b-ca85cf3654a3.mp4 Wrapper: absolute inset-0. Starts scale-105 opacity-0, after 300ms mounted becomes scale-100 opacity-100. Transition duration-[1400ms] + entrance easing. <video>: that src, autoPlay muted loop playsInline, class="w-full h-full object-cover". No overlay gradient. Video is the only background. Foreground (bottom-centered) relative z-10 text-center px-6 pb-16 md:pb-24 max-w-4xl mx-auto H1 (Instrument Serif): font-instrument text-white text-[2.5rem] leading-[0.95] sm:text-5xl md:text-6xl lg:text-7xl mb-5 md:mb-6 Exact copy, with a line break only from sm up: A carefully curated<br class="hidden sm:block" /> collection beyond compare On mobile it is one wrapping line; from sm it is two lines: “A carefully curated” then “collection beyond compare”. Subcopy text-white/70 text-base md:text-lg mb-8 md:mb-10 max-w-md mx-auto Copy: Reserve your place in our private gallery. CTA <a href="#"> “Join the waitlist” inline-block px-8 py-3.5 bg-white text-black text-sm md:text-base font-medium rounded-full hover:bg-white/90 Hero text/CTA entrance All three start opacity-0 translate-y-8, end opacity-100 translate-y-0. duration-900 + entrance easing. Mounted after 300ms, then delays: H1 400ms, subcopy 600ms, CTA 800ms. Delay 0 before mounted. RESPONSIVE CHECKLIST (must match) Breakpoint Behavior Default / mobile Nav height 64px, padding-x 24px. Hamburger only (no Navigate pill, no flower). Hero padding-bottom 64px. H1 2.5rem / line-height 0.95, no forced H1 break. Subcopy text-base, CTA text-sm. Overlay links text-4xl. sm (640px) H1 text-5xl; H1 line break appears. md (768px) Nav height 80px, padding-x 40px. Desktop: logo | Navigate pill | flower. Overlay links text-6xl. Hero pb-24. H1 text-6xl, mb-6. Subcopy text-lg, mb-10. CTA text-base. lg (1024px) H1 text-7xl. No other sections, footer, or extra chrome. No video controls, no poster, no extra color overlays. Recreate navbar + hero pixel-faithful to these classes, timings, copy, and the CloudFront URL above.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 7

System Requirements Document for topaz-single

1. Introduction

The project "topaz-single" aims to create a single-page luxury brand landing page titled "Aurevon." The page is designed to convey a sense of luxury and exclusivity through a minimalistic and editorial design approach. It features a fixed navbar and a full-viewport hero section, utilizing React 18, TypeScript, Vite, and Tailwind CSS 3. The target audience is visitors interested in high-end luxury brands.

2. System Overview

The "Aurevon" landing page is a single-page application that combines a fixed responsive navbar with a full-viewport hero section. The design emphasizes bold minimalism and editorial confidence, using a monochrome palette with red accents. The page is built using React 18, TypeScript, Vite, and Tailwind CSS 3, with no additional UI kits. The page is accessible without requiring user authentication and is intended for public viewing.

2a. Product Interpretation and Delivery Boundary

  • Delivery and Access: The page is publicly accessible and does not require user authentication. It is designed as a single-page application with no additional sections, footers, or extra chrome.
  • Current Boundaries: The page includes only the navbar and hero section as specified. No additional features or sections are included.
  • Future Boundaries: There are no current plans to expand beyond the specified single-page design.
Page 2 of 7

2b. Source Content Inventory

  • Hero Background Video:
    • URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260819_212700_3bb9329b-5c50-4257-a09b-ca85cf3654a3.mp4
    • Usage: Full-viewport hero background video.

2c. Page Content and Component Coverage

Aurevon

  • Navbar

    • Fixed position, transparent until scrolled, then transitions to a black background with blur.
    • Includes logo, Navigate/Close pill button, Flower2 icon, and hamburger menu.
    • Responsive behavior: Desktop shows logo, pill button, and icon; mobile shows hamburger menu.

  • Full-Screen Overlay Menu

    • Opens with a transition, displaying navigation links: Home, Story, Collection, Inquire.
    • Links are styled with large typography and staggered entrance animations.

  • Hero Section

    • Full-viewport video background with specified URL.
    • Foreground text includes a headline, subcopy, and a CTA button.
    • Responsive typography and entrance animations for text and CTA.
Page 3 of 7

3. Functional Requirements

  1. As a Landing-page visitor, I should see a fixed navbar that transitions from transparent to black on scroll.

    • Provenance: Explicit
    • Lifecycle: On page load and scroll
    • Acceptance: Navbar transitions as specified.

  2. As a Landing-page visitor, I should be able to open a full-screen overlay menu with navigation links.

    • Provenance: Explicit
    • Lifecycle: On clicking the Navigate/Close pill or hamburger menu
    • Acceptance: Overlay opens and closes with specified animations.

  3. As a Landing-page visitor, I should see a full-viewport hero with a video background and text overlay.

    • Provenance: Explicit
    • Lifecycle: On page load
    • Acceptance: Hero displays video and text with specified animations.

  4. As a Landing-page visitor, I should be able to click the "Join the waitlist" CTA.

    • Provenance: Explicit
    • Lifecycle: On clicking the CTA
    • Acceptance: CTA is clickable and styled as specified.

4. User Personas

  • Landing-page visitor
    • Responsibilities: View the luxury brand hero, open and navigate the overlay menu, and activate the waitlist CTA.
    • Outcomes: Experience the luxury brand presentation and interact with the page elements.
Page 4 of 7

5. Core User Flows

  1. Viewing the Landing Page

    • Step 1: Visitor accesses the Aurevon page.
    • Step 2: Navbar loads with entrance animations.
    • Step 3: Hero section displays with video background and text overlay.

  2. Interacting with the Navbar

    • Step 1: Visitor scrolls, causing the navbar to transition to a black background.
    • Step 2: Visitor clicks the Navigate/Close pill or hamburger menu.
    • Step 3: Full-screen overlay menu opens with navigation links.

  3. Engaging with the Hero Section

    • Step 1: Visitor views the hero section with video background.
    • Step 2: Visitor reads the headline and subcopy.
    • Step 3: Visitor clicks the "Join the waitlist" CTA.
Page 5 of 7

6. Visuals Colors and Theme

  • Muse: Tobias van Schneider
  • Palette:
    • Background: #000000
    • Surface: #0D0D0D
    • Text: #FFFFFF
    • Primary: #FFFFFF
    • Accent: #FF0000
    • Muted: #333333
  • Typography:
    • Headings: Instrument Serif
    • Body: Source Sans Pro
    • Scale: 2.5rem / 40/28/18
  • Shape Language: Sharp corners, bold lines
  • Layout: Asymmetric editorial grid
  • Motion: Slow crossfades, restrained tempo

7. Signature Design Concept

The Aurevon landing page features a full-viewport video hero with elegant text overlay, creating an immersive luxury brand experience. The fixed navbar transitions smoothly from transparent to black on scroll, and the full-screen overlay menu uses large, impactful typography.

Page 6 of 7

8. Interaction Model & Motion Direction

  • Interaction Model: Static
  • Motion Tempo: Restrained
  • Hero Dimensionality: Flat
  • Landing Hero Motion Brief:
    • Focal Subject: Full-viewport video hero
    • Thesis: Video background with text overlay, using staggered entrance animations
    • Motion Vocabulary: Slow crossfades, type reveals
    • First Frame: Video background with initial text opacity
    • Reduced-Motion State: Static text overlay

9. Non-Functional Requirements

  • Performance: Page should load quickly and efficiently, leveraging Vite for optimized builds.
  • Accessibility: Ensure text contrast and readability for all users.
  • Responsiveness: Page must adapt to various screen sizes as specified in the responsive checklist.

10. Tech Stack

  • Frontend: React 18, TypeScript, Vite, Tailwind CSS 3
  • Icons: Lucide-react for Flower2 icon
  • Fonts: Google Fonts for Instrument Serif
Page 7 of 7

11. Assumptions and Constraints

  • Assumptions:
    • The page will remain a single-page application with no additional sections.
  • Constraints:
    • Use only the specified technologies and design elements.
    • Maintain the single-page format as per the authoritative source.

12. Glossary

  • Aurevon: The title of the luxury brand landing page.
  • CTA: Call to Action, specifically the "Join the waitlist" button.
  • Hero Section: The main visual section of the page featuring a video background.
  • Navbar: The fixed navigation bar at the top of the page.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Aurevon: View hero section
Aurevon: Scroll navbar transition
Aurevon: Open overlay menu
Aurevon: Click waitlist CTA

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Aurevon: View hero section
Aurevon: Scroll navbar transition
Aurevon: Open overlay menu
Aurevon: Click waitlist CTA