feat: add AchievementTextBox and InnerPageBanner components with respective types

- Created AchievementTextBox component for displaying achievement titles.
- Implemented InnerPageBanner component for inner page banners with image and title.
- Added SectionTitle component for displaying section titles and descriptions.
- Updated AboutTopInfo component to utilize new AchievementTextBox and SectionTitle components.
- Defined TypeScript interfaces for props in each new component.

src/components/layout/achievementTextBox/achievementTextBox.d.ts

@@ -0,0 +1,3 @@
+export interface IAachievementTextBoxProps {
+  title: string;
+}

src/components/layout/achievementTextBox/index.tsx

@@ -0,0 +1,11 @@
+import { IAachievementTextBoxProps } from './achievementTextBox';
+
+export default function AchievementTextBox({
+  title,
+}: IAachievementTextBoxProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-base text-gray-500">{title}</span>
+    </div>
+  );
+}

src/components/layout/innerPages/banner/banner.d.ts

@@ -0,0 +1,4 @@
+export interface IInnerPageBannerProps {
+  imageSrc: string;
+  title: string;
+}

src/components/layout/innerPages/banner/index.tsx

@@ -0,0 +1,22 @@
+import images from '@/assets/images/images';
+import Navbar from '../../navbar';
+import Button from '@/components/uikit/button';
+import { IInnerPageBannerProps } from './banner';
+
+export default function InnerPageBanner({
+  title,
+  imageSrc,
+}: IInnerPageBannerProps) {
+  return (
+    <header
+      className="relative h-[50%] w-full bg-cover bg-right bg-no-repeat text-white"
+      style={{ backgroundImage: `url(${imageSrc})` }}
+    >
+      <div className="absolute inset-0 z-0 bg-black opacity-50" />
+      <Navbar />
+      <div className="relative z-10 container mx-auto flex flex-col bg-cover bg-right-top py-20 text-white">
+        <h2 className="text-[4rem] text-white">{title}</h2>
+      </div>
+    </header>
+  );
+}

src/components/layout/sectionTitle/index.tsx

@@ -0,0 +1,21 @@
+import { ISectionTitleProps } from './sectionTitle';
+
+export default function SectionTitle({
+  title,
+  description,
+  description_bold,
+}: ISectionTitleProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <h3 className="text-sm tracking-[0.175rem] text-gray-500">{title}</h3>
+      </div>
+      <h2 className="text-[3.25rem] font-extralight text-gray-500">
+        {description}
+        {description_bold && (
+          <strong className="block font-bold">{description_bold}</strong>
+        )}
+      </h2>
+    </div>
+  );
+}

src/components/layout/sectionTitle/sectionTitle.d.ts

@@ -0,0 +1,5 @@
+export interface ISectionTitleProps {
+  title: string;
+  description: string;
+  description_bold?: string;
+}

src/components/pages/about/TopInfo.tsx

@@ -0,0 +1,69 @@
+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 { t } from '@/locales/translates';
+
+export default function AboutTopInfo() {
+  const topInfoAchievementTitles = [
+    t('com_about_info_achievements_1') as string,
+    t('com_about_info_achievements_2') as string,
+    t('com_about_info_achievements_3') as string,
+    t('com_about_info_achievements_4') as string,
+  ];
+
+  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="w-full object-cover"
+              />
+            </div>
+            <div className="flex items-center justify-center gap-10 pb-5">
+              <span className="text-primary text-5xl">25 +</span>
+              <span className="text-base text-gray-300">
+                {t('com_about_info_years_experience') as string}
+              </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="w-full object-cover"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col pt-16 pb-20">
+          <SectionTitle
+            title={t('pages_about_title') as string}
+            description={t('com_about_info_title') as string}
+            description_bold={t('com_about_info_title_bold') as string}
+          />
+
+          <div className="mt-5">
+            <p className="text-base font-light text-gray-300">
+              {t('com_about_info_description') as string}
+            </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>{t('pages_contact_title') as string}</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}