Merge pull request #133 from EnigmaVSSUT/dev-v2

style(home): mobile infinite carousel
EnigmaVSSUT · Mar 3, 2024 · 79c11f3 · 79c11f3
2 parents b3970b2 + 6f276cd
commit 79c11f3
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 25 deletions.
diff --git a/src/app/home/components/ServiceCard.jsx b/src/app/home/components/ServiceCard.jsx
@@ -40,6 +40,7 @@ const ServiceCardContent = ({ service }) => {
 			</Typography>
 			<Typography
 				variant='bodyMedium'
+				whiteSpace={'normal'}
 				color={theme => theme.palette.text.secondary}
 			>
 				{ service.description }

diff --git a/src/app/home/components/Services.jsx b/src/app/home/components/Services.jsx
@@ -4,6 +4,8 @@ import { useEffect, useRef } from "react"
 import { faBrain, faGamepad, faGlobe, faLaptopCode, faShield } from "@fortawesome/free-solid-svg-icons"
 import { faAndroid, faFigma } from "@fortawesome/free-brands-svg-icons"
 import Grid from "@mui/material/Unstable_Grid2"
+import { useResponsive } from "../../../hooks/useResponsive"
+import styles from './service.module.css'
 
 const services = [
 	{
@@ -45,6 +47,7 @@ const services = [
 
 const Services = () => {
 	const servicesContainerRef = useRef()
+	const {isTablet} = useResponsive();
 
 	useEffect(() => {
 		servicesContainerRef.current.addEventListener('mousemove', e => {
@@ -68,35 +71,99 @@ const Services = () => {
 			>
 				What we do.
 			</Typography>
-			<Grid
-				container
-				maxWidth='1024px'
-				width='100%'
-				ref={servicesContainerRef}
-				gap='8px'
-				justifyContent='center'
-				padding='64px 0'
-				sx={{
-					'&:hover': {
-						'& .MuiGrid2-root .MuiStack-root:before': {
-							opacity: 1
+			{
+				isTablet? (
+					<Stack gap={3} paddingTop={7} width={'100vw'}>
+						<Stack className="slide-container" direction={'row'} gap={3}>
+
+						<Stack className={styles.leftSlider}  gap={3} direction={'row'} ref={servicesContainerRef}> 
+						{
+							services.filter((item,idx)=> idx <= (services.length/2)).map((filteredItem)=>(
+								<Stack
+								className={styles.cards}
+								height={'270px'}
+								width='250px' key={filteredItem.name}>
+								<ServiceCard service={filteredItem} />
+								</Stack>
+							))
 						}
-					}
-				}}
-			>
-				{ services.map(s => (
-					<Grid
-						xs={12}	
-						sm={6}
-						md={3}
-						maxWidth='300px'
+						</Stack>
+						<Stack className={styles.leftSlider}  gap={3} direction={'row'} ref={servicesContainerRef}> 
+						{
+							services.filter((item,idx)=> idx <= (services.length/2)).map((filteredItem)=>(
+								<Stack
+								className={styles.cards}
+								height={'270px'}
+								width='250px' key={filteredItem.name}>
+								<ServiceCard service={filteredItem} />
+								</Stack>
+							))
+						}
+						</Stack>
+
+						</Stack>
+
+						<Stack className="slide-container" direction={'row'} gap={3}>
+
+						<Stack className={styles.rightSlider} justifyContent={'center'} alignItems={'center'} gap={3} direction={'row'} ref={servicesContainerRef}> 
+						{
+							services.filter((item,idx)=> idx >= (services.length/2)).map((filteredItem)=>(
+								<Stack
+								className={styles.cards}
+								height={'270px'}
+								width='250px' key={filteredItem.name}>
+								<ServiceCard service={filteredItem} />
+								</Stack>
+							))
+						}
+						</Stack>
+						<Stack className={styles.rightSlider} justifyContent={'center'} alignItems={'center'} gap={3} direction={'row'} ref={servicesContainerRef}> 
+						{
+							services.filter((item,idx)=> idx >= (services.length/2)).map((filteredItem)=>(
+								<Stack
+								className={styles.cards}
+								height={'270px'}
+								width='250px' key={filteredItem.name}>
+								<ServiceCard service={filteredItem} />
+								</Stack>
+							))
+						}
+						</Stack>
+
+						</Stack>
+					</Stack>
+					):(
+						<Grid
+						container
+						maxWidth='1024px'
 						width='100%'
-						key={s.name}
+						ref={servicesContainerRef}
+						gap='8px'
+						justifyContent='center'
+						padding='64px 0'
+						sx={{
+							'&:hover': {
+								'& .MuiGrid2-root .MuiStack-root:before': {
+									opacity: 1
+								}
+							}
+						}}
 					>
-						<ServiceCard service={s} />
+						{ services.map(s => (
+							<Grid
+								xs={12}	
+								sm={6}
+								md={3}
+								maxWidth='300px'
+								width='100%'
+								key={s.name}
+								>
+								<ServiceCard service={s} />
+							</Grid>
+						)) }
 					</Grid>
-				)) }
-			</Grid>
+					)
+			}
 		</Stack>
 	)
 }

diff --git a/src/app/home/components/service.module.css b/src/app/home/components/service.module.css
@@ -0,0 +1,39 @@
+.leftSlider{
+    animation: 10s slide infinite linear;
+    display: inline-block;
+}
+
+.rightSlider{
+    animation: 10s slideR infinite linear;
+    display: inline-block;
+}
+
+@keyframes slide {
+    from {
+        transform: translateX(-102.5%);
+    }
+    to{
+        transform: translateX(0);
+    }
+}
+
+
+@keyframes slideR {
+    from {
+        transform: translateX(0);
+    }
+    to{
+        transform: translateX(-102.5%);
+    }
+}
+
+.slide-container{
+    padding: 60px 0 0;
+    overflow: hidden!important;
+
+    white-space: nowrap;
+}
+
+.cards{
+
+}