diff --git a/src/assets/images/sheff.svg b/src/assets/images/sheff.svg new file mode 100644 index 0000000..58d5f44 --- /dev/null +++ b/src/assets/images/sheff.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/utils/scroll.js b/src/utils/scroll.js new file mode 100644 index 0000000..f6ba647 --- /dev/null +++ b/src/utils/scroll.js @@ -0,0 +1,96 @@ +class scroll { + homeScrollHandler = (index) => { + const height = Number(window.innerHeight); + const scrollY = Number(window.scrollY); + if (index === 1) { + if (scrollY === 0) { + return 0; + } + if(scrollY > 0 && scrollY < height) { + return -scrollY; + } + if(scrollY === height){ + // return '-1' + height; + alert('kir'); + } + }else + if (index === 2) { + if (scrollY === 0) { + return height; + } + if (scrollY > 0 && scrollY < height) { + return height - scrollY; + } + if(scrollY === 2 * height){ + return -1 * height; + } + }else + if (index === 3) { + if (scrollY <= height) { + return height; + } + if (scrollY > height && scrollY < 2 * height) { + return 2 * height - scrollY; + } + if(scrollY === 3 * height){ + return -height; + } + }else + if (index === 4) { + if (scrollY <= 2 * height) { + return height; + } else if (scrollY > 2 * height && scrollY < 3 * height) { + return 3 * height - scrollY; + } + if(scrollY === 4 * height){ + return -height; + } + }else + if (index === 5) { + if (scrollY <= 3 * height) { + return height; + } else if (scrollY > 3 * height && scrollY < 4 * height) { + return 4 * height - scrollY; + } + if(scrollY === 5 * height){ + return -height; + } + }else + if (index === 6) { + if (scrollY <= 4 * height) { + return height; + } else if (scrollY > 4 * height && scrollY < 5 * height) { + return 5 * height - scrollY; + } + if(scrollY === 6 * height){ + return -height; + } + + }else + if (index === 7) { + if (scrollY <= 5 * height) { + return height; + } else if (scrollY > 5 * height && scrollY < 6 * height) { + return 6 * height - scrollY; + } + // if(scrollY === 7 * height){ + // return; + // } + } + // if (index !== 1) { + // if (scrollY > (index - 2) * height) { + // return (index - 1) * height - scrollY; + // } + // if (scrollY === (index - 1) * height) { + // return 0; + // } + // if (scrollY > (index - 1) * height) { + // return -height; + // } + // } + }; +} + +const _scroll = new scroll(); + +export default _scroll; diff --git a/src/views/Home/Page1/Book/index.js b/src/views/Home/Page1/Book/index.js index f41dd70..770b40c 100644 --- a/src/views/Home/Page1/Book/index.js +++ b/src/views/Home/Page1/Book/index.js @@ -5,7 +5,7 @@ import { Link } from "react-router-dom"; export default function Book({ book }) { return ( - {book.name} + {book.name} diff --git a/src/views/Home/Page1/index.js b/src/views/Home/Page1/index.js index 2182812..d80d370 100644 --- a/src/views/Home/Page1/index.js +++ b/src/views/Home/Page1/index.js @@ -1,7 +1,10 @@ import React, { useState, useEffect } from "react"; +import { Link } from "react-router-dom"; import { Carousel } from "@trendyol-js/react-carousel"; import Book from "./Book"; import FloatWithMouse from "../../../components/FloatWidthMouse"; +import scroll from "../../../utils/scroll"; + import _ from "lodash"; import olum1Image from "../../../assets/images/olum-1.svg"; @@ -12,9 +15,14 @@ import zist11Image from "../../../assets/images/zist-11.svg"; import arrow from "../../../assets/icons/slider-arrow.svg"; import flatFlower from "../../../assets/icons/flat-flower-white.svg"; import line from "../../../assets/icons/line.svg"; +import arrowBottomIcon from "../../../assets/icons/arrows-bottom-blue.svg"; +import sheffImage from "../../../assets/images/sheff.svg"; +import arrowLeftWhite from "../../../assets/icons/arrow-left-white.svg"; -export default function Page1({ list }) { +export default function Page1({ list, page }) { const [show, setShow] = useState(null); + const [top, setTop] = useState(0); + useEffect(() => { const width = window.innerWidth; window.addEventListener( @@ -32,9 +40,17 @@ export default function Page1({ list }) { } else if (width > 1024) { setShow(4); } + window.addEventListener("scroll", (e) => { + setTop(() => scroll.homeScrollHandler(page)); + }); }, []); + + useEffect(() => {}, [page]); return ( -
+
-
-
+
+
+
+ +
+
+
+ + لیست محصولات + + + کتاب ها + + + دوره ویديویی + + + آزمون ها + +
+ + ورود به فروشگاه + +
+ +
); } diff --git a/src/views/Home/Page2/index.js b/src/views/Home/Page2/index.js new file mode 100644 index 0000000..0ccd0c8 --- /dev/null +++ b/src/views/Home/Page2/index.js @@ -0,0 +1,28 @@ +import React, { useState, useEffect } from "react"; +import _ from "lodash"; +import scroll from "../../../utils/scroll"; + + +export default function Page2({ list, page }) { + const [top, setTop] = useState(window.innerHeight); + + useEffect(() => { + window.addEventListener("scroll", (e) => { + setTop(scroll.homeScrollHandler(page)); + }); + }, []); + return ( +
+ +
+ ); +} + diff --git a/src/views/Home/Page3/index.js b/src/views/Home/Page3/index.js new file mode 100644 index 0000000..68c3c87 --- /dev/null +++ b/src/views/Home/Page3/index.js @@ -0,0 +1,28 @@ +import React, { useState, useEffect } from "react"; +import _ from "lodash"; +import scroll from "../../../utils/scroll"; + + +export default function Page3({ list, page }) { + const [top, setTop] = useState(window.innerHeight); + + useEffect(() => { + window.addEventListener("scroll", (e) => { + setTop(scroll.homeScrollHandler(page)); + }); + }, []); + return ( +
+ +
+ ); +} + diff --git a/src/views/Home/Page4/index.js b/src/views/Home/Page4/index.js new file mode 100644 index 0000000..c5564d3 --- /dev/null +++ b/src/views/Home/Page4/index.js @@ -0,0 +1,29 @@ +import React, { useState, useEffect } from "react"; +import _ from "lodash"; +import scroll from "../../../utils/scroll"; + + +export default function Page4({ list, page }) { + const [top, setTop] = useState(window.innerHeight); + + useEffect(() => { + window.addEventListener("scroll", (e) => { + setTop(scroll.homeScrollHandler(page)); + }); + }, []); + return ( +
+ +
+ ); +} + diff --git a/src/views/Home/Page5/index.js b/src/views/Home/Page5/index.js new file mode 100644 index 0000000..b41daf4 --- /dev/null +++ b/src/views/Home/Page5/index.js @@ -0,0 +1,28 @@ +import React, { useState, useEffect } from "react"; +import _ from "lodash"; +import scroll from "../../../utils/scroll"; + + +export default function Page5({ list, page }) { + const [top, setTop] = useState(window.innerHeight); + + useEffect(() => { + window.addEventListener("scroll", (e) => { + setTop(scroll.homeScrollHandler(page)); + }); + }, []); + return ( +
+ +
+ ); +} + diff --git a/src/views/Home/Page6/index.js b/src/views/Home/Page6/index.js new file mode 100644 index 0000000..86cd132 --- /dev/null +++ b/src/views/Home/Page6/index.js @@ -0,0 +1,28 @@ +import React, { useState, useEffect } from "react"; +import _ from "lodash"; +import scroll from "../../../utils/scroll"; + + +export default function Page6({ list, page }) { + const [top, setTop] = useState(window.innerHeight); + + useEffect(() => { + window.addEventListener("scroll", (e) => { + setTop(scroll.homeScrollHandler(page)); + }); + }, []); + return ( +
+ +
+ ); +} + diff --git a/src/views/Home/Page7/index.js b/src/views/Home/Page7/index.js new file mode 100644 index 0000000..e90aad1 --- /dev/null +++ b/src/views/Home/Page7/index.js @@ -0,0 +1,27 @@ +import React, { useState, useEffect } from "react"; +import _ from "lodash"; +import scroll from "../../../utils/scroll"; + +export default function Page7({ list, page }) { + const [top, setTop] = useState(window.innerHeight); + + useEffect(() => { + window.addEventListener("scroll", (e) => { + setTop(scroll.homeScrollHandler(page)); + }); + }, []); + return ( +
+ +
+ ); +} + diff --git a/src/views/Home/index.js b/src/views/Home/index.js index b706d6e..c276775 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -1,18 +1,30 @@ -import React, {useState} from 'react'; -import Navbar from '../../components/Navbar'; -import Dots from '../../components/Dots'; +import React, { useState, useEffect } from "react"; +import Navbar from "../../components/Navbar"; -import Page1 from './Page1/index'; + +import Page1 from "./Page1"; +import Page2 from "./Page2"; +import Page3 from "./Page3"; +import Page4 from "./Page4"; +import Page5 from "./Page5"; +import Page6 from "./Page6"; +import Page7 from "./Page7"; +import { set } from "lodash"; export default function Home() { - const [page, setPage] = useState(1); return ( -
- +
- { - page === 1 && - } + + + + + + +
- ) + ); }