|
|
|
|
@ -1,10 +1,11 @@ |
|
|
|
|
import React, { useEffect, useState } from "react"; |
|
|
|
|
import { book, publicApi, userProduct } from "../../redux/actions"; |
|
|
|
|
import PaymentBox from "./PaymentBox"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
import { Link, useLocation } from "react-router-dom"; |
|
|
|
|
import Product from "../../components/Product"; |
|
|
|
|
import { CgDanger } from "react-icons/cg"; |
|
|
|
|
import { AiOutlinePlus, AiFillDelete } from "react-icons/ai"; |
|
|
|
|
import filterIcon from "../../assets/img/vuesax-linear-filter-tick.svg"; |
|
|
|
|
// import ScrollContainer from 'react-indiana-drag-scroll'
|
|
|
|
|
|
|
|
|
|
import img1 from "../../assets/img/Group 1344.svg"; |
|
|
|
|
@ -20,6 +21,7 @@ import Games from "../dashboard2/Games"; |
|
|
|
|
|
|
|
|
|
import "./index.css"; |
|
|
|
|
import separate from "../../utils/separate"; |
|
|
|
|
import { toast } from "react-toastify"; |
|
|
|
|
|
|
|
|
|
const Services = ({ |
|
|
|
|
isMobile, |
|
|
|
|
@ -63,11 +65,41 @@ const Services = ({ |
|
|
|
|
classHour: "", |
|
|
|
|
classMinute: "", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
//handle payment response------------
|
|
|
|
|
let search = useLocation().search; |
|
|
|
|
let query = Object.fromEntries(new URLSearchParams(search)); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (query.status) { |
|
|
|
|
if (query.status === "OK") { |
|
|
|
|
toast.success("پرداخت با موفقیت انجام شد"); |
|
|
|
|
} else { |
|
|
|
|
toast.error( |
|
|
|
|
`عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} میباشد` |
|
|
|
|
); |
|
|
|
|
// fireAlert({
|
|
|
|
|
// title: "پرداخت ناموفق",
|
|
|
|
|
// text: `عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} میباشد`,
|
|
|
|
|
// confirmButtonText: "توضیح بیشتر",
|
|
|
|
|
// showCancelButton: true,
|
|
|
|
|
// cancelButtonText: "متوجه شدم",
|
|
|
|
|
// showCloseButton: false,
|
|
|
|
|
// customClass: {
|
|
|
|
|
// title: "title-error-7",
|
|
|
|
|
// closeButton: "close-button-7",
|
|
|
|
|
// confirmButton: "confirm-button-7",
|
|
|
|
|
// cancelButton: "cancle-button7",
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
} |
|
|
|
|
setShowPaymentBox(true); |
|
|
|
|
} |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
//----------------------------------------------
|
|
|
|
|
const [sharzhVal, setSharzhVal] = useState(""); |
|
|
|
|
const [selectedProductTypes, setSelectedProductTypes] = useState([7]); |
|
|
|
|
// const onChange = (name, value) => {
|
|
|
|
|
// setFilter({ ...filter, [name]: value });
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
getList(); |
|
|
|
|
@ -120,47 +152,48 @@ const Services = ({ |
|
|
|
|
}; |
|
|
|
|
console.log(gameId); |
|
|
|
|
|
|
|
|
|
//-------------------------------------
|
|
|
|
|
const [fake,setFake]=useState(0); |
|
|
|
|
const [paymentList, setPaymentList] = useState([ |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
amount: null, |
|
|
|
|
status: 4, |
|
|
|
|
type: 1, |
|
|
|
|
}, |
|
|
|
|
]); |
|
|
|
|
const changeType=(e,index)=>{ |
|
|
|
|
let newList = paymentList; |
|
|
|
|
newList[index] = { ...newList[index],type:Number(e.target.value)}; |
|
|
|
|
console.log("g:") |
|
|
|
|
console.log(newList[index]); |
|
|
|
|
setPaymentList(newList); |
|
|
|
|
setFake(fake+1); |
|
|
|
|
} |
|
|
|
|
const [showPaymentBox, setShowPaymentBox] = useState(false); |
|
|
|
|
const addPaymentHandler=()=>{ |
|
|
|
|
let newList = paymentList; |
|
|
|
|
newList.push({ |
|
|
|
|
id: newList.length+1, |
|
|
|
|
amount: null, |
|
|
|
|
status: 4, |
|
|
|
|
type: 1, |
|
|
|
|
//productClickHandler------------------
|
|
|
|
|
const productClickhandler=(product)=>{ |
|
|
|
|
setPopUpContent({ |
|
|
|
|
id: gameId, |
|
|
|
|
title: product?.name, |
|
|
|
|
video: product?.fileId, |
|
|
|
|
teacher: product?.teacherName, |
|
|
|
|
description: product?.description, |
|
|
|
|
price: gameId == 2 ? 0 : product?.price, |
|
|
|
|
classHour: product?.duration, |
|
|
|
|
classMinute: "", |
|
|
|
|
image: "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg", |
|
|
|
|
examCont: [], |
|
|
|
|
type: product?.productType, |
|
|
|
|
}); |
|
|
|
|
setPaymentList(newList); |
|
|
|
|
setFake(fake + 1); |
|
|
|
|
} |
|
|
|
|
const deletePayment=(index)=>{ |
|
|
|
|
let newList = []; |
|
|
|
|
for(let i=0;i<paymentList.length;i++){ |
|
|
|
|
if(i !== index){ |
|
|
|
|
newList.push(paymentList[i]); |
|
|
|
|
} |
|
|
|
|
if (gameId !== 5) { |
|
|
|
|
setPopUp(true); |
|
|
|
|
} |
|
|
|
|
setPaymentList(newList); |
|
|
|
|
setFake(fake + 1); |
|
|
|
|
console.log(gameId); |
|
|
|
|
} |
|
|
|
|
//-==========================================================
|
|
|
|
|
|
|
|
|
|
//AddToCartHandler--------------------
|
|
|
|
|
const AddToCartHandler = (product) => { |
|
|
|
|
if (selectedProductTypes.includes(7)) { |
|
|
|
|
pushSchoolToCart({ |
|
|
|
|
productId: product?.id, |
|
|
|
|
|
|
|
|
|
count: 1, |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
pushToCart({ |
|
|
|
|
productId: product?.id, |
|
|
|
|
|
|
|
|
|
count: 1, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
setTimeout(() => setPopUp(false), 0); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//-------------------------------------
|
|
|
|
|
const [showPaymentBox, setShowPaymentBox] = useState(false); |
|
|
|
|
//-======================== Desktop ===========================================
|
|
|
|
|
if (!isMobile) { |
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
@ -198,62 +231,7 @@ const Services = ({ |
|
|
|
|
{gameId != 6 && ( |
|
|
|
|
<div className="flex mx-6 justify-start"> |
|
|
|
|
<div className="flex items-center "> |
|
|
|
|
<svg |
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
width="40" |
|
|
|
|
height="40" |
|
|
|
|
viewBox="0 0 14.378 14.378" |
|
|
|
|
> |
|
|
|
|
<g |
|
|
|
|
id="vuesax_linear_filter-tick" |
|
|
|
|
data-name="vuesax/linear/filter-tick" |
|
|
|
|
transform="translate(-620 -700)" |
|
|
|
|
> |
|
|
|
|
<g id="filter-tick" transform="translate(620 700)"> |
|
|
|
|
<path |
|
|
|
|
id="Vector" |
|
|
|
|
d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z" |
|
|
|
|
transform="translate(7.267 5.991)" |
|
|
|
|
fill="none" |
|
|
|
|
stroke="#696969" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
strokeWidth="0.6" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
id="Vector-2" |
|
|
|
|
data-name="Vector" |
|
|
|
|
d="M0,.7l.7.7L2.217,0" |
|
|
|
|
transform="translate(9.004 8.136)" |
|
|
|
|
fill="none" |
|
|
|
|
stroke="#696969" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
strokeWidth="0.6" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
id="Vector-3" |
|
|
|
|
data-name="Vector" |
|
|
|
|
d="M0,0H14.378V14.378H0Z" |
|
|
|
|
transform="translate(14.378 14.378) rotate(180)" |
|
|
|
|
fill="none" |
|
|
|
|
opacity="0" |
|
|
|
|
/> |
|
|
|
|
<g id="Group" transform="translate(1.983 1.198)"> |
|
|
|
|
<path |
|
|
|
|
id="Vector-4" |
|
|
|
|
data-name="Vector" |
|
|
|
|
d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z" |
|
|
|
|
fill="none" |
|
|
|
|
stroke="#696969" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
strokeWidth="0.6" |
|
|
|
|
/> |
|
|
|
|
</g> |
|
|
|
|
</g> |
|
|
|
|
</g> |
|
|
|
|
</svg> |
|
|
|
|
<img src={filterIcon} alt="filterIcon" className="w-9" /> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex items-center mx-6 pl-6 border-l-2 border-gray-300"> |
|
|
|
|
{filterCheck.map((filter) => ( |
|
|
|
|
@ -300,42 +278,6 @@ const Services = ({ |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
{/* <div |
|
|
|
|
className={`flex w-32 border-2 p-2 mx-2 px-4 justify-center items-center rounded-md cursor-pointer
|
|
|
|
|
hover:border-red52 hover:text-red52 hover:bg-pinkF5
|
|
|
|
|
${filterCheck == 'Physical' |
|
|
|
|
? "border-red52 text-red52 bg-pinkF5" |
|
|
|
|
: "border-gray200 text-gray-400" |
|
|
|
|
}`}
|
|
|
|
|
onClick={(prevState) => |
|
|
|
|
setFilterCheck('Physical') |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<h3>حضوری</h3> |
|
|
|
|
{filterCheck == 'Physical' && ( |
|
|
|
|
<div className="flex w-full" style={{ direction: "ltr" }}> |
|
|
|
|
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52"> |
|
|
|
|
<svg |
|
|
|
|
width="37" |
|
|
|
|
height="37" |
|
|
|
|
viewBox="0 0 24 24" |
|
|
|
|
fill="none" |
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
> |
|
|
|
|
<path |
|
|
|
|
d="M7.75 12L10.58 14.83L16.25 9.17004" |
|
|
|
|
stroke="#fff" |
|
|
|
|
strokeWidth="1.5" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
/> |
|
|
|
|
</svg> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
)} |
|
|
|
|
</div> */} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="flex items-center mx-4 pl-6"> |
|
|
|
|
@ -376,43 +318,10 @@ const Services = ({ |
|
|
|
|
teacher={product.vodTeacher} |
|
|
|
|
catId={gameId} |
|
|
|
|
onClick={() => { |
|
|
|
|
setPopUpContent({ |
|
|
|
|
id: gameId, |
|
|
|
|
title: product?.name, |
|
|
|
|
video: product?.fileId, |
|
|
|
|
teacher: product?.teacherName, |
|
|
|
|
description: product?.description, |
|
|
|
|
price: gameId == 2 ? 0 : product?.price, |
|
|
|
|
classHour: product?.duration, |
|
|
|
|
classMinute: "", |
|
|
|
|
image: |
|
|
|
|
"https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg", |
|
|
|
|
examCont: [], |
|
|
|
|
type: product?.productType, |
|
|
|
|
}); |
|
|
|
|
if (gameId !== 5) { |
|
|
|
|
setPopUp(true); |
|
|
|
|
} |
|
|
|
|
console.log(gameId); |
|
|
|
|
productClickhandler(product); |
|
|
|
|
}} |
|
|
|
|
btnOnClick={() => { |
|
|
|
|
if (selectedProductTypes.includes(7)) { |
|
|
|
|
pushSchoolToCart({ |
|
|
|
|
productId: product?.id, |
|
|
|
|
|
|
|
|
|
count: 1, |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
pushToCart({ |
|
|
|
|
productId: product?.id, |
|
|
|
|
|
|
|
|
|
count: 1, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// console.log(gameId)
|
|
|
|
|
setTimeout(() => setPopUp(false), 0); |
|
|
|
|
// console.log(popup)
|
|
|
|
|
// console.log(product.id)
|
|
|
|
|
AddToCartHandler(product); |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
@ -466,157 +375,17 @@ const Services = ({ |
|
|
|
|
{/* --------------left-part------------------------------------- */} |
|
|
|
|
{!isMobile && ( |
|
|
|
|
<div className="w-[23.5%] left-0 " style={{ height: "100vh" }}> |
|
|
|
|
<ShoppingCart /> |
|
|
|
|
<ShoppingCart setShowPaymentBox={setShowPaymentBox} /> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{/* --------------payment-box------------------------------------- */} |
|
|
|
|
<div className="w-[93.5vw] h-[93.5vh] bg-black fixed top-[6.5%] left-0 backdrop-blur-md bg-[#0000004D] flex items-center justify-center"> |
|
|
|
|
<div className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2"> |
|
|
|
|
<div className="w-full text-right text-2xl text-[#DF1452]"> |
|
|
|
|
پرداخت و ثبت تراکنشها |
|
|
|
|
</div> |
|
|
|
|
<div className="payment-container w-full mt-6"> |
|
|
|
|
{paymentList.map((item, index) => ( |
|
|
|
|
<div |
|
|
|
|
key={index} |
|
|
|
|
className="w-full mb-2 flex justify-between text-black" |
|
|
|
|
> |
|
|
|
|
<select |
|
|
|
|
className="w-[17%] h-10 rounded outline-0 border text-black px-1 py-0" |
|
|
|
|
onChange={(e) => changeType(e, index)} |
|
|
|
|
> |
|
|
|
|
{/* <option value={null}>نوع پرداخت</option> */} |
|
|
|
|
<option value={1}>پرداخت اینترنتی</option> |
|
|
|
|
<option value={2}>کارت به کارت</option> |
|
|
|
|
{/* <option value={3}>پرداخت با چک</option> |
|
|
|
|
<option value={4}>پرداخت نقدی</option> */} |
|
|
|
|
</select> |
|
|
|
|
{/* ------------ */} |
|
|
|
|
<div className="w-[58%]"> |
|
|
|
|
<div className="w-full h-10 flex box-border rounded overflow-hidden border"> |
|
|
|
|
<div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r"> |
|
|
|
|
مبلغ |
|
|
|
|
</div> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
name="payment-box-amount-input" |
|
|
|
|
id="payment-box-amount-input" |
|
|
|
|
className="w-[70%] h-10 px-1 outline-0 text-center" |
|
|
|
|
/> |
|
|
|
|
<div className="w-[10%] h-full flex items-center justify-center text-sm"> |
|
|
|
|
تومان |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* - */} |
|
|
|
|
{item.type === 2 && ( |
|
|
|
|
<div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2"> |
|
|
|
|
<div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r"> |
|
|
|
|
شماره کارت |
|
|
|
|
</div> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
name="payment-box-amount-input" |
|
|
|
|
id="payment-box-amount-input" |
|
|
|
|
className="w-[80%] h-10 px-1 outline-0 text-center" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{/* - */} |
|
|
|
|
{item.type === 2 && ( |
|
|
|
|
<div className="w-full h-10 flex items-center justify-between mt-1"> |
|
|
|
|
<div className="w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2"> |
|
|
|
|
<div className="w-[40%] bg-[#000] flex items-center justify-center text-white rounded-r text-sm"> |
|
|
|
|
تاریخ پرداخت |
|
|
|
|
</div> |
|
|
|
|
<div className="w-[60%] h-full flex items-center justify-between p-1"> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
className="w-[29%] h-full rounded border text-center text-sm" |
|
|
|
|
/> |
|
|
|
|
<div className="h-full w-[5%] flex items-center justify-center"> |
|
|
|
|
/ |
|
|
|
|
</div> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
className="w-[29%] h-full rounded border text-center text-sm" |
|
|
|
|
/> |
|
|
|
|
<div className="h-full w-[5%] flex items-center justify-center"> |
|
|
|
|
/ |
|
|
|
|
</div> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
className="w-[29%] h-full rounded border text-center text-sm" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* ---- */} |
|
|
|
|
<div className="w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2"> |
|
|
|
|
<div className="w-[40%] bg-[#000] flex items-center justify-center text-white rounded-r text-sm"> |
|
|
|
|
ساعت پرداخت |
|
|
|
|
</div> |
|
|
|
|
<div className="w-[60%] h-full flex justify-between items-center p-1"> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
className="w-[45%] h-full rounded border text-center text-sm" |
|
|
|
|
/> |
|
|
|
|
<div className="h-full w-[5%] flex items-center justify-center"> |
|
|
|
|
: |
|
|
|
|
</div> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
className="w-[45%] h-full rounded border text-center text-sm" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{/* - */} |
|
|
|
|
{item.type === 2 && ( |
|
|
|
|
<div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2"> |
|
|
|
|
<div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r"> |
|
|
|
|
شماره پیگیری |
|
|
|
|
</div> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
name="payment-box-amount-input" |
|
|
|
|
id="payment-box-amount-input" |
|
|
|
|
className="w-[80%] h-10 px-1 outline-0 text-center" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{/* ------------------ */} |
|
|
|
|
<div className="w-[17%] h-10"> |
|
|
|
|
{item.type === 1 && ( |
|
|
|
|
<div className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer"> |
|
|
|
|
پرداخت |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{item.type === 2 && ( |
|
|
|
|
<div className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer"> |
|
|
|
|
ثبت پرداخت |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{/* ------------------ */} |
|
|
|
|
<div className="w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white" style={index===0 ?{pointerEvents:"none",filter:"grayscale(100%)"}:null} onClick={()=>deletePayment(index)}> |
|
|
|
|
<AiFillDelete className="text-xl text-white"/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
{/* <div |
|
|
|
|
className="w-10 h-10 rounded-full mt-4 border mx-auto border-[#DF1452] cursor-pointer flex items-center justify-center" |
|
|
|
|
onClick={addPaymentHandler} |
|
|
|
|
> |
|
|
|
|
<AiOutlinePlus className="text-2xl text-[#DF1452]" /> |
|
|
|
|
</div> */} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{showPaymentBox && ( |
|
|
|
|
<PaymentBox setShowPaymentBox={setShowPaymentBox} query={query} /> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
// Mobile Version
|
|
|
|
|
//=========================== Mobile Version======================================
|
|
|
|
|
else { |
|
|
|
|
return ( |
|
|
|
|
<div className="flex flex-col items-center mt-16 mb-40 rtl"> |
|
|
|
|
|
