From 59ee1e931f5ab634d3a64f596cd69b9207dd4414 Mon Sep 17 00:00:00 2001
From: Yuriy Plotnikov <yuriy.plotnikov@travelline.ru>
Date: Fri, 8 May 2026 14:16:15 +0300
Subject: [PATCH 1/2] Add animations

---
 src/app/api/revalidate/route.ts               | 24 +++----
 src/app/layout.tsx                            | 11 ++-
 src/app/order-delivery/page.tsx               | 10 ++-
 src/components/AboutPage/AboutPage.tsx        | 14 +++-
 .../AnimationObserver/AnimationObserver.tsx   | 50 ++++++++++++++
 src/components/Categories/Categories.tsx      |  9 ++-
 src/components/ContactsPage/ContactsPage.tsx  | 28 ++++++--
 src/components/Detail/Detail.tsx              | 10 ++-
 src/components/EmptySection/EmptySection.tsx  |  5 +-
 src/components/Footer/Footer.module.scss      |  5 ++
 src/components/Footer/Footer.tsx              | 17 +++--
 .../GalleryPage/GalleryPageClient.tsx         |  8 ++-
 src/components/Header/Header.module.scss      | 17 +++++
 src/components/Heading/Heading.tsx            |  8 ++-
 src/components/Main/About/About.tsx           | 12 +++-
 src/components/Main/Advantages/Advantages.tsx | 13 +++-
 .../Main/Calculation/Calculation.tsx          |  6 +-
 .../Main/Categories/CategoriesSlider.tsx      |  2 +-
 src/components/Main/Faq/Faq.tsx               | 13 +++-
 src/components/Main/InStock/InStock.tsx       | 13 +++-
 .../Main/LastWorks/LastWorksSlider.tsx        |  2 +-
 src/components/Main/Masters/MastersSlider.tsx |  2 +-
 src/components/Main/News/NewsSlider.tsx       |  2 +-
 src/components/Main/Process/Process.tsx       | 12 +++-
 .../Main/Restoration/Restoration.tsx          | 12 +++-
 src/components/Main/Reviews/Reviews.tsx       |  4 +-
 src/components/Master/Master.tsx              | 13 +++-
 src/components/News/News.tsx                  |  9 ++-
 src/components/NotFound/NotFound.tsx          |  8 ++-
 .../PageTransition/PageTransition.tsx         | 18 +++++
 src/components/Payment/Payment.tsx            |  6 +-
 src/components/Reviews/Reviews.tsx            |  4 +-
 src/components/ReviewsList/ReviewsList.tsx    |  9 ++-
 src/components/Works/Works.tsx                |  9 ++-
 src/styles/animations.scss                    | 53 +++++++++++++++
 src/styles/blocks.scss                        |  1 +
 src/styles/blocks/animate.scss                | 67 +++++++++++++++++++
 37 files changed, 432 insertions(+), 74 deletions(-)
 create mode 100644 src/components/AnimationObserver/AnimationObserver.tsx
 create mode 100644 src/components/PageTransition/PageTransition.tsx
 create mode 100644 src/styles/blocks/animate.scss

