{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'><span class='hero__title-text'>Интернет-магазин</span></h1><div class='hero__wave' aria-hidden='true'><svg viewBox='0 0 600 20' preserveAspectRatio='none'><path d='M0,10 Q50,0 100,10 T200,10 T300,10 T400,10 T500,10 T600,10' fill='none' stroke='url(#heroWaveGrad)' stroke-width='3' stroke-linecap='round'/><defs><linearGradient id='heroWaveGrad' x1='0' y1='0' x2='1' y2='0'><stop offset='0%' stop-color='#60a5fa'/><stop offset='50%' stop-color='#2563eb'/><stop offset='100%' stop-color='#60a5fa'/></linearGradient></defs></svg></div><p class='hero__subtitle'>Электронная коммерция</p><p class='hero__lead'>Создаю удобные и стильные интернет-магазины с продуманным пользовательским опытом и современным дизайном.</p><a class='hero__link' href='#contact'>Обсудить проект <span class='hero__link-icon' aria-hidden='true'>→</span></a></div></section>",
  "css": ".hero { background: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%); }\n.hero .hero__title { position: relative; }\n.hero .hero__title-text { display: inline-block; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #2563eb); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hero-title-shift 6s ease-in-out infinite; }\n.hero .hero__wave { max-width: 320px; margin: 0 auto 20px; height: 20px; }\n.hero .hero__wave svg { width: 100%; height: 100%; display: block; }\n.hero .hero__wave path { stroke-dasharray: 12 8; animation: hero-wave-dash 2.4s linear infinite; }\n.hero .hero__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 14px 28px; font-size: 16px; font-weight: 600; color: #2563eb; text-decoration: none; border-radius: 999px; background: #ffffff; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.15); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }\n.hero .hero__link::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #2563eb); background-size: 300% 100%; animation: hero-link-gradient 3s linear infinite; }\n.hero .hero__link:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37, 99, 235, 0.28); }\n.hero .hero__link-icon { display: inline-block; animation: hero-icon-spin 4s linear infinite; }\n@keyframes hero-title-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }\n@keyframes hero-wave-dash { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -40; } }\n@keyframes hero-link-gradient { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }\n@keyframes hero-icon-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"
}