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.
117 lines
4.2 KiB
117 lines
4.2 KiB
import React, { useState } from "react"; |
|
import { Link } from "react-router-dom"; |
|
import { Carousel } from "@trendyol-js/react-carousel"; |
|
|
|
//components |
|
import Video from "../../../../../components/JolPlayer"; |
|
import Book from "../../../Landscape/Page1/Book"; |
|
import Lights from "../../../Landscape/Page1/Lights"; |
|
|
|
//assets |
|
import arrow from "../../../../../assets/icons/dropdown-blue.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({ bookList }) { |
|
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]} /> |
|
{bookList?.length ? ( |
|
<div className="w-full flex flex-col lg:px-8 relative"> |
|
<div className="w-full relative z-10 px-4 ltr"> |
|
<Carousel |
|
show={show} |
|
slide={1} |
|
key={bookList?.length} |
|
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="" |
|
/> |
|
} |
|
> |
|
{bookList?.map((book, index) => ( |
|
<Book book={book} key={index} /> |
|
))} |
|
</Carousel> |
|
</div> |
|
<img src={sheffImage} alt="" className="w-full absolute bottom-0" /> |
|
</div> |
|
) : null} |
|
|
|
<div className="w-full flex justify-center mt-5"> |
|
<Link |
|
to="/products" |
|
className="flex items-center text-white text-tiny bg-blueC0 px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end" |
|
> |
|
{window.t("ورود به فروشگاه")} |
|
</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"> |
|
{window.t("یادگیری")} |
|
|
|
</h1> |
|
<span className="h-1 w-full absolute bottom-0 z-10 left-0 bg-yellow3"></span> |
|
</div> |
|
<h1 className="inline"> {window.t("با طعم لذت")}</h1> |
|
</div> |
|
<div className="flex flex-row my-1.5"> |
|
<h1 className="inline">{window.t("از اول تا یازدهم")} </h1> |
|
<div className="relative"> |
|
<h1 className="inline z-20 pb-1">{window.t("کنارتونیم")}</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"> |
|
{window.t("یادگیری جذاب")} |
|
</h1> |
|
<span className="h-1 w-full absolute bottom-0 left-0 bg-green1"></span> |
|
</div> |
|
<h1 className="inline">و {window.t("تعاملی")} </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;
|
|
|