feat: add AboutTopInfo and HomePageProducts components; update translations and styles

src/app/page.tsx

@@ -1,6 +1,6 @@
-// ... existing imports ...
 import Header from '@/components/layout/header';
-import { t } from '@/locales/translates';
+import AboutTopInfo from '@/components/pages/about/TopInfo';
+import HomePageProducts from '@/components/pages/home/Products';
 
 async function getData() {
   await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -13,6 +13,8 @@ export default async function Home() {
   return (
     <main className="flex flex-col items-center justify-between">
       <Header />
+      <AboutTopInfo />
+      <HomePageProducts />
     </main>
-  )
+  );
 }

src/components/layout/sectionTitle/index.tsx

@@ -4,13 +4,16 @@ export default function SectionTitle({
   title,
   description,
   description_bold,
+  reverseColor,
 }: ISectionTitleProps) {
   return (
-    <div className="flex flex-col gap-4">
+    <div
-      <div className="flex items-center gap-2">
+      className={`flex flex-col gap-4 ${reverseColor ? 'text-white' : 'text-gray-500'}`}
-        <h3 className="text-sm tracking-[0.175rem] text-gray-500">{title}</h3>
+    >
+      <div className={`flex items-center gap-2`}>
+        <h3 className="text-sm tracking-[0.175rem]">{title}</h3>
       </div>
-      <h2 className="text-[3.25rem] font-extralight text-gray-500">
+      <h2 className="text-[3.25rem] font-extralight">
         {description}
         {description_bold && (
           <strong className="block font-bold">{description_bold}</strong>

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

@@ -2,4 +2,5 @@ export interface ISectionTitleProps {
   title: string;
   description: string;
   description_bold?: string;
+  reverseColor?: boolean;
 }

src/components/pages/about/TopInfo.tsx

@@ -23,7 +23,7 @@ export default function AboutTopInfo() {
             <div className="h-full overflow-hidden rounded-3xl">
               <img
                 src={images.aboutImg_1.src}
-                className="w-full object-cover"
+                className="h-full w-full object-cover"
               />
             </div>
             <div className="flex items-center justify-center gap-10 pb-5">
@@ -37,7 +37,7 @@ export default function AboutTopInfo() {
             <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"
+                className="h-full w-full object-cover"
               />
             </div>
           </div>

src/components/pages/home/Products.tsx

@@ -0,0 +1,63 @@
+import images from '@/assets/images/images';
+import SectionTitle from '@/components/layout/sectionTitle';
+import { t } from '@/locales/translates';
+
+export default function HomePageProducts() {
+  const productCategories = [
+    {
+      title: 'Brick Categories',
+      count: 30,
+    },
+    {
+      title: 'Brick Categories',
+      count: 30,
+    },
+    {
+      title: 'Brick Categories',
+      count: 30,
+    },
+    {
+      title: 'Brick Categories',
+      count: 30,
+    },
+  ];
+
+  return (
+    <div className="w-full">
+      <div
+        className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-48`}
+        style={{ backgroundImage: `url(${images.homeBanner.src})` }}
+      >
+        <div className="absolute inset-0 z-10 bg-black opacity-50" />
+        <div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
+          <SectionTitle
+            title={t('page_products_title') as string}
+            description={t('com_home_products_title') as string}
+            reverseColor
+          />
+          <h4 className="pt-10 text-base font-extralight tracking-normal text-white">
+            {t('com_home_products_description') as string}
+          </h4>
+        </div>
+      </div>
+
+      <div className="relative top-[-100px] z-20 container mx-auto w-full">
+        <div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4">
+          {productCategories.map((category, index) => (
+            <div
+              key={index}
+              className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`}
+            >
+              <h3 className="text-xl font-bold text-gray-500">
+                {category.title}
+              </h3>
+              <p className="text-lg font-light text-gray-400">
+                {`Includes ${category.count} Products`}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/locales/en.ts

@@ -29,6 +29,12 @@ const en = {
   com_about_info_achievements_2: 'Advanced Automation',
   com_about_info_achievements_3: 'Efficient Production Processes',
   com_about_info_achievements_4: 'Reliable Delivery Services',
+
+  com_home_products_title: 'The Qualified bricks for Your Projects',
+  com_home_products_description:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
+
+  page_products_title: 'Products',
 };
 
 export default en;