diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2506dfc..6bbb4ab 100644
--- a/src/app/page.tsx
+++ b/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>
-  )
+  );
 }
diff --git a/src/components/layout/sectionTitle/index.tsx b/src/components/layout/sectionTitle/index.tsx
index ec31a5e..dc424f4 100644
--- a/src/components/layout/sectionTitle/index.tsx
+++ b/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 className="flex items-center gap-2">
-        <h3 className="text-sm tracking-[0.175rem] text-gray-500">{title}</h3>
+    <div
+      className={`flex flex-col gap-4 ${reverseColor ? 'text-white' : 'text-gray-500'}`}
+    >
+      <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>
diff --git a/src/components/layout/sectionTitle/sectionTitle.d.ts b/src/components/layout/sectionTitle/sectionTitle.d.ts
index 278436b..2a6d00e 100644
--- a/src/components/layout/sectionTitle/sectionTitle.d.ts
+++ b/src/components/layout/sectionTitle/sectionTitle.d.ts
@@ -2,4 +2,5 @@ export interface ISectionTitleProps {
   title: string;
   description: string;
   description_bold?: string;
+  reverseColor?: boolean;
 }
diff --git a/src/components/pages/about/TopInfo.tsx b/src/components/pages/about/TopInfo.tsx
index 74f44f7..9625a0f 100644
--- a/src/components/pages/about/TopInfo.tsx
+++ b/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>
diff --git a/src/components/pages/home/Products.tsx b/src/components/pages/home/Products.tsx
new file mode 100644
index 0000000..64d2dd0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 3e3689d..58e315a 100644
--- a/src/locales/en.ts
+++ b/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;