diff --git a/src/app/api/revalidate/route.ts b/src/app/api/revalidate/route.ts
index b814118c..d8932243 100644
--- a/src/app/api/revalidate/route.ts
+++ b/src/app/api/revalidate/route.ts
@@ -37,21 +37,21 @@ export async function POST(request: NextRequest) {
 
     const modelTagMap: Record<string, string[]> = {
       // Collections
-      news:          ['collection-news'],
-      works:         ['collection-works'],
-      reviews:       ['collection-reviews'],
-      category:      ['collection-category'],
-      faq:           ['collection-faq'],
-      advantages:    ['collection-advantages'],
+      news: ['collection-news'],
+      works: ['collection-works'],
+      reviews: ['collection-reviews'],
+      category: ['collection-category'],
+      faq: ['collection-faq'],
+      advantages: ['collection-advantages'],
       createprocess: ['collection-createprocess'],
-      restoration:   ['singleton-restoration'],
-      masters:       ['collection-masters'],
-      mainslider:    ['collection-mainslider'],
+      restoration: ['singleton-restoration'],
+      masters: ['collection-masters'],
+      mainslider: ['collection-mainslider'],
       // Singletons
-      maininfo:      ['singleton-maininfo'],
-      order:         ['singleton-order'],
+      maininfo: ['singleton-maininfo'],
+      order: ['singleton-order'],
       // Trees
-      gallery:       ['tree-gallery'],
+      gallery: ['tree-gallery'],
     }
 
     const tagsToRevalidate = modelTagMap[model] || []
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3c8ae105..84ded6d7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,17 +2,19 @@ import '../styles/globals.scss'
 import '../styles/blocks.scss'
 import { Montserrat, CyrillicOld } from './fonts'
 import type { Metadata } from 'next'
-import { JSX } from 'react'
+import { JSX, ReactNode } from 'react'
 import clsx from 'clsx'
 import Script from 'next/script'
 import Header from '@/components/Header/Header'
 import Footer from '@/components/Footer/Footer'
 import ScrollButton from '@/components/ScrollButton/ScrollButton'
+import AnimationObserver from '@/components/AnimationObserver/AnimationObserver'
+import PageTransition from '@/components/PageTransition/PageTransition'
 
 export const dynamic = 'force-dynamic'
 
 type LayoutProps = {
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export const metadata: Metadata = {
@@ -90,9 +92,12 @@ export default function RootLayout({ children }: LayoutProps): JSX.Element {
         />
 
         <Header />
-        <main>{children}</main>
+        <main>
+          <PageTransition>{children}</PageTransition>
+        </main>
         <Footer />
         <ScrollButton />
+        <AnimationObserver />
       </body>
     </html>
   )
diff --git a/src/app/order-delivery/page.tsx b/src/app/order-delivery/page.tsx
index 5b762e30..82d3a611 100644
--- a/src/app/order-delivery/page.tsx
+++ b/src/app/order-delivery/page.tsx
@@ -40,7 +40,9 @@ export default function Page(): JSX.Element {
 
       <section className="section">
         <div className="container">
-          <h2 className="section__title">Связаться с нами</h2>
+          <h2 className="section__title" data-animate="fade-up">
+            Связаться с нами
+          </h2>
 
           <FormContacts />
         </div>
@@ -48,9 +50,11 @@ export default function Page(): JSX.Element {
 
       <section className="section calculation">
         <div className="container">
-          <h2 className="section__title">Расчёт примерной стоимости</h2>
+          <h2 className="section__title" data-animate="fade-up">
+            Расчёт примерной стоимости
+          </h2>
 
-          <p className="section__description">
+          <p className="section__description" data-animate="fade-up" data-stagger="1">
             (выполнение гравировки и ассиста рассчитывается отдельно)
           </p>
 
diff --git a/src/components/AboutPage/AboutPage.tsx b/src/components/AboutPage/AboutPage.tsx
index 41633a25..4514a18d 100644
--- a/src/components/AboutPage/AboutPage.tsx
+++ b/src/components/AboutPage/AboutPage.tsx
@@ -35,7 +35,7 @@ export default async function AboutPage(): Promise<JSX.Element> {
   return (
     <section className={clsx('section', aboutPageStyles['about'])}>
       <div className={clsx('container', aboutPageStyles['about__container'])}>
-        <div className={aboutPageStyles['about__content']}>
+        <div className={aboutPageStyles['about__content']} data-animate="fade-up">
           <h2 className="visually-hidden">{title}</h2>
 
           <div
@@ -45,13 +45,21 @@ export default async function AboutPage(): Promise<JSX.Element> {
         </div>
 
         {slidesList.length > 0 && (
-          <div className={aboutPageStyles['about__slider']}>
+          <div
+            className={aboutPageStyles['about__slider']}
+            data-animate="scale-in"
+            data-stagger="1"
+          >
             <SliderDetail items={slidesList} />
           </div>
         )}
 
         {slidesList.length === 0 && imageSrc && (
-          <div className={aboutPageStyles['about__image-wrapper']}>
+          <div
+            className={aboutPageStyles['about__image-wrapper']}
+            data-animate="scale-in"
+            data-stagger="1"
+          >
             <Image
               className={aboutPageStyles['about__image']}
               src={imageSrc}
diff --git a/src/components/AnimationObserver/AnimationObserver.tsx b/src/components/AnimationObserver/AnimationObserver.tsx
new file mode 100644
index 00000000..e0012b32
--- /dev/null
+++ b/src/components/AnimationObserver/AnimationObserver.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+
+export default function AnimationObserver(): null {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    let observer: IntersectionObserver | null = null
+
+    // rAF ensures DOM has fully updated after Next.js navigation
+    const raf = requestAnimationFrame(() => {
+      const elements = document.querySelectorAll<HTMLElement>('[data-animate]:not(.is-visible)')
+
+      if (!elements.length) return
+
+      observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) return
+
+            const el = entry.target as HTMLElement
+            const stagger = el.dataset.stagger
+
+            if (stagger) {
+              el.style.setProperty('--stagger', stagger)
+            }
+
+            el.classList.add('is-visible')
+            observer?.unobserve(el)
+          })
+        },
+        {
+          threshold: 0.12,
+          rootMargin: '0px 0px -40px 0px',
+        },
+      )
+
+      elements.forEach((el) => observer!.observe(el))
+    })
+
+    return () => {
+      cancelAnimationFrame(raf)
+      observer?.disconnect()
+    }
+  }, [pathname])
+
+  return null
+}
diff --git a/src/components/Categories/Categories.tsx b/src/components/Categories/Categories.tsx
index 916713ea..623b2378 100644
--- a/src/components/Categories/Categories.tsx
+++ b/src/components/Categories/Categories.tsx
@@ -29,9 +29,14 @@ export default async function Categories(): Promise<JSX.Element | null> {
         <h2 className="visually-hidden">Категории икон</h2>
 
         <ul className={categoriesStyles['categories__list']}>
-          {categoriesList.map((category) => {
+          {categoriesList.map((category, index) => {
             return (
-              <li className={categoriesStyles['categories__item']} key={category.id}>
+              <li
+                className={categoriesStyles['categories__item']}
+                key={category.id}
+                data-animate="fade-up"
+                data-stagger={String(index % 6)}
+              >
                 <Card data={category} />
               </li>
             )
diff --git a/src/components/ContactsPage/ContactsPage.tsx b/src/components/ContactsPage/ContactsPage.tsx
index 89ce8fcd..c8194e82 100644
--- a/src/components/ContactsPage/ContactsPage.tsx
+++ b/src/components/ContactsPage/ContactsPage.tsx
@@ -29,7 +29,11 @@ export default async function ContactsPage(): Promise<JSX.Element | null> {
 
           <ul className={contactsPageStyles['contacts__list']}>
             {address && (
-              <li className={contactsPageStyles['contacts__item']}>
+              <li
+                className={contactsPageStyles['contacts__item']}
+                data-animate="fade-up"
+                data-stagger="0"
+              >
                 <address className={contactsPageStyles['contacts__address']}>
                   <span className={contactsPageStyles['contacts__link-caption']}>Адрес:</span>
 
@@ -39,7 +43,11 @@ export default async function ContactsPage(): Promise<JSX.Element | null> {
             )}
 
             {email && (
-              <li className={contactsPageStyles['contacts__item']}>
+              <li
+                className={contactsPageStyles['contacts__item']}
+                data-animate="fade-up"
+                data-stagger="1"
+              >
                 <a className={contactsPageStyles['contacts__link']} href={createEmailLink(email)}>
                   <span className={contactsPageStyles['contacts__link-caption']}>Email:</span>
 
@@ -49,7 +57,11 @@ export default async function ContactsPage(): Promise<JSX.Element | null> {
             )}
 
             {phone && (
-              <li className={contactsPageStyles['contacts__item']}>
+              <li
+                className={contactsPageStyles['contacts__item']}
+                data-animate="fade-up"
+                data-stagger="2"
+              >
                 <a className={contactsPageStyles['contacts__link']} href={createPhoneLink(phone)}>
                   <span className={contactsPageStyles['contacts__link-caption']}>Телефон:</span>
 
@@ -62,7 +74,11 @@ export default async function ContactsPage(): Promise<JSX.Element | null> {
           <Social addClass={contactsPageStyles['contacts__social']} />
 
           {coordinates && (
-            <div className={contactsPageStyles['contacts__map']}>
+            <div
+              className={contactsPageStyles['contacts__map']}
+              data-animate="fade-in"
+              data-stagger="3"
+            >
               <YandexMap logo={logo} coordinates={coordinates} />
             </div>
           )}
@@ -71,7 +87,9 @@ export default async function ContactsPage(): Promise<JSX.Element | null> {
 
       <section className="section">
         <div className="container">
-          <h2 className="section__title">Связаться с нами</h2>
+          <h2 className="section__title" data-animate="fade-up">
+            Связаться с нами
+          </h2>
 
           <FormContacts />
         </div>
diff --git a/src/components/Detail/Detail.tsx b/src/components/Detail/Detail.tsx
index 8929956b..8fa4e7c0 100644
--- a/src/components/Detail/Detail.tsx
+++ b/src/components/Detail/Detail.tsx
@@ -26,7 +26,7 @@ export default function Detail({
   return (
     <section className={clsx('section', detailStyles['detail'])}>
       <div className={clsx('container', detailStyles['detail__container'])}>
-        <div className={detailStyles['detail__content']}>
+        <div className={detailStyles['detail__content']} data-animate="fade-up">
           <h2 className="section__title">{title}</h2>
 
           <div
@@ -36,13 +36,17 @@ export default function Detail({
         </div>
 
         {slidesList.length > 0 && (
-          <div className={detailStyles['detail__slider']}>
+          <div className={detailStyles['detail__slider']} data-animate="scale-in" data-stagger="1">
             <SliderDetail items={slidesList} />
           </div>
         )}
 
         {slidesList.length === 0 && image && (
-          <div className={detailStyles['detail__image-wrapper']}>
+          <div
+            className={detailStyles['detail__image-wrapper']}
+            data-animate="scale-in"
+            data-stagger="1"
+          >
             <Image
               className={detailStyles['detail__image']}
               src={src}
diff --git a/src/components/EmptySection/EmptySection.tsx b/src/components/EmptySection/EmptySection.tsx
index 34be08f1..41c4de95 100644
--- a/src/components/EmptySection/EmptySection.tsx
+++ b/src/components/EmptySection/EmptySection.tsx
@@ -5,7 +5,10 @@ import clsx from 'clsx'
 export default function EmptySection(): JSX.Element {
   return (
     <section className="section">
-      <div className={clsx('container', emptySectionStyles['empty-section'])}>
+      <div
+        className={clsx('container', emptySectionStyles['empty-section'])}
+        data-animate="fade-up"
+      >
         Здесь ничего нет, но очень скоро появится :)
       </div>
     </section>
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index 4535c2d8..3827ecf6 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -27,11 +27,16 @@
 .footer__logo {
   grid-row: 1 / 2;
   grid-column: 1 / 2;
+
+  // Pass through display so Logo link fills the wrapper naturally
+  display: flex;
 }
 
 .footer__social {
   grid-row: 2 / 3;
   grid-column: 1 / 2;
+
+  display: flex;
 }
 
 .footer__navigation {
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index a9d4585e..d4ad177b 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -10,15 +10,24 @@ export default function Footer(): JSX.Element {
   return (
     <footer className={footerStyles['footer']}>
       <div className={clsx('container', footerStyles['footer__container'])}>
-        <Logo addClass={footerStyles['footer__logo']} isFooter={true} />
+        <div className={footerStyles['footer__logo']} data-animate="fade-up" data-stagger="0">
+          <Logo isFooter={true} />
+        </div>
 
-        <Social addClass={footerStyles['footer__social']} />
+        <div className={footerStyles['footer__social']} data-animate="fade-up" data-stagger="1">
+          <Social />
+        </div>
 
-        <nav className={footerStyles['footer__navigation']} aria-label="Дополнительная по сайту">
+        <nav
+          className={footerStyles['footer__navigation']}
+          aria-label="Дополнительная по сайту"
+          data-animate="fade-up"
+          data-stagger="2"
+        >
           <Menu addClass={footerStyles['footer__menu']} isFooter={true} />
         </nav>
 
-        <div className={footerStyles['footer__wrapper']}>
+        <div className={footerStyles['footer__wrapper']} data-animate="fade-up" data-stagger="3">
           <p className={footerStyles['footer__copyright']}>
             © Иконописная Артель, {new Date().getFullYear()}
           </p>
diff --git a/src/components/GalleryPage/GalleryPageClient.tsx b/src/components/GalleryPage/GalleryPageClient.tsx
index 062457ac..10545f90 100644
--- a/src/components/GalleryPage/GalleryPageClient.tsx
+++ b/src/components/GalleryPage/GalleryPageClient.tsx
@@ -111,7 +111,13 @@ export default function GalleryPageClient({ items }: GalleryPageClientProps): JS
             const isCategory = item.type === 'Категория'
 
             return (
-              <div className={galleryPageStyles['gallery__item']} key={item._id} data-index={index}>
+              <div
+                className={galleryPageStyles['gallery__item']}
+                key={item._id}
+                data-index={index}
+                data-animate="scale-in"
+                data-stagger={String(index % 8)}
+              >
                 <div
                   className={galleryPageStyles['gallery__card']}
                   ref={(el) => {
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index d6de81ee..b5b89594 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -1,5 +1,16 @@
 @use '../../styles/variables.scss' as *;
 
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .header {
   position: fixed;
   top: 0;
@@ -10,6 +21,12 @@
   background-color: $accent-light-bg;
   box-shadow: $boxShadowOutset;
   border-bottom: 1px solid $accent-add-bg;
+
+  animation: slideDown 0.5s ease-out both;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 .header__container {
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
index 0f1e9750..781100ea 100644
--- a/src/components/Heading/Heading.tsx
+++ b/src/components/Heading/Heading.tsx
@@ -21,11 +21,17 @@ export default function Heading({
       <div className={clsx('container', headingStyles['heading__container'])}>
         <Breadcrumbs breadcrumbsList={breadcrumbsList} />
 
-        {title && <h1 className="section__title">{title}</h1>}
+        {title && (
+          <h1 className="section__title" data-animate="fade-up">
+            {title}
+          </h1>
+        )}
 
         {description && (
           <div
             className={clsx('block-html', 'section__description')}
+            data-animate="fade-up"
+            data-stagger="1"
             dangerouslySetInnerHTML={createSanitizedHTML(description)}
           />
         )}
diff --git a/src/components/Main/About/About.tsx b/src/components/Main/About/About.tsx
index d8f81122..1f0f35c8 100644
--- a/src/components/Main/About/About.tsx
+++ b/src/components/Main/About/About.tsx
@@ -22,9 +22,15 @@ export default async function About(): Promise<JSX.Element | null> {
   return (
     <section className={clsx('section', aboutStyles['about'])}>
       <div className={clsx('container', aboutStyles['about__container'])}>
-        <h2 className={aboutStyles['about__title']}>{title}</h2>
+        <h2 className={aboutStyles['about__title']} data-animate="fade-up">
+          {title}
+        </h2>
 
-        <div className={aboutStyles['about__image-wrapper']}>
+        <div
+          className={aboutStyles['about__image-wrapper']}
+          data-animate="scale-in"
+          data-stagger="1"
+        >
           <Image
             className={aboutStyles['about__image']}
             src={image}
@@ -36,6 +42,8 @@ export default async function About(): Promise<JSX.Element | null> {
 
         <div
           className={clsx('block-html', aboutStyles['about__text'])}
+          data-animate="fade-up"
+          data-stagger="2"
           dangerouslySetInnerHTML={createSanitizedHTML(description)}
         />
 
diff --git a/src/components/Main/Advantages/Advantages.tsx b/src/components/Main/Advantages/Advantages.tsx
index f60a1fd6..f64c5f78 100644
--- a/src/components/Main/Advantages/Advantages.tsx
+++ b/src/components/Main/Advantages/Advantages.tsx
@@ -18,16 +18,23 @@ export default async function Advantages(): Promise<JSX.Element | null> {
   return (
     <section className={clsx('section', advantagesStyles['advantages'])}>
       <div className="container">
-        <h2 className="section__title">Преимущества заказа у нас</h2>
+        <h2 className="section__title" data-animate="fade-up">
+          Преимущества заказа у нас
+        </h2>
 
         <ul className={advantagesStyles['advantages__list']}>
-          {advantagesList.map((item) => {
+          {advantagesList.map((item, index) => {
             const title = item.title
             const description = item.description
             const icon = getImageUrl(item.icon._id, 100, 100)
 
             return (
-              <li className={advantagesStyles['advantages__item']} key={item._id}>
+              <li
+                className={advantagesStyles['advantages__item']}
+                key={item._id}
+                data-animate="fade-up"
+                data-stagger={String(index + 1)}
+              >
                 <Image
                   className={logoStyles['logo__image']}
                   src={icon}
diff --git a/src/components/Main/Calculation/Calculation.tsx b/src/components/Main/Calculation/Calculation.tsx
index b1bab393..7e013fa0 100644
--- a/src/components/Main/Calculation/Calculation.tsx
+++ b/src/components/Main/Calculation/Calculation.tsx
@@ -7,9 +7,11 @@ export default function Calculation(): JSX.Element {
   return (
     <section className={clsx('section', calculationStyles['calculation'])} id="calculation">
       <div className="container">
-        <h2 className="section__title">Расчёт примерной стоимости</h2>
+        <h2 className="section__title" data-animate="fade-up">
+          Расчёт примерной стоимости
+        </h2>
 
-        <p className="section__description">
+        <p className="section__description" data-animate="fade-up" data-stagger="1">
           (выполнение гравировки и ассиста рассчитывается отдельно)
         </p>
 
diff --git a/src/components/Main/Categories/CategoriesSlider.tsx b/src/components/Main/Categories/CategoriesSlider.tsx
index baf7940b..5ef460dc 100644
--- a/src/components/Main/Categories/CategoriesSlider.tsx
+++ b/src/components/Main/Categories/CategoriesSlider.tsx
@@ -26,7 +26,7 @@ export default function CategoriesSlider({ categoriesList }: CategoriesSliderPro
   const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)
 
   return (
-    <div className={clsx('container', sliderStyles['slider'])}>
+    <div className={clsx('container', sliderStyles['slider'])} data-animate="fade-up">
       <div className={sliderStyles['slider__heading']}>
         <h2 className="section__title">Категории икон</h2>
 
diff --git a/src/components/Main/Faq/Faq.tsx b/src/components/Main/Faq/Faq.tsx
index a82e7319..30793ff2 100644
--- a/src/components/Main/Faq/Faq.tsx
+++ b/src/components/Main/Faq/Faq.tsx
@@ -37,12 +37,19 @@ export default async function Faq(): Promise<JSX.Element | null> {
 
       <section className={clsx('section', faqStyles['faq'])} id="faq">
         <div className="container">
-          <h2 className="section__title">Вопрос-ответ</h2>
+          <h2 className="section__title" data-animate="fade-up">
+            Вопрос-ответ
+          </h2>
 
           <ul className={faqStyles['faq__list']}>
-            {faqData.map((faq) => {
+            {faqData.map((faq, index) => {
               return (
-                <li className={faqStyles['faq__item']} key={faq._id}>
+                <li
+                  className={faqStyles['faq__item']}
+                  key={faq._id}
+                  data-animate="fade-up"
+                  data-stagger={String(index)}
+                >
                   <details className={faqStyles['faq__item-details']} name="question">
                     <summary
                       className={clsx('block-html', faqStyles['faq__item-title'])}
diff --git a/src/components/Main/InStock/InStock.tsx b/src/components/Main/InStock/InStock.tsx
index 9b023880..ca1bbab6 100644
--- a/src/components/Main/InStock/InStock.tsx
+++ b/src/components/Main/InStock/InStock.tsx
@@ -29,12 +29,19 @@ export default async function InStock(): Promise<JSX.Element | null> {
   return (
     <section className={clsx('section', inStockStyles['in-stock'])}>
       <div className="container">
-        <h2 className="section__title">Рукописные иконы в наличии</h2>
+        <h2 className="section__title" data-animate="fade-up">
+          Рукописные иконы в наличии
+        </h2>
 
         <ul className={inStockStyles['in-stock__list']}>
-          {inStockList.map((work) => {
+          {inStockList.map((work, index) => {
             return (
-              <li className={inStockStyles['in-stock__item']} key={work.id}>
+              <li
+                className={inStockStyles['in-stock__item']}
+                key={work.id}
+                data-animate="fade-up"
+                data-stagger={String(index)}
+              >
                 <Card data={work} />
               </li>
             )
diff --git a/src/components/Main/LastWorks/LastWorksSlider.tsx b/src/components/Main/LastWorks/LastWorksSlider.tsx
index 73fba9a9..3ca134b8 100644
--- a/src/components/Main/LastWorks/LastWorksSlider.tsx
+++ b/src/components/Main/LastWorks/LastWorksSlider.tsx
@@ -26,7 +26,7 @@ export default function LastWorksSlider({ worksList }: LastWorksSliderProps): JS
   const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)
 
   return (
-    <div className={clsx('container', sliderStyles['slider'])}>
+    <div className={clsx('container', sliderStyles['slider'])} data-animate="fade-up">
       <div className={sliderStyles['slider__heading']}>
         <h2 className="section__title">Последние работы</h2>
 
diff --git a/src/components/Main/Masters/MastersSlider.tsx b/src/components/Main/Masters/MastersSlider.tsx
index f7d2fbcc..1377873c 100644
--- a/src/components/Main/Masters/MastersSlider.tsx
+++ b/src/components/Main/Masters/MastersSlider.tsx
@@ -25,7 +25,7 @@ export default function MastersSlider({ mastersList }: MastersSliderProps): JSX.
   const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)
 
   return (
-    <div className={clsx('container', sliderStyles['slider'])}>
+    <div className={clsx('container', sliderStyles['slider'])} data-animate="fade-up">
       <div className={sliderStyles['slider__heading']}>
         <h2 className="section__title">Наши мастера</h2>
 
diff --git a/src/components/Main/News/NewsSlider.tsx b/src/components/Main/News/NewsSlider.tsx
index f892b6e4..a8e19911 100644
--- a/src/components/Main/News/NewsSlider.tsx
+++ b/src/components/Main/News/NewsSlider.tsx
@@ -26,7 +26,7 @@ export default function NewsSlider({ newsList }: NewsSliderProps): JSX.Element {
   const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)
 
   return (
-    <div className={clsx('container', sliderStyles['slider'])}>
+    <div className={clsx('container', sliderStyles['slider'])} data-animate="fade-up">
       <div className={sliderStyles['slider__heading']}>
         <h2 className="section__title">Новости</h2>
 
diff --git a/src/components/Main/Process/Process.tsx b/src/components/Main/Process/Process.tsx
index 7b888ad9..40e93d4e 100644
--- a/src/components/Main/Process/Process.tsx
+++ b/src/components/Main/Process/Process.tsx
@@ -18,17 +18,23 @@ export default async function Process(): Promise<JSX.Element | null> {
   return (
     <section className={clsx('section', processStyles['process'])} id="process">
       <div className="container">
-        <h2 className="section__title">Процесс сотворения образа</h2>
+        <h2 className="section__title" data-animate="fade-up">
+          Процесс сотворения образа
+        </h2>
 
         <ul className={processStyles['process__list']}>
-          {processList.map((process) => {
+          {processList.map((process, index) => {
             const title = process.title
             const description = process.description
             const image = getImageUrl(process.image._id, 800, 500)
             const alt = process.alt ?? process.title
 
             return (
-              <li className={processStyles['process__item']} key={process._id}>
+              <li
+                className={processStyles['process__item']}
+                key={process._id}
+                data-animate={index % 2 === 0 ? 'fade-left' : 'fade-right'}
+              >
                 <Image
                   className={processStyles['process__item-image']}
                   src={image}
diff --git a/src/components/Main/Restoration/Restoration.tsx b/src/components/Main/Restoration/Restoration.tsx
index 53e937e4..8effc3f8 100644
--- a/src/components/Main/Restoration/Restoration.tsx
+++ b/src/components/Main/Restoration/Restoration.tsx
@@ -22,9 +22,15 @@ export default async function Restoration(): Promise<JSX.Element | null> {
   return (
     <section className={clsx('section', restorationStyles['restoration'])} id="restoration">
       <div className={clsx('container', restorationStyles['restoration__container'])}>
-        <h2 className={restorationStyles['restoration__title']}>{title}</h2>
+        <h2 className={restorationStyles['restoration__title']} data-animate="fade-up">
+          {title}
+        </h2>
 
-        <div className={restorationStyles['restoration__image-wrapper']}>
+        <div
+          className={restorationStyles['restoration__image-wrapper']}
+          data-animate="scale-in"
+          data-stagger="1"
+        >
           <Image
             className={restorationStyles['restoration__image']}
             src={image}
@@ -36,6 +42,8 @@ export default async function Restoration(): Promise<JSX.Element | null> {
 
         <div
           className={clsx('block-html', restorationStyles['restoration__text'])}
+          data-animate="fade-up"
+          data-stagger="2"
           dangerouslySetInnerHTML={createSanitizedHTML(description)}
         />
       </div>
diff --git a/src/components/Main/Reviews/Reviews.tsx b/src/components/Main/Reviews/Reviews.tsx
index 8052d57e..b7dc3248 100644
--- a/src/components/Main/Reviews/Reviews.tsx
+++ b/src/components/Main/Reviews/Reviews.tsx
@@ -26,7 +26,9 @@ export default async function Reviews(): Promise<JSX.Element | null> {
   return (
     <section className="section">
       <div className="container">
-        <h2 className="section__title">Отзывы</h2>
+        <h2 className="section__title" data-animate="fade-up">
+          Отзывы
+        </h2>
 
         <ReviewsList reviewsList={reviewsList} />
 
diff --git a/src/components/Master/Master.tsx b/src/components/Master/Master.tsx
index 32dafb5a..f2883583 100644
--- a/src/components/Master/Master.tsx
+++ b/src/components/Master/Master.tsx
@@ -19,11 +19,18 @@ export default function Master({ master }: MasterProps): JSX.Element {
   return (
     <section className={clsx('section', masterStyles['master'])}>
       <div className={clsx('container', masterStyles['master__container'])}>
-        <h2 className={clsx('section__title', masterStyles['master__title'])}>
+        <h2
+          className={clsx('section__title', masterStyles['master__title'])}
+          data-animate="fade-up"
+        >
           Информация о мастере-художнике
         </h2>
 
-        <div className={masterStyles['master__image-wrapper']}>
+        <div
+          className={masterStyles['master__image-wrapper']}
+          data-animate="scale-in"
+          data-stagger="1"
+        >
           <Image
             className={masterStyles['master__image']}
             src={image}
@@ -33,7 +40,7 @@ export default function Master({ master }: MasterProps): JSX.Element {
           />
         </div>
 
-        <div className={masterStyles['master__info']}>
+        <div className={masterStyles['master__info']} data-animate="fade-up" data-stagger="2">
           <h3 className={masterStyles['master__info-name']}>{name}</h3>
 
           <div
diff --git a/src/components/News/News.tsx b/src/components/News/News.tsx
index 794b05ac..c9da77d6 100644
--- a/src/components/News/News.tsx
+++ b/src/components/News/News.tsx
@@ -28,9 +28,14 @@ export default async function News(): Promise<JSX.Element | null> {
         <h2 className="visually-hidden">Список новостей</h2>
 
         <ul className={newsStyles['news__list']}>
-          {newsList.map((news) => {
+          {newsList.map((news, index) => {
             return (
-              <li className={newsStyles['news__item']} key={news.id}>
+              <li
+                className={newsStyles['news__item']}
+                key={news.id}
+                data-animate="fade-up"
+                data-stagger={String(index % 6)}
+              >
                 <Card data={news} />
               </li>
             )
diff --git a/src/components/NotFound/NotFound.tsx b/src/components/NotFound/NotFound.tsx
index 0a4f0e87..06804842 100644
--- a/src/components/NotFound/NotFound.tsx
+++ b/src/components/NotFound/NotFound.tsx
@@ -12,7 +12,7 @@ export default function NotFound(): JSX.Element {
 
   return (
     <section className={clsx('section', notfoundStyles['not-found'])}>
-      <div className={notfoundStyles['not-found__text-wrapper']}>
+      <div className={notfoundStyles['not-found__text-wrapper']} data-animate="fade-up">
         <h2 className={notfoundStyles['not-found__title']}>404</h2>
 
         <p className={notfoundStyles['not-found__text']}>Страница затерялась в космосе</p>
@@ -21,7 +21,11 @@ export default function NotFound(): JSX.Element {
         </Link>
       </div>
 
-      <div className={notfoundStyles['not-found__window-wrapper']}>
+      <div
+        className={notfoundStyles['not-found__window-wrapper']}
+        data-animate="scale-in"
+        data-stagger="1"
+      >
         <div className={notfoundStyles['not-found__window']}>
           <div className={notfoundStyles['not-found__stars']}>{stars}</div>
         </div>
diff --git a/src/components/PageTransition/PageTransition.tsx b/src/components/PageTransition/PageTransition.tsx
new file mode 100644
index 00000000..9ebd627f
--- /dev/null
+++ b/src/components/PageTransition/PageTransition.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { JSX, ReactNode } from 'react'
+import { usePathname } from 'next/navigation'
+
+type PageTransitionProps = {
+  children: ReactNode
+}
+
+export default function PageTransition({ children }: PageTransitionProps): JSX.Element {
+  const pathname = usePathname()
+
+  return (
+    <div key={pathname} className="page-enter">
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx
index 26fbefc9..14830856 100644
--- a/src/components/Payment/Payment.tsx
+++ b/src/components/Payment/Payment.tsx
@@ -17,10 +17,14 @@ export default async function Payment(): Promise<JSX.Element | null> {
   return (
     <section className={clsx('section', paymentStyles['payment'])}>
       <div className="container">
-        <h2 className="section__title">Оплата и доставка</h2>
+        <h2 className="section__title" data-animate="fade-up">
+          Оплата и доставка
+        </h2>
 
         <div
           className={clsx('block-html', paymentStyles['payment__info'])}
+          data-animate="fade-up"
+          data-stagger="1"
           dangerouslySetInnerHTML={createSanitizedHTML(description)}
         />
       </div>
diff --git a/src/components/Reviews/Reviews.tsx b/src/components/Reviews/Reviews.tsx
index 78851095..336afb0b 100644
--- a/src/components/Reviews/Reviews.tsx
+++ b/src/components/Reviews/Reviews.tsx
@@ -32,7 +32,9 @@ export default async function Reviews(): Promise<JSX.Element> {
 
       <section className="section">
         <div className="container">
-          <h2 className="section__title">Оставить отзыв</h2>
+          <h2 className="section__title" data-animate="fade-up">
+            Оставить отзыв
+          </h2>
 
           <FormReviews />
         </div>
diff --git a/src/components/ReviewsList/ReviewsList.tsx b/src/components/ReviewsList/ReviewsList.tsx
index 5662aa1b..d3360bc0 100644
--- a/src/components/ReviewsList/ReviewsList.tsx
+++ b/src/components/ReviewsList/ReviewsList.tsx
@@ -10,9 +10,14 @@ type ReviewsListProps = {
 export default function ReviewsList({ reviewsList }: ReviewsListProps): JSX.Element {
   return (
     <ul className={reviewsListStyles['reviews']}>
-      {reviewsList.map((review) => {
+      {reviewsList.map((review, index) => {
         return (
-          <li className={reviewsListStyles['reviews__item']} key={review.id}>
+          <li
+            className={reviewsListStyles['reviews__item']}
+            key={review.id}
+            data-animate="fade-up"
+            data-stagger={String(index % 6)}
+          >
             <svg
               className={reviewsListStyles['reviews__item-decor']}
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Works/Works.tsx b/src/components/Works/Works.tsx
index 72b8d7e8..2bf20271 100644
--- a/src/components/Works/Works.tsx
+++ b/src/components/Works/Works.tsx
@@ -16,9 +16,14 @@ export default function Works({ worksList }: WorksProps): JSX.Element {
         <h2 className="visually-hidden">Список работ</h2>
 
         <ul className={worksStyles['works__list']}>
-          {worksList.map((work) => {
+          {worksList.map((work, index) => {
             return (
-              <li className={worksStyles['works__item']} key={work.id}>
+              <li
+                className={worksStyles['works__item']}
+                key={work.id}
+                data-animate="fade-up"
+                data-stagger={String(index % 6)}
+              >
                 <Card data={work} />
               </li>
             )
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 43c4c3d0..9aa21210 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -30,3 +30,56 @@
     transform: translateX(-50%);
   }
 }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.93);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/src/styles/blocks.scss b/src/styles/blocks.scss
index 15a8ce7d..f8c95ae6 100644
--- a/src/styles/blocks.scss
+++ b/src/styles/blocks.scss
@@ -4,3 +4,4 @@
 @use './blocks/container';
 @use './blocks/section';
 @use './blocks/button';
+@use './blocks/animate';
diff --git a/src/styles/blocks/animate.scss b/src/styles/blocks/animate.scss
new file mode 100644
index 00000000..839b32de
--- /dev/null
+++ b/src/styles/blocks/animate.scss
@@ -0,0 +1,67 @@
+@use '../animations.scss';
+
+.page-enter {
+  animation: fadeIn 0.4s ease-in-out both;
+}
+
+[data-animate] {
+  opacity: 0;
+
+  &[data-animate='fade-up'] {
+    transform: translateY(30px);
+  }
+
+  &[data-animate='fade-left'] {
+    transform: translateX(-40px);
+  }
+
+  &[data-animate='fade-right'] {
+    transform: translateX(40px);
+  }
+
+  &[data-animate='scale-in'] {
+    transform: scale(0.93);
+  }
+}
+
+[data-animate].is-visible {
+  animation-fill-mode: both;
+  animation-duration: 0.6s;
+  animation-timing-function: ease-in-out;
+  animation-delay: calc(var(--stagger, 0) * 80ms);
+
+  &[data-animate='fade-up'] {
+    animation-name: fadeInUp;
+  }
+
+  &[data-animate='fade-left'] {
+    animation-name: fadeInLeft;
+  }
+
+  &[data-animate='fade-right'] {
+    animation-name: fadeInRight;
+  }
+
+  &[data-animate='scale-in'] {
+    animation-name: scaleIn;
+  }
+
+  &[data-animate='fade-in'] {
+    animation-name: fadeIn;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-animate] {
+    opacity: 1;
+    transform: none;
+
+    &.is-visible {
+      animation: none;
+    }
+  }
+
+  .page-enter {
+    animation: none;
+  }
+}

From 4da116d67082fa30ab3e7f66798ab8338c5c2696 Mon Sep 17 00:00:00 2001
From: Yuriy Plotnikov <yuriy.plotnikov@travelline.ru>
Date: Fri, 8 May 2026 14:24:26 +0300
Subject: [PATCH 2/2] Fix components to BFF

---
 src/components/AboutPage/AboutPage.tsx                   | 8 ++++----
 src/components/Address/Address.tsx                       | 4 ++--
 src/components/Categories/Categories.tsx                 | 6 +++---
 src/components/Contacts/Contacts.tsx                     | 4 ++--
 src/components/ContactsPage/ContactsPage.tsx             | 6 +++---
 src/components/Forms/FormCalculation/FormCalculation.tsx | 5 +++--
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/AboutPage/AboutPage.tsx b/src/components/AboutPage/AboutPage.tsx
index 4514a18d..0b04c045 100644
--- a/src/components/AboutPage/AboutPage.tsx
+++ b/src/components/AboutPage/AboutPage.tsx
@@ -4,7 +4,7 @@ import { ImageItem, SlideItem } from '@/types/types'
 import { createSanitizedHTML } from '@/functions/functions'
 import SliderDetail from '@/components/SliderDetail/SliderDetail'
 import aboutPageStyles from './AboutPage.module.scss'
-import cockpit from '@/lib/CockpitAPI'
+import { fetchSingleton, getImageUrl } from '@/lib/api-client'
 import Image from 'next/image'
 import EmptySection from '@/components/EmptySection/EmptySection'
 
@@ -16,7 +16,7 @@ type AboutPageProps = {
 }
 
 export default async function AboutPage(): Promise<JSX.Element> {
-  const about: AboutPageProps | null = await cockpit.getSingleItem('about')
+  const about: AboutPageProps | null = await fetchSingleton<AboutPageProps>('about')
 
   if (!about) return <EmptySection />
 
@@ -25,11 +25,11 @@ export default async function AboutPage(): Promise<JSX.Element> {
 
   const slidesList: SlideItem[] = about.slider?.map((image) => ({
     id: image._id,
-    image: cockpit.getImageUrl(image._id, 800, 800),
+    image: getImageUrl(image._id, 800, 800),
     alt: image.title || about.title,
   }))
 
-  const imageSrc = about.image ? cockpit.getImageUrl(about.image._id, 800, 500) : ''
+  const imageSrc = about.image ? getImageUrl(about.image._id, 800, 500) : ''
   const alt = about.image?.alt ?? title
 
   return (
diff --git a/src/components/Address/Address.tsx b/src/components/Address/Address.tsx
index fb37b7fe..0337b30e 100644
--- a/src/components/Address/Address.tsx
+++ b/src/components/Address/Address.tsx
@@ -1,10 +1,10 @@
 import { JSX } from 'react'
 import addressStyles from './Address.module.scss'
 import { MainInfo } from '@/types/types'
-import cockpit from '@/lib/CockpitAPI'
+import { fetchSingleton } from '@/lib/api-client'
 
 export default async function Address(): Promise<JSX.Element | null> {
-  const mainInfo: MainInfo | null = await cockpit.getSingleItem('maininfo')
+  const mainInfo: MainInfo | null = await fetchSingleton<MainInfo>('maininfo')
 
   if (!mainInfo || !mainInfo.address) {
     return null
diff --git a/src/components/Categories/Categories.tsx b/src/components/Categories/Categories.tsx
index 623b2378..53b7eeb5 100644
--- a/src/components/Categories/Categories.tsx
+++ b/src/components/Categories/Categories.tsx
@@ -3,10 +3,10 @@ import clsx from 'clsx'
 import { CardItem, CategoryFromServer } from '@/types/types'
 import Card from '@/components/Card/Card'
 import categoriesStyles from './Categories.module.scss'
-import cockpit from '@/lib/CockpitAPI'
+import { fetchCollection, getImageUrl } from '@/lib/api-client'
 
 export default async function Categories(): Promise<JSX.Element | null> {
-  const categoriesData: CategoryFromServer[] = await cockpit.getCollection('category', {
+  const categoriesData: CategoryFromServer[] = await fetchCollection<CategoryFromServer>('category', {
     sort: { sort: 1 },
   })
 
@@ -19,7 +19,7 @@ export default async function Categories(): Promise<JSX.Element | null> {
     title: category.title,
     description: category.description,
     href: `/categories/${category.slug || category._id}`,
-    image: cockpit.getImageUrl(category.image._id, 400, 400),
+    image: getImageUrl(category.image._id, 400, 400),
     alt: category.image.title || category.title,
   }))
 
diff --git a/src/components/Contacts/Contacts.tsx b/src/components/Contacts/Contacts.tsx
index e3ee8ab2..b0035474 100644
--- a/src/components/Contacts/Contacts.tsx
+++ b/src/components/Contacts/Contacts.tsx
@@ -2,7 +2,7 @@ import { JSX } from 'react'
 import contactsStyles from './Contacts.module.scss'
 import clsx from 'clsx'
 import { MainInfo } from '@/types/types'
-import cockpit from '@/lib/CockpitAPI'
+import { fetchSingleton } from '@/lib/api-client'
 import { createEmailLink, createPhoneLink } from '@/functions/functions'
 
 type ContactsProps = {
@@ -10,7 +10,7 @@ type ContactsProps = {
 }
 
 export default async function Contacts({ addClass }: ContactsProps): Promise<JSX.Element | null> {
-  const mainInfo: MainInfo | null = await cockpit.getSingleItem('maininfo')
+  const mainInfo: MainInfo | null = await fetchSingleton<MainInfo>('maininfo')
 
   if (!mainInfo) {
     return null
diff --git a/src/components/ContactsPage/ContactsPage.tsx b/src/components/ContactsPage/ContactsPage.tsx
index c8194e82..f4f9b7f7 100644
--- a/src/components/ContactsPage/ContactsPage.tsx
+++ b/src/components/ContactsPage/ContactsPage.tsx
@@ -5,17 +5,17 @@ import Social from '@/components/Social/Social'
 import FormContacts from '@/components/Forms/FormContacts/FormContacts'
 import YandexMap from '@/components/YandexMap/YandexMap'
 import { MainInfo } from '@/types/types'
-import cockpit from '@/lib/CockpitAPI'
+import { fetchSingleton, getImageUrl } from '@/lib/api-client'
 import { createEmailLink, createPhoneLink } from '@/functions/functions'
 
 export default async function ContactsPage(): Promise<JSX.Element | null> {
-  const contactsInfo: MainInfo | null = await cockpit.getSingleItem('maininfo')
+  const contactsInfo: MainInfo | null = await fetchSingleton<MainInfo>('maininfo')
 
   if (!contactsInfo) {
     return null
   }
 
-  const logo = cockpit.getImageUrl(contactsInfo.logo._id, 60, 60)
+  const logo = getImageUrl(contactsInfo.logo._id, 60, 60)
   const address = contactsInfo.address
   const coordinates = contactsInfo.coordinates
   const email = contactsInfo.email
diff --git a/src/components/Forms/FormCalculation/FormCalculation.tsx b/src/components/Forms/FormCalculation/FormCalculation.tsx
index d4321f08..d6b87b78 100644
--- a/src/components/Forms/FormCalculation/FormCalculation.tsx
+++ b/src/components/Forms/FormCalculation/FormCalculation.tsx
@@ -1,9 +1,10 @@
 import type { JSX } from 'react'
 import FormCalculationClient from './FormCalculationClient'
-import cockpit from '@/lib/CockpitAPI'
+import { fetchCollection } from '@/lib/api-client'
+import type { PriceItem } from '@/types/types'
 
 export default async function FormCalculation(): Promise<JSX.Element> {
-  const prices = (await cockpit.getCollection('price', { sort: { sort: 1 } })) || []
+  const prices = await fetchCollection<PriceItem>('price', { sort: { sort: 1 } })
 
   return <FormCalculationClient prices={prices} />
 }