pasargad/src/components/pages/about/TopInfo.tsx

'use client';

import routeFactory from '@/assets/constants/routeFactory';
import images from '@/assets/images/images';
import AchievementTextBox from '@/components/layout/achievementTextBox';
import SectionTitle from '@/components/layout/sectionTitle';
import Button from '@/components/uikit/button';
import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';

export default function AboutTopInfo() {
  const t = useTranslations();
  const params = useParams();
  const locale = params.locale as string;
  const routes = routeFactory(t, locale);

  const topInfoAchievementTitles = [
    t('com_about_info_achievements_1'),
    t('com_about_info_achievements_2'),
    t('com_about_info_achievements_3'),
    t('com_about_info_achievements_4'),
  ];

  return (
    <div className="w-white relative w-full py-28">
      <div className="absolute inset-0 z-10 flex items-end justify-start">
        <img src={images.factoryVector.src} className="max-h-56 w-auto" />
      </div>
      <div className="relative z-20 container mx-auto grid grid-cols-2 items-stretch gap-10">
        <div className="relative h-full">
          <div className="grid h-44 grid-cols-2 gap-4 overflow-hidden">
            <div className="h-full overflow-hidden rounded-3xl">
              <img
                src={images.aboutImg_1.src}
                className="h-full w-full object-cover"
              />
            </div>
            <div className="flex items-center justify-center gap-5 pb-5">
              <span className="text-primary text-5xl">+25</span>
              <span className="text-base text-gray-300">
                {t('com_about_info_years_experience')}
              </span>
            </div>
          </div>
          <div className="absolute right-0 bottom-0 h-full w-[70%] pt-32">
            <div className="h-full w-full overflow-hidden rounded-3xl border-[12px] border-white">
              <img
                src={images.aboutImg_2.src}
                className="h-full w-full object-cover"
              />
            </div>
          </div>
        </div>
        <div className="flex flex-col pt-16 pb-20">
          <SectionTitle
            title={t('pages_about_title')}
            description={t('com_about_info_title')}
            description_bold={t('com_about_info_title_bold')}
          />

          <div className="mt-5">
            <p className="text-base font-light text-gray-300">
              {t('com_about_info_description')}
            </p>
          </div>
          <div className="mt-10 flex flex-col gap-4">
            {topInfoAchievementTitles.map((title, index) => (
              <AchievementTextBox key={index} title={title} />
            ))}
          </div>
          <div className="mt-10">
            <Button endIcon="showMore" link={routes.contact.route()}>
              {t('pages_contact_title')}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}