ignum/components/pages/home/ourService.tsx

import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { ChevronRight } from "lucide-react";
import Image from "next/image";

export function OurService() {
  return (
    <div className="bg-[#1e1d1c] py-10">
      <div className="max-w-300 w-full mx-auto">
        {/* header */}
        <div className="space-y-4">
          <div className="flex items-center w-full justify-center gap-2 text-white font-bold">
            <DotAnimatsiya />
            OUR SERVICES
          </div>
          <div className="text-5xl tracking-[5px] font-bold bg-linear-to-br text-center w-full from-white via-white to-black text-transparent bg-clip-text">
            FIREFIGHTER RESPONSIBILITIES
          </div>
          <div className="text-center w-full text-gray-400 max-w-150 mx-auto">
            Aliquam lorem ante dapibus in viverra quis feugiat a tellus
            phasellus viverra nulla ut metus varius laoreet quisque rutrum.
          </div>
        </div>

        {/* cards */}
        <div className="max-w-250 w-full mx-auto flex items-center gap-5 my-10">
          <div className="relative space-y-4 py-6 px-8 rounded-xl w-[55%] bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
            <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
              Operation Force
            </p>
            <p className="text-gray-400 max-w-80 w-full">
              Aliquam lorem ante dapibus in viverra feugiat phasellus.
            </p>
            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
              LEARN MORE <ChevronRight size={20} />
            </button>
            <Image
              src="/images/home/gruop.png"
              alt="images"
              width={200}
              height={100}
              className="object-contain absolute bottom-0 right-2 z-50"
            />
          </div>
          <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-[45%] bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
            <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
              Operation Force
            </p>
            <p className="text-gray-400 max-w-70 w-full">
              Aliquam lorem ante dapibus in viverra feugiat phasellus.
            </p>
            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
              LEARN MORE <ChevronRight size={20} />
            </button>
            <Image
              src="/images/home/redShlang.png"
              alt="images"
              width={200}
              height={100}
              className="object-contain absolute -bottom-4 -right-4 z-50"
            />
          </div>
        </div>

        <div className="max-w-250 flex items-start justify-between gap-5 mt-5 w-full mx-auto">
          <div className="relative rounded-xl w-[40%] bg-[linear-gradient(to_bottom_right,#d2610a,#000000,#000000)]">
            <Image
              src="/images/home/ambulance.png"
              alt="images"
              width={300}
              height={200}
              className="object-contain mt-5"
            />
            <div className="space-y-4 py-6 px-8">
              <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                Operation Force
              </p>
              <p className="text-gray-400 max-w-80 w-full">
                Aliquam lorem ante dapibus in viverra feugiat phasellus.
              </p>
              <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
                LEARN MORE <ChevronRight size={20} />
              </button>
            </div>
          </div>
          <div className="w-[60%]">
            <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
              <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                Operation Force
              </p>
              <p className="text-gray-400 max-w-70 w-full">
                Aliquam lorem ante dapibus in viverra feugiat phasellus.
              </p>
              <button className="mt-38 text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
                LEARN MORE <ChevronRight size={20} />
              </button>
              <Image
                src="/images/home/balon.png"
                alt="images"
                width={200}
                height={100}
                className="object-contain absolute -bottom-40 -right-4 z-50"
              />
            </div>
            <div className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#000000,#d2610a)] flex items-center justify-between">
              <h2 className="text-3xl font-semibold font-armanai text-white">
                View more service
              </h2>
              <button className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
                GET STARTED
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}