# Asme — Agency v6
Single-page landing site. React + TypeScript + Tailwind CSS + motion/react + lucide-react. The entire page has a bg-black background. The font is Instrument Serif (italic and regular), registered as `instrumentSerif` in the font registry.
## Liquid glass CSS (in theme.css)
Reusable `.liquid-glass` class used on every glass element:
- `background: rgba(255, 255, 255, 0.01)` with `luminosity` blend mode
- `backdrop-filter: blur(4px)`
- No border, `box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)`
- `position: relative`, `overflow: hidden`
- `::before` pseudo-element creates a gradient border effect using `mask-composite: exclude` with a 1.4px padding and a vertical gradient fading white at edges to transparent in the middle
## Section 1: Hero (full-viewport, in page.tsx)
Full-screen (`min-h-screen`) container with `overflow-hidden relative flex flex-col`.
**Background video:** absolute, covers the entire viewport (`absolute inset-0 w-full h-full object-cover object-bottom`). Attributes: `muted`, `autoPlay`, `playsInline`, `preload="auto"`. Starts at `opacity: 0`.
**Video fade logic (vanilla JS via refs, no CSS transitions):**
- On `canplay`: play the video, then animate opacity from 0 to 1 over 500ms using `requestAnimationFrame`
- On `timeupdate`: when remaining time <= 0.55s, animate opacity from current to 0 over 500ms
- On `ended`: set opacity to 0, wait 100ms, reset `currentTime` to 0, play again, fade back to 1 over 500ms
- Creates a seamless loop with smooth crossfade to black between plays
**Navbar** (relative z-20, px-6 py-6):
- Liquid-glass rounded-full pill, max-w-5xl mx-auto, px-6 py-3, flex between left/right
- Left: Globe icon (24px, white) + "Asme" text (white, font-semibold, text-lg). Hidden on mobile: nav links "Features", "Pricing", "About" (text-white/80 hover:text-white text-sm font-medium, gap-8 ml-8)
- Right: "Sign up" text button (white, text-sm, font-medium) + "Login" button (liquid-glass rounded-full px-6 py-2, white text-sm font-medium)
**Hero content** (relative z-10, flex-1 flex flex-col items-center justify-center, px-6 py-12 text-center, -translate-y-[20%]):
- Heading: text-7xl md:text-8xl lg:text-9xl, white, tracking-tight whitespace-nowrap, font-heading. Text: `Know it then <em className="italic">all</em>.`
- Email input: max-w-xl w-full. Liquid-glass rounded-full pill with pl-6 pr-2 py-2 flex items-center gap-3. Inside: transparent `<input>` with placeholder "Enter your email" (text-white placeholder:text-white/40). White circular submit button (bg-white rounded-full p-3 text-black) containing ArrowRight icon (20px)
- Subtitle: text-white text-sm leading-relaxed px-4. "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates."
- Manifesto button: liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors
**Social icons footer** (relative z-10, flex justify-center gap-4 pb-12):
- Three liquid-glass rounded-full p-4 buttons for Instagram, Twitter, Globe icons (20px). text-white/80 hover:text-white hover:bg-white/5 transition-all
## Section 2: About (about-section.tsx)
Uses motion/react `useInView` (ref, { once: true, margin: "-100px" }). bg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden. Subtle radial gradient overlay: `bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.03)_0%,_transparent_70%)]`.
- Label: "About us" in text-white/40 text-sm tracking-widest uppercase. Animates: opacity 0, y 20 to opacity 1, y 0, duration 0.6
- Heading: text-4xl md:text-6xl lg:text-7xl text-white leading-[1.1] tracking-tight. Animates: opacity 0, y 40 to opacity 1, y 0, duration 0.8, delay 0.1. Text structure:
- `Pioneering` then `ideas` (Instrument Serif italic, text-white/60) `for`
- Line break (hidden on mobile)
- `minds that` then `create, build, and inspire.` (all Instrument Serif italic, text-white/60)
## Section 3: Featured video (featured-video-section.tsx)
bg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6 overflow-hidden. Max-w-6xl. Rounded-3xl overflow-hidden aspect-video container that animates opacity 0, y 60 to opacity 1, y 0, duration 0.9.
- Video: w-full h-full object-cover, muted, autoPlay, loop, playsInline, preload="auto"
- Gradient overlay on video: bg-gradient-to-t from-black/60 via-transparent to-transparent
- Bottom overlay content (absolute bottom-0 left-0 right-0 p-6 md:p-10): flex row on desktop, column on mobile
- Left: liquid-glass rounded-2xl p-6 md:p-8 max-w-md card. Label "Our approach" (text-white/50 text-xs tracking-widest uppercase mb-3). Body text (text-white text-sm md:text-base leading-relaxed): "We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation."
- Right: "Explore more" button (liquid-glass rounded-full px-8 py-3, white text-sm font-medium) with whileHover scale 1.05 and whileTap scale 0.95
## Section 4: Philosophy / Innovation x Vision (philosophy-section.tsx)
bg-black py-28 md:py-40 px-6 overflow-hidden. Max-w-6xl.
- Heading: text-5xl md:text-7xl lg:text-8xl text-white tracking-tight mb-16 md:mb-24. Animates opacity 0, y 40 to opacity 1, y 0, duration 0.8. Text: `Innovation` then `x` in Instrument Serif italic text-white/40, then `Vision`
- Two-column grid (grid-cols-1 md:grid-cols-2 gap-8 md:gap-12):
- Left: video in rounded-3xl overflow-hidden aspect-[4/3]. Animates from opacity 0, x -40. muted, autoPlay, loop, playsInline, preload="auto"
- Right: animates from opacity 0, x 40. Two text blocks separated by a w-full h-px bg-white/10 divider
- Block 1: label "Choose your space" (text-white/40 text-xs tracking-widest uppercase mb-4). Body (text-white/70 text-base md:text-lg leading-relaxed): "Every meaningful breakthrough begins at the intersection of disciplined strategy and remarkable creative vision. We operate at that crossroads, turning bold thinking into tangible outcomes that move people and reshape industries."
- Block 2: label "Shape the future". Body: "We believe that the best work emerges when curiosity meets conviction. Our process is designed to uncover hidden opportunities and translate them into experiences that resonate long after the first impression."
## Section 5: Services / What we do (services-section.tsx)
bg-black py-28 md:py-40 px-6 overflow-hidden. Max-w-6xl. Subtle radial gradient: `bg-[radial-gradient(ellipse_at_center,_rgba(255,255,255,0.02)_0%,_transparent_60%)]`.
- Header row: flex between "What we do" (text-3xl md:text-5xl text-white tracking-tight) and "Our services" label (text-white/40 text-sm, hidden on mobile). Animates opacity 0, y 30 to visible, duration 0.7
- Two-card grid (grid-cols-1 md:grid-cols-2 gap-6 md:gap-8):
- Each card: liquid-glass rounded-3xl overflow-hidden with group class. Animates opacity 0, y 50 to visible, duration 0.8, staggered by 0.15s
- Card video area: aspect-video, object-cover, transition-transform duration-700 group-hover:scale-105. Gradient overlay: bg-gradient-to-t from-black/40 to-transparent
- Card body (p-6 md:p-8): tag label (uppercase, tracking-widest, text-white/40 text-xs), ArrowUpRight icon in a liquid-glass rounded-full p-2 circle, title (text-white text-xl md:text-2xl mb-3 tracking-tight), description (text-white/50 text-sm leading-relaxed)
- Card 1: tag "Strategy", title "Research & Insight", description "We dig deep into data, culture, and human behavior to surface the insights that drive meaningful, lasting change."
- Card 2: tag "Craft", title "Design & Execution", description "From concept to launch, we obsess over every detail to deliver experiences that feel effortless and look extraordinary."