{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":34,"style":"BOLD"}],"text":"Привет! Сегодня сделаем мобильное анимированное меню для нашего лендинга, применим библиотеку framer-motion (motion) для красивого эффекта открытия. Будет интересно, погнали!","type":"unstyled","key":"7239k"},{"data":{"image":{"id":"68408df4f55211071188e08a"},"images":[{"id":"68408df4f55211071188e08a"}],"contents":{}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Превью | Канал dzen.ru/in9var","type":"atomic:image","key":"cie5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Полезные ссылки:","type":"unstyled","key":"4gsm3"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":7,"offset":0}],"inlineStyleRanges":[],"text":"Часть 1. Подготовка и настройка проекта","type":"unstyled","key":"cdqea"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":7,"offset":0}],"inlineStyleRanges":[],"text":"Часть 2. Настройка конфигурации и установка необходимых библиотек","type":"unstyled","key":"9f5np"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 3. Создание CSS-переменных и верстка блока Header","type":"unstyled","key":"eb05u"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 4. Верстка секции Hero, создание компонента Button","type":"unstyled","key":"7hehc"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 5. Верстка секции About","type":"unstyled","key":"b69h5"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 6. Верстка секции Gallery","type":"unstyled","key":"etk8b"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 7. Верстка секции WhyUs","type":"unstyled","key":"3300l"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 8. Верстка секции Catalogue","type":"unstyled","key":"8iach"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 9. Верстка секции Map","type":"unstyled","key":"cv537"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 10. Верстка секции Footer","type":"unstyled","key":"c0fku"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 11. Создание якорных ссылок, рефакторинг","type":"unstyled","key":"eqe6a"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 12. Создание мобильного меню","type":"unstyled","key":"2sgm8"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 13. Анимация секций при скролле","type":"unstyled","key":"ei4jj"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 14. Установка метаданных","type":"unstyled","key":"6kvh8"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 15. Настройка Favicon.ico","type":"unstyled","key":"3b3se"},{"data":{},"depth":0,"entityRanges":[{"key":15,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 16. Настройка счетчика Яндекс Метрики","type":"unstyled","key":"9bkqc"},{"data":{},"depth":0,"entityRanges":[{"key":16,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 17. Публикуем проект на хостинге","type":"unstyled","key":"mec4"},{"data":{},"depth":0,"entityRanges":[{"key":17,"length":9,"offset":38}],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Демо–проект лендинга можно посмотреть по ссылке.","type":"unordered-list-item","key":"d0g9i"},{"data":{},"depth":0,"entityRanges":[{"key":18,"length":9,"offset":59}],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.","type":"unordered-list-item","key":"agvk7"},{"data":{},"depth":0,"entityRanges":[{"key":19,"length":9,"offset":48}],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Код данного урока доступен в репозитории GitHub по ссылке.","type":"unordered-list-item","key":"f6tql"},{"data":{},"depth":0,"entityRanges":[{"key":20,"length":9,"offset":49}],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"В моём блоге этот урок в удобном для чтения виде по ссылке.","type":"unordered-list-item","key":"6uvkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5npmi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Устанавливаем пакет hamburger-react","type":"header-two","key":"6og"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":67,"style":"BOLD"}],"text":"Чтобы не писать лишний код анимации, можно воспользоваться пакетом hamburger-react, который предоставляет нам анимированное меню с обработчиком закрытия, отслеживанием состояния и небольшой кастомизацией в виде указания цвета и размера иконки.","type":"unstyled","key":"9mgad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стиль анимации выбирается при импорте модуля, в нашем случае это squash.","type":"unstyled","key":"5t9so"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для установки в консоль вводим команду.","type":"unstyled","key":"d278t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm i hamburger-react","type":"blockquote","key":"ch6kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"105vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем компонент MobileMenu.jsx","type":"header-two","key":"3ehf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":49,"style":"BOLD"},{"length":14,"offset":86,"style":"BOLD"}],"text":"Создадим блок мобильного меню, для этого в папке /app/components/blocks/ создаем файл MobileMenu.jsx.","type":"unstyled","key":"bh6ho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"ITALIC"}],"text":"Содержимое файла MobileMenu.jsx","type":"unstyled","key":"4aqft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import Link from 'next/link';","type":"blockquote","key":"4c0kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { motion } from 'motion/react';","type":"blockquote","key":"cfrqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default function MobileMenu({ close }) {","type":"blockquote","key":"92ld4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (","type":"blockquote","key":"2vgbd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"aq14u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"12b99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" close()}>","type":"blockquote","key":"cq29t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наша продукция","type":"blockquote","key":"c2p0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"gir8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" close()}>","type":"blockquote","key":"9monb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"О нас","type":"blockquote","key":"6d39j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fnk0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" close()}>","type":"blockquote","key":"fs7sk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контакты","type":"blockquote","key":"fdo56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"c4l4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"cf810"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"egrob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");","type":"blockquote","key":"bl6ed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"46bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"avb1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это обычный блок верстки с абсолютным позиционированием, перекрывающий всё окно.","type":"unstyled","key":"66dhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":81,"style":"BOLD"}],"text":"Для того чтобы была возможность использовать кнопку меню для закрытия, я добавил z-index в это меню, а также в контейнер значка мобильного меню.","type":"unstyled","key":"2hrt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":104,"style":"BOLD"}],"text":"Чтобы анимация motion работала, я воспользовался стандартной конструкцией этой библиотеки — создал блок motion.div и в качестве атрибутов установил значения для стартового значения анимации, итогового и завершающего, в данном случае анимируются значения масштаба и прозрачности.","type":"unstyled","key":"eoqbc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":19,"style":"BOLD"},{"length":25,"offset":101,"style":"BOLD"}],"text":"Обработчик события onClick необходим для закрытия меню при клике по нему, а также для удаления стиля style=\"overflow: hidden;\" с корневого контейнера. Добавлять данный стиль мы будем в компоненте Header.jsx.","type":"unstyled","key":"e5krg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это необходимо для того, чтобы при скролле на открытом меню страница не прокручивалась.","type":"unstyled","key":"45gn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рефакторинг блока Header.jsx","type":"header-two","key":"nbfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"},{"length":10,"offset":17,"style":"BOLD"}],"text":"Содержимое файла Header.jsx","type":"unstyled","key":"alft8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"'use client';","type":"blockquote","key":"5658s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useState, useEffect } from 'react';","type":"blockquote","key":"akmul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import Link from 'next/link';","type":"blockquote","key":"4hkes"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import Logo from '../elements/Logo';","type":"blockquote","key":"dhuas"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import SocialIcons from './SocialIcons';","type":"blockquote","key":"dj4ia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { Squash as Hamburger } from 'hamburger-react';","type":"blockquote","key":"cru9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import MobileMenu from './MobileMenu';","type":"blockquote","key":"d5l7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { AnimatePresence } from 'motion/react';","type":"blockquote","key":"cm48r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default function Header() {","type":"blockquote","key":"abtmh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const [isOpen, setIsOpen] = useState(false);","type":"blockquote","key":"bqk9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const menuToggleHandler = () => setIsOpen(!isOpen);","type":"blockquote","key":"a5ok9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const menuCloseHandler = () => setIsOpen(false);","type":"blockquote","key":"ah19r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useEffect(() => {","type":"blockquote","key":"22vk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (isOpen) document.documentElement.style.overflow = 'hidden';","type":"blockquote","key":"668pm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return () => {","type":"blockquote","key":"59vjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.documentElement.style.overflow = '';","type":"blockquote","key":"1nglo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"3c47f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}, [isOpen]);","type":"blockquote","key":"b78s7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (","type":"blockquote","key":"bsaj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<>","type":"blockquote","key":"736sk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"903ae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"cs7p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"26kv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"b4lru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"40i9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8cnln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наша продукция","type":"blockquote","key":"c7v0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"3v6gn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"О нас","type":"blockquote","key":"1s4ma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"c90jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контакты","type":"blockquote","key":"egr60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"o56l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"f6q9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"+7 999 888 88 88","type":"blockquote","key":"7903h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ags1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"5bj64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2ivt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"4gd7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8f1bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8msuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"la4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{isOpen && }","type":"blockquote","key":"3r8f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a1d3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");","type":"blockquote","key":"784oe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"bgjcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5qb54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Импортируем компонент Hamburger, который будет значком меню нашего лендинга в мобильном разрешении, и задаём ему необходимые параметры.","type":"unstyled","key":"6eu94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для работы нам необходимо хранить состояние открытия меню — isOpen, а также два обработчика — переключатель открытия меню и закрытие меню.","type":"unstyled","key":"asite"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно было обойтись только переключателем, но для надёжности при клике на пункте меню я предпочитаю именно закрывать его.","type":"unstyled","key":"6sotn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":4,"style":"BOLD"},{"length":26,"offset":38,"style":"BOLD"},{"length":25,"offset":13,"style":"ITALIC"}],"text":"Хук useEffect необходим для установки style=\"overflow: hidden;\" страницы, чтобы предотвратить скроллинг при открытом меню.","type":"unstyled","key":"839kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":12,"style":"BOLD"}],"text":"Конструкция ... необходима для отображения анимации компонента как при открытии, так и при закрытии, без этого при закрытии меню будет резко исчезать.","type":"unstyled","key":"4sdgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"В dev-режиме, мы получим вот такой блок нашего сайта:","type":"unstyled","key":"646pi"},{"data":{"image":{"id":"68403a76333920140a147d20"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ddqcr"},{"data":{"image":{"id":"68403a8613622125724b077b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"coval"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В следующих статьях займемся анимациями секций при скролле страницы.","type":"unstyled","key":"71f5n"},{"data":{},"depth":0,"entityRanges":[{"key":21,"length":9,"offset":48}],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Код данного урока доступен в репозитории GitHub по ссылке.","type":"unstyled","key":"3oc23"},{"data":{},"depth":0,"entityRanges":[{"key":22,"length":14,"offset":59},{"key":23,"length":9,"offset":119}],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.","type":"unstyled","key":"5h9ju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"UinABy0OOkRlAoJuHfrQ"}],"entityMap":{"11":{"data":{"url":"https://dzen.ru/a/aEAy_zM5IBQKBy0K"},"mutability":"MUTABLE","type":"LINK"},"22":{"data":{"url":"https://blog.in9var.ru"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"url":"https://dzen.ru/a/aEQcUkkmw0a6dtsO"},"mutability":"MUTABLE","type":"LINK"},"23":{"data":{"url":"https://in9var.ru"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"url":"https://dzen.ru/a/aEgVVsPlMV4bMNLI"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"badSeoLink":"true","url":"https://dzen.ru/a/aEwzslhLgCKXIOhd"},"mutability":"MUTABLE","type":"LINK"},"15":{"data":{"url":"https://dzen.ru/a/aFBYNBEcICKfQ3Bs"},"mutability":"MUTABLE","type":"LINK"},"16":{"data":{"href":"https://dzen.ru/a/aFQNIVD-C0ti3ZgQ","url":"https://dzen.ru/a/aFQNIVD-C0ti3ZgQ"},"mutability":"MUTABLE","type":"LINK"},"17":{"data":{"url":"https://landing.in9var.ru/"},"mutability":"MUTABLE","type":"LINK"},"18":{"data":{"url":"https://www.figma.com/community/file/1502413868477504587/landing-page-dzen-in9var"},"mutability":"MUTABLE","type":"LINK"},"19":{"data":{"url":"https://github.com/in9vr/Landing-page/tree/1ada9166a9ae4e518581c271def623dec3488a17"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://dzen.ru/a/aBX2h46gP1Z1la-R"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://dzen.ru/a/aBixZUiqeF9Vfcpw"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://dzen.ru/a/aB0jLgh1EUXp3f7T"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://dzen.ru/a/aB_K396Uyxz1KQar"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"badSeoLink":"true","url":"https://dzen.ru/a/aCO40iymiTAHMgcU"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://dzen.ru/a/aCdVqjAYggyImU6f"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://dzen.ru/a/aCxsEkQ20VMOQ2JK"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"https://dzen.ru/a/aDBekv_uinPwqWSA"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"url":"https://dzen.ru/a/aDQ_yMu9Hlixt6Za"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"url":"https://dzen.ru/a/aDg1E6PIsXMnckTT"},"mutability":"MUTABLE","type":"LINK"},"20":{"data":{"url":"https://blog.in9var.ru"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"url":"https://dzen.ru/a/aDxQOtGUhFdfuKx_"},"mutability":"MUTABLE","type":"LINK"},"21":{"data":{"url":"https://github.com/in9vr/Landing-page/tree/1ada9166a9ae4e518581c271def623dec3488a17"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}