yoga-app/package-lock.json

@@ -17,6 +17,7 @@
         "@types/ityped": "^1.0.3",
         "@types/pg": "^8.11.10",
         "@types/qs": "^6.9.18",
+        "@types/react-slick": "^0.23.13",
         "ajv": "^8.17.1",
         "ajv-formats": "^3.0.1",
         "ajv-i18n": "^4.2.0",
@@ -33,12 +34,14 @@
         "react": "^19.0.0",
         "react-bootstrap": "^2.10.9",
         "react-dom": "^19.0.0",
+        "react-slick": "^0.30.3",
+        "slick-carousel": "^1.8.1",
         "validator": "^13.12.0"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@types/bcryptjs": "^2.4.6",
-        "@types/node": "^20",
+        "@types/node": "^20.17.47",
         "@types/nodemailer": "^6.4.17",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1567,9 +1570,10 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.17.10",
+      "version": "20.17.47",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.47.tgz",
-      "integrity": "sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==",
+      "integrity": "sha512-3dLX0Upo1v7RvUimvxLeXqwrfyKxUINk0EAM83swP2mlSUcwV73sZy8XhNz8bcZ3VbsfQyC/y6jRdL5tgCNpDQ==",
+      "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
       }
@@ -1673,6 +1677,15 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-slick": {
+      "version": "0.23.13",
+      "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
+      "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -2739,6 +2752,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==",
+      "license": "MIT"
+    },
     "node_modules/es-abstract": {
       "version": "1.23.8",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.8.tgz",
@@ -4383,6 +4402,7 @@
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -4407,6 +4427,15 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
@@ -5550,6 +5579,23 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-slick": {
+      "version": "0.30.3",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.3.tgz",
+      "integrity": "sha512-B4x0L9GhkEWUMApeHxr/Ezp2NncpGc+5174R02j+zFiWuYboaq98vmxwlpafZfMjZic1bjdIqqmwLDcQY0QaFA==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -5644,6 +5690,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -5981,6 +6033,15 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6035,6 +6096,12 @@
         "node": ">=0.6.19"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",

yoga-app/package.json

@@ -19,6 +19,7 @@
     "@types/ityped": "^1.0.3",
     "@types/pg": "^8.11.10",
     "@types/qs": "^6.9.18",
+    "@types/react-slick": "^0.23.13",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "ajv-i18n": "^4.2.0",
@@ -35,12 +36,14 @@
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "^19.0.0",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
     "validator": "^13.12.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@types/bcryptjs": "^2.4.6",
-    "@types/node": "^20",
+    "@types/node": "^20.17.47",
     "@types/nodemailer": "^6.4.17",
     "@types/react": "^19",
     "@types/react-dom": "^19",

yoga-app/src/components/our.services.component.tsx

@@ -1,11 +1,73 @@
+'use client';
 import YogaImageComponent from "@/components/yoga.image.component";
 import {YogaOurServicesComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-our-services-component";
+// import OurServiceItemComponent from "@/components/our.services.item.component";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Slider ,{Settings} from "react-slick";
 import OurServiceItemComponent from "@/components/our.services.item.component";
 
+
 export interface Props{
     config: YogaOurServicesComponent_Plain
 }
 const OurServiceComponent = ({config: {title,header,description,services}}: Props) => {
+
+    const settings: Settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 4,
+        slidesToScroll: 1,
+        swipe: true,
+        responsive: [
+            /**
+             *
+             * col-lg-3 col-md-6 col-sm-6 col-xs-12
+             *
+             * Breakpoint	Class infix	Dimensions
+             * X-Small	None	<576px
+             * Small	sm	≥576px
+             * Medium	md	≥768px
+             * Large	lg	≥992px
+             * Extra large	xl	≥1200px
+             * Extra extra large	xxl	≥1400px
+             */
+            {
+                breakpoint: 992,
+                settings: {
+                    slidesToShow: 4,
+                    slidesToScroll: 1,
+                    infinite: true,
+                    dots: true
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1,
+                    initialSlide: 1
+                }
+            },
+            {
+                breakpoint: 576,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1,
+                    initialSlide: 1
+                }
+            },
+            {
+                breakpoint: 480,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    };
+    console.info(settings)
     return (
         <section className="services_section">
             <div className="container">
@@ -18,12 +80,21 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
                         </div>
                     </div>
                 </div>
-                <div className="row" data-aos="fade-up">
+
+                {/*<div className="row" data-aos="fade-up">*/}
+                {/*    {services.map(*/}
+                {/*        itemConfig =>*/}
+                {/*            <OurServiceItemComponent config={itemConfig} key={itemConfig.id} />*/}
+                {/*    )}*/}
+                {/*</div>*/}
+
+                <Slider {...settings}>
                     {services.map(
                         itemConfig =>
                             <OurServiceItemComponent config={itemConfig} key={itemConfig.id} />
                     )}
-                </div>
+                </Slider>
+
                 <figure className="services_left_shape left_shape mb-0">
                     <YogaImageComponent src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
                 </figure>

yoga-app/src/components/our.services.item.component.module.css

@@ -0,0 +1,37 @@
+.serviceSlide{
+
+}
+
+button:first-of-type{
+    left: 6px;
+    z-index: 1;
+}
+
+button:last-of-type{
+    right: 6px;
+}
+
+.serviceSlide{
+    margin: 0 6px;
+
+}
+
+:global(.slick-active){
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+:global(div:nth-child(1 of .slick-active)){
+    padding-left: 0;
+    padding-right: 3px;
+}
+
+:global(div:nth-last-child(1 of .slick-active)){
+    padding-left: 3px;
+    padding-right: 0;
+}
+
+/*:global(div.slick-active):nth-last-child(n!*){*/
+/*    padding-left: 6px;*/
+/*    padding-right: 0;*!*/
+/*}*/

yoga-app/src/components/our.services.item.component.tsx

@@ -2,6 +2,7 @@ import YogaImageComponent from "@/components/yoga.image.component";
 import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
 import {StrapiFile} from "@/types/types";
 import strapiApi from "@/api/strapi/strapi-api";
+import styles from './our.services.item.component.module.css'
 
 export interface Props {
     config: YogaSingleService_Plain
@@ -11,7 +12,8 @@ const OurServiceItemComponent = ({config: {header,description,image}}: Props) =>
     const imageFile: StrapiFile = image as StrapiFile;
     return (
 
-        <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
+        <div className={styles.serviceSlide}>
+        {/*<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">*/}
             <div className="services_box_content">
                 <div className="services_box_upper_portion">
                     <figure className="mb-0">