{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'><span class='fx-hero-spin-soft' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3'/><path d='M12 18v3'/><path d='M3 12h3'/><path d='M18 12h3'/><circle cx='12' cy='12' r='4'/></svg></span>Персональный сайт</p><h1 class='hero__title'>Алексей Смирнов</h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю аккуратные и продуманные цифровые продукты — от идеи до готового интерфейса. Люблю чистый код, ясную структуру и внимание к деталям.</p><div class='fx-hero-actions'><a href='#projects' class='fx-hero-btn fx-hero-btn--primary'><span class='fx-hero-btn__icon' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M13 6l6 6-6 6'/></svg></span><span class='fx-hero-btn__label'>Смотреть проекты</span></a><a href='#contact' class='fx-hero-btn fx-hero-btn--ghost'><span class='fx-hero-btn__icon' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16v12H4z'/><path d='M4 7l8 6 8-6'/></svg></span><span class='fx-hero-btn__label'>Связаться</span></a></div></div></section>",
  "css": ".hero .fx-hero-spin-soft { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; color: #0ea5e9; animation: fx-hero-spin-soft 6s linear infinite; } .hero .fx-hero-spin-soft svg { width: 100%; height: 100%; display: block; } @keyframes fx-hero-spin-soft { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hero .fx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; } .hero .fx-hero-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; border-radius: 999px; overflow: hidden; isolation: isolate; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, color 0.3s ease; } .hero .fx-hero-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-101%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .hero .fx-hero-btn:hover::before, .hero .fx-hero-btn:focus-visible::before { transform: translateX(0); } .hero .fx-hero-btn:hover { transform: translateY(-3px); } .hero .fx-hero-btn__icon { display: inline-flex; width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .hero .fx-hero-btn__icon svg { width: 100%; height: 100%; display: block; } .hero .fx-hero-btn:hover .fx-hero-btn__icon, .hero .fx-hero-btn:focus-visible .fx-hero-btn__icon { transform: rotate(180deg); } .hero .fx-hero-btn--primary { color: #ffffff; background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%); box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28); } .hero .fx-hero-btn--primary::before { background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%); } .hero .fx-hero-btn--primary:hover { box-shadow: 0 18px 38px rgba(37, 99, 235, 0.38); } .hero .fx-hero-btn--ghost { color: #0f2a5c; background: #ffffff; border: 1px solid #d6e4ff; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.1); } .hero .fx-hero-btn--ghost::before { background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); } .hero .fx-hero-btn--ghost:hover { color: #0284c7; box-shadow: 0 16px 32px rgba(37, 99, 235, 0.18); } .hero .fx-hero-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #38bdf8, 0 0 0 9px rgba(56, 189, 248, 0.35); animation: fx-hero-ring-reverse 1.4s ease-in-out infinite; } @keyframes fx-hero-ring-reverse { 0% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #38bdf8, 0 0 0 9px rgba(56, 189, 248, 0.35); } 50% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 9px #22d3ee, 0 0 0 14px rgba(34, 211, 238, 0.18); } 100% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #38bdf8, 0 0 0 9px rgba(56, 189, 248, 0.35); } } @media (prefers-reduced-motion: reduce) { .hero .fx-hero-spin-soft { animation: none; } .hero .fx-hero-btn, .hero .fx-hero-btn::before, .hero .fx-hero-btn__icon { transition: none; } .hero .fx-hero-btn:focus-visible { animation: none; } }"
}