From 5f883fcb09615e460f256075c9f5a1c6015cd753 Mon Sep 17 00:00:00 2001
From: Vampika <vampika.vamp@gmail.com>
Date: Sat, 30 May 2026 04:11:19 +0300
Subject: [PATCH 1/3] fix: mobile slider animation

---
 .../main/Capabilities/CapabilitiesBlock.tsx          | 12 ++----------
 .../components/main/TutorIdeas/TutorIdeasBlock.tsx   |  6 ------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx b/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
index 8f85e500..b34b5e89 100644
--- a/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
+++ b/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
@@ -196,20 +196,12 @@ export const CapabilitiesBlock = () => {
               )}
             >
               {CAPABILITY_CARDS.map((card, index) => (
-                <motion.div
+                <div
                   key={card.id}
                   className="w-[min(calc(100vw-3rem),24rem)] min-w-[min(calc(100vw-3rem),24rem)] shrink-0 snap-start"
-                  initial={
-                    reduceMotion
-                      ? { opacity: 1, y: 0, scale: 1 }
-                      : { opacity: 0, y: 28, scale: 0.96 }
-                  }
-                  whileInView={{ opacity: 1, y: 0, scale: 1 }}
-                  viewport={{ once: true, amount: 0.35, margin: '0px 0px -40px 0px' }}
-                  transition={cardRevealTransition(index, reduceMotion)}
                 >
                   <CapabilityCard card={card} className="h-full w-full" />
-                </motion.div>
+                </div>
               ))}
             </div>
           </div>
diff --git a/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx b/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
index 52039e6c..651e125c 100644
--- a/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
+++ b/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
@@ -196,12 +196,6 @@ export const TutorIdeasBlock = () => {
               <motion.div
                 key={card.id}
                 className="w-[min(calc(100vw-3rem),384px)] min-w-[min(calc(100vw-3rem),384px)] shrink-0 snap-start"
-                initial={
-                  reduceMotion ? { opacity: 1, y: 0, scale: 1 } : { opacity: 0, y: 28, scale: 0.96 }
-                }
-                whileInView={{ opacity: 1, y: 0, scale: 1 }}
-                viewport={{ once: true, amount: 0.35, margin: '0px 0px -40px 0px' }}
-                transition={cardRevealTransition(index, reduceMotion)}
               >
                 <IdeaCard card={card} className="h-full w-full" />
               </motion.div>

From d679e1c00a16116d0656cf7461ea44da40e3e9a9 Mon Sep 17 00:00:00 2001
From: Vampika <vampika.vamp@gmail.com>
Date: Mon, 1 Jun 2026 02:33:58 +0300
Subject: [PATCH 2/3] fix: delet arrow, add scrollbar

---
 .../main/Capabilities/CapabilitiesBlock.tsx   | 60 +++++++------------
 .../main/TutorIdeas/TutorIdeasBlock.tsx       | 60 +++++++------------
 2 files changed, 42 insertions(+), 78 deletions(-)

diff --git a/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx b/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
index b34b5e89..f22cb8f9 100644
--- a/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
+++ b/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronSmallRight } from '@xipkg/icons';
 import { cn } from '@xipkg/utils';
 import { motion, useReducedMotion } from 'motion/react';
