reza added some option

temp
Reza_ashrafi 3 years ago
parent 0fe08f3825
commit 1d113815e7
  1. BIN
      src/assets/images/ar.jpg
  2. 50
      src/components/JolPlayer/index.js
  3. 123
      src/redux/reducers/public.js
  4. 38
      src/utils/scroll.js
  5. 33
      src/views/Home/Page1/index.js
  6. 11
      src/views/Home/Page2/Mobile/AR/index.js
  7. 72
      src/views/Home/Page2/Mobile/QrResult/index.js
  8. 36
      src/views/Home/Page2/Mobile/QrScanner/index.js
  9. 162
      src/views/Home/Page2/Mobile/index.js
  10. 57
      src/views/Home/Page2/index.js
  11. 17
      src/views/Home/Test/index.js
  12. 6
      src/views/Home/index.js
  13. 3
      tailwind.config.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

@ -4,36 +4,36 @@ import JoLPlayer from "jol-player";
function Video({ fileIds, posterId, autoPlay }) {
const videoRef = useRef(null);
const [flag, setFlag] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 500) {
if (!localStorage.getItem("joiRect")) {
const jolRect = document
.getElementById("video-joi")
.getBoundingClientRect();
localStorage.setItem("joiRect", JSON.stringify(jolRect));
}
}
});
}, []);
// useEffect(() => {
// window.addEventListener("scroll", () => {
// if (window.scrollY > 500) {
// if (!localStorage.getItem("joiRect")) {
// const jolRect = document
// .getElementById("video-joi")
// .getBoundingClientRect();
// localStorage.setItem("joiRect", JSON.stringify(jolRect));
// }
// }
// });
// }, []);
const videoMethod = (status) => {
if (status === "play") {
videoRef.current.play();
setFlag(() => true);
}
};
// const videoMethod = (status) => {
// if (status === "play") {
// videoRef.current.play();
// setFlag(() => true);
// }
// };
// useEffect(() => {
// console.log(`videoRef.current`, videoRef.current);
// }, [videoRef.current]);
useEffect(() => {
if (window.scrollY > 3 * window.innerHeight) {
if (autoPlay && !flag) {
videoMethod("play");
}
}
}, [autoPlay]);
// useEffect(() => {
// if (window.scrollY > 3 * window.innerHeight) {
// if (autoPlay && !flag) {
// videoMethod("play");
// }
// }
// }, [autoPlay]);
return (

@ -1,7 +1,7 @@
import location from '../../utils/location';
import location from "../../utils/location";
const initialState = {
theme : localStorage.getItem('theme') || 'light',
theme: localStorage.getItem("theme") || "light",
homeData: [],
newProducts: [],
levels: [],
@ -35,6 +35,21 @@ const initialState = {
activeCategory: null,
categories: null,
bookSection: null,
grades: {
0: "پیش دبستان",
1: "اول",
2: "دوم",
3: "سوم",
4: "چهارم",
5: "پنجم",
6: "ششم",
7: "هفتم",
8: "هشتم",
9: "نهم",
10: "دهم",
11: "یازدهم",
12: "دوازدهم",
},
};
const grades = [
@ -57,7 +72,7 @@ export default function publicApi(state = initialState, action) {
switch (type) {
case "public/setTheme":
localStorage.setItem("theme", data);
return { ...state, location: false, error : null, theme: data };
return { ...state, location: false, error: null, theme: data };
case "active/video":
return {
...state,
@ -79,15 +94,13 @@ export default function publicApi(state = initialState, action) {
loading: false,
bookSection: data,
error: null,
selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0]
selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0],
};
case "public/vod/bookCourse":
let allCats;
allCats = Array.from(
new Set(
data.vods.map((item) => item.categoryId && item.categoryId)
)
new Set(data.vods.map((item) => item.categoryId && item.categoryId))
);
return {
...state,
@ -102,7 +115,9 @@ export default function publicApi(state = initialState, action) {
categories: allCats.map((item) =>
data.vods.filter((item1) => item1.categoryId === item)
),
selectedVideo: data.vods.filter((item ) => item.id !== location.getId())[0],
selectedVideo: data.vods.filter(
(item) => item.id !== location.getId()
)[0],
};
case "public/homePage":
let itemsLevel;
@ -124,101 +139,9 @@ export default function publicApi(state = initialState, action) {
error: null,
homeData: data,
};
// case "public/filter":
// const realList =
// state.newProducts.length === 0
// ? state.homeData.filter(
// (item) => item.title === "جدیدترین کتابهای دانوین"
// )[0].data
// : state.newProducts;
// if (state.newProducts.length === 0) {
// state = {
// ...state,
// newProducts: realList,
// };
// console.log("here1");
// }
// const level = data.levels;
// const search = data.search;
// if (level.length > 0 || search) {
// localStorage.setItem("filter", "ON");
// } else {
// return {
// ...state,
// loading: false,
// error: null,
// homeData: state.homeData.map((item) =>
// item.title === "جدیدترین کتابهای دانوین"
// ? { ...item, data: state.newProducts }
// : { ...item }
// ),
// newProducts: [],
// };
// }
// let byLevelFilter = [];
// if (level.length > 0) {
// level.map((item1) => {
// for (let i = 0; i < realList.length; i++) {
// if (grades[realList[i].book.gradeId] === item1) {
// byLevelFilter.push(realList[i]);
// }
// }
// });
// } else {
// byLevelFilter = realList;
// }
// // let bySubjectFilter = [];
// // if (subject.length > 0) {
// // subject.map((item1) => {
// // for (let i = 0; i < byLevelFilter.length; i++) {
// // if (byLevelFilter[i].name === item1) {
// // bySubjectFilter.push(byLevelFilter[i]);
// // }
// // }
// // });
// // } else {
// // bySubjectFilter = byLevelFilter;
// // }
// const bySearchFilter = search
// ? byLevelFilter.filter((item1) => item1.name.indexOf(search) !== -1)
// : byLevelFilter;
// // if (sort === "گران ترین") {
// // finalSort = bySearchFilter.sort((item1, item2) => {
// // return item1.product[0].price - item2.product[0].price;
// // });
// // } else {
// // finalSort = bySearchFilter;
// // }
// return {
// ...state,
// loading: false,
// error: null,
// homeData: state.homeData.map((item) =>
// item.title === "جدیدترین کتابهای دانوین"
// ? { ...item, data: bySearchFilter }
// : { ...item }
// ),
// };
// case "faq/list":
// return { ...state, loading: false, error: null, faqList: data };
// case "public/faq/search":
// return {
// ...state,
// loading: false,
// error: null,
// searchResult: state.faqList.filter(
// (item) =>
// item.title.indexOf(data) !== -1 ||
// item.description.indexOf(data) !== -1
// ),
// };
case "public/contact":
return { ...state, loading: false, error: null, contactData: data };
// case "public/ar":
// return { ...state, loading: false, error: null, arList: data };
case "public/blogList":
return { ...state, loading: false, error: null, blogList: data };
case "public/blogInfo":

@ -95,31 +95,36 @@ class scroll {
};
videoLinearFormula = (currentScroll) => {
if(!localStorage.getItem("htmlRect")){
localStorage.setItem("htmlRect", JSON.stringify(document.getElementById("video").getBoundingClientRect()));
if (!localStorage.getItem("htmlRect")) {
localStorage.setItem(
"htmlRect",
JSON.stringify(document.getElementById("video").getBoundingClientRect())
);
}
const htmlRect = JSON.parse(localStorage.getItem("htmlRect"));
const htmlRect =
JSON.parse(localStorage.getItem("htmlRect")) ||
document.getElementById("video").getBoundingClientRect();
const joiRect = JSON.parse(localStorage.getItem("joiRect"));
const currentWidth = this.linearFormula(
currentScroll,
htmlRect.width,
joiRect.width,
3 * window.innerHeight,
3.5 * window.innerHeight,
4 * window.innerHeight
);
const currentHeight = this.linearFormula(
currentScroll,
htmlRect.height,
joiRect.height,
3 * window.innerHeight,
3.5 * window.innerHeight,
4 * window.innerHeight
);
const currentLeft = this.linearFormula(
currentScroll,
htmlRect.left,
joiRect.left,
3 * window.innerHeight,
3.5 * window.innerHeight,
4 * window.innerHeight
);
@ -127,10 +132,9 @@ class scroll {
currentScroll,
htmlRect.top,
joiRect.top - window.innerHeight,
3 * window.innerHeight,
3.5 * window.innerHeight,
4 * window.innerHeight
);
return {
width: currentWidth,
height: currentHeight,
@ -145,30 +149,30 @@ class scroll {
currentScroll,
testRect.width,
window.innerWidth,
5.5 * window.innerHeight,
6 * window.innerHeight
4.5 * window.innerHeight,
5 * window.innerHeight
);
const currentHeight = this.linearFormula(
currentScroll,
testRect.height,
window.innerHeight,
5.5 * window.innerHeight,
6 * window.innerHeight
4.5 * window.innerHeight,
5 * window.innerHeight
);
const currentLeft = this.linearFormula(
currentScroll,
testRect.left,
0,
5.5 * window.innerHeight,
6 * window.innerHeight
4.5 * window.innerHeight,
5 * window.innerHeight
);
const currentTop = this.linearFormula(
currentScroll,
testRect.top,
0,
5.5 * window.innerHeight,
6 * window.innerHeight
4.5 * window.innerHeight,
5 * window.innerHeight
);
return {
@ -177,7 +181,7 @@ class scroll {
top: currentTop,
left: currentLeft,
};
}
};
}
const _scroll = new scroll();

@ -48,7 +48,12 @@ export default function Page1({ list, page }) {
useEffect(() => {}, [page]);
return (
<div
className={_.join(["home-page1 w-full pt-20 h-screen fixed left-0"], " ")}
className={_.join(
[
"home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0",
],
" "
)}
style={{ top: top }}
>
<FloatWithMouse />
@ -98,8 +103,8 @@ export default function Page1({ list, page }) {
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">
<div className="container flex flex-row justify-between relative transform translate-y-12" style={{ alignItems: 'start'}}>
<div className="list-none flex flex-row 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>
@ -113,12 +118,22 @@ export default function Page1({ list, page }) {
آزمون ها
</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 className="flex flex-col">
<h1 className="text-xl font-semibold text-blueC0">
لذت یادگیری را با دانوین تجربه کنید
</h1>
<p className="text-blue5F font-light text-sm w-64 mt-1 text-justify">
ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی
جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش
کشور ایجاد کنیم.
</p>
<Link
to="/products"
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end animate-bounce"
>
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
</Link>
</div>
</div>
<img

@ -0,0 +1,11 @@
import React from 'react';
import ARImage from '../../../../../assets/images/ar.jpg';
export default function AR() {
return (
<div className="relative flex w-full h-full">
<img src={ARImage} className="w-full absolute bottom-0 left-0" />
</div>
)
}

@ -0,0 +1,72 @@
import React from "react";
import olum2Image from "../../../../../assets/images/olum-2.svg";
import { connect } from "react-redux";
import _ from "lodash";
function QrResult({ book, grades, checked }) {
return (
<div
className={_.join(
[
"relative w-full h-full min-h-full transition-all transform flex flex-col px-2 pt-10 bg-white",
],
" "
)}
>
<div className="w-full flex flex-row items-center">
<img src={book.imageUrl} alt={book.name} className="rounded-md w-1/3" />
<div className="flex flex-col">
<h1 className="font-semibold text-primary">{book.name}</h1>
<strong className="text-blueC0 font-light mt-2 text-sm">
{_.join(["پایه", grades[book.grade]], " ")}
</strong>
<p className="mt-1 text-blueC0 text-sm">{_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")}</p>
</div>
</div>
<div className="flex flex-column rounded-md border border-blueFE overflow-hidden">
<ul className="w-full flex flex-row list-none">
</ul>
</div>
</div>
);
}
export default connect((state) => ({
grades: state.publicApi.grades,
}))(QrResult);
QrResult.defaultProps = {
book: {
name: "علوم اجتماعی",
page: 67,
grade: 2,
imageUrl: olum2Image,
},
dataTypes : [
{
name : 'تمامی محتواها',
type : 'all'
},
{
name : 'صوت',
type : 'voice'
},
{
name : 'ویدئو',
type : 'video'
},
{
name : 'پی دی اف',
type : 'pdf'
},
{
name : 'پاورپوینت',
type : 'ppt'
},
{
name : 'لینکها',
type : 'links'
},
]
};

@ -0,0 +1,36 @@
import React from "react";
export default function QrScanner() {
return (
<div className="relative w-full h-full">
<div
className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "10%" }}
></div>
<div
className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
<div
className="absolute right-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
<div
className="absolute left-0 bottom-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "62%" }}
></div>
<div
className="scanner absolute bg-green-300"
style={{ height: 5, width: "50%", left: "25%", top: "10%" }}
></div>
</div>
);
}

@ -1,25 +1,15 @@
import React, { useEffect, useState } from "react";
import _ from "lodash";
import {connect} from 'react-redux';
function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) {
const [checked, setChecked] = useState(mobilePosition > 0 ? true : false);
useEffect(() => {
if (mobilePosition > 0) {
setChecked(true);
} else {
setChecked(false);
}
}, [mobilePosition]);
import { connect } from "react-redux";
import QrResult from "./QrResult";
import QrScanner from "./QrScanner";
import AR from "./AR";
function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }) {
return (
<div
className={_.join(
[
"fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl",
window.scrollY > 2500 ? "items-center justify-center" : "",
window.scrollY > 2500 ? "bg-black" : "",
],
["fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl"],
" "
)}
style={{
@ -30,81 +20,93 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) {
// transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
}}
>
<div
className={_.join(
[
"relative w-full h-full min-h-full",
window.scrollY > 2500 ? "hidden" : "",
],
" "
)}
>
<div
className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "10%" }}
></div>
<div className="relative w-full h-full flex">
<div
className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
className={_.join(
[
"absolute left-0 top-0 h-full w-full",
unit === 1 ? "opacity-100" : "opacity-0",
],
" "
)}
>
<QrScanner />
</div>
<div
className="absolute right-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
className={_.join(
[
"absolute w-full h-full min-h-full transform",
unit === 2 ? "opacity-100" : "opacity-0",
],
" "
)}
>
<QrResult />
</div>
<div
className="absolute left-0 bottom-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "62%" }}
></div>
className={_.join(
[
"absolute w-full h-full min-h-full transform",
unit === 3 ? "opacity-100" : "opacity-0",
],
" "
)}
>
<AR />
</div>
<div
className="scanner absolute bg-green-300"
style={{ height: 5, width: "50%", left: "25%", top: "10%" }}
></div>
</div>
<div
className={_.join(
[
"relative w-full h-full min-h-full bg-green-200 transition-all transform",
checked ? "-translate-y-full" : "",
window.scrollY > 2500 ? "hidden" : "",
],
" "
)}
></div>
{window.scrollY > 2500 ? (
<video
id="video"
className={_.join(
[
"video outline-none animation-puls bg-black",
window.scrollY > 3 * window.innerHeight ? "fixed" : "static",
"absolute left-0 top-0 h-full w-full flex justify-center items-center bg-black",
unit === 4 ? "opacity-100" : "opacity-0",
],
" "
)}
style={{
height: window.scrollY <= 3 * window.innerHeight ? (window.innerHeight * 9) / 25 : videoPosition?.height,
width: window.scrollY <= 3 * window.innerHeight ? "100%" : videoPosition?.width,
left : window.scrollY > 3 * window.innerHeight ? videoPosition?.left : 'auto',
top : window.scrollY > 3 * window.innerHeight ? videoPosition?.top : 'auto',
}}
controls
autoPlay={'true'}
>
<source src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`} type={"video/mp4"} />
</video>
) : null}
<video
id="video"
className={_.join(
[
"video outline-none animation-puls bg-black",
window.scrollY > 3.5 * window.innerHeight ? "fixed" : "static",
],
" "
)}
style={{
height:
window.scrollY < 3.5 * window.innerHeight
? (window.innerHeight * 9) / 25
: videoPosition?.height,
width:
window.scrollY < 3.5 * window.innerHeight
? "100%"
: videoPosition?.width,
left:
window.scrollY < 3.5 * window.innerHeight
? "auto"
: videoPosition?.left,
top:
window.scrollY < 3.5 * window.innerHeight
? "auto"
: videoPosition?.top,
}}
controls
autoPlay={"true"}
>
<source
src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`}
type={"video/mp4"}
/>
</video>
</div>
</div>
</div>
);
}
export default connect((state) => ({
selectedVideo : state.publicApi.selectedVideo
}), {})(Mobile);
export default connect(
(state) => ({
selectedVideo: state.publicApi.selectedVideo,
}),
{}
)(Mobile);

@ -8,6 +8,7 @@ export default function Page2({ list, page, autoPlay }) {
const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight);
const [videoPosition, setVideoPosition] = useState(null);
const [unit, setUnit] = useState(null);
const [boxPosition, setBoxPosition] = useState({
translateY: null,
translateX: null,
@ -15,6 +16,8 @@ export default function Page2({ list, page, autoPlay }) {
});
const [mobilePosition, setMobilePosition] = useState(null);
useEffect(() => {
// localStorage.removeItem('htmlRect');
// localStorage.removeItem('joiRect');
setMobilePosition(
scroll.linearFormula(
window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
@ -24,11 +27,14 @@ export default function Page2({ list, page, autoPlay }) {
2.5 * height
)
);
setVideoPosition(
window.scrollY > 3 * height
? scroll.videoLinearFormula(window.scrollY)
: null
);
if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
setVideoPosition(
window.scrollY > 4 * height
? scroll.videoLinearFormula(4 * height)
: scroll.videoLinearFormula(window.scrollY)
);
}
unitPositionHandler(window.scrollY);
if (window.scrollY < 2.5 * height) {
setBoxPosition({
translateY: scroll.linearFormula(
@ -81,13 +87,23 @@ export default function Page2({ list, page, autoPlay }) {
}
window.addEventListener("scroll", (e) => {
const scrollY = window.scrollY;
setTop(scroll.homeScrollHandler(page));
boxPositionHandler(window.scrollY);
mobilePositionHandler(window.scrollY);
videoPositionHandler(window.scrollY);
boxPositionHandler(scrollY);
mobilePositionHandler(scrollY);
if (window.scrollY > 2 * height && window.scrollY < 3.5 * height) {
unitPositionHandler(scrollY);
}
if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
videoPositionHandler(scrollY);
}
});
}, []);
useEffect(() => {
unitPositionHandler(window.scrollY);
},[mobilePosition])
const boxPositionHandler = (scrollY) => {
if (scrollY <= height) {
setBoxPosition({
@ -142,17 +158,37 @@ export default function Page2({ list, page, autoPlay }) {
2.5 * height
)
);
}else{
setMobilePosition(6);
}
};
const videoPositionHandler = (scrollY) => {
if (scrollY <= 3 * height) {
if (scrollY <= 3.5 * height) {
setVideoPosition(() => null);
} else if (scrollY > 3 * height && scrollY < 4 * height) {
} else if (scrollY > 3.5 * height && scrollY < 4 * height) {
setVideoPosition(scroll.videoLinearFormula(scrollY));
} else {
}
};
const unitPositionHandler = (scrollY) => {
if (scrollY > 2 * height && scrollY <= 2.5 * height) {
if (mobilePosition > 0) {
setUnit(2);
} else {
setUnit(1);
}
}
else if(scrollY > 2.5 * height && scrollY <= 2.7 * height){
setUnit(2);
}
else if(scrollY > 2.7 * height && scrollY <= 3.2 * height){
setUnit(3);
}else if(scrollY > 3.2 * height && scrollY < 3.5 * height){
setUnit(4);
}
};
return (
<div
onClick={(e) => e.stopPropagation()}
@ -201,6 +237,7 @@ export default function Page2({ list, page, autoPlay }) {
mobilePosition={mobilePosition}
videoPosition={videoPosition}
autoPlay={autoPlay}
unit={unit}
/>
{/* video */}
</div>

@ -35,17 +35,12 @@ export default function Test({ title, duration, questions }) {
const height = window.innerHeight;
if (scrollY <= 4.5 * height) {
setTranslateY(() => 0);
setTestPosition(() => null)
setTestPosition(() => null);
} else if (scrollY > 4.5 * height && scrollY < 5 * height) {
setTranslateY(() =>
scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height)
);
setTestPosition(() => null);
} else if(scrollY > 5.5 * height && scrollY < 6 * height) {
setTestPosition(() => scroll.testLinearFolmula(scrollY));
setTranslateY(() => 0);
}else{
}
};
return (
@ -56,11 +51,11 @@ export default function Test({ title, duration, questions }) {
style={{
minHeight: window.innerHeight - 180,
transform: `translateY(${translateY}%)`,
position : testPosition ? 'fixed' : 'static',
left : testPosition?.left ? testPosition?.left : 'auto',
top : testPosition?.top ? testPosition?.top : 'auto',
width : testPosition?.width ? testPosition?.width : 'auto',
height : testPosition?.height ? testPosition?.height : 'auto'
position: testPosition ? "fixed" : "static",
left: testPosition?.left ? testPosition?.left : "auto",
top: testPosition?.top ? testPosition?.top : "auto",
width: testPosition?.width ? testPosition?.width : "auto",
height: testPosition?.height ? testPosition?.height : "auto",
}}
>
<header

@ -3,10 +3,7 @@ import Navbar from "../../components/Navbar";
import Page1 from "./Page1";
import Page2 from "./Page2";
// import Page3 from "./Page3";
// import Page4 from "./Page4";
import VideoTube from "./VideoTube";
// import Dots from "../../components/Dots";
export default function Home() {
const [autoPlay, setAutoPlay] = useState(false);
@ -14,7 +11,6 @@ export default function Home() {
window.addEventListener("scroll", () => {
if (window.scrollY > 3 * window.innerHeight) {
setAutoPlay(() => true);
// alert('here');
} else {
setAutoPlay(() => false);
}
@ -23,7 +19,7 @@ export default function Home() {
return (
<div
className="flex flex-col bg-white relative w-full rtl"
style={{ height: "700vh" }}
style={{ height: "900vh" }}
>
<Navbar />
<Page1 page={1} />

@ -12,13 +12,16 @@ module.exports = {
textColor : (theme) => ({
...theme("colors"),
primary: "#235A90",
blueC0: "#196EC0",
blueE8 : '#2E81E8',
green71 : '#067182',
blue52 : '#132F52',
blue5F : '#05335F'
}),
borderColor : (theme) => ({
...theme("colors"),
blueC0: "#196EC0",
blueFE : "#C1E0FE"
})
},
variants: {

Loading…
Cancel
Save