284 lines
15 KiB
JavaScript
284 lines
15 KiB
JavaScript
import React from "react";
|
||
import Bg1 from "../assets/icons/bg1.svg";
|
||
import { GrLocation } from "react-icons/gr";
|
||
import { BiEdit } from "react-icons/bi";
|
||
import { FaRegStar } from "react-icons/fa";
|
||
import { PiCoffee } from "react-icons/pi";
|
||
import { IoMdTime } from "react-icons/io";
|
||
import { LuCalendar1 } from "react-icons/lu";
|
||
import Vector11 from "../assets/icons/Vector11.svg";
|
||
import Vector12 from "../assets/icons/Vector12.svg";
|
||
import Vector13 from "../assets/icons/Vector13.svg";
|
||
import Vector14 from "../assets/icons/Vector14.svg";
|
||
import Vector15 from "../assets/icons/Vector15.svg";
|
||
import Vector9 from "../assets/icons/Vector9.svg";
|
||
import Vector16 from "../assets/icons/Vector16.svg";
|
||
import Sperso from "../assets/icons/sperso.svg";
|
||
import Coffee2 from "../assets/icons/coffee2.svg";
|
||
import Coffee1 from "../assets/icons/coffee1.svg";
|
||
import Coffee3 from "../assets/icons/coffee3.svg";
|
||
import Edit from "../assets/icons/edit.svg";
|
||
|
||
const CafeManagement = () => {
|
||
return (
|
||
<section>
|
||
<h3 className="text-[#402E32] font-bold">ادیت کافه ترنج</h3>
|
||
|
||
<div className="mt-9 border-2 border-[#8b8886] p-10 rounded-2xl flex gap-4">
|
||
<div>
|
||
<img className="w-[461px]" src={Bg1} alt="Logo" />
|
||
</div>
|
||
|
||
<div className="relative flex flex-col gap-4.5">
|
||
<div className="absolute top-2 left-0 -mt-5">
|
||
<button className="border-2 border-[#bb8f70] w-25 h-10 rounded-3xl text-[#402e32] hover:bg-[#7f4629] hover:text-white transition-all duration-300 hover:border-none">
|
||
انصراف
|
||
</button>
|
||
<button className="border-2 border-[#bb8f70] bg-[#7f4629] text-white w-25 h-10 rounded-3xl mr-4 hover:bg-[#5f494f] transition-all duration-300 hover:border-none">
|
||
تایید
|
||
</button>
|
||
</div>
|
||
<BiEdit className="w-4.5 h-4.5 -mt-1" />
|
||
<h3 className="font-bold text-base">کافه ترنج</h3>
|
||
<hr className="w-38 -mt-3 border-1 text-[#80931e]" />
|
||
<div className="flex items-center gap-2">
|
||
<GrLocation />
|
||
<span className="text-base">اصفهان - خیابان آذر </span>
|
||
</div>
|
||
<hr className="w-38 -mt-3 border-1 text-[#80931e]" />
|
||
|
||
<div className="flex items-center gap-2">
|
||
<FaRegStar />
|
||
<span className="text-base">3.9</span>
|
||
</div>
|
||
<h3 className="font-bold text-base">درباره کافه</h3>
|
||
<span className="text-base">
|
||
کافه ترنج، یک کافی شاپ با محیطی دنج و دلچسب در شهر اصفهان و یکی از
|
||
ممتازترین کافی شاپهای ابن شهر است. از جمله خدمات این کافه میتوان
|
||
به اینترنت رایگان و ارائه کتابهایی برای مطالعه در داخل کافه اشاره
|
||
کرد.
|
||
</span>
|
||
<hr className="w-[104%] -mt-3 border-1 text-[#80931e]" />
|
||
|
||
<button className="mt-15 flex gap-2 items-center text-center w-[133%] h-15 -mr-72 px-130 rounded-4xl border-2 border-[#7f4629] hover:bg-[#7f4629] hover:text-white transition-all duration-200 hover:border-none text-[#402e32">
|
||
<BiEdit />
|
||
<span className="font-bold">ادیت منو کافه</span>
|
||
</button>
|
||
|
||
<h3 className="text-[#402E32] font-bold mt-10 relative -right-71">
|
||
ویژگی ها
|
||
</h3>
|
||
|
||
<div className="relative -mr-71 mt-5 flex gap-3">
|
||
<div className="bg-[#e1d5c2] w-[140px] h-[137.6px] flex flex-col items-center gap-8 text-center rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<img src={Coffee3} className="w-6 h-6 text-[#402E32] mt-5" />
|
||
<span className="text-[#402E32] font-medium whitespace-nowrap">
|
||
منو کافه:
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<img src={Vector15} className="w-6 h-6 text-[#402E32] mt-5" />
|
||
<span>ساعت کاری:</span>
|
||
<span> 23 - 8</span>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<img src={Vector14} className="w-6 h-6 text-[#402E32] mt-5" />
|
||
<span>رزرو :</span>
|
||
<span>رزرو آنلاین</span>
|
||
</div>
|
||
<div className="flex flex-col gap-4 text-[#402E32] font-medium w-[170.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<img src={Vector11} className="w-6 h-6 text-[#402E32] mt-5" />
|
||
<span>موسیقی :</span>
|
||
<span>موسیقی زنده آخر هفته</span>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<img src={Vector13} className="w-6 h-6 text-[#402E32] mt-5" />
|
||
<span>پارکینگ :</span>
|
||
<span>عمومی</span>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<img src={Vector12} className="w-6 h-6 text-[#402E32] mt-5" />
|
||
<span>دسترسی آسان :</span>
|
||
<span>مناسب افراد ناتوان</span>
|
||
</div>
|
||
|
||
<div className="flex justify-center items-center w-[150.5px] h-[137.6px] bg-[#5e5450] rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<img src={Vector9} className="w-6 h-6 text-[#402E32]" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="mt-10 flex gap-10 justify-between -mr-71 text-[#402E32] font-medium">
|
||
<div className="flex items-center gap-2 justify-center">
|
||
<img src={Vector16} alt="Logo" />
|
||
<span>عنوان</span>
|
||
</div>
|
||
<span>نوشیدنی سرد</span>
|
||
<span>نوشیدنی گرم</span>
|
||
<span>کیک و دسر</span>
|
||
<span>صبحانه</span>
|
||
<span>ساندویچ و برگر</span>
|
||
<span>سالاد و پیش غذا</span>
|
||
</div>
|
||
<hr className="w-[134%] -mr-77 mt-3 border-2 rounded-3xl text-[#939393]" />
|
||
|
||
<div className="mt-9 flex items-center gap-2 -mr-71 text-[#a79fa1] font-bold">
|
||
<img src={Vector16} alt="Logo" />
|
||
<h3>افزودن زیر عنوان</h3>
|
||
</div>
|
||
|
||
<div className="mt-9 flex items-center gap-2 -mr-71 text-[#66585b] font-bold">
|
||
<img className="w-5.5 h-5.5" src={Edit} alt="Logo" />
|
||
<img className="w-6 h-6" src={Coffee3} alt="Logo" />
|
||
<h3>قهوه ها</h3>
|
||
<hr className="mt-9 -mr-15 w-[5%] border-1 text-[#80931e]" />
|
||
</div>
|
||
|
||
<div className="grid grid-cols-3 gap-5 -mr-64">
|
||
<div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<h1 className="text-[#402E32] font-bold -mr-50">اسپرسو100%</h1>
|
||
<img src={Sperso} alt="Logo" className="mt-5" />
|
||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||
<span>قیمت</span>
|
||
<span>118.000</span>
|
||
</div>
|
||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||
محتویات
|
||
</p>
|
||
<span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
|
||
45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز،
|
||
به همراه یک عدد آب معدنی مینی
|
||
</span>
|
||
<hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
|
||
</div>
|
||
|
||
<div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<h1 className="text-[#402E32] font-bold -mr-50">
|
||
کارامل ماکیاتو
|
||
</h1>
|
||
<img src={Coffee1} alt="Logo" className="mt-5" />
|
||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||
<span>قیمت</span>
|
||
<span>149.000</span>
|
||
</div>
|
||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||
محتویات
|
||
</p>
|
||
<span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
|
||
220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه
|
||
فوم شیر، سیروپ کارامل
|
||
</span>
|
||
<hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
|
||
</div>
|
||
|
||
<div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||
اسپرسو آفوگاتو
|
||
</h1>
|
||
<img src={Coffee2} alt="Logo" className="mt-5" />
|
||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||
<span>قیمت</span>
|
||
<span>118.000</span>
|
||
</div>
|
||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||
محتویات
|
||
</p>
|
||
<span className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||
</span>
|
||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
|
||
</div>
|
||
|
||
<div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||
اسپرسو آفوگاتو
|
||
</h1>
|
||
<img src={Coffee2} alt="Logo" className="mt-5" />
|
||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||
<span>قیمت</span>
|
||
<span>118.000</span>
|
||
</div>
|
||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||
محتویات
|
||
</p>
|
||
<span className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||
</span>
|
||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
|
||
</div>
|
||
|
||
<div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||
اسپرسو آفوگاتو
|
||
</h1>
|
||
<img src={Coffee2} alt="Logo" className="mt-5" />
|
||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||
<span>قیمت</span>
|
||
<span>118.000</span>
|
||
</div>
|
||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||
محتویات
|
||
</p>
|
||
<span className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||
</span>
|
||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
|
||
</div>
|
||
|
||
<div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||
اسپرسو آفوگاتو
|
||
</h1>
|
||
<img src={Coffee2} alt="Logo" className="mt-5" />
|
||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||
<span>قیمت</span>
|
||
<span>118.000</span>
|
||
</div>
|
||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||
محتویات sgjksldkk
|
||
</p>
|
||
|
||
<span className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||
</span>
|
||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default CafeManagement;
|
||
|
||
// import React from "react";
|
||
// import Search from "../assets/icons/search.svg";
|
||
// import Arrow from "../assets/icons/arrow.svg";
|
||
// import Vector7 from "../assets/icons/Vector7.svg";
|
||
// import Pic from "../assets/icons/pic.png";
|
||
|
||
// const Header = () => {
|
||
// return (
|
||
// <header className="flex items-center justify-between gap-4 mb-6 mt-90">
|
||
// <h3 className="text-[#402E32] w-[90%] font-bold mt-6">{title}</h3>
|
||
// <div className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
|
||
// <img src={Search} alt="لوگو" />
|
||
// </div>
|
||
// <div className="w-35 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
|
||
// <img src={Pic} className="w-10 h-10 shadow-2xl ml-1" alt="لوگو" />
|
||
// <p className="text-[#402E32] -mt-1.5 pl-1.5">سارا راد</p>
|
||
// <img src={Arrow} alt="لوگو" />
|
||
// </div>
|
||
// <img src={Vector7} alt="لوگو" />
|
||
// <h1>hello!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
|
||
// </header>
|
||
// );
|
||
// };
|
||
|
||
// export default Header;
|