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

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