{"id":445295,"date":"2025-01-17T09:00:54","date_gmt":"2025-01-17T09:00:54","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=445295"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2025-01-17T09:00:54","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=445295","title":{"rendered":"<span>\u041a\u0430\u043a \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u0434\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c Frontend \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u042f \u0434\u0436\u0443\u043d\u0438\u043e\u0440 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0418 \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 &#8212; \u044d\u0442\u043e \u0438\u0437\u043b\u0438\u0448\u0435\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439 \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443. \u041f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 NextJs, TS, TailwindCSS. \u0418 \u0435\u0441\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043e\u0434\u0430\u043b\u043a\u0443.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2ab\/3b6\/683\/2ab3b6683f47bb14972b8a3a47f82a10.png\" width=\"2110\" height=\"462\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2ab\/3b6\/683\/2ab3b6683f47bb14972b8a3a47f82a10.png\"\/><\/figure>\n<p>\u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430,  \u0437\u0430\u043f\u0438\u043b\u0435\u043d\u0430 \u043d\u0430 Gsap. \u0418 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441 \u0434\u0435\u043b\u043e, \u0440\u0438\u0441\u0443\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 \u043c\u044b \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u044c\u0435\u043c \u0447\u0430\u0435\u043a \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u041f\u0420 \u0432 \u0433\u0438\u0442\u0445\u0430\u0431.<\/p>\n<p>\u041d\u041e. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u0432\u0438\u0441\u0430\u043b\u0430, \u0434\u0435\u0440\u0433\u0430\u043b\u0430\u0441\u044c, \u0430 \u043d\u0430 \u0441\u043b\u0430\u0431\u044b\u0445 \u041f\u041a \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0440\u0435\u0448\u0438\u043b\u0441\u044f \u0432\u0437\u044f\u0442\u044c\u0441\u044f \u0437\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043c \u0435\u0435 \u043a\u0438\u0448\u043a\u0430\u0445 \ud83d\ude42<br \/>\u0418, \u043e \u0427\u0423\u0414\u041e! \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u043c. \u041a\u0430\u043a \u0432\u0430\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f?<\/p>\n<pre><code class=\"javascript\">export const AnimatedButtonLinkWitmUtm: React.FC&lt;IAnimatedButtonProps&gt; = ({   isDark = false,   btnColor = '#0A85D1',   btnShadow = '0 0 0 0px rgb(157,52,218)',   maxWidth = 315, }) =&gt; {   const buttonRef = useRef&lt;HTMLDivElement&gt;();   const tl = gsap.timeline();    useEffect(() =&gt; {     if (buttonRef.current) {       const trigger = ScrollTrigger.create({         trigger: buttonRef.current,         start: `top bottom-=400px`,         onEnter: () =&gt; {           tl.to(buttonRef.current, { opacity: 1, duration: 0.3 })             .to(buttonRef.current, {               duration: 0.3,               boxShadow: btnShadow,               ease: 'circ.in',             })             .to(buttonRef.current, {               duration: 0.3,               boxShadow: btnShadow,               ease: 'circ.out',             })             .to(buttonRef.current, {               maxWidth: `${maxWidth}px`,               width: '100%',               paddingLeft: 24,               duration: 1,             })             .to(buttonRef.current.children[1], { opacity: 1, duration: 2 }, '&lt;0.4')             .to(buttonRef.current.children[0], { opacity: 1, duration: 2 }, '&lt;0.5');         },         onLeaveBack: () =&gt; {           tl.to(buttonRef.current, { opacity: 0 })             .to(buttonRef.current.children[1], { opacity: 0 })             .to(buttonRef.current, { width: '55px', paddingLeft: 10 })             .to(buttonRef.current.children[0], { opacity: 0, delay: 0, duration: 0 });         },       });        return () =&gt; {         trigger.kill();       };     }   }, [btnShadow, maxWidth, tl]);    return (     &lt;&gt;       &lt;div         ref={buttonRef}         className={cn(           'relative flex h-[56px] w-[56px] items-center justify-between gap-[16px] rounded-[10px] px-[10px] py-[8px] opacity-0 shadow-[inset_0px_1px_0px_0px_rgba(0,0,0,0.11)] backdrop-blur-[3.5px]',           {             'bg-[#D8D8D8]\/30': !isDark,             'bg-[#424245]\/70': isDark,           }         )}       &gt;         &lt;LinkWithUtm           href=\"https:\/\/a6b9d8dc-b142-4b92-b1d0-dfbfd2230471.selstorage.ru\/assets\/edu-program.pdf\"           target=\"_blank\"           className={cn(             'm-0 text-[17px] font-medium leading-[27.2px] opacity-0 after:absolute after:inset-0',             {               'text-black': !isDark,               'text-[#F5F5F7]': isDark,             }           )}         &gt;           \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435         &lt;\/LinkWithUtm&gt;         &lt;div           className=\"h-[40px] w-[40px] min-w-[40px] rounded-[10px] p-[8px] opacity-0\"           style={{ backgroundColor: btnColor }}         &gt;           &lt;Image src={arrowRight} alt=\"\" \/&gt;         &lt;\/div&gt;       &lt;\/div&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0430 GSAP \u0438 \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u0441\u043a\u0440\u043e\u043b\u0430 \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f.<br \/>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043e\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u0438 opacity.<\/p>\n<p>\u0410 \u043d\u0443\u0436\u0435\u043d \u043b\u0438 \u043d\u0430\u043c GSAP \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438??? \u041d\u0415\u0422. \u0418 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043f\u043e\u0447\u0435\u043c\u0443. <br \/>1 &#8212; \u0412\u0435\u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0420\u0430\u0434\u0438 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u044b \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432\u0435\u0441\u043e\u043c 4 \u043c\u0431.<br \/>2 &#8212; \u042d\u0442\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c CSS<\/p>\n<div class=\"floating-image\">\n<figure class=\"float full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/57e\/d56\/0fa\/57ed560fabd7629a7e477bf17cc8f9f8.png\" width=\"736\" height=\"858\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/57e\/d56\/0fa\/57ed560fabd7629a7e477bf17cc8f9f8.png\"\/><\/figure>\n<\/div>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c, \u043d\u043e \u0434\u043b\u044f \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043b\u0438\u0448\u044c Observer. \u0412\u0441\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0443\u043a\u043e\u0432, \u043d\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0433\u0447\u0435 \u0438 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443 \u043d\u0435\u0435 \u043b\u0435\u0436\u0430\u0442 \u0440\u0435\u0430\u043a\u0442\u043e\u0432\u0441\u043a\u0438\u0435 \u0445\u0443\u043a\u0438.<\/p>\n<div class=\"floating-image\">\n<figure class=\"float full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ed6\/957\/5dd\/ed69575dd749ac167df39566f97a671e.png\" alt=\"React-Intersection-Observer\" title=\"React-Intersection-Observer\" width=\"816\" height=\"1318\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ed6\/957\/5dd\/ed69575dd749ac167df39566f97a671e.png\"\/><\/p>\n<div><figcaption>React-Intersection-Observer<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0430\u043a\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0433\u0447\u0435 \u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0435\u0435 \u043f\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430\u043c \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c \ud83d\ude42<\/p>\n<\/div>\n<p>\u0418 \u0447\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/p>\n<pre><code class=\"javascript\">export const NewAnimatedButtonWithLinkUtm = ({   isDark = false,   btnColor = '#0A85D1', }: IAnimatedButtonProps) =&gt; {   const { ref, inView } = useInView();    return (     &lt;div       ref={ref}       className={twMerge(         'sticky bottom-8 top-[80vh] mx-auto mt-8 flex h-[56px] cursor-pointer items-center justify-between gap-[16px] rounded-[10px] px-4 py-[8px] shadow-md backdrop-blur-[3.5px] transition-all',         isDark ? 'bg-[#424245]\/70' : 'bg-[#D8D8D8]\/30',         inView ? `opacity-1 w-[315px] delay-500 duration-1000` : 'w-[65px] opacity-0'       )}     &gt;       &lt;LinkWithUtm         href={linkHref}         className={twJoin(           'm-0 text-[17px] font-medium transition-all after:absolute after:inset-0',           isDark ? 'bg-[#424245]\/70 text-[#F5F5F7]' : 'bg-transparent text-black',           inView ? 'opacity-1 delay-1000 duration-1000' : 'opacity-0'         )}       &gt;         \u041d\u0430\u0447\u0430\u0442\u044c \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e       &lt;\/LinkWithUtm&gt;       &lt;div         className={twJoin(           `absolute right-3 h-[40px] w-[40px] min-w-[40px] animate-pulse rounded-[10px] p-2 transition-all bg-[${btnColor}]`,           inView ? 'opacity-1' : 'opacity-0'         )}       &gt;         &lt;Image src={arrowRight} alt=\"\" \/&gt;       &lt;\/div&gt;     &lt;\/div&gt;   ); };<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u043e 85 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u0443 \u043c\u0435\u043d\u044f 36 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0414\u0443\u043c\u0430\u044e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \ud83d\ude42<\/p>\n<p>\u041d\u041e. \u041d\u0430 \u044d\u0442\u043e\u043c \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u043a\u0430\u043a \u0441\u0435\u043a\u0446\u0438\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0430 \u0432\u043e \u0432\u044c\u044e\u043f\u043e\u0440\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0430 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u0438\u043b 30% \u0441\u0435\u043a\u0446\u0438\u0438 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0430. \u0418 \u0442\u0443\u0442 \u0447\u0435\u0441\u0442\u043d\u043e \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b \u0438 \u043d\u0430\u0447\u0430\u043b \u0433\u0443\u0433\u043b\u0438\u0442\u044c, \u0445\u043e\u0442\u044f \u0441\u043f\u0443\u0441\u0442\u044f \u043f\u0430\u0440\u0443 \u0447\u0430\u0441\u043e\u0432 \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439.<\/p>\n<p>\u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043b\u0435\u0436\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 \u0438 \u0447\u0435\u0440\u0435\u0437 children \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0435\u043a\u0446\u0438\u044e, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438 \u0432\u043e\u0442 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \ud83d\ude42<\/p>\n<pre><code class=\"javascript\">export const SectionNewAnimatedButtonWithLinkUtm = ({   isDark = false,   btnClassName,   children,   className = 'relative mx-auto mb-40 max-w-[1024px] px-5 lg:px-0',   text = '\u041d\u0430\u0447\u0430\u0442\u044c \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e', }: IAnimatedButtonProps) =&gt; {   const { ref, inView } = useInView({     threshold: 0.2,   });    return (     &lt;section ref={ref} className={className}&gt;       {children}       &lt;div         className={twMerge(           'sticky bottom-8 top-[80vh] mx-auto mt-8 flex h-[56px] cursor-pointer items-center justify-between gap-[16px] rounded-[10px] px-4 py-[8px] shadow-md backdrop-blur-[3.5px] transition-all',           isDark ? 'bg-[#424245]\/70' : 'bg-[#D8D8D8]\/30',           inView             ? `opacity-1 w-[315px] delay-500 duration-1000`             : 'w-[65px] opacity-0 duration-1000'         )}       &gt;         &lt;LinkWithUtm           href={linkHref}           className={twJoin(             'm-0 text-[17px] font-medium transition-all after:absolute after:inset-0',             isDark ? 'bg-[#424245]\/70 text-[#F5F5F7]' : 'bg-transparent text-black',             inView ? 'opacity-1 delay-1000 duration-200' : 'opacity-0'           )}         &gt;           {text}         &lt;\/LinkWithUtm&gt;         &lt;div           className={twMerge(             `absolute right-3 h-[40px] w-[40px] min-w-[40px] animate-pulse rounded-[10px] bg-[#0A85D1] p-2 transition-all`,             `${btnClassName}`,             inView ? 'opacity-1' : 'opacity-0'           )}         &gt;           &lt;Image src={arrowRight} alt=\"\" \/&gt;         &lt;\/div&gt;       &lt;\/div&gt;     &lt;\/section&gt;   ); };<\/code><\/pre>\n<p>\u041f\u0440\u0438\u0431\u0430\u0432\u0438\u043b\u043e\u0441\u044c 10 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, \u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e. \u041a\u043e\u0434 \u0432\u0441\u0435 \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \ud83d\ude42<\/p>\n<p>\u0412\u0440\u043e\u0434\u0435 \u0431\u044b \u0432\u0441\u0435, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u041f\u0420 \u0438 \u0436\u0434\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442 \u0422\u0438\u043c\u043b\u0438\u0434\u0430 \u0438 \u043c\u0435\u0440\u0436\u0438\u0442\u044c \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0432\u0435\u0442\u043a\u0443.<\/p>\n<p>\u041d\u041e\u041e\u041e\u041e&#8230; \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0435\u0449\u0435 \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u041e\u041e\u041f &#8212; Open\/Closed \u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442, \u0447\u0442\u043e\u0431\u044b \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0438 \u0435\u043c\u0443 \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0437\u0430\u043b\u0430\u0437\u0438\u0442\u044c \u0432 \u043a\u0438\u0448\u043a\u0438. <\/p>\n<p>\u0418 \u0442\u0443\u0442 \u0440\u0435\u0448\u0438\u043b \u044f \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442\u0435 \ud83d\ude42<br \/>\u0412\u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/p>\n<pre><code class=\"javascript\">export const AnimatedButtonContext = createContext&lt;IAnimatedButtonContext&gt;(null);  export const SectionAnimatedButton = ({ children }) =&gt; {   const { ref, inView } = useInView({     threshold: 0.2,   });    return (     &lt;AnimatedButtonContext.Provider value={{ inView }}&gt;       &lt;section className=\"relative mx-auto mb-40 max-w-[1024px] px-5 lg:px-0\" ref={ref}&gt;         {children}         &lt;AnimatedBtn \/&gt;       &lt;\/section&gt;     &lt;\/AnimatedButtonContext.Provider&gt;   ); };<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 \u0441\u0430\u043c\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a useContext \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443<\/p>\n<pre><code class=\"javascript\">export const AnimatedBtn = ({   isDark = false,   btnClassName,   text = '\u041d\u0430\u0447\u0430\u0442\u044c \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e',   link = '', }: IAnimatedButtonProps) =&gt; {   const { inView } = useContext&lt;IAnimatedButtonContext&gt;(AnimatedButtonContext);    return (     &lt;div       className={twMerge(         'sticky bottom-8 top-[80vh] mx-auto mt-8 flex h-[56px] cursor-pointer items-center justify-between gap-[16px] rounded-[10px] px-4 py-[8px] shadow-md backdrop-blur-[3.5px] transition-all',         isDark ? 'bg-[#424245]\/70' : 'bg-[#D8D8D8]\/30',         inView ? `opacity-1 w-[315px] delay-500 duration-1000` : 'w-[65px] opacity-0 duration-1000'       )}     &gt;       &lt;LinkWithUtm         href={link}         className={twJoin(           'm-0 text-[17px] font-medium transition-all after:absolute after:inset-0',           isDark ? 'bg-[#424245]\/70 text-[#F5F5F7]' : 'bg-transparent text-black',           inView ? 'opacity-1 delay-1000 duration-200' : 'opacity-0'         )}       &gt;         {text}       &lt;\/LinkWithUtm&gt;       &lt;div         className={twMerge(           `absolute right-3 h-[40px] w-[40px] min-w-[40px] animate-pulse rounded-[10px] bg-[#0A85D1] p-2 transition-all`,           `${btnClassName}`,           inView ? 'opacity-1' : 'opacity-0'         )}       &gt;         &lt;Image src={arrowRight} alt=\"\" \/&gt;       &lt;\/div&gt;     &lt;\/div&gt;   ); };<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0413\u041e\u0422\u041e\u0412 \ud83d\ude42<\/p>\n<p>\u0427\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u044d\u0442\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u044b \u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c:<br \/>1 &#8212; \u0423\u0431\u0440\u0430\u043b\u0438 \u0442\u044f\u0436\u0435\u043b\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<br \/>2 &#8212; \u0421\u0434\u0435\u043b\u0430\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0440\u043e\u0449\u0435 \u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u044c \u0441\u0442\u0430\u043d\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435<br \/>3 &#8212; \u0421\u043f\u0440\u044f\u0442\u0430\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0437\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \ud83d\ude42<br \/>4 &#8212; \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0433\u043b\u0430\u0434\u043a\u043e \u0438 \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0430\u043d\u0438\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043d\u0430 \u0441\u043b\u0430\u0431\u044b\u0445 \u041f\u041a<\/p>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0443\u043c\u0431\u0443\u0440\u043d\u0430\u044f, \u043d\u043e \u044d\u0442\u0438\u043c \u0445\u043e\u0442\u0435\u043b \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u0438 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0437\u0430\u043b\u0435\u0437\u0442\u044c \u0432 \u0442\u0443 \u0441\u0430\u043c\u0443\u044e \u0411\u0410\u0417\u0423 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \ud83d\ude42<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0432\u0441\u0435\u043c \u043a\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b! \u0411\u044b\u043b \u0440\u0430\u0434 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u043f\u0430\u0440\u0442-\u0442\u0430\u0439\u043c \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0445\u043e\u0447\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u044f \u043e\u0442\u043a\u0440\u044b\u0442 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043a \u043e\u0444\u0444\u0435\u0440\u0430\u043c \u0438 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u0430\u043c\u0431\u0438\u0446\u0438\u043e\u0437\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a &#8212; \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u0444\u043b\u0435\u043a\u0441\u0438\u0442\u044c \u0432\u0430\u0448\u0438\u043c \u043a\u043e\u0434\u043e\u043c \ud83d\ude42<br \/><a href=\"https:\/\/t.me\/sadbatya\" rel=\"noopener noreferrer nofollow\">https:\/\/t.me\/sadbatya<\/a><\/p>\n<p>\u0410 \u0441 \u0432\u0430\u043c\u0438 \u0431\u044b\u043b \u0412\u043b\u0430\u0434\u0438\u043c\u0438\u0440! \u0425\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f, \u0432\u0435\u0447\u0435\u0440\u0430 \u0438 \u043d\u043e\u0447\u0438 \ud83d\ude42<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/874302\/\"> https:\/\/habr.com\/ru\/articles\/874302\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u042f \u0434\u0436\u0443\u043d\u0438\u043e\u0440 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0418 \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 &#8212; \u044d\u0442\u043e \u0438\u0437\u043b\u0438\u0448\u0435\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439 \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443. \u041f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 NextJs, TS, TailwindCSS. \u0418 \u0435\u0441\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043e\u0434\u0430\u043b\u043a\u0443.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430,  \u0437\u0430\u043f\u0438\u043b\u0435\u043d\u0430 \u043d\u0430 Gsap. \u0418 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441 \u0434\u0435\u043b\u043e, \u0440\u0438\u0441\u0443\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 \u043c\u044b \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u044c\u0435\u043c \u0447\u0430\u0435\u043a \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u041f\u0420 \u0432 \u0433\u0438\u0442\u0445\u0430\u0431.<\/p>\n<p>\u041d\u041e. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u0432\u0438\u0441\u0430\u043b\u0430, \u0434\u0435\u0440\u0433\u0430\u043b\u0430\u0441\u044c, \u0430 \u043d\u0430 \u0441\u043b\u0430\u0431\u044b\u0445 \u041f\u041a \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0440\u0435\u0448\u0438\u043b\u0441\u044f \u0432\u0437\u044f\u0442\u044c\u0441\u044f \u0437\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043c \u0435\u0435 \u043a\u0438\u0448\u043a\u0430\u0445 \ud83d\ude42<br \/>\u0418, \u043e \u0427\u0423\u0414\u041e! \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u043c. \u041a\u0430\u043a \u0432\u0430\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f?<\/p>\n<pre><code class=\"javascript\">export const AnimatedButtonLinkWitmUtm: React.FC&lt;IAnimatedButtonProps&gt; = ({   isDark = false,   btnColor = '#0A85D1',   btnShadow = '0 0 0 0px rgb(157,52,218)',   maxWidth = 315, }) =&gt; {   const buttonRef = useRef&lt;HTMLDivElement&gt;();   const tl = gsap.timeline();    useEffect(() =&gt; {     if (buttonRef.current) {       const trigger = ScrollTrigger.create({         trigger: buttonRef.current,         start: `top bottom-=400px`,         onEnter: () =&gt; {           tl.to(buttonRef.current, { opacity: 1, duration: 0.3 })             .to(buttonRef.current, {               duration: 0.3,               boxShadow: btnShadow,               ease: 'circ.in',             })             .to(buttonRef.current, {               duration: 0.3,               boxShadow: btnShadow,               ease: 'circ.out',             })             .to(buttonRef.current, {               maxWidth: `${maxWidth}px`,               width: '100%',               paddingLeft: 24,               duration: 1,             })             .to(buttonRef.current.children[1], { opacity: 1, duration: 2 }, '&lt;0.4')             .to(buttonRef.current.children[0], { opacity: 1, duration: 2 }, '&lt;0.5');         },         onLeaveBack: () =&gt; {           tl.to(buttonRef.current, { opacity: 0 })             .to(buttonRef.current.children[1], { opacity: 0 })             .to(buttonRef.current, { width: '55px', paddingLeft: 10 })             .to(buttonRef.current.children[0], { opacity: 0, delay: 0, duration: 0 });         },       });        return () =&gt; {         trigger.kill();       };     }   }, [btnShadow, maxWidth, tl]);    return (     &lt;&gt;       &lt;div         ref={buttonRef}         className={cn(           'relative flex h-[56px] w-[56px] items-center justify-between gap-[16px] rounded-[10px] px-[10px] py-[8px] opacity-0 shadow-[inset_0px_1px_0px_0px_rgba(0,0,0,0.11)] backdrop-blur-[3.5px]',           {             'bg-[#D8D8D8]\/30': !isDark,             'bg-[#424245]\/70': isDark,           }         )}       &gt;         &lt;LinkWithUtm           href=\"https:\/\/a6b9d8dc-b142-4b92-b1d0-dfbfd2230471.selstorage.ru\/assets\/edu-program.pdf\"           target=\"_blank\"           className={cn(             'm-0 text-[17px] font-medium leading-[27.2px] opacity-0 after:absolute after:inset-0',             {               'text-black': !isDark,               'text-[#F5F5F7]': isDark,             }           )}         &gt;           \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435         &lt;\/LinkWithUtm&gt;         &lt;div           className=\"h-[40px] w-[40px] min-w-[40px] rounded-[10px] p-[8px] opacity-0\"           style={{ backgroundColor: btnColor }}         &gt;           &lt;Image src={arrowRight} alt=\"\" \/&gt;         &lt;\/div&gt;       &lt;\/div&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0430 GSAP \u0438 \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u0441\u043a\u0440\u043e\u043b\u0430 \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f.<br \/>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043e\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u0438 opacity.<\/p>\n<p>\u0410 \u043d\u0443\u0436\u0435\u043d \u043b\u0438 \u043d\u0430\u043c GSAP \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438??? \u041d\u0415\u0422. \u0418 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043f\u043e\u0447\u0435\u043c\u0443. <br \/>1 &#8212; \u0412\u0435\u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0420\u0430\u0434\u0438 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u044b \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432\u0435\u0441\u043e\u043c 4 \u043c\u0431.<br \/>2 &#8212; \u042d\u0442\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c CSS<\/p>\n<div class=\"floating-image\">\n<figure class=\"float full-width\"><\/figure>\n<\/div>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c, \u043d\u043e \u0434\u043b\u044f \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043b\u0438\u0448\u044c Observer. \u0412\u0441\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0443\u043a\u043e\u0432, \u043d\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0433\u0447\u0435 \u0438 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443 \u043d\u0435\u0435 \u043b\u0435\u0436\u0430\u0442 \u0440\u0435\u0430\u043a\u0442\u043e\u0432\u0441\u043a\u0438\u0435 \u0445\u0443\u043a\u0438.<\/p>\n<div class=\"floating-image\">\n<figure class=\"float full-width\">\n<div><figcaption>React-Intersection-Observer<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0430\u043a\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0433\u0447\u0435 \u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0435\u0435 \u043f\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430\u043c \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c \ud83d\ude42<\/p>\n<\/div>\n<p>\u0418 \u0447\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/p>\n<pre><code class=\"javascript\">export const NewAnimatedButtonWithLinkUtm = ({   isDark = false,   btnColor = '#0A85D1', }: IAnimatedButtonProps) =&gt; {   const { ref, inView } = useInView();    return (     &lt;div       ref={ref}       className={twMerge(         'sticky bottom-8 top-[80vh] mx-auto mt-8 flex h-[56px] cursor-pointer items-center justify-between gap-[16px] rounded-[10px] px-4 py-[8px] shadow-md backdrop-blur-[3.5px] transition-all',         isDark ? 'bg-[#424245]\/70' : 'bg-[#D8D8D8]\/30',         inView ? `opacity-1 w-[315px] delay-500 duration-1000` : 'w-[65px] opacity-0'       )}     &gt;       &lt;LinkWithUtm         href={linkHref}         className={twJoin(           'm-0 text-[17px] font-medium transition-all after:absolute after:inset-0',           isDark ? 'bg-[#424245]\/70 text-[#F5F5F7]' : 'bg-transparent text-black',           inView ? 'opacity-1 delay-1000 duration-1000' : 'opacity-0'         )}       &gt;         \u041d\u0430\u0447\u0430\u0442\u044c \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e       &lt;\/LinkWithUtm&gt;       &lt;div         className={twJoin(           `absolute right-3 h-[40px] w-[40px] min-w-[40px] animate-pulse rounded-[10px] p-2 transition-all bg-[${btnColor}]`,           inView ? 'opacity-1' : 'opacity-0'         )}       &gt;         &lt;Image src={arrowRight} alt=\"\" \/&gt;       &lt;\/div&gt;     &lt;\/div&gt;   ); };<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u043e 85 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u0443 \u043c\u0435\u043d\u044f 36 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0414\u0443\u043c\u0430\u044e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \ud83d\ude42<\/p>\n<p>\u041d\u041e. \u041d\u0430 \u044d\u0442\u043e\u043c \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u043a\u0430\u043a \u0441\u0435\u043a\u0446\u0438\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0430 \u0432\u043e \u0432\u044c\u044e\u043f\u043e\u0440\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0430 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u0438\u043b 30% \u0441\u0435\u043a\u0446\u0438\u0438 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0430. \u0418 \u0442\u0443\u0442 \u0447\u0435\u0441\u0442\u043d\u043e \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b \u0438 \u043d\u0430\u0447\u0430\u043b \u0433\u0443\u0433\u043b\u0438\u0442\u044c, \u0445\u043e\u0442\u044f \u0441\u043f\u0443\u0441\u0442\u044f \u043f\u0430\u0440\u0443 \u0447\u0430\u0441\u043e\u0432 \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439.<\/p>\n<p>\u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043b\u0435\u0436\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 \u0438 \u0447\u0435\u0440\u0435\u0437 children \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0435\u043a\u0446\u0438\u044e, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438 \u0432\u043e\u0442 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \ud83d\ude42<\/p>\n<pre><code class=\"javascript\">export const SectionNewAnimatedButtonWithLinkUtm = ({   isDark = false,   btnClassName,   children,   className = 'relative mx-auto mb-40 max-w-[1024px] px-5 lg:px-0',   text = '\u041d\u0430\u0447\u0430\u0442\u044c \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e', }: IAnimatedButtonProps) =&gt; {   const { ref, inView } = useInView({     threshold: 0.2,   });    return (     &lt;section ref={ref} className={className}&gt;       {children}       &lt;div         className={twMerge(           'sticky bottom-8 top-[80vh] mx-auto mt-8 flex h-[56px] cursor-pointer items-center justify-between gap-[16px] rounded-[10px] px-4 py-[8px] shadow-md backdrop-blur-[3.5px] transition-all',           isDark ? 'bg-[#424245]\/70' : 'bg-[#D8D8D8]\/30',           inView             ? `opacity-1 w-[315px] delay-500 duration-1000`             : 'w-[65px] opacity-0 duration-1000'         )}       &gt;         &lt;LinkWithUtm           href={linkHref}           className={twJoin(             'm-0 text-[17px] font-medium transition-all after:absolute after:inset-0',             isDark ? 'bg-[#424245]\/70 text-[#F5F5F7]' : 'bg-transparent text-black',             inView ? 'opacity-1 delay-1000 duration-200' : 'opacity-0'           )}         &gt;           {text}         &lt;\/LinkWithUtm&gt;         &lt;div           className={twMerge(             `absolute right-3 h-[40px] w-[40px] min-w-[40px] animate-pulse rounded-[10px] bg-[#0A85D1] p-2 transition-all`,             `${btnClassName}`,             inView ? 'opacity-1' : 'opacity-0'           )}         &gt;           &lt;Image src={arrowRight} alt=\"\" \/&gt;         &lt;\/div&gt;       &lt;\/div&gt;     &lt;\/section&gt;   ); };<\/code><\/pre>\n<p>\u041f\u0440\u0438\u0431\u0430\u0432\u0438\u043b\u043e\u0441\u044c 10 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, \u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e. \u041a\u043e\u0434 \u0432\u0441\u0435 \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \ud83d\ude42<\/p>\n<p>\u0412\u0440\u043e\u0434\u0435 \u0431\u044b \u0432\u0441\u0435, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u041f\u0420 \u0438 \u0436\u0434\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442 \u0422\u0438\u043c\u043b\u0438\u0434\u0430 \u0438 \u043c\u0435\u0440\u0436\u0438\u0442\u044c \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0432\u0435\u0442\u043a\u0443.<\/p>\n<p>\u041d\u041e\u041e\u041e\u041e&#8230; \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0435\u0449\u0435 \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u041e\u041e\u041f &#8212; Open\/Closed \u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442, \u0447\u0442\u043e\u0431\u044b \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0438 \u0435\u043c\u0443 \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0437\u0430\u043b\u0430\u0437\u0438\u0442\u044c \u0432 \u043a\u0438\u0448\u043a\u0438. <\/p>\n<p>\u0418 \u0442\u0443\u0442 \u0440\u0435\u0448\u0438\u043b \u044f \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442\u0435 \ud83d\ude42<br \/>\u0412\u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/p>\n<pre><code class=\"javascript\">export const AnimatedButtonContext = createContext&lt;IAnimatedButtonContext&gt;(null);  export const SectionAnimatedButton = ({ children }) =&gt; {   const { ref, inView } = useInView({     threshold: 0.2,   });    return (     &lt;AnimatedButtonContext.Provider value={{ inView }}&gt;       &lt;section className=\"relative mx-auto mb-40 max-w-[1024px] px-5 lg:px-0\" ref={ref}&gt;         {children}         &lt;AnimatedBtn \/&gt;       &lt;\/section&gt;     &lt;\/AnimatedButtonContext.Provider&gt;   ); };<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 \u0441\u0430\u043c\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a useContext \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443<\/p>\n<pre><code class=\"javascript\">export const AnimatedBtn = ({   isDark = false,   btnClassName,   text = '\u041d\u0430\u0447\u0430\u0442\u044c \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e',   link = '', }: IAnimatedButtonProps) =&gt; {   const { inView } = useContext&lt;IAnimatedButtonContext&gt;(AnimatedButtonContext);    return (     &lt;div       className={twMerge(         'sticky bottom-8 top-[80vh] mx-auto mt-8 flex h-[56px] cursor-pointer items-center justify-between gap-[16px] rounded-[10px] px-4 py-[8px] shadow-md backdrop-blur-[3.5px] transition-all',         isDark ? 'bg-[#424245]\/70' : 'bg-[#D8D8D8]\/30',         inView ? `opacity-1 w-[315px] delay-500 duration-1000` : 'w-[65px] opacity-0 duration-1000'       )}     &gt;       &lt;LinkWithUtm         href={link}         className={twJoin(           'm-0 text-[17px] font-medium transition-all after:absolute after:inset-0',           isDark ? 'bg-[#424245]\/70 text-[#F5F5F7]' : 'bg-transparent text-black',           inView ? 'opacity-1 delay-1000 duration-200' : 'opacity-0'         )}       &gt;         {text}       &lt;\/LinkWithUtm&gt;       &lt;div         className={twMerge(           `absolute right-3 h-[40px] w-[40px] min-w-[40px] animate-pulse rounded-[10px] bg-[#0A85D1] p-2 transition-all`,  <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-445295","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/445295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=445295"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/445295\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=445295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=445295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=445295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}