299 lines
11 KiB
JavaScript
299 lines
11 KiB
JavaScript
"use client";
|
||
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
|
||
import Image from "next/image";
|
||
import React, { useEffect, useState } from "react";
|
||
import PersianNumber from "@plug/PersianNumber";
|
||
import kam from "@img/kam.png";
|
||
import nad from "@img/nad.PNG";
|
||
import som from "@img/som.PNG";
|
||
import shim from "@img/sam.png";
|
||
import nasr from "@img/nasr.PNG";
|
||
import sogh from "@img/sogh.PNG";
|
||
import logo from "@img/logo.png";
|
||
import Footer from "@comp/Footer/page";
|
||
import Link from "next/link";
|
||
|
||
const LawyerPage = ({ data }) => {
|
||
const [lawyerImg, setlawyerImg] = useState("");
|
||
const selectLawyerImg = (id) => {
|
||
switch (id) {
|
||
case "477fed8d-5acd-4279-8bf7-9b1e83c6b4db":
|
||
setlawyerImg("kam");
|
||
break;
|
||
|
||
case "ef6ab0ce-d815-4b19-934e-b22dbe0cd169":
|
||
setlawyerImg("nad");
|
||
break;
|
||
|
||
case "2026e6ee-f414-4e0f-b25f-29664b13dd59":
|
||
setlawyerImg("som");
|
||
break;
|
||
|
||
case "8ae19218-2d9d-42a6-b7b4-8db08ff86ce9":
|
||
setlawyerImg("shim");
|
||
break;
|
||
|
||
case "0ae064c7-4f54-4656-b30e-7ef0b799c023":
|
||
setlawyerImg("nasr");
|
||
break;
|
||
case "f8db20f6-0741-49dd-9eb2-22599bb4eb72":
|
||
setlawyerImg("sogh");
|
||
break;
|
||
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
useEffect(() => {
|
||
selectLawyerImg(data.id);
|
||
}, []);
|
||
// console.log("ssssssssssssssssssssssssssalam", data.expertise.length);
|
||
return (
|
||
<div>
|
||
{" "}
|
||
<div className="bg-contact-us pb-10 ">
|
||
<div className=" pb-20">
|
||
<NavbarTransparent />
|
||
|
||
<div className="relative">
|
||
<svg
|
||
class="absolute hidden lg:block ltr:right-80 ltr:left-auto left-80 top-20 ltr:mr-6 ltr:ml-0 ml-6 z-10 opacity-10 mt-[110px]"
|
||
width="38"
|
||
height="51"
|
||
viewBox="0 0 38 50"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M36.7412 1.94352L17.4742 6.5023L22.033 25.7693L2.76602 30.3281L7.3248 49.5951"
|
||
stroke="white"
|
||
stroke-width="5"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
|
||
<div className="xs:mt-[60px] lg:mt-[100px] xs:p-0 lg:px-20 lg:flex rtl lg:justify-center ">
|
||
<div className="xs:flex lg:block xs:justify-center ">
|
||
<div className="lg:w-[150px] xs:w-[200px] lg:h-[150px] xs:h-200px] bg-gray-200 rounded-2xl overflow-hidden ">
|
||
<div>
|
||
<Image
|
||
src={
|
||
lawyerImg == "kam"
|
||
? kam
|
||
: lawyerImg == "nad"
|
||
? nad
|
||
: lawyerImg == "shim"
|
||
? shim
|
||
: lawyerImg == "som"
|
||
? som
|
||
: lawyerImg == "sogh"
|
||
? sogh
|
||
: lawyerImg == "nasr"
|
||
? nasr
|
||
: logo
|
||
}
|
||
alt="بهترین وکیل پایه یک دادگستری تهران"
|
||
className="object-cover lg:w-[150px] xs:w-[200px] lg:h-[150px] xs:h-[200px] "
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="px-5 lg:w-7/12 xs:mt-5 lg:mt-0 ">
|
||
<h1 className="text-white font-bold text-right xs:text-[20px] lg:text-[40px]">
|
||
{data.name}
|
||
</h1>
|
||
<p className="mb-0 text-right text-white">{data.description}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center z-10 sticky top-10">
|
||
<div className="w-fit flex bg-white shadow-xl rounded-2xl absolute xs:p-1 lg:p-3 xs:top-[-28px] lg:top-[-40px] rtl">
|
||
<div className="bg-secondary-900 lg:p-4 xs:p-3 rounded-2xl ">
|
||
<p className="mb-0 font-medium xs:text-[12px] lg:text-base">
|
||
تخصص ها
|
||
</p>
|
||
</div>
|
||
<div className=" lg:p-4 xs:p-3 rounded-2xl ">
|
||
<p className="mb-0 text-gray-500 xs:text-[12px] lg:text-base">
|
||
خدمات وکیل
|
||
</p>
|
||
</div>
|
||
<div className=" lg:p-4 xs:p-3 rounded-2xl ">
|
||
<p className="mb-0 text-gray-500 xs:text-[12px] lg:text-base">
|
||
رزرو مشاوره
|
||
</p>
|
||
</div>
|
||
<div className=" lg:p-4 xs:p-3 rounded-2xl ">
|
||
<p className="mb-0 text-gray-500 xs:text-[12px] lg:text-base">
|
||
اطلاعات بیشتر
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
|
||
{data?.expertise.length > 0 && (
|
||
<div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl xs:mt-10 lg:mt-20">
|
||
<div className=" p-2 flex">
|
||
<div className="flex flex-col justify-center items-center mt-5 absolute ">
|
||
<div className="w-5 h-20 rounded-full bg-secondary-900" />
|
||
</div>
|
||
|
||
<div className="mx-4 ">
|
||
<div className="p-4 mt-2">
|
||
<p className="mb-0 text-gray-900 font-extralight text-sm ">
|
||
چرا حامیان عدالت
|
||
</p>
|
||
<h2 className="font-extrabold xs:text-xl lg:text-3xl text-gray-900 mt-2">
|
||
تخصص های {data.name}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="lg:pr-5 overflow-x-auto flex whitespace-nowrap hide-scrollBa">
|
||
{data?.expertise.map((e, index) => (
|
||
<h3
|
||
className="bg-gray-200 p-2 mx-2 rounded-2xl xs:text-sm lg:text-base"
|
||
key={index}
|
||
>
|
||
{" "}
|
||
{e}{" "}
|
||
</h3>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{data?.services_rendered.length > 0 && (
|
||
<div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl xs:mt-10 lg:mt-20">
|
||
<div className=" p-2 flex">
|
||
<div className="flex flex-col justify-center items-center mt-5 absolute ">
|
||
<div className="w-5 h-20 rounded-full bg-secondary-900" />
|
||
</div>
|
||
|
||
<div className="mx-4 ">
|
||
<div className="p-4 mt-2">
|
||
<p className="mb-0 text-gray-900 font-extralight text-sm ">
|
||
چرا حامیان عدالت
|
||
</p>
|
||
<h2 className="font-extrabold xs:text-xl lg:text-3xl text-gray-900 mt-2">
|
||
خدمات ارائه شده وکیل{" "}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{data.services_rendered.map((e, index) => (
|
||
<div className="pr-5 flex" key={index}>
|
||
<h3 className="font-medium mt-2 text-lg text-gray-600 ">
|
||
{e}
|
||
</h3>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl xs:mt-10 lg:mt-20">
|
||
<div className=" p-2 flex">
|
||
<div className="flex flex-col justify-center items-center mt-5 absolute ">
|
||
<div className="w-5 h-20 rounded-full bg-secondary-900" />
|
||
</div>
|
||
|
||
<div className="mx-4 ">
|
||
<div className="p-4 mt-2">
|
||
<p className="mb-0 text-gray-900 font-extralight text-sm ">
|
||
چرا حامیان عدالت
|
||
</p>
|
||
<h2 className="font-extrabold xs:text-xl lg:text-3xl text-gray-900 mt-2">
|
||
رزرو زمان مشاوره{" "}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="overflow-x-auto flex whitespace-nowrap hide-scrollBa ">
|
||
<div className="bg-white rounded-2xl p-5 ">
|
||
<h4 className=" text-right font-medium">
|
||
رزرو نوبت مشاوره غیر حضوری
|
||
</h4>
|
||
|
||
<p className="mb-0 text-sm mt-5 text-center">
|
||
نیم ساعت : تماس بگیرید
|
||
</p>
|
||
|
||
<p className="mb-0 text-sm mt-5 text-center">
|
||
یک ساعت : تماس بگیرید
|
||
</p>
|
||
|
||
<div>
|
||
<Link href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}>
|
||
<button className="btn btn-outline-primary w-full mt-5 rounded-full py-2 text-sm">
|
||
{" "}
|
||
رزرو مشاوره
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-2xl p-5 w-fit mx-4">
|
||
<h4 className=" text-right font-medium">
|
||
رزرو نوبت مشاوره حضوری
|
||
</h4>
|
||
|
||
<p className="mb-0 text-sm mt-5 text-center">
|
||
نیم ساعت : تماس بگیرید
|
||
</p>
|
||
|
||
<p className="mb-0 text-sm mt-5 text-center">
|
||
یک ساعت : تماس بگیرید
|
||
</p>
|
||
|
||
<div>
|
||
<Link href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}>
|
||
<button className="btn btn-outline-primary w-full mt-5 rounded-full py-2 text-sm">
|
||
{" "}
|
||
رزرو مشاوره
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl xs:mt-10 lg:mt-20">
|
||
<div className=" p-2 flex">
|
||
<div className="flex flex-col justify-center items-center mt-5 absolute ">
|
||
<div className="w-5 h-20 rounded-full bg-secondary-900" />
|
||
</div>
|
||
|
||
<div className="mx-4 ">
|
||
<div className="p-4 mt-2">
|
||
<p className="mb-0 text-gray-900 font-extralight text-sm ">
|
||
چرا حامیان عدالت
|
||
</p>
|
||
<h2 className="font-extrabold xs:text-xl lg:text-3xl text-gray-900 mt-2">
|
||
سایر اطلاعات{" "}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-2 overflow-x-auto flex whitespace-nowrap hide-scrollBa ">
|
||
{data?.other_info.map((e, index) => (
|
||
<div className="flex mx-2" key={index}>
|
||
<div>
|
||
<div className="bg-secondary-900 h-4 w-1 rounded-full mt-2"></div>
|
||
</div>
|
||
<p className="mb-0 text-right p-2 ">{e} </p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LawyerPage;
|