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

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("یادگیری")}
&nbsp;
</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("از اول تا یازدهم")}&nbsp;</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("یادگیری جذاب")}&nbsp;
</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;