{
  "html": "<section class='hero'><div class='hero__inner'><div class='hero__card'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'>Алексей Смирнов</h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю удобные и быстрые веб-приложения. Люблю чистый код и продуманный дизайн.</p></div></div></section>",
  "css": ".hero .hero__card { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(37, 99, 235, 0.14); border-radius: 24px; padding: 48px 40px; box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08), 0 2px 6px rgba(37, 99, 235, 0.06); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease-in-out; } .hero .hero__card::after { content: ''; position: absolute; top: 0; left: -60%; width: 60%; height: 100%; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(96, 165, 250, 0.35) 45%, rgba(255, 255, 255, 0.85) 50%, rgba(96, 165, 250, 0.35) 55%, rgba(255, 255, 255, 0) 100%); transform: skewX(-18deg); animation: hero-shine-ease 4s ease-in-out infinite; pointer-events: none; } .hero .hero__card:hover { transform: translateY(-10px); box-shadow: 0 24px 48px rgba(37, 99, 235, 0.18), 0 6px 14px rgba(37, 99, 235, 0.1); } .hero .hero__card:hover::after { animation: hero-shine-spring 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; } @keyframes hero-shine-ease { 0% { left: -60%; } 50% { left: 100%; } 100% { left: 100%; } } @keyframes hero-shine-spring { 0% { left: -60%; } 100% { left: 100%; } }"
}