{
  "html": "<section class='hero'><div class='hero__particles' aria-hidden='true'><span class='hero__particle hero__particle--1'></span><span class='hero__particle hero__particle--2'></span><span class='hero__particle hero__particle--3'></span><span class='hero__particle hero__particle--4'></span><span class='hero__particle hero__particle--5'></span><span class='hero__particle hero__particle--6'></span></div><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'><span class='hero__title-shine'>Алексей Смирнов</span></h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю удобные и быстрые веб-приложения. Люблю чистый код и продуманный дизайн.</p><a href='#contact' class='hero__cta'><span class='hero__cta-label'>Связаться со мной</span><span class='hero__cta-ripple' aria-hidden='true'></span></a></div></section>",
  "css": ".hero { position: relative; overflow: hidden; } .hero .hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero .hero__particle { position: absolute; display: block; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #60a5fa, #2563eb); opacity: 0.35; filter: blur(0.5px); animation: hero-float 14s ease-in-out infinite; } .hero .hero__particle--1 { width: 10px; height: 10px; top: 18%; left: 12%; animation-duration: 12s; animation-delay: 0s; } .hero .hero__particle--2 { width: 16px; height: 16px; top: 70%; left: 22%; background: radial-gradient(circle at 30% 30%, #93c5fd, #3b82f6); animation-duration: 16s; animation-delay: -3s; } .hero .hero__particle--3 { width: 8px; height: 8px; top: 30%; left: 82%; background: radial-gradient(circle at 30% 30%, #bfdbfe, #60a5fa); animation-duration: 11s; animation-delay: -6s; } .hero .hero__particle--4 { width: 14px; height: 14px; top: 78%; left: 78%; animation-duration: 18s; animation-delay: -2s; } .hero .hero__particle--5 { width: 6px; height: 6px; top: 55%; left: 48%; background: radial-gradient(circle at 30% 30%, #dbeafe, #93c5fd); animation-duration: 13s; animation-delay: -8s; } .hero .hero__particle--6 { width: 12px; height: 12px; top: 12%; left: 62%; background: radial-gradient(circle at 30% 30%, #93c5fd, #2563eb); animation-duration: 15s; animation-delay: -5s; } .hero .hero__inner { position: relative; z-index: 1; } .hero .hero__title-shine { background: linear-gradient(90deg, #1e2a5a 0%, #2563eb 25%, #60a5fa 50%, #2563eb 75%, #1e2a5a 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hero-shine 4s ease-in-out infinite; } .hero .hero__cta { position: relative; display: inline-block; margin-top: 32px; padding: 16px 36px; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none; background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); border-radius: 999px; overflow: hidden; isolation: isolate; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .hero .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37, 99, 235, 0.38); } .hero .hero__cta-label { position: relative; z-index: 2; } .hero .hero__cta-ripple { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%); transform: translate(-50%, -50%) scale(0); opacity: 0; z-index: 1; pointer-events: none; } .hero .hero__cta:hover .hero__cta-ripple { animation: hero-ripple 4s ease-in-out infinite; } @keyframes hero-shine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes hero-float { 0% { transform: translate(0, 0) scale(1); opacity: 0.35; } 25% { transform: translate(18px, -24px) scale(1.15); opacity: 0.55; } 50% { transform: translate(-12px, -48px) scale(0.9); opacity: 0.3; } 75% { transform: translate(22px, -20px) scale(1.1); opacity: 0.5; } 100% { transform: translate(0, 0) scale(1); opacity: 0.35; } } @keyframes hero-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.9; } 60% { transform: translate(-50%, -50%) scale(28); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(28); opacity: 0; } }"
}