diff --git a/src/assets/img/undraw_certificate_re_yadi.svg b/src/assets/img/undraw_certificate_re_yadi.svg new file mode 100644 index 0000000..f63e12e --- /dev/null +++ b/src/assets/img/undraw_certificate_re_yadi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/undraw_professor_-8-lrt.svg b/src/assets/img/undraw_professor_-8-lrt.svg new file mode 100644 index 0000000..aa5f3d9 --- /dev/null +++ b/src/assets/img/undraw_professor_-8-lrt.svg @@ -0,0 +1 @@ +professor \ No newline at end of file diff --git a/src/assets/img/undraw_quiz_nlyh.svg b/src/assets/img/undraw_quiz_nlyh.svg new file mode 100644 index 0000000..aa03775 --- /dev/null +++ b/src/assets/img/undraw_quiz_nlyh.svg @@ -0,0 +1 @@ +quiz \ No newline at end of file diff --git a/src/view/LoginSignUp/index.css b/src/view/LoginSignUp/index.css new file mode 100644 index 0000000..ffcf52b --- /dev/null +++ b/src/view/LoginSignUp/index.css @@ -0,0 +1,42 @@ +/* Slideshow */ + +.slideshow { + margin: 0 auto; + overflow: hidden; + width:650px; + } + + .slideshowSlider { + white-space: nowrap; + transition: ease 1000ms; + } + + .slide { + display: inline-block; + + height: 600px; + width: 100%; + border-radius: 40px; + } + + /* Buttons */ + + .slideshowDots { + text-align: center; + } + + .slideshowDot { + display: inline-block; + height: 6px; + width: 6px; + border-radius: 50%; + + cursor: pointer; + margin: 15px 7px 0px; + + background-color: #c4c4c4; + } + + .slideshowDot.active { + background-color: #521326; + } \ No newline at end of file diff --git a/src/view/LoginSignUp/index.js b/src/view/LoginSignUp/index.js index 1429337..1c5f9a9 100644 --- a/src/view/LoginSignUp/index.js +++ b/src/view/LoginSignUp/index.js @@ -1,11 +1,59 @@ -import React from "react"; +import React, {useEffect, useState, useRef} from "react"; import { Link } from "react-router-dom"; import logo from "../../assets/img/big-logo.svg"; -import img1 from "../../assets/img/Group 1282.svg"; +import firstPic from '../../assets/img/undraw_professor_-8-lrt.svg'; +import secondPic from '../../assets/img/undraw_quiz_nlyh.svg'; +import thirdPic from '../../assets/img/undraw_certificate_re_yadi.svg'; +import { Slide } from 'react-slideshow-image'; +import './index.css'; const LoginSignUp = ({ activeLogin }) => { + const [index, setIndex] = useState(0); + const timeoutRef = useRef(null); + + function resetTimeout() { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + } + + useEffect(() => { + resetTimeout(); + timeoutRef.current = setTimeout( + () => + setIndex((prevIndex) => + prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1 + ), + delay + ); + + return () => { + resetTimeout(); + }; + }, [index]); + const slideContents = [ + { + id:0, + image: firstPic, + title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید' , + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + }, + { + id:1, + image: secondPic, + title: 'یک آزمون سخت و افتضاح در راه هست!' , + description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ', + }, + { + id:1, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست' , + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + }, + ]; + const delay = 2500; return ( -
+
{/* form */} @@ -35,24 +83,56 @@ const LoginSignUp = ({ activeLogin }) => {

- ثبت نام شما در سامانه به منزله قبول - شرایط و قوانین استفاده - میباشد -

-

1401 - 1400

+ ثبت نام شما در سامانه به منزله قبول + شرایط و قوانین استفاده + میباشد +

+

1401 - 1400

- +
{/* Slider */} -
+
+
+
+ {slideContents.map((item, index) => ( +
+
+ +

{item.title}

+

{item.description}

+
+
+ ))} +
+
+ {slideContents.map((_, idx) => ( +
{ + setIndex(idx); + }} + >
+ ))} +
+
-
+
+ ); };