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

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>

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>
+  );
+}