fix: adjust track scroll offset

Author: 0xskr33p

src/sites/tari-dot-com/pages/HomePage/sections/EcosystemSection/components/Community/Track.tsx

@@ -1,14 +1,45 @@
 'use client';
 
-import { TrackWrapper, TrackWidth, Track, Image } from './styles';
+import { useEffect, useState } from 'react';
+import {
+    TrackWrapper,
+    TrackWidth,
+    Track,
+    Image,
+    TRACK_GAP_SIZE_DESKTOP,
+    TRACK_GAP_SIZE_MOBILE,
+} from './styles';
 import BlockchainCapital from './images/blockchain_capital.png';
 import ParisHilton from './images/paris_hilton.png';
 import GEAZY from './images/geazy.png';
 import GMoney from './images/gmoney.png';
 import Loomdart from './images/loomdart.png';
 import LilWayne from './images/lilwayne.png';
 
+const imagesToScroll = [BlockchainCapital, ParisHilton, GEAZY, GMoney, Loomdart, LilWayne];
+const imagesTotalWidth = imagesToScroll.reduce((sum, image) => sum + image.width, 0);
+
 export default function TrackComponent() {
+    const [isMobileViewport, setIsMobileViewport] = useState(false);
+
+    useEffect(() => {
+        const mobileQuery = window.matchMedia(`(max-width: 768px)`);
+
+        const updateViewportMatch = () => {
+            setIsMobileViewport(mobileQuery.matches);
+        };
+
+        updateViewportMatch();
+        mobileQuery.addEventListener('change', updateViewportMatch);
+
+        return () => {
+            mobileQuery.removeEventListener('change', updateViewportMatch);
+        };
+    }, []);
+
+    const gapSize = isMobileViewport ? TRACK_GAP_SIZE_MOBILE : TRACK_GAP_SIZE_DESKTOP;
+    const scrollOffset = imagesTotalWidth + imagesToScroll.length * gapSize;
+
     return (
         <TrackWrapper>
             <TrackWidth>
@@ -17,7 +48,7 @@ export default function TrackComponent() {
                         x: '0px',
                     }}
                     animate={{
-                        x: '-1691px',
+                        x: `-${scrollOffset}px`,
                         transition: {
                             x: {
                                 repeat: Infinity,

src/sites/tari-dot-com/pages/HomePage/sections/EcosystemSection/components/Community/styles.ts

@@ -1,6 +1,9 @@
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
+export const TRACK_GAP_SIZE_MOBILE = 20;
+export const TRACK_GAP_SIZE_DESKTOP = 62;
+
 export const Wrapper = styled(motion.div)`
     width: 100%;
     padding-top: 40px;
@@ -52,15 +55,15 @@ export const TrackWidth = styled.div`
 export const Track = styled(motion.div)`
     display: flex;
     align-items: center;
-    gap: 62px;
+    gap: ${TRACK_GAP_SIZE_DESKTOP}px;
 
     min-width: max-content;
 
-    padding-left: 62px;
+    padding-left: ${TRACK_GAP_SIZE_DESKTOP}px;
 
     @media (max-width: 768px) {
-        gap: 20px;
-        padding-left: 20px;
+        gap: ${TRACK_GAP_SIZE_MOBILE}px;
+        padding-left: ${TRACK_GAP_SIZE_MOBILE}px;
     }
 `;