Nexora Features

Build a full-width "Features" section on a pure black (#000) background using TanStack Start (route file src/routes/index.tsx) and Tailwind CSS v4 (tokens in src/styles.css). Match the following spec exactly.

Global setup (src/styles.css)

Set body background to #000, text color #fff, and font-family to "Helvetica Neue", Helvetica, Arial, sans-serif. Add a .liquid-glass button class with this exact CSS:

.liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } Add card classes (both same color, plain #252B4C, rounded 1.25rem, position: relative; overflow: hidden;):

.feature-card, .feature-card-dark { background: #252B4C; border-radius: 1.25rem; position: relative; overflow: hidden; } Components

LiquidButton: a <button> with classes liquid-glass rounded-xl px-5 py-2.5 text-sm text-white/90 transition-transform hover:scale-[1.02]. Hover animation = subtle scale-up to 1.02. CardVideo({ src }): an absolutely positioned <video> filling the card: className="absolute inset-0 h-full w-full object-cover", attributes autoPlay muted loop playsInline, 100% opacity, no overlay. Layout

<main> with min-h-screen bg-black px-6 py-16 md:px-12 lg:px-20.

Header (mb-10 flex flex-col gap-6 md:flex-row md:items-start md:justify-between): Left: stacked headline with two lines, sizes text-2xl md:text-4xl lg:text-[2.75rem], font-normal tracking-tight. Text wraps naturally (no whitespace-nowrap). Line 1 (white): Curiosity-led tools for truth-seeking minds. Line 2 (text-white/40, mt-2): Ask with confidence. Powered by AI. Right (md:pt-3 shrink-0): <LiquidButton>Start Using Nexora</LiquidButton>. Grid: grid grid-cols-1 gap-5 md:grid-cols-3 md:grid-rows-2.

All cards use p-7 flex flex-col, contain a <CardVideo> as the first child, and all text wrappers use relative so they sit above the video.

Card 01 — feature-card md:row-span-2 min-h-[28rem] (tall left column) Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260427_104605_2700410c-4303-4d44-a368-e1b8c84eca8c.mp4 Top row (flex justify-between text-sm text-white/60): 01/ left, Found in Curiosity right. Spacer (flex-1). Bottom block:

<h2 class="text-xl md:text-2xl font-medium text-white">Great Questions Unearth<br/>Hidden Gems</h2> Divider: mt-4 h-px w-full bg-white/20. Paragraph (mt-4 text-xs text-white/70): The best answers come from asking the right questions.<br/>Start your search with purpose today. Card 02 — feature-card-dark md:col-span-2 (wide top right) Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260427_104731_bfd355f7-1f84-4f81-ad88-52c2bca70bad.mp4 Top row (flex justify-between): heading left <h2 class="text-xl md:text-2xl font-medium text-white">Where Knowledge Begins</h2>, 02/ right (text-sm text-white/60). Spacer: flex-1 min-h-48. Card 03 — feature-card Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260427_104758_e7d78f06-3700-4862-8c9b-595ed447e81a.mp4 Top row (text-sm text-white/60): In Real Time left, 03/ right. Paragraph (mt-10 text-xs text-white/80): From complex topics to quick facts, trust what<br/>you learn from every search you perform. Spacer (flex-1). Bottom (mt-6): <LiquidButton>Start Using Nexora</LiquidButton>. Card 04 — feature-card Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260427_105007_f90de0f3-0f93-44d4-9b71-7446f78c4bd2.mp4 Top row (text-sm text-white/60): Just Ask left, 04/ right. Spacer (flex-1). Bottom paragraph (text-center text-xs text-white/80): Users Trust Our Search Models. Animations / fonts

Only animation: liquid-glass button hover scale to 1.02 via Tailwind transition-transform hover:scale-[1.02]. Videos auto-play looping at 100% opacity, no overlay/tint. Font: Helvetica Neue globally, weights font-normal for headline, font-medium for card titles.