diff --git a/package.json b/package.json index b6ed7e9..2485a98 100644 --- a/package.json +++ b/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", diff --git a/src/assets/icons/next.svg b/src/assets/icons/next.svg new file mode 100644 index 0000000..e17038f --- /dev/null +++ b/src/assets/icons/next.svg @@ -0,0 +1,8 @@ + diff --git a/src/components/Slider/Slider.scss b/src/components/Slider/Slider.scss deleted file mode 100644 index c72bfb9..0000000 --- a/src/components/Slider/Slider.scss +++ /dev/null @@ -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; - } - } - } - } - } \ No newline at end of file diff --git a/src/components/Slider/index.js b/src/components/Slider/index.js deleted file mode 100644 index 379b068..0000000 --- a/src/components/Slider/index.js +++ /dev/null @@ -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 ( -