reza fixed home screen

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "@trendyol-js/react-carousel": "^2.0.1",
     "axios": "^0.27.1",
     "jalali-moment": "^3.3.11",
     "react": "^18.0.0",

src/assets/icons/next.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60.166" height="60.166" viewBox="0 0 60.166 60.166">
+  <g id="vuesax_bold_arrow-right" data-name="vuesax/bold/arrow-right" transform="translate(-300 -252)">
+    <g id="arrow-right" transform="translate(300 252)">
+      <path id="Vector" d="M17.6,13.768,12.66,8.829,4.613.782A2.713,2.713,0,0,0,0,2.712V32.394A2.7,2.7,0,0,0,4.613,34.3L17.6,21.313A5.341,5.341,0,0,0,17.6,13.768Z" transform="translate(20.506 12.53)" fill="#426aee"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H60.166V60.166H0Z" transform="translate(60.166 60.166) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/Slider/Slider.scss

@@ -1,119 +0,0 @@
-
-.Slider{
-    width: 100%;
-    height: 80vh;
-    overflow: hidden;
-    position: relative;
-    z-index: 4;
-    max-width: 1550px;
-    @media screen and (min-width: 1551px) {
-      margin: 0 auto;
-    }
-
-    &-main-box {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      &-title {
-        width: 80%;
-        margin: 0 auto;
-        font-size: 38px;
-        color: #fff;
-        font-family: Medium;
-      }
-
-      &-item-container {
-        width: 80%;
-        margin: 0 auto;
-        margin-top: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        // direction: rtl;
-
-        &-item {
-          width: 32%;
-          flex-shrink: 0;
-          aspect-ratio: 1/0.85;
-          border-radius: 21px;
-          background-color: rgba($color: #fff, $alpha: 0.1);
-          backdrop-filter: blur(10px);
-          box-sizing: border-box;
-          padding: 20px;
-          margin-right: 2%;
-          transition: all 1s;
-
-          &-img-container {
-            width: 100%;
-            height: 70%;
-            // background-color: rgb(253, 57, 178);
-          }
-
-          &-title {
-            font-size: 24px;
-            width: 100%;
-            margin-top: 10px;
-            font-family: Medium;
-            color: #0080ff;
-          }
-
-          &-subtitle {
-            width: 100%;
-            font-size: 18px;
-            margin-top: 10px;
-            color: #fff;
-            font-family: Thin;
-          }
-        }
-      }
-
-      &-slider-btns {
-        width: 80%;
-        margin: 0 auto;
-        margin-top: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        &-previous {
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          color: #555;
-
-          &-icon {
-            // color: #fff;
-            font-size: 25px;
-            margin-right: 10px;
-          }
-
-          &-text {
-            font-size: 30px;
-            font-family: Thin;
-            // color: #fff;
-          }
-        }
-
-        &-next {
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-
-          &-icon {
-            color: #fff;
-            font-size: 25px;
-            margin-left: 10px;
-          }
-
-          &-text {
-            font-size: 30px;
-            font-family: Thin;
-            color: #fff;
-          }
-        }
-      }
-    }
-  }

src/components/Slider/index.js

@@ -1,172 +0,0 @@
-import { useState } from "react";
-import './Slider.scss';
-
-let p4SliderCounter = 0;
-const Slider = () => {
-  const [hp4Data, setHp4Data] = useState([
-    {
-      id: 101,
-      title: "Create Multi Platform",
-      subtitle: "Colored pencils were busy except",
-      title_fa: " ساخت نرم‌افزارهای چند پلتفرمه",
-      subtitle_fa: "متنی برای تست",
-    },
-    {
-      id: 102,
-      title: "Gamify",
-      subtitle: "Colored pencils were busy except",
-      title_fa: "گیمیفای",
-      subtitle_fa: "متنی برای تست",
-    },
-    {
-      id: 201,
-      title: "Web Design",
-      subtitle: "Colored pencils were busy except",
-      title_fa: "طراحی سایت",
-      subtitle_fa: "متنی برای تست",
-    },
-    {
-      id: 202,
-      title: "PR & HR Software",
-      subtitle: "Colored pencils were busy except",
-      title_fa: "نرم‌افزارهای PR و HR",
-      subtitle_fa: "متنی برای تست",
-    },
-    {
-      id: 301,
-      title: "Android & IOS",
-      subtitle: "Colored pencils were busy except",
-      title_fa: "نرم‌افزارهای android و ios",
-      subtitle_fa: "متنی برای تست",
-    },
-    {
-      id: 302,
-      title: "AR Platform",
-      subtitle: "Colored pencils were busy except",
-      title_fa: " پلتفرم AR",
-      subtitle_fa: "متنی برای تست",
-    },
-  ]);
-  
-  const p4SliderNextHandler = () => {
-    let slider = document.querySelectorAll(
-      ".Slider-main-box-item-container-item"
-    );
-    document.querySelector(
-      ".Slider-main-box-slider-btns-previous"
-    ).style.color = "#fff";
-    if (p4SliderCounter < 3) {
-      if (p4SliderCounter === 0) {
-        slider[0].style.transform = "translateX(-200%)";
-        slider[1].style.transform = "translateX(-106.25%)";
-        slider[2].style.transform = "translateX(-106.25%)";
-        slider[3].style.transform = "translateX(-106.25%)";
-      } else if (p4SliderCounter === 1) {
-        slider[1].style.transform = "translateX(-306.25%)";
-        slider[2].style.transform = "translateX(-212.5%)";
-        slider[3].style.transform = "translateX(-212.5%)";
-        slider[4].style.transform = "translateX(-212.5%)";
-      } else if (p4SliderCounter === 2) {
-        slider[2].style.transform = "translateX(-412.5%)";
-        slider[3].style.transform = "translateX(-318.75%)";
-        slider[4].style.transform = "translateX(-318.75%)";
-        slider[5].style.transform = "translateX(-318.75%)";
-        document.querySelector(
-          ".Slider-main-box-slider-btns-next-text"
-        ).style.color = "#555";
-        document.querySelector(
-          ".Slider-main-box-slider-btns-next-icon"
-        ).style.color = "#555";
-      }
-      p4SliderCounter++;
-    }
-  };
-
-  const p4SliderPreviousHandler = () => {
-    let slider = document.querySelectorAll(
-      ".Slider-main-box-item-container-item"
-    );
-    document.querySelector(
-      ".Slider-main-box-slider-btns-next-text"
-    ).style.color = "#fff";
-    document.querySelector(
-      ".Slider-main-box-slider-btns-next-icon"
-    ).style.color = "#fff";
-    if (p4SliderCounter > 0) {
-      if (p4SliderCounter === 3) {
-        slider[5].style.transform = "translateX(100%)";
-        slider[4].style.transform = "translateX(-212.5%)";
-        slider[3].style.transform = "translateX(-212.5%)";
-        slider[2].style.transform = "translateX(-212.5%)";
-      } else if (p4SliderCounter === 2) {
-        slider[4].style.transform = "translateX(100%)";
-        slider[3].style.transform = "translateX(-106.25%)";
-        slider[2].style.transform = "translateX(-106.25%)";
-        slider[1].style.transform = "translateX(-106.25%)";
-      } else if (p4SliderCounter === 1) {
-        slider[3].style.transform = "translateX(100%)";
-        slider[2].style.transform = "translateX(0%)";
-        slider[1].style.transform = "translateX(0%)";
-        slider[0].style.transform = "translateX(0%)";
-        document.querySelector(
-          ".Slider-main-box-slider-btns-previous"
-        ).style.color = "#555";
-      }
-      p4SliderCounter--;
-    }
-  };
-
-  return (
-    <div className="Slider bg-black ltr">
-      <div className="Slider-main-box ltr">
-        <div className="Slider-main-box-item-container ltr">
-          {hp4Data.map((item, index) => (
-            <div
-              key={item.id}
-              className="Slider-main-box-item-container-item"
-              style={index > 2 ? { transform: "translateX(100%)" } : null}
-            >
-              <div className="Slider-main-box-item-container-item-img-container ltr"></div>
-              <div
-                className="Slider-main-box-item-container-item-title"
-                style={{ direction: "rtl" }}
-              >
-                {item.title_fa}
-              </div>
-              <div
-                className="Slider-main-box-item-container-item-subtitle"
-                style={{ direction: "rtl" }}
-              >
-                {item.subtitle_fa}
-              </div>
-            </div>
-          ))}
-        </div>
-        <div className="Slider-main-box-slider-btns">
-          <div
-            className="Slider-main-box-slider-btns-previous bg-red-400"
-            onClick={p4SliderPreviousHandler}
-            // style={p4SliderCounter === 0 ? { color:"#555" } : null}
-          >
-            {/* <BsArrowLeft className="Slider-main-box-slider-btns-previous-icon" /> */}
-            <div className="Slider-main-box-slider-btns-previous-text">
-              قبلی
-            </div>
-          </div>
-          <div
-            className="Slider-main-box-slider-btns-next"
-            onClick={p4SliderNextHandler}
-            // style={p4SliderCounter === 3 ? { filter: "grayscale(100%)" } : null}
-          >
-            <div className="Slider-main-box-slider-btns-next-text">
-              بعدی
-            </div>
-            {/* <BsArrowRight className="Slider-main-box-slider-btns-next-icon" /> */}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Slider;

src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

src/views/Home/layouts/Samples/index.js

@@ -1,16 +1,29 @@
 import React from "react";
 import { connect } from "react-redux";
+import { Carousel } from "@trendyol-js/react-carousel";
 
 //components
 import Button from "../../../../components/Button";
-import Slider from "../../../../components/Slider";
 
-export const Samples = ({}) => {
+//assets
+import grandFatherImage from "./assets/grandFather.svg";
+import pic1Image from "./assets/pic1.svg";
+import pic2Image from "./assets/pic2.svg";
+import pic3Image from "./assets/pic3.svg";
+import nextIcon from "../../../../assets/icons/next.svg";
+
+export const Samples = ({ uselessProps }) => {
   const [activeProject, setActiveProject] = React.useState(null);
+  const [itemsToShow, setItemsToShow] = React.useState(4);
 
   const Info = () => {
     return (
-      <div className="flex justify-between border border-solid border-primary-5 rounded-lg px-7 py-16 w-11/12 mt-10">
+      <div
+        className="flex justify-between border border-solid border-primary-5 rounded-lg px-7 py-16 mt-10"
+        style={{
+          width : `calc(100% - (100vw / 12 * 10 / ${itemsToShow * 10} * 2))`
+        }}
+      >
         <div className="flex flex-col flex-1">
           <strong className="text-primary-4 font-4 text-2x">
             آقا بزرگ
@@ -35,6 +48,59 @@ export const Samples = ({}) => {
     );
   };
 
+  const items = React.useMemo(() => {
+    return [
+      {
+        id: 0,
+        title: "آقا بزرگ",
+        image: grandFatherImage,
+      },
+      {
+        id: 1,
+        title: "ایما",
+        image: pic1Image,
+      },
+      {
+        id: 2,
+        title: "شهرخوبان",
+        image: pic2Image,
+      },
+      {
+        id: 3,
+        title: "رمضان",
+        image: pic3Image,
+      },
+      {
+        id: 4,
+        title: "ایما",
+        image: pic1Image,
+      },
+      {
+        id: 5,
+        title: "شهرخوبان",
+        image: pic2Image,
+      },
+      {
+        id: 5,
+        title: "رمضان",
+        image: pic3Image,
+      },
+    ];
+  }, [uselessProps]);
+
+  const renderArrow = React.useCallback(
+    ({ type, onClick, isEdge }) => {
+      console.log(type);
+      // const pointer = type === consts.PREV ? "👈" : "👉";
+      return (
+        <button onClick={onClick} disabled={isEdge}>
+          arrow
+        </button>
+      );
+    },
+    [uselessProps]
+  );
+
   return (
     <div className="w-10/12 h-screen flex flex-col justify-around items-center py-5 relative">
       <div className="flex flex-col mb-32">
@@ -45,7 +111,58 @@ export const Samples = ({}) => {
           در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید
         </p>
       </div>
-      <Slider />
+      <div className="relative w-full" style={{ direction: "ltr" }}>
+        <Carousel
+          className="flex"
+          show={itemsToShow}
+          useArrowKeys={true}
+          swiping={true}
+          rightArrow={
+            <img
+              className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-0"
+              src={nextIcon}
+              alt=""
+              // onClick={(e) => e.stopPropagation()}
+            />
+          }
+          leftArrow={
+            <img
+              className="absolute top-1/2 transform -translate-y-1/2  -translate-x-16 cursor-pointer rotate-180 p-2 -left-3"
+              src={nextIcon}
+              alt=""
+              // onClick={(e) => e.stopPropagation()}
+            />
+          }
+        >
+          {items.map((item, index) => (
+            <article
+              className="flex flex-col gap-4"
+              key={index}
+              style={{
+                direction: "rtl",
+                padding: `16px calc(100vw / 12 * 10 / ${itemsToShow * 10})`,
+              }}
+            >
+              <img
+                src={item.image}
+                alt={item.title}
+                className={`rounded-lg ${
+                  activeProject === index
+                    ? "border border-solid border-primary-4"
+                    : "shadow-lg"
+                }`}
+                style={{
+                  width: `calc(100vw / 10 * 12 / ${itemsToShow})`,
+                }}
+                onDragStart={(e) => e.preventDefault()}
+              />
+              <strong className="text-1x text-primary-4 font-4">
+                {item.title}
+              </strong>
+            </article>
+          ))}
+        </Carousel>
+      </div>
       <Info />
     </div>
   );

yarn.lock

@@ -1669,6 +1669,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@trendyol-js/react-carousel@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@trendyol-js/react-carousel/-/react-carousel-2.0.1.tgz#9f35f2a10ec14fa5f0e4e2dea415373e301200a1"
+  integrity sha512-MsLmHez6VnGBPId6W0IcZJb2VUXhlkNd1n4h2j0GxUFyW578UgHYeaLooyps81XIsshFMTKClBUhsyWK5Nw/Vg==
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"