import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import React from "react";


const AboutUs = () => {
  const t = useTranslations("HomePage.AboutUs")
  const locale = useLocale()
  return (
    <>
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" className="absolute left-0 top-0 bottom-0 -z-10 right-0">
        <pattern id="diagonalLines" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="10" stroke="#e2e8f0" stroke-width="1" />
        </pattern>
        <rect width="100%" height="100%" fill="url(#diagonalLines)" />
      </svg>
      <div className="min-h-[calc(100vh-108px)] flex flex-col items-center justify-center relative  mt-8 -z-10 text-center ">
        <div className="max-w-screen-xl mx-auto">



          <div className="xs:px-3 md:px-10 md:container md:mx-auto ">
            <div className="gap-5 items-center">

              <div className="relative mb-10 col-span-2">

                <h2 className={
                  `text-5xl font-bold relative z-10`
                }>
                  {t("brandName")}

                </h2>

                <p className={`mb-0 text-xl mt-5 text-center leading-7 px-5`}>
                  <span className="text-primary-800 font-semibold text-2xl">
                    {t("description.0")}
                  </span>
                  <br />
                  <br />
                  <p className="text-justify leading-8">
                    {t("description.1")} <br />
                  </p>
                  <br />
                  <p className="text-justify leading-8">

                    {t("description.2")}
                  </p>
                </p>
                {/* 
            <div className="flex gap-2 mx-auto mt-5 w-full justify-center lg:justify-end">
            <button className="btn btn-primary text-base py-3 px-10 ">
            {" "}
            Export
            </button>
            <button className="btn btn-primary text-base p-3 px-10">
            {" "}
            Industrial
            </button>
            </div> */}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default AboutUs;
