299 lines
11 KiB
React
299 lines
11 KiB
React
|
"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;
|