Created
February 8, 2026 16:10
-
-
Save mikl0s/bcbb2cb814dc327d7dcad77089b3ecb6 to your computer and use it in GitHub Desktop.
YouTube AI Manager landing page ouput
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>YTAI — AI-Powered YouTube Growth Engine</title> | |
| <meta name="description" content="YTAI automates optimization, testing, and analytics so you can focus on creating. Join the waitlist for early access."> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Space+Mono:wght@700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ======================================== | |
| CSS CUSTOM PROPERTIES — DARK (default) | |
| ======================================== */ | |
| :root { | |
| --bg: #08080a; | |
| --bg-hero: #08080a; | |
| --bg-features: #0c0c0e; | |
| --bg-card: #111114; | |
| --bg-card-hover: #161619; | |
| --text-primary: #f0f0f0; | |
| --text-secondary: #8a8a8e; | |
| --text-muted: #555558; | |
| --accent: #FF0033; | |
| --accent-hover: #E6002E; | |
| --accent-soft: #ff1a4a; | |
| --accent-glow: rgba(255, 0, 51, 0.12); | |
| --accent-glow-strong: rgba(255, 0, 51, 0.25); | |
| --border: rgba(255, 255, 255, 0.05); | |
| --border-hover: rgba(255, 0, 51, 0.35); | |
| --input-bg: rgba(255, 255, 255, 0.04); | |
| --input-border: rgba(255, 255, 255, 0.08); | |
| --input-focus: rgba(255, 0, 51, 0.25); | |
| --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.3); | |
| --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 0, 51, 0.06); | |
| --success: #22c55e; | |
| --error: #f43f5e; | |
| --nav-bg: rgba(8, 8, 10, 0); | |
| --nav-bg-scrolled: rgba(8, 8, 10, 0.85); | |
| --toggle-bg: rgba(255, 255, 255, 0.06); | |
| --toggle-hover: rgba(255, 255, 255, 0.1); | |
| --grain-opacity: 0.035; | |
| --hero-gradient-1: rgba(255, 0, 51, 0.08); | |
| --hero-gradient-2: rgba(120, 0, 255, 0.04); | |
| --hero-gradient-3: rgba(255, 60, 0, 0.03); | |
| --geo-opacity: 0.04; | |
| --divider: linear-gradient(90deg, transparent, var(--border), transparent); | |
| } | |
| /* ======================================== | |
| CSS CUSTOM PROPERTIES — LIGHT | |
| ======================================== */ | |
| [data-theme="light"] { | |
| --bg: #F5F2ED; | |
| --bg-hero: #F5F2ED; | |
| --bg-features: #EDE9E3; | |
| --bg-card: #FDFCFA; | |
| --bg-card-hover: #FFFFFF; | |
| --text-primary: #1a1815; | |
| --text-secondary: #6b6560; | |
| --text-muted: #9e9890; | |
| --accent: #D4002A; | |
| --accent-hover: #B80024; | |
| --accent-soft: #ff1744; | |
| --accent-glow: rgba(212, 0, 42, 0.07); | |
| --accent-glow-strong: rgba(212, 0, 42, 0.14); | |
| --border: rgba(0, 0, 0, 0.06); | |
| --border-hover: rgba(212, 0, 42, 0.25); | |
| --input-bg: rgba(255, 255, 255, 0.7); | |
| --input-border: rgba(0, 0, 0, 0.1); | |
| --input-focus: rgba(212, 0, 42, 0.15); | |
| --shadow-card: 0 2px 12px rgba(120, 100, 80, 0.06), 0 1px 3px rgba(120, 100, 80, 0.08); | |
| --shadow-card-hover: 0 20px 50px rgba(120, 100, 80, 0.1), 0 0 30px rgba(212, 0, 42, 0.04); | |
| --success: #16a34a; | |
| --error: #e11d48; | |
| --nav-bg: rgba(245, 242, 237, 0); | |
| --nav-bg-scrolled: rgba(245, 242, 237, 0.9); | |
| --toggle-bg: rgba(0, 0, 0, 0.05); | |
| --toggle-hover: rgba(0, 0, 0, 0.08); | |
| --grain-opacity: 0.02; | |
| --hero-gradient-1: rgba(212, 0, 42, 0.06); | |
| --hero-gradient-2: rgba(100, 0, 200, 0.03); | |
| --hero-gradient-3: rgba(255, 120, 0, 0.04); | |
| --geo-opacity: 0.06; | |
| --divider: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent); | |
| } | |
| /* ======================================== | |
| RESET & BASE | |
| ======================================== */ | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: var(--bg); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| transition: background-color 0.5s ease, color 0.5s ease; | |
| } | |
| /* Grain overlay for texture */ | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| pointer-events: none; | |
| opacity: var(--grain-opacity); | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); | |
| background-repeat: repeat; | |
| background-size: 200px 200px; | |
| transition: opacity 0.5s ease; | |
| } | |
| /* ======================================== | |
| SCROLL PROGRESS BAR | |
| ======================================== */ | |
| .scroll-progress { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-soft)); | |
| z-index: 1000; | |
| width: 0%; | |
| transition: width 0.05s linear; | |
| } | |
| /* ======================================== | |
| NAVIGATION | |
| ======================================== */ | |
| .nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| padding: 0 clamp(1.25rem, 4vw, 3rem); | |
| height: 72px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| background: var(--nav-bg); | |
| border-bottom: 1px solid transparent; | |
| transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; | |
| } | |
| .nav.scrolled { | |
| background: var(--nav-bg-scrolled); | |
| backdrop-filter: blur(24px) saturate(180%); | |
| -webkit-backdrop-filter: blur(24px) saturate(180%); | |
| border-bottom-color: var(--border); | |
| } | |
| .nav-logo { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| letter-spacing: -0.04em; | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-logo:hover .logo-icon { | |
| transform: scale(1.08); | |
| } | |
| .logo-icon { | |
| width: 34px; | |
| height: 34px; | |
| background: var(--accent); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| box-shadow: 0 2px 12px rgba(255, 0, 51, 0.3); | |
| } | |
| .logo-icon::after { | |
| content: ''; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 6px 0 6px 10px; | |
| border-color: transparent transparent transparent white; | |
| margin-left: 2px; | |
| } | |
| .nav-center { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-link { | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: color 0.2s ease; | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 0; | |
| width: 0; | |
| height: 1.5px; | |
| background: var(--accent); | |
| transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| .nav-link:hover { | |
| color: var(--text-primary); | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .nav-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| } | |
| .theme-toggle { | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| background: var(--toggle-bg); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .theme-toggle:hover { | |
| background: var(--toggle-hover); | |
| color: var(--text-primary); | |
| border-color: var(--border-hover); | |
| } | |
| .theme-toggle svg { | |
| transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; | |
| } | |
| .theme-toggle:active svg { | |
| transform: scale(0.85) rotate(15deg); | |
| } | |
| .nav-cta { | |
| padding: 0.5rem 1.3rem; | |
| background: var(--accent); | |
| color: #fff; | |
| border: none; | |
| border-radius: 8px; | |
| font-family: inherit; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| box-shadow: 0 2px 10px rgba(255, 0, 51, 0.2); | |
| } | |
| .nav-cta:hover { | |
| background: var(--accent-hover); | |
| transform: translateY(-1px); | |
| box-shadow: 0 6px 20px rgba(255, 0, 51, 0.3); | |
| } | |
| /* ======================================== | |
| HERO SECTION | |
| ======================================== */ | |
| .hero { | |
| position: relative; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 7rem 2rem 6rem; | |
| overflow: hidden; | |
| } | |
| /* Animated gradient mesh */ | |
| .hero-mesh { | |
| position: absolute; | |
| inset: 0; | |
| z-index: 0; | |
| overflow: hidden; | |
| } | |
| .hero-mesh-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(120px); | |
| will-change: transform; | |
| } | |
| .hero-mesh-orb:nth-child(1) { | |
| width: 50vw; | |
| height: 50vw; | |
| max-width: 700px; | |
| max-height: 700px; | |
| background: var(--hero-gradient-1); | |
| top: -10%; | |
| right: -15%; | |
| animation: meshFloat1 20s ease-in-out infinite; | |
| } | |
| .hero-mesh-orb:nth-child(2) { | |
| width: 40vw; | |
| height: 40vw; | |
| max-width: 550px; | |
| max-height: 550px; | |
| background: var(--hero-gradient-2); | |
| bottom: -5%; | |
| left: -10%; | |
| animation: meshFloat2 25s ease-in-out infinite; | |
| } | |
| .hero-mesh-orb:nth-child(3) { | |
| width: 30vw; | |
| height: 30vw; | |
| max-width: 400px; | |
| max-height: 400px; | |
| background: var(--hero-gradient-3); | |
| top: 40%; | |
| left: 30%; | |
| animation: meshFloat3 18s ease-in-out infinite; | |
| } | |
| /* Floating geometric play-button shapes */ | |
| .hero-geo { | |
| position: absolute; | |
| z-index: 1; | |
| pointer-events: none; | |
| opacity: var(--geo-opacity); | |
| transition: opacity 0.5s ease; | |
| } | |
| .hero-geo-1 { | |
| top: 15%; | |
| right: 12%; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 40px 0 40px 68px; | |
| border-color: transparent transparent transparent var(--accent); | |
| animation: geoFloat 12s ease-in-out infinite; | |
| transform: rotate(8deg); | |
| } | |
| .hero-geo-2 { | |
| bottom: 22%; | |
| left: 8%; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 24px 0 24px 42px; | |
| border-color: transparent transparent transparent var(--accent); | |
| animation: geoFloat 16s ease-in-out infinite reverse; | |
| transform: rotate(-12deg); | |
| } | |
| .hero-geo-3 { | |
| top: 55%; | |
| right: 22%; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 16px 0 16px 28px; | |
| border-color: transparent transparent transparent var(--text-muted); | |
| animation: geoFloat 10s ease-in-out 2s infinite; | |
| transform: rotate(25deg); | |
| } | |
| .hero-geo-4 { | |
| top: 28%; | |
| left: 15%; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 20px 0 20px 34px; | |
| border-color: transparent transparent transparent var(--text-muted); | |
| animation: geoFloat 14s ease-in-out 1s infinite reverse; | |
| transform: rotate(-5deg); | |
| } | |
| /* Large faded play button backdrop */ | |
| .hero-play-backdrop { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) rotate(8deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 220px 0 220px 380px; | |
| border-color: transparent transparent transparent var(--accent); | |
| opacity: 0.015; | |
| z-index: 0; | |
| transition: opacity 0.5s ease; | |
| } | |
| [data-theme="light"] .hero-play-backdrop { | |
| opacity: 0.025; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| max-width: 740px; | |
| width: 100%; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.4rem 1.1rem 0.4rem 0.65rem; | |
| background: var(--accent-glow); | |
| border: 1px solid rgba(255, 0, 51, 0.12); | |
| border-radius: 100px; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--accent); | |
| margin-bottom: 2rem; | |
| letter-spacing: 0.01em; | |
| animation: fadeInDown 0.8s ease forwards; | |
| opacity: 0; | |
| } | |
| .hero-badge-dot { | |
| width: 7px; | |
| height: 7px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| animation: pulseDot 2s ease-in-out infinite; | |
| flex-shrink: 0; | |
| } | |
| .hero h1 { | |
| font-family: 'Instrument Sans', sans-serif; | |
| font-size: clamp(2.75rem, 6.5vw, 4.75rem); | |
| font-weight: 700; | |
| line-height: 1.05; | |
| letter-spacing: -0.04em; | |
| margin-bottom: 1.5rem; | |
| animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; | |
| opacity: 0; | |
| } | |
| .hero h1 .accent { | |
| background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-subtitle { | |
| font-size: clamp(1.025rem, 1.8vw, 1.175rem); | |
| color: var(--text-secondary); | |
| max-width: 520px; | |
| margin: 0 auto 2.75rem; | |
| line-height: 1.7; | |
| font-weight: 400; | |
| animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; | |
| opacity: 0; | |
| } | |
| /* Email form */ | |
| .hero-form-wrapper { | |
| animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards; | |
| opacity: 0; | |
| } | |
| .hero-form { | |
| display: flex; | |
| gap: 0.6rem; | |
| max-width: 460px; | |
| margin: 0 auto; | |
| position: relative; | |
| background: var(--input-bg); | |
| border: 1.5px solid var(--input-border); | |
| border-radius: 14px; | |
| padding: 5px; | |
| transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.5s ease; | |
| } | |
| .hero-form:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--input-focus), 0 8px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .hero-form input[type="email"] { | |
| flex: 1; | |
| padding: 0.8rem 1rem; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| font-weight: 400; | |
| outline: none; | |
| min-width: 0; | |
| transition: color 0.5s ease; | |
| } | |
| .hero-form input[type="email"]::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .hero-form button[type="submit"] { | |
| padding: 0.8rem 1.6rem; | |
| background: var(--accent); | |
| color: #fff; | |
| border: none; | |
| border-radius: 10px; | |
| font-family: inherit; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; | |
| flex-shrink: 0; | |
| } | |
| .hero-form button[type="submit"]:hover { | |
| background: var(--accent-hover); | |
| transform: translateY(-1px); | |
| box-shadow: 0 6px 24px rgba(255, 0, 51, 0.3); | |
| } | |
| .hero-form button[type="submit"]:active { | |
| transform: translateY(0); | |
| } | |
| .form-message { | |
| margin-top: 1rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| min-height: 1.4em; | |
| transition: opacity 0.3s ease; | |
| } | |
| .form-message.success { color: var(--success); } | |
| .form-message.error { color: var(--error); } | |
| .form-message .check-icon { margin-right: 0.3rem; } | |
| /* Waitlist count */ | |
| .hero-social-proof { | |
| margin-top: 1.75rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.6rem; | |
| animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards; | |
| opacity: 0; | |
| } | |
| .avatar-stack { | |
| display: flex; | |
| } | |
| .avatar-stack span { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| border: 2px solid var(--bg); | |
| margin-left: -8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| color: white; | |
| transition: border-color 0.5s ease; | |
| } | |
| .avatar-stack span:first-child { margin-left: 0; } | |
| .avatar-stack span:nth-child(1) { background: #6366f1; } | |
| .avatar-stack span:nth-child(2) { background: #f59e0b; } | |
| .avatar-stack span:nth-child(3) { background: #10b981; } | |
| .avatar-stack span:nth-child(4) { background: var(--accent); } | |
| .hero-social-proof p { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .hero-social-proof p strong { | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| } | |
| /* ======================================== | |
| SECTION DIVIDER | |
| ======================================== */ | |
| .section-divider { | |
| height: 1px; | |
| background: var(--divider); | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| /* ======================================== | |
| FEATURES SECTION | |
| ======================================== */ | |
| .features { | |
| padding: 6rem 2rem 7rem; | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| position: relative; | |
| background: var(--bg-features); | |
| transition: background 0.5s ease; | |
| } | |
| /* Subtle top fade */ | |
| .features::before { | |
| content: ''; | |
| position: absolute; | |
| top: -80px; | |
| left: 0; | |
| right: 0; | |
| height: 80px; | |
| background: linear-gradient(to bottom, transparent, var(--bg-features)); | |
| pointer-events: none; | |
| transition: background 0.5s ease; | |
| } | |
| .features-header { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| } | |
| .features-label { | |
| display: inline-block; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 1rem; | |
| padding: 0.35rem 0.9rem; | |
| border: 1px solid var(--accent-glow-strong); | |
| border-radius: 4px; | |
| background: var(--accent-glow); | |
| } | |
| .features-header h2 { | |
| font-size: clamp(1.75rem, 4vw, 2.75rem); | |
| font-weight: 700; | |
| letter-spacing: -0.035em; | |
| line-height: 1.15; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1rem; | |
| } | |
| .feature-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 2rem 1.75rem; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-card); | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; | |
| } | |
| .feature-card.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), | |
| opacity 0.7s ease, | |
| background 0.5s ease, | |
| border-color 0.35s ease, | |
| box-shadow 0.35s ease; | |
| } | |
| /* Gradient top border on hover */ | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-soft), var(--accent)); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| /* Hover glow behind card */ | |
| .feature-card::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -1px; | |
| border-radius: 16px; | |
| background: linear-gradient(135deg, var(--accent-glow), transparent, var(--accent-glow)); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.35s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-6px); | |
| box-shadow: var(--shadow-card-hover); | |
| border-color: var(--border-hover); | |
| background: var(--bg-card-hover); | |
| } | |
| .feature-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .feature-card:hover::after { | |
| opacity: 1; | |
| } | |
| .feature-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| background: var(--accent-glow); | |
| border: 1px solid rgba(255, 0, 51, 0.08); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.25rem; | |
| transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| background: var(--accent-glow-strong); | |
| transform: scale(1.08) rotate(-3deg); | |
| border-color: rgba(255, 0, 51, 0.15); | |
| } | |
| .feature-card h3 { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| letter-spacing: -0.02em; | |
| transition: color 0.5s ease; | |
| } | |
| .feature-card p { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| font-weight: 400; | |
| transition: color 0.5s ease; | |
| } | |
| /* ======================================== | |
| FOOTER | |
| ======================================== */ | |
| .footer { | |
| padding: 3.5rem 2rem; | |
| text-align: center; | |
| border-top: 1px solid var(--border); | |
| background: var(--bg); | |
| transition: background 0.5s ease, border-color 0.5s ease; | |
| } | |
| .footer-logo { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| color: var(--text-muted); | |
| margin-bottom: 0.5rem; | |
| transition: color 0.5s ease; | |
| } | |
| .footer p { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| font-weight: 400; | |
| transition: color 0.5s ease; | |
| } | |
| /* ======================================== | |
| ANIMATIONS | |
| ======================================== */ | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(28px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInDown { | |
| from { opacity: 0; transform: translateY(-16px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulseDot { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.4; transform: scale(0.75); } | |
| } | |
| @keyframes meshFloat1 { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(-40px, 30px) scale(1.05); } | |
| 66% { transform: translate(20px, -20px) scale(0.95); } | |
| } | |
| @keyframes meshFloat2 { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(30px, -40px) scale(1.03); } | |
| 66% { transform: translate(-20px, 20px) scale(0.97); } | |
| } | |
| @keyframes meshFloat3 { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 50% { transform: translate(-30px, -30px) scale(1.08); } | |
| } | |
| @keyframes geoFloat { | |
| 0%, 100% { transform: translateY(0) rotate(var(--geo-rotate, 0deg)); } | |
| 50% { transform: translateY(-18px) rotate(var(--geo-rotate, 0deg)); } | |
| } | |
| /* ======================================== | |
| RESPONSIVE | |
| ======================================== */ | |
| @media (max-width: 1024px) { | |
| .features-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .nav-center { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .nav { | |
| padding: 0 1.25rem; | |
| height: 64px; | |
| } | |
| .nav-cta { display: none; } | |
| .hero { | |
| padding: 6.5rem 1.25rem 4rem; | |
| min-height: auto; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2rem, 8vw, 2.75rem); | |
| } | |
| .hero-geo { display: none; } | |
| .hero-form { | |
| flex-direction: column; | |
| padding: 4px; | |
| } | |
| .hero-form button[type="submit"] { | |
| width: 100%; | |
| } | |
| .features { | |
| padding: 4rem 1.25rem 5rem; | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| gap: 0.75rem; | |
| } | |
| .feature-card { | |
| padding: 1.5rem 1.25rem; | |
| } | |
| .hero-play-backdrop { | |
| border-width: 130px 0 130px 225px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms !important; | |
| animation-iteration-count: 1 !important; | |
| transition-duration: 0.01ms !important; | |
| } | |
| html { scroll-behavior: auto; } | |
| .feature-card { opacity: 1; transform: none; } | |
| .hero-badge, .hero h1, .hero-subtitle, | |
| .hero-form-wrapper, .hero-social-proof { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Scroll Progress --> | |
| <div class="scroll-progress" id="scrollProgress" aria-hidden="true"></div> | |
| <!-- Navigation --> | |
| <nav class="nav" id="mainNav" role="navigation" aria-label="Main navigation"> | |
| <a href="#" class="nav-logo" aria-label="YTAI Home"> | |
| <span class="logo-icon" aria-hidden="true"></span> | |
| YTAI | |
| </a> | |
| <div class="nav-center"> | |
| <a href="#features" class="nav-link">Features</a> | |
| <a href="#signup" class="nav-link">Waitlist</a> | |
| </div> | |
| <div class="nav-actions"> | |
| <button class="theme-toggle" id="themeToggle" aria-label="Switch to light mode" type="button"> | |
| <svg class="icon-moon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg> | |
| <svg class="icon-sun" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg> | |
| </button> | |
| <a href="#signup" class="nav-cta">Join Waitlist</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero" id="signup"> | |
| <!-- Animated gradient mesh --> | |
| <div class="hero-mesh" aria-hidden="true"> | |
| <div class="hero-mesh-orb"></div> | |
| <div class="hero-mesh-orb"></div> | |
| <div class="hero-mesh-orb"></div> | |
| </div> | |
| <!-- Floating geometric shapes --> | |
| <div class="hero-geo hero-geo-1" aria-hidden="true"></div> | |
| <div class="hero-geo hero-geo-2" aria-hidden="true"></div> | |
| <div class="hero-geo hero-geo-3" aria-hidden="true"></div> | |
| <div class="hero-geo hero-geo-4" aria-hidden="true"></div> | |
| <!-- Large play button backdrop --> | |
| <div class="hero-play-backdrop" aria-hidden="true"></div> | |
| <div class="hero-content"> | |
| <div class="hero-badge"> | |
| <span class="hero-badge-dot" aria-hidden="true"></span> | |
| Now accepting early access signups | |
| </div> | |
| <h1>Your AI-Powered<br>YouTube <span class="accent">Growth Engine</span></h1> | |
| <p class="hero-subtitle"> | |
| YTAI automates optimization, testing, and analytics so you can focus on creating. Join the waitlist for early access. | |
| </p> | |
| <div class="hero-form-wrapper"> | |
| <form class="hero-form" id="waitlistForm" novalidate> | |
| <label for="emailInput" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0">Email address</label> | |
| <input | |
| type="email" | |
| id="emailInput" | |
| name="email" | |
| placeholder="Enter your email address" | |
| autocomplete="email" | |
| required | |
| aria-describedby="formMessage" | |
| > | |
| <button type="submit">Join Waitlist</button> | |
| </form> | |
| <div class="form-message" id="formMessage" aria-live="polite"></div> | |
| </div> | |
| <div class="hero-social-proof"> | |
| <div class="avatar-stack" aria-hidden="true"> | |
| <span>JK</span> | |
| <span>AL</span> | |
| <span>MR</span> | |
| <span>+</span> | |
| </div> | |
| <p><strong>240+</strong> creators on the waitlist</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features" aria-label="Features"> | |
| <div class="features-header"> | |
| <span class="features-label">Features</span> | |
| <h2>Everything you need to<br>grow your channel</h2> | |
| </div> | |
| <div class="features-grid"> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> | |
| </div> | |
| <h3>AI Video Optimization</h3> | |
| <p>Get AI-powered title, description, and tag suggestions that maximize reach.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> | |
| </div> | |
| <h3>Smart Thumbnail Testing</h3> | |
| <p>Automatically A/B test thumbnails and let the best performer win.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg> | |
| </div> | |
| <h3>Analytics Insights</h3> | |
| <p>Understand what's working with AI-driven analytics and actionable recommendations.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.663 17h4.674M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg> | |
| </div> | |
| <h3>Content Suggestions</h3> | |
| <p>Get data-backed ideas for your next video based on trends and audience behavior.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> | |
| </div> | |
| <h3>Auto Scheduling</h3> | |
| <p>Publish at peak times with AI-optimized scheduling tailored to your audience.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> | |
| </div> | |
| <h3>Competitor Tracking</h3> | |
| <p>Monitor rival channels and spot opportunities they're missing.</p> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <div class="footer-logo">YTAI</div> | |
| <p>© 2026 YTAI. All rights reserved.</p> | |
| </footer> | |
| <script> | |
| /* ======================================== | |
| THEME TOGGLE | |
| ======================================== */ | |
| (function() { | |
| var html = document.documentElement; | |
| var toggle = document.getElementById('themeToggle'); | |
| var iconMoon = toggle.querySelector('.icon-moon'); | |
| var iconSun = toggle.querySelector('.icon-sun'); | |
| function setTheme(theme) { | |
| html.setAttribute('data-theme', theme); | |
| localStorage.setItem('ytai-theme', theme); | |
| if (theme === 'light') { | |
| iconMoon.style.display = 'none'; | |
| iconSun.style.display = 'block'; | |
| toggle.setAttribute('aria-label', 'Switch to dark mode'); | |
| } else { | |
| iconMoon.style.display = 'block'; | |
| iconSun.style.display = 'none'; | |
| toggle.setAttribute('aria-label', 'Switch to light mode'); | |
| } | |
| } | |
| var saved = localStorage.getItem('ytai-theme'); | |
| if (saved) { | |
| setTheme(saved); | |
| } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) { | |
| setTheme('light'); | |
| } | |
| toggle.addEventListener('click', function() { | |
| var current = html.getAttribute('data-theme'); | |
| setTheme(current === 'dark' ? 'light' : 'dark'); | |
| }); | |
| })(); | |
| /* ======================================== | |
| NAVIGATION — scroll aware | |
| ======================================== */ | |
| (function() { | |
| var nav = document.getElementById('mainNav'); | |
| var progress = document.getElementById('scrollProgress'); | |
| var ticking = false; | |
| function onScroll() { | |
| if (!ticking) { | |
| requestAnimationFrame(function() { | |
| var scrollTop = window.pageYOffset || document.documentElement.scrollTop; | |
| var docHeight = document.documentElement.scrollHeight - window.innerHeight; | |
| // Nav background | |
| if (scrollTop > 40) { | |
| nav.classList.add('scrolled'); | |
| } else { | |
| nav.classList.remove('scrolled'); | |
| } | |
| // Scroll progress | |
| if (docHeight > 0) { | |
| progress.style.width = (scrollTop / docHeight * 100) + '%'; | |
| } | |
| ticking = false; | |
| }); | |
| ticking = true; | |
| } | |
| } | |
| window.addEventListener('scroll', onScroll, { passive: true }); | |
| onScroll(); | |
| })(); | |
| /* ======================================== | |
| WAITLIST FORM | |
| ======================================== */ | |
| (function() { | |
| var form = document.getElementById('waitlistForm'); | |
| var input = document.getElementById('emailInput'); | |
| var message = document.getElementById('formMessage'); | |
| var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |
| function showMessage(text, type) { | |
| var prefix = type === 'success' ? '<span class="check-icon" aria-hidden="true">✓</span> ' : ''; | |
| message.innerHTML = prefix + text; | |
| message.className = 'form-message ' + type; | |
| } | |
| function clearMessage() { | |
| message.innerHTML = ''; | |
| message.className = 'form-message'; | |
| } | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| clearMessage(); | |
| var email = input.value.trim(); | |
| if (!email) { | |
| showMessage('Please enter your email address.', 'error'); | |
| input.focus(); | |
| return; | |
| } | |
| if (!emailRegex.test(email)) { | |
| showMessage('Please enter a valid email address.', 'error'); | |
| input.focus(); | |
| return; | |
| } | |
| var emails = []; | |
| try { | |
| emails = JSON.parse(localStorage.getItem('ytai-waitlist') || '[]'); | |
| } catch (err) { | |
| emails = []; | |
| } | |
| if (emails.indexOf(email.toLowerCase()) !== -1) { | |
| showMessage("You've already signed up!", 'error'); | |
| return; | |
| } | |
| emails.push(email.toLowerCase()); | |
| localStorage.setItem('ytai-waitlist', JSON.stringify(emails)); | |
| showMessage("You're on the list!", 'success'); | |
| input.value = ''; | |
| }); | |
| })(); | |
| /* ======================================== | |
| SCROLL ANIMATIONS (Intersection Observer) | |
| ======================================== */ | |
| (function() { | |
| var cards = document.querySelectorAll('.feature-card'); | |
| if (!('IntersectionObserver' in window)) { | |
| cards.forEach(function(card) { card.classList.add('visible'); }); | |
| return; | |
| } | |
| var observer = new IntersectionObserver(function(entries) { | |
| entries.forEach(function(entry) { | |
| if (entry.isIntersecting) { | |
| var index = Array.prototype.indexOf.call(cards, entry.target); | |
| entry.target.style.transitionDelay = (index % 3) * 0.12 + 's'; | |
| entry.target.classList.add('visible'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' }); | |
| cards.forEach(function(card) { observer.observe(card); }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment