Transform Data
HERO SECTION CREATION PROMPT
Create a modern hero section with a looping video background and the following specifications:
Video Background:
Size: 115% width and height
Position: Centered horizontally, anchored to top with object-top focal point
Custom JavaScript fade system (NO CSS transitions):
250ms requestAnimationFrame-based fade-in on load/loop start
250ms fade-out when 0.55 seconds remain before video end
fadingOutRef boolean prevents re-triggering fade-out from repeated timeUpdate events
On ended: opacity set to 0, 100ms delay, reset to currentTime = 0, play, fade back in
Each new fade cancels running animation frames to prevent competing animations
Fades resume from current opacity (no snapping)
Fonts Required:
Schibsted Grotesk (weights: 400, 500, 600, 700)
Inter (weights: 400, 500, 600, 700)
Noto Sans (weights: 400, 500, 600, 700)
Fustat (weights: 400, 500, 600, 700)
Navigation Bar:
Logo: "Logoipsum" (Schibsted Grotesk SemiBold, 24px, -1.44px tracking)
Menu items (Schibsted Grotesk Medium, 16px, -0.2px tracking):
Platform
Features (with dropdown chevron icon)
Projects
Community
Contact
Right side buttons:
"Sign Up" (transparent background, 82px width)
"Log In" (black background, white text, 101px width)
Padding: 120px horizontal, 16px vertical
Hero Content (moved up 50px with -mt-[50px]):
Badge Component:
Dark badge with star icon + "New" text
Light background with text: "Discover what's possible"
Font: Inter Regular, 14px
Rounded corners with subtle shadow
Main Headline:
Text: "Transform Data Quickly"
Font: Fustat Bold, 80px, -4.8px tracking, line-height: none
Color: Black, center-aligned
Subtitle:
Text: "Upload your information and get powerful insights right away. Work smarter and achieve goals effortlessly."
Font: Fustat Medium, 20px, -0.4px tracking
Color: #505050
Max-width: 736px, width: 542px
Search Input Box:
Backdrop blur with dark transparent background (rgba(0,0,0,0.24))
Dimensions: 728px max-width, 200px height, rounded 18px
Top row: Credit info
Left: "60/450 credits" with green "Upgrade" button
Right: AI icon + "Powered by GPT-4o"
Font: Schibsted Grotesk Medium, 12px, white text
Main input area:
White background, rounded 12px, shadow
Placeholder: "Type question..." (16px, rgba(0,0,0,0.6))
Black circular submit button with up arrow icon (36px size)
Bottom row:
Left: Three action buttons (gray backgrounds, rounded 6px):
"Attach" with paperclip icon
"Voice" with microphone icon
"Prompts" with search icon
Right: Character counter "0/3,000" (12px, gray)
Icons (SVG paths from imported file):
Chevron down arrow
Up arrow
Star icon
AI sparkle icon
Attach/paperclip icon
Voice/microphone icon
Search icon
Spacing:
Gap between navigation and hero: 60px
Gap between header and search box: 44px
Gap within header elements: 34px (badge to title, title to subtitle)
Hero content moved up: 50px negative margin
Horizontal padding: 120px
Color Scheme:
Black text: #000000
Gray text: #505050
Light gray backgrounds: #f8f8f8
Green upgrade button: rgba(90,225,76,0.89)
Dark badge: #0e1311
White: #ffffff
Transparent overlay: rgba(0,0,0,0.24)
Component Structure:
VideoBackground component with custom fade logic
Navigation bar (fixed spacing, horizontal layout)
Hero content container (centered, max-width constraints)
Nested components for badge, header, and search input
All elements positioned over full-screen video background