{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'><span class='fx-hero-name'>Алексей Смирнов</span></h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю аккуратные и продуманные цифровые продукты — от идеи до готового интерфейса. Люблю чистый код, ясную структуру и внимание к деталям.</p><a href='#projects' class='fx-hero-btn'>Смотреть проекты<span class='fx-hero-btn-arrow' aria-hidden='true'>→</span></a></div></section>",
  "css": ".hero .fx-hero-name { display: inline-block; background: linear-gradient(100deg, #0f2a5c 0%, #2563eb 40%, #38bdf8 60%, #0f2a5c 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: saturate(1.15); animation: fx-hero-saturate 9s ease-in-out infinite, fx-hero-shine 6s linear infinite; text-shadow: 0 10px 30px rgba(37, 99, 235, 0.18); } .hero .hero__title { filter: drop-shadow(0 14px 34px rgba(37, 99, 235, 0.22)); } .hero .fx-hero-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 15px 30px; font-size: 16px; font-weight: 700; letter-spacing: 0.01em; color: #ffffff; text-decoration: none; background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 55%, #38bdf8 100%); border-radius: 999px; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28), 0 2px 6px rgba(15, 42, 92, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, filter 0.6s ease; filter: saturate(1.05); } .hero .fx-hero-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 38px rgba(37, 99, 235, 0.38), 0 4px 10px rgba(15, 42, 92, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45); filter: saturate(1.35); } .hero .fx-hero-btn:active { transform: translateY(-1px) scale(0.99); } .hero .fx-hero-btn-arrow { display: inline-block; font-size: 18px; line-height: 1; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .hero .fx-hero-btn:hover .fx-hero-btn-arrow { animation: fx-hero-arrow 0.55s cubic-bezier(0.22, 1, 0.36, 1) infinite; } .hero .hero__eyebrow { transition: filter 0.7s ease, box-shadow 0.4s ease, transform 0.4s ease; filter: saturate(1.1); } .hero .hero__eyebrow:hover { filter: saturate(1.6); box-shadow: 0 10px 26px rgba(37, 99, 235, 0.18); transform: translateY(-2px); } .hero .hero__lead { transition: filter 0.8s ease; filter: saturate(0.95); } .hero .hero__lead:hover { filter: saturate(1.25); } @keyframes fx-hero-shine { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } @keyframes fx-hero-saturate { 0%, 100% { filter: saturate(1.05); } 50% { filter: saturate(1.5); } } @keyframes fx-hero-arrow { 0% { transform: translateX(0); } 50% { transform: translateX(6px); } 100% { transform: translateX(0); } }"
}