reza pushed home page

temp
Reza_ashrafi 3 years ago
parent 52c4a373cd
commit abbc77fc94
  1. 16
      src/assets/images/sheff.svg
  2. 96
      src/utils/scroll.js
  3. 2
      src/views/Home/Page1/Book/index.js
  4. 59
      src/views/Home/Page1/index.js
  5. 28
      src/views/Home/Page2/index.js
  6. 28
      src/views/Home/Page3/index.js
  7. 29
      src/views/Home/Page4/index.js
  8. 28
      src/views/Home/Page5/index.js
  9. 28
      src/views/Home/Page6/index.js
  10. 27
      src/views/Home/Page7/index.js
  11. 34
      src/views/Home/index.js

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 53 KiB

@ -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;

@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
export default function Book({ book }) {
return (
<Link to={`{/products/${book.name}}`} className="flex group relative">
<img src={book.imageUrl} alt={book.name} />
<img src={book.imageUrl} alt={book.name} className="z-50" />
<button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm">
مشاهده و خرید
</button>

@ -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 (
<div className="home-page1 relative h-screen w-full pt-20">
<div
className={_.join(["home-page1 w-full pt-20 h-screen fixed left-0"], " ")}
style={{ top: top }}
>
<FloatWithMouse />
<img
src={flatFlower}
@ -47,8 +63,8 @@ export default function Page1({ list }) {
className="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
/>
<div className="container flex flex-col lg:px-8">
<header className="z-10 w-full h-10 flex flex-row justify-between bg-red-300 mb-10"></header>
<div className="w-full relative z-10" style={{ direction: "ltr" }}>
<header className="z-10 w-full h-10 flex flex-row justify-between mb-10"></header>
<div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}>
<Carousel
show={show}
slide={2}
@ -76,6 +92,41 @@ export default function Page1({ list }) {
</Carousel>
</div>
</div>
<div className="w-full relative lg:px-8">
<img
src={sheffImage}
alt=""
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-7"
/>
</div>
<div className="container flex flex-row justify-between relative transform translate-y-9">
<div className="list-none flex flex-row items-center bg-blueB0 bg-opacity-40 p-2.5 rounded-md backdrop-filter backdrop-blur-md">
<strong className="text-white text-sm font-light ml-1 border-l-2 pl-2 border-gray-300">
لیست محصولات
</strong>
<Link to="/products" className="text-white text-xs mr-5">
کتاب ها
</Link>
<Link to="/products" className="text-white text-xs mr-5">
دوره ویديویی
</Link>
<Link to="/products" className="text-white text-xs mr-5">
آزمون ها
</Link>
</div>
<Link
to="/products"
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 rounded-md backdrop-filter backdrop-blur-md"
>
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
</Link>
</div>
<img
src={arrowBottomIcon}
alt=""
className="absolute transform left-1/2 bottom-5 -translate-x-1/2 cursor-pointer"
/>
</div>
);
}

@ -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 (
<div
className={_.join(
[
"h-screen w-full pt-20 fixed left-0 bg-gray-200",
],
" "
)}
style={{ top: top }}
>
</div>
);
}

@ -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 (
<div
className={_.join(
[
"fixed left-0 h-screen w-full pt-20 bg-gray-300",
],
" "
)}
style={{ top: top }}
>
</div>
);
}

@ -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 (
<div
className={_.join(
[
"fixed left-0 h-screen w-full pt-20 bg-gray-400",
],
" "
)}
style={{ top: top }}
>
</div>
);
}

@ -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 (
<div
className={_.join(
[
"fixed left-0 h-screen w-full pt-20 bg-gray-500",
],
" "
)}
style={{ top: top }}
>
</div>
);
}

@ -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 (
<div
className={_.join(
[
"fixed left-0 h-screen w-full pt-20 bg-gray-600",
],
" "
)}
style={{ top: top }}
>
</div>
);
}

@ -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 (
<div
className={_.join(
[
"fixed left-0 h-screen w-full pt-20 bg-gray-700",
],
" "
)}
style={{ top: top }}
>
</div>
);
}

@ -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 (
<div className="home w-screen min-h-screen flex flex-col bg-white relative">
<Dots count={7} active={page} setPage={setPage} />
<div
className="flex flex-col bg-white relative w-full"
style={{ height: "700vh" }}
>
<Navbar />
{
page === 1 && <Page1 />
}
<Page1 page={1} />
<Page2 page={2} />
<Page3 page={3} />
<Page4 page={4} />
<Page5 page={5} />
<Page6 page={6} />
<Page7 page={7} />
</div>
)
);
}

Loading…
Cancel
Save