Slate

Build a full-screen hero landing page for a productivity SaaS called "Slate" with the exact specs below.

Tech Stack
Vite + React + TypeScript
Tailwind CSS
lucide-react for icons
gsap + @gsap/react for the heading text animation (via a SplitText component)
Background
Use a fullscreen autoplay/muted/loop/playsInline <video> absolutely positioned to cover the viewport (absolute inset-0 w-full h-full object-cover). Source:


https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260425_081506_cfddbdab-90d5-49b8-aa1a-8f52de33d335.mp4
A relative z-10 container holds all foreground content with flex flex-col min-h-screen lg:h-screen lg:overflow-hidden.

Typography (global)
In index.css, apply globally:


* {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-weight: inherit; }
Liquid Glass Effect
Two reusable CSS classes:


.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;
}
Navbar
Padding: px-4 sm:px-6 lg:px-10 py-4 lg:py-5, flex with justify-between.
Left: a 22x22 white inline SVG logo (four-square chevron mark) and the wordmark "Slate" (text-white font-light text-lg tracking-tight).
Logo path: M 256 256 L 128 256 L 0 128 L 128 128 Z M 256 128 L 128 128 L 0 0 L 128 0 Z in viewBox 0 0 256 256.
Center (hidden on <lg): nav links Our Approach, Products, Story, Resources, Billing (text-white/70 hover:text-white text-sm, gap-8).
Right: a liquid-glass pill button "Start today", rounded-xl px-4 sm:px-5 py-2 text-white/90 text-xs sm:text-sm font-light, with inline background: rgba(255,255,255,0.22).
Hero Block
Centered column: flex flex-col items-center text-center px-4 sm:px-6 pt-8 sm:pt-12 lg:pt-16 pb-8 sm:pb-10 lg:pb-12.

Badge (top)
A liquid-glass rounded-full px-3 sm:px-4 py-1.5 mb-4 pill. Three children separated by spacing/divider:

Welcome to Slate 2.4! (text-white/80 text-xs sm:text-sm)
| divider (text-white/50)
Read Guide + <ArrowRight size={13} /> from lucide-react (text-white/70 hover:text-white)
Heading (animated)
A flex-column wrapper:


style={{
  fontSize: 'clamp(36px, 8vw, 76px)',
  letterSpacing: '-1.5px',
  lineHeight: 1.1,
  fontWeight: 200,
  textShadow: '0 2px 20px rgba(0,0,0,0.3)',
}}
Two stacked SplitText components (the second wrapped in <div style={{ marginTop: '-0.15em' }}>):

Line 1: "Grow Your Team"
Line 2: "Thriving"
SplitText props for both:


tag="h1"
delay={60}
duration={0.8}
ease="power3.out"
splitType="chars"
from={{ opacity: 0, y: 40 }}
to={{ opacity: 1, y: 0 }}
threshold={0.1}
rootMargin="0px"
textAlign="center"
Implementation: a GSAP-based component that splits text into characters, animates them on scroll-trigger entrance with a per-char stagger, and respects all those props.

Subtext (staggered fade-in)

<p
  className="text-white/65 max-w-md mb-6 leading-relaxed px-2 hero-fade-up"
  style={{ fontSize: 'clamp(13px, 1.5vw, 17px)', lineHeight: 1.6, animationDelay: '0.6s' }}
>
  Build a thriving hub where your smartest ideas grow<br className="hidden sm:block" />
  smoothly, and your dreams arrive sooner than ever.
</p>
CTA Buttons (staggered fade-in)
Container: flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4 w-full sm:w-auto max-w-xs sm:max-w-none.

Primary (animationDelay: '0.85s', inline background: rgba(255,255,255,0.22)):

liquid-glass rounded-xl px-6 sm:px-7 py-2.5 text-white font-light flex items-center justify-center gap-2.5 transition-all duration-200 group hero-fade-up
Label "Start today" (fontSize: 15)
<ArrowUpRight size={18} className="group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
Secondary (animationDelay: '1.0s'):

Same classes minus the inline background, plus hover:bg-white/8
Label "Watch demo" (fontSize: 15), no icon
Fade-up animation CSS

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-fade-up {
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}
Constraints
No purple/indigo hues. White text on the video, glass surfaces use rgba(255,255,255,*) only.
Fully responsive across mobile, tablet, desktop.
No drop shadows on glass surfaces other than the inner highlight already specified.
All icons from lucide-react only.