import Image from "next/image";
import Link from "next/link";
import React from "react";
import vec2 from "@img/vector2.png";
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 {
  Mirzaii,
  MohammadAbadi,
  NadAli,
  Samadzadegan,
  Soori,
  Tafi,
} from "@comp/LawyerCard/page";

const Lawyers = () => {
  return (
    <section className="xs:my-20 lg:mt-20">
      <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
        <div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl mt-10">
          <div className="flex">
            <div className="flex flex-col justify-center items-center mt-5 absolute  ">
              <div className="w-5 h-20 rounded-full bg-primary-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-3xl lg:text-3xl text-gray-900   mt-2">
                  بازوان پر توان ما{" "}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <div className="grid xs:grid-cold-1 md:grid-cols-4 gap-10 rtl xs:mt-[50px] lg:mt-20 pt-10 xs:px-5">
          <NadAli />
          <Tafi />
          <Samadzadegan />
          <Soori />
          <MohammadAbadi />
          <Mirzaii />
        </div>
      </div>
    </section>
  );
};

export default Lawyers;
