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.
32 lines
1.1 KiB
32 lines
1.1 KiB
3 years ago
|
import React from "react";
|
||
|
// import "./BookDesign.scss";
|
||
|
|
||
|
import book from "../../assets/images/book.svg";
|
||
|
import bookCover from "../../assets/images/book-white-cover.svg";
|
||
|
|
||
|
export const BookDesign = () => {
|
||
|
return (
|
||
|
<section className="w-11/12 mx-auto p-4 bg-gray-300 rounded-md shadow-md my-8">
|
||
|
{/* title holder */}
|
||
|
<div className="mb-6">
|
||
|
<button className="text-lg text-productTitle text-base bg-white p-1 rounded shadow">
|
||
|
طراحی کتاب
|
||
|
</button>
|
||
|
</div>
|
||
|
{/* Book Ui Design */}
|
||
|
<section className="my-24 mx-24 flex flex-wrap justify-center">
|
||
|
<div className="flex relative">
|
||
|
<img
|
||
|
src={book}
|
||
|
alt=""
|
||
|
className="rounded-md z-40 transform -translate-x-3 w-full sm:w-72 h-full"
|
||
|
/>
|
||
|
<img src={bookCover} alt="" className="z-30 h-full" />
|
||
|
<div className="bg-greenBookBg w-7 rounded-l-md transform translate-x-4 z-10"></div>
|
||
|
<div className="w-10/12 absolute left-7 -bottom-0 h-11 shadow-2xl shadow-black"></div>
|
||
|
</div>
|
||
|
</section>
|
||
|
</section>
|
||
|
);
|
||
|
};
|