{
  "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><span class='hero__particle hero__particle--7'></span><span class='hero__particle hero__particle--8'></span></div><div class='hero__inner'><p class='hero__eyebrow'>Каталог компьютеров</p><h1 class='hero__title'>Техника для работы и творчества</h1><p class='hero__subtitle'>Подборка проверенных конфигураций</p><p class='hero__lead'>Собрали актуальные модели компьютеров — от компактных офисных решений до мощных рабочих станций. Сравнивайте характеристики и выбирайте под свои задачи.</p></div><div class='hero__divider' aria-hidden='true'><span class='hero__divider-line'></span><span class='hero__divider-shine'></span></div></section>",
  "css": ".hero { position: relative; overflow: hidden; } .hero .hero__inner { position: relative; z-index: 2; } .hero .hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .hero .hero__particle { position: absolute; display: block; width: 10px; height: 10px; border-radius: 50%; opacity: 0.75; animation: hero-float 9s ease-in-out infinite; } .hero .hero__particle--1 { left: 8%; top: 22%; width: 12px; height: 12px; background: #38bdf8; animation-delay: 0.2s; } .hero .hero__particle--2 { left: 18%; top: 68%; width: 8px; height: 8px; background: #34d399; animation-delay: 1.1s; } .hero .hero__particle--3 { left: 32%; top: 14%; width: 14px; height: 14px; background: #fbbf24; animation-delay: 0.6s; } .hero .hero__particle--4 { left: 46%; top: 78%; width: 9px; height: 9px; background: #f472b6; animation-delay: 1.8s; } .hero .hero__particle--5 { left: 62%; top: 26%; width: 11px; height: 11px; background: #22d3ee; animation-delay: 0.9s; } .hero .hero__particle--6 { left: 74%; top: 62%; width: 13px; height: 13px; background: #fb923c; animation-delay: 0.4s; } .hero .hero__particle--7 { left: 86%; top: 18%; width: 8px; height: 8px; background: #4ade80; animation-delay: 1.5s; } .hero .hero__particle--8 { left: 92%; top: 74%; width: 10px; height: 10px; background: #60a5fa; animation-delay: 2.1s; } .hero .hero__divider { position: relative; max-width: 820px; margin: 56px auto 0; height: 2px; z-index: 2; } .hero .hero__divider-line { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(56, 189, 248, 0.35), rgba(52, 211, 153, 0.35), rgba(251, 191, 36, 0.35), rgba(244, 114, 182, 0.35)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hero .hero__divider-shine { position: absolute; top: -1px; left: 0; width: 120px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent); filter: blur(1px); animation: hero-shine 4.5s ease-in-out infinite; } @keyframes hero-float { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } 50% { transform: translate3d(14px, -26px, 0) scale(1.15); opacity: 0.95; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } } @keyframes hero-shine { 0% { transform: translateX(-140px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(820px); opacity: 0; } }"
}