Single-page waitlist landing page for YTAI, an AI-powered YouTube channel manager SaaS. Built as a single HTML file with inline CSS and JavaScript, no external dependencies.
Theme: YouTube-native — dark tones with YouTube red accents, feels like a natural extension of the YouTube ecosystem. Includes a light mode toggle.
Dark mode palette:
- Background: #0f0f0f
- Card background: #1a1a1a
- Primary accent: #FF0000 (YouTube red)
- CTA gradient: #FF0000 → #CC0000
- Headline text: #FFFFFF
- Body text: #AAAAAA
Light mode palette:
- Background: #FFFFFF
- Card background: #F5F5F5
- Primary accent: #FF0000 (same red across both modes)
- Headline text: #1a1a1a
- Body text: #555555
Typography: System font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif).
Theme toggle: CSS custom properties on :root. Toggle switches data-theme="light" on <html>. Preference saved to localStorage, falls back to prefers-color-scheme. Smooth 0.3s transition on color properties.
- YTAI wordmark (left)
- Dark/light mode toggle — sun/moon icon button (right)
- "Join Waitlist" button that scrolls to hero form (right)
- Headline: "Your AI-Powered YouTube Growth Engine"
- Subtitle: "YTAI automates optimization, testing, and analytics so you can focus on creating. Join the waitlist for early access."
- Email capture form: Email input + "Join Waitlist" button, side by side on desktop, stacked on mobile
- States:
- Success: checkmark + "You're on the list!" (green)
- Error: message below input (red)
- Duplicate: "You've already signed up!"
- Background: Subtle red gradient glow, faint YouTube play-button-inspired geometric shape at low opacity
Six cards, each with icon (CSS/Unicode), title, and one-line description:
- AI Video Optimization — "Get AI-powered title, description, and tag suggestions that maximize reach."
- Smart Thumbnail Testing — "Automatically A/B test thumbnails and let the best performer win."
- Analytics Insights — "Understand what's working with AI-driven analytics and actionable recommendations."
- Content Suggestions — "Get data-backed ideas for your next video based on trends and audience behavior."
- Auto Scheduling — "Publish at peak times with AI-optimized scheduling tailored to your audience."
- Competitor Tracking — "Monitor rival channels and spot opportunities they're missing."
Card style: Subtle border/shadow, hover effect with slight lift (translateY) and faint red border-top/glow.
Responsive: 3-wide on desktop, 2-wide on tablet, single column on mobile.
- Centered YTAI wordmark
- "© 2026 YTAI. All rights reserved."
- Fade-in on scroll for feature cards
- Smooth hover transitions on buttons and cards
- Gentle glow/pulse on hero CTA button
- 0.3s transition on theme switch
- Email submissions stored in localStorage (array of email strings)
- Duplicate check before storing
- Email validation via regex
- Semantic HTML5 elements
- ARIA labels on form elements and icon buttons
- Keyboard-navigable toggle and form
- Mobile: < 640px (single column, stacked form)
- Tablet: 640px–1024px (2-wide feature grid)
- Desktop: > 1024px (3-wide feature grid, inline form)
Single index.html file containing all HTML, CSS (<style>), and JavaScript (<script>).