Vitara

Create a modern healthcare AI landing page with a full-screen video background hero section with the following exact specifications:

VIDEO BACKGROUND:

Use this exact CloudFront video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260402_134434_5de46cb4-38e7-42a6-a8bc-6e62b2fd6c7b.mp4
Video should autoplay, loop, be muted, and play inline
Position: absolute, full width/height, object-fit: cover with object-position: bottom
Add a 32px high gradient overlay at the bottom that fades from transparent to #2B3534
FONTS:

Import Inria Serif (weights: 300, 400, 700) from Google Fonts in the HTML head
Body text: 'Helvetica Neue', Helvetica, Arial, sans-serif
All headings: 'Inria Serif' serif with letter-spacing: -0.07em
NAVIGATION BAR:

White background with padding
Logo: "Vitara" in 2xl font, semibold, gray-900
Menu items (desktop only, hidden on mobile): Home, Services, Team, Membership, Resources in gray-600 with hover:gray-900
Right side: "Login" text button and "Sign up" button (gray-800 bg, white text, rounded-lg)
HERO CONTENT:

Main heading (4xl on mobile, 6xl on tablet, 7xl on desktop): "Smart Care Begins with Data + Insight"
Subheading (lg to xl): "Turn medical insights into personalized wellness plans."
Both text elements use a custom AnimatedText component that:
Splits text into words
Each word animates with fadeUp animation (opacity 0 to 1, translateY 20px to 0, 0.6s ease-out)
Staggered delay of 0.1s per word
Animation fill mode: forwards
INTERACTIVE INPUT BOX:

Max width 36rem, centered
Background color: #2B3534
Rounded 2xl corners with 2xl shadow
Contains:
Textarea with placeholder: "Welcome to Vitara — your care intelligence hub!"
Transparent background, white text, gray-400 placeholder, min-height: 60px
Three action buttons with Lucide React icons:
"Start Wellness Check" (Zap icon)
"Chat with MedAI" (Stethoscope icon)
"View Insights" (BarChart3 icon)
Buttons: white border (15% opacity), rounded-full, hover effect (white bg 10% opacity)
Horizontal scroll with hidden scrollbar and right-side fade gradient
Send button: white background, gray-800 text, rounded-lg, with Send icon from Lucide React
SECOND SECTION:

Full-width background: #2B3534
Two-column grid (single column on mobile)
Left: Large heading "Your proactive shield against disease" (3xl to 6xl, white, Inria Serif font)
Right: Body text "We blend smart technology & clinical wisdom to provide tailored, preventive, & insight-rich medicine for tomorrow." (gray-300, max-width sm, right-aligned)
Both use the same AnimatedText component with word-by-word fade-up animation
CSS UTILITIES NEEDED:


.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeUp { animation: fadeUp 0.6s ease-out; }
TECH STACK:

React with TypeScript
Tailwind CSS
Lucide React for icons (Send, Zap, Stethoscope, BarChart3)
Vite build tool
RESPONSIVE DESIGN:

Mobile-first approach
Navigation menu hidden on mobile (md:flex)
Font sizes scale from mobile (text-4xl) to desktop (text-7xl)
Padding adjusts: px-6 on mobile, px-12 on tablet, px-20 on desktop
Grid becomes single column on mobile
KEY COLORS:

Primary dark: #2B3534
Text dark: gray-900
Text medium: gray-600
Text light on dark: white and gray-300
Button primary: gray-800
This creates a premium, sophisticated healthcare AI landing page with smooth animations, a cinematic video background, and clean typography using Inria Serif for headlines.