{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'><span class='hero__title-text'>Алексей Смирнов</span></h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю удобные и быстрые веб-приложения. Люблю чистый код и продуманный дизайн.</p></div></section>",
  "css": ".hero { position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 50%; left: 50%; width: 140%; height: 120px; background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.12) 20%, rgba(59, 130, 246, 0.22) 50%, rgba(96, 165, 250, 0.12) 80%, transparent 100%); transform: translate(-50%, -50%) skewY(-4deg); pointer-events: none; z-index: 0; } .hero .hero__inner { position: relative; z-index: 1; } .hero .hero__title { position: relative; display: inline-block; } .hero .hero__title-text { position: relative; display: inline-block; transition: transform 0.4s ease-in-out; } .hero .hero__title-text::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s ease-in-out; } .hero .hero__title:hover .hero__title-text::after { transform: scaleX(1); } .hero .hero__eyebrow { position: relative; display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35); transition: box-shadow 0.4s ease-in-out, transform 0.4s ease-in-out; } .hero .hero__eyebrow:hover { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12), 0 8px 24px rgba(37, 99, 235, 0.25); } .hero .hero__lead { transition: transform 0.4s ease-in-out; } .hero .hero__lead:hover { transform: translateY(-2px); }"
}