+import { ScrollArea } from '@xipkg/scrollarea';
 
 import {
   CAPABILITIES_HEADING,
@@ -165,45 +166,26 @@ export const CapabilitiesBlock = () => {
               aria-hidden
             />
 
-            <motion.div
-              className={cn(
-                'pointer-events-none absolute bottom-3 right-1 z-20 flex items-center justify-center rounded-full bg-white/90 p-1.5 shadow-md ring-1 ring-gray-900/5 transition-opacity duration-300 dark:bg-gray-90/95 dark:ring-gray-0/10',
-                !(fadeRightEdge && showBounceHint) && 'opacity-0',
-              )}
-              animate={
-                reduceMotion || !fadeRightEdge || !showBounceHint ? undefined : { x: [0, 6, 0] }
-              }
-              transition={
-                reduceMotion || !fadeRightEdge || !showBounceHint
-                  ? undefined
-                  : { repeat: Infinity, duration: 2.1, ease: 'easeInOut' }
-              }
-              aria-hidden
-            >
-              <ChevronSmallRight className="size-5 shrink-0 fill-fuchsia-600 dark:fill-fuchsia-400" />
-            </motion.div>
-
-            <div
-              ref={scrollRef}
-              role="region"
-              aria-label={`${CAPABILITIES_TITLE_FULL}. Прокрутите по\u00A0горизонтали, чтобы увидеть все возможности`}
-              onScroll={updateScrollHint}
-              onWheel={dismissBounceHint}
-              onTouchStart={dismissBounceHint}
-              className={cn(
-                'flex snap-x snap-mandatory gap-7 overflow-x-auto overscroll-x-contain pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                '-mx-1 px-1 touch-pan-x',
-              )}
-            >
-              {CAPABILITY_CARDS.map((card, index) => (
-                <div
-                  key={card.id}
-                  className="w-[min(calc(100vw-3rem),24rem)] min-w-[min(calc(100vw-3rem),24rem)] shrink-0 snap-start"
-                >
-                  <CapabilityCard card={card} className="h-full w-full" />
-                </div>
-              ))}
-            </div>
+            <ScrollArea scrollBarProps={{ orientation: 'horizontal', forceMount: true }}>
+              <div
+                ref={scrollRef}
+                role="region"
+                aria-label={`${CAPABILITIES_TITLE_FULL}. Прокрутите по\u00A0горизонтали, чтобы увидеть все возможности`}
+                onScroll={updateScrollHint}
+                onWheel={dismissBounceHint}
+                onTouchStart={dismissBounceHint}
+                className={cn('flex snap-x snap-mandatory gap-7 pb-1', '-ml-1 px-1 touch-pan-x')}
+              >
+                {CAPABILITY_CARDS.map((card, index) => (
+                  <div
+                    key={card.id}
+                    className="w-[min(calc(100vw-3rem),24rem)] min-w-[min(calc(100vw-3rem),24rem)] shrink-0 snap-start"
+                  >
+                    <CapabilityCard card={card} className="h-full w-full" />
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
           </div>
         </div>
       </div>
diff --git a/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx b/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
index 651e125c..35207122 100644
--- a/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
+++ b/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { ChevronSmallRight } from '@xipkg/icons';
 import { cn } from '@xipkg/utils';
 import { motion, useReducedMotion } from 'motion/react';
+import { ScrollArea } from '@xipkg/scrollarea';
 
 import {
   TUTOR_IDEA_CARDS,
@@ -162,45 +163,26 @@ export const TutorIdeasBlock = () => {
             aria-hidden
           />
 
-          <motion.div
-            className={cn(
-              'pointer-events-none absolute bottom-3 right-1 z-20 flex items-center justify-center rounded-full bg-white/90 p-1.5 shadow-md ring-1 ring-gray-900/5 transition-opacity duration-300 dark:bg-gray-90/95 dark:ring-gray-0/10',
-              !(fadeRightEdge && showBounceHint) && 'opacity-0',
-            )}
-            animate={
-              reduceMotion || !fadeRightEdge || !showBounceHint ? undefined : { x: [0, 6, 0] }
-            }
-            transition={
-              reduceMotion || !fadeRightEdge || !showBounceHint
-                ? undefined
-                : { repeat: Infinity, duration: 2.1, ease: 'easeInOut' }
-            }
-            aria-hidden
-          >
-            <ChevronSmallRight className="size-5 shrink-0 fill-brand-100 dark:fill-brand-20" />
-          </motion.div>
-
-          <div
-            ref={scrollRef}
-            role="region"
-            aria-label={`${TUTOR_IDEAS_TITLE_FULL}. Прокрутите по\u00A0горизонтали`}
-            onScroll={updateScrollHint}
-            onWheel={dismissBounceHint}
-            onTouchStart={dismissBounceHint}
-            className={cn(
-              'flex snap-x snap-mandatory gap-7 overflow-x-auto overscroll-x-contain pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-              '-mx-1 px-1 touch-pan-x',
-            )}
-          >
-            {TUTOR_IDEA_CARDS.map((card, index) => (
-              <motion.div
-                key={card.id}
-                className="w-[min(calc(100vw-3rem),384px)] min-w-[min(calc(100vw-3rem),384px)] shrink-0 snap-start"
-              >
-                <IdeaCard card={card} className="h-full w-full" />
-              </motion.div>
-            ))}
-          </div>
+          <ScrollArea scrollBarProps={{ orientation: 'horizontal', forceMount: true }}>
+            <div
+              ref={scrollRef}
+              role="region"
+              aria-label={`${TUTOR_IDEAS_TITLE_FULL}. Прокрутите по\u00A0горизонтали`}
+              onScroll={updateScrollHint}
+              onWheel={dismissBounceHint}
+              onTouchStart={dismissBounceHint}
+              className={cn('flex snap-x snap-mandatory gap-7  pb-1', '-ml-1 px-1 touch-pan-x')}
+            >
+              {TUTOR_IDEA_CARDS.map((card, index) => (
+                <div
+                  key={card.id}
+                  className="w-[min(calc(100vw-3rem),384px)] min-w-[min(calc(100vw-3rem),384px)] shrink-0 snap-start"
+                >
+                  <IdeaCard card={card} className="h-full w-full" />
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
         </div>
       </div>
     </section>

From 6939500c8da464591261635b2f6cc57faac884e7 Mon Sep 17 00:00:00 2001
From: Vampika <vampika.vamp@gmail.com>
Date: Mon, 1 Jun 2026 23:51:26 +0300
Subject: [PATCH 3/3] fix: add space between cards and scroll-bar

---
 .../components/main/Capabilities/CapabilitiesBlock.tsx      | 6 +++++-
 apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx b/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
index f22cb8f9..0c6e658d 100644
--- a/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
+++ b/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
@@ -174,7 +174,11 @@ export const CapabilitiesBlock = () => {
                 onScroll={updateScrollHint}
                 onWheel={dismissBounceHint}
                 onTouchStart={dismissBounceHint}
-                className={cn('flex snap-x snap-mandatory gap-7 pb-1', '-ml-1 px-1 touch-pan-x')}
+                className={cn(
+                  'flex snap-x snap-mandatory gap-7 pb-1',
+                  '-ml-1 px-1 touch-pan-x',
+                  'mb-3',
+                )}
               >
                 {CAPABILITY_CARDS.map((card, index) => (
                   <div
diff --git a/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx b/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
index 35207122..c403a6d5 100644
--- a/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
+++ b/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
@@ -171,7 +171,11 @@ export const TutorIdeasBlock = () => {
               onScroll={updateScrollHint}
               onWheel={dismissBounceHint}
               onTouchStart={dismissBounceHint}
-              className={cn('flex snap-x snap-mandatory gap-7  pb-1', '-ml-1 px-1 touch-pan-x')}
+              className={cn(
+                'flex snap-x snap-mandatory gap-7  pb-1',
+                '-ml-1 px-1 touch-pan-x',
+                'mb-3',
+              )}
             >
               {TUTOR_IDEA_CARDS.map((card, index) => (
                 <div