You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
4.8 KiB
142 lines
4.8 KiB
import React, { useState } from "react"; |
|
import { Link } from "react-router-dom"; |
|
import { Carousel } from "@trendyol-js/react-carousel"; |
|
import Book from "../../../Landscape/Page1/Book"; |
|
import Lights from "../../../Landscape/Page1/Lights"; |
|
import Video from "../../../../../components/JolPlayer"; |
|
import arrow from "../../../../../assets/icons/dropdown-blue.svg"; |
|
import olum1Image from "../../../../../assets/images/olum-1.svg"; |
|
import olum2Image from "../../../../../assets/images/olum-2.svg"; |
|
import olum4Image from "../../../../../assets/images/olum-4.svg"; |
|
import olum7Image from "../../../../../assets/images/olum-7.svg"; |
|
import zist11Image from "../../../../../assets/images/zist-11.svg"; |
|
import sheffImage from "../../../../../assets/images/sheff.svg"; |
|
import flatFlower from "../../../../../assets/icons/flat-flower-white.svg"; |
|
import jojoImage from "../../../../../assets/images/jojo.svg"; |
|
|
|
function Header({ list }) { |
|
const [show, setShow] = useState(2); |
|
|
|
return ( |
|
<div |
|
className="flex flex-col w-full rounded-md items-center justify-center relative pt-36 mb-28" |
|
style={{ |
|
// minHeight: "calc(100vh * 6 / 7)", |
|
background: |
|
"linear-gradient(135deg, rgba(147,176,255,0.3435749299719888) 0%, rgba(183,199,242,0.6264880952380952) 15%, rgba(67,207,227,0.27914915966386555) 68%, rgba(226,236,233,0.68531162464986) 100%)", |
|
}} |
|
> |
|
<img |
|
src={flatFlower} |
|
alt="" |
|
className="absolute transform left-1/2 top-0 -translate-x-1/2 opacity-30" |
|
/> |
|
<Lights degrees={[0, 0]} /> |
|
<div className="w-full flex flex-col lg:px-8 relative"> |
|
<div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}> |
|
<Carousel |
|
show={show} |
|
slide={1} |
|
swiping={true} |
|
swipeOn={0.05} |
|
// useArrowKeys={true} |
|
transition={0.5} |
|
rightArrow={ |
|
<img |
|
className="w-5 absolute top-1/2 transform -translate-y-1/2 cursor-pointer -rotate-90" |
|
src={arrow} |
|
alt="" |
|
/> |
|
} |
|
leftArrow={ |
|
<img |
|
className="w-5 absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90" |
|
src={arrow} |
|
alt="" |
|
/> |
|
} |
|
> |
|
{list.map((book, index) => ( |
|
<Book book={book} key={index} /> |
|
))} |
|
</Carousel> |
|
</div> |
|
<img src={sheffImage} alt="" className="w-full absolute bottom-0" /> |
|
</div> |
|
<div className="w-full flex justify-center mt-5"> |
|
<Link |
|
to="/products" |
|
className="flex flex-row items-center text-white text-tiny bg-blueC0 px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end" |
|
> |
|
ورود به فروشگاه |
|
</Link> |
|
</div> |
|
<div className="flex flex-col items-center text-center font-extrabold text-blue5F dark:text-gray-300 text-2xl mt-3 transform translate-y-4"> |
|
<div className="flex flex-row"> |
|
<div className="relative"> |
|
<h1 className="inline z-20 pb-1">یادگیری </h1> |
|
<span className="h-1 w-full absolute bottom-0 z-10 left-0 bg-yellow3"></span> |
|
</div> |
|
<h1 className="inline">با طعم لذت</h1> |
|
</div> |
|
<div className="flex flex-row my-1.5"> |
|
<h1 className="inline">از اول تا یازدهم </h1> |
|
<div className="relative"> |
|
<h1 className="inline z-20 pb-1">کنارتونیم</h1> |
|
<span className="h-1 w-full absolute bottom-0 left-0 bg-orange1"></span> |
|
</div> |
|
</div> |
|
<div className="flex flex-row"> |
|
<div className="relative"> |
|
<h1 className="inline z-20 pb-1">یادگیری جذاب </h1> |
|
<span className="h-1 w-full absolute bottom-0 left-0 bg-green1"></span> |
|
</div> |
|
<h1 className="inline">و تعاملی</h1> |
|
</div> |
|
</div> |
|
<div className="w-full p-4 transform translate-y-1/3 relative"> |
|
<img |
|
src={jojoImage} |
|
alt="" |
|
className="w-full z-10 absolute top-0 left-0" |
|
/> |
|
<Video /> |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
export default Header; |
|
|
|
Header.defaultProps = { |
|
list: [ |
|
{ |
|
name: "زیست یازدهم", |
|
imageUrl: zist11Image, |
|
}, |
|
{ |
|
name: "علوم دوم", |
|
imageUrl: olum2Image, |
|
}, |
|
{ |
|
name: "علوم اول", |
|
imageUrl: olum1Image, |
|
}, |
|
{ |
|
name: "علوم هفتم", |
|
imageUrl: olum7Image, |
|
}, |
|
{ |
|
name: "علوم چهارم", |
|
imageUrl: olum4Image, |
|
}, |
|
{ |
|
name: "علوم چهارم", |
|
imageUrl: olum4Image, |
|
}, |
|
{ |
|
name: "علوم چهارم", |
|
imageUrl: olum4Image, |
|
}, |
|
], |
|
};
|
|
|