feat: add HomeStorySection component and ShowMoreIcon SVG icon

- Implemented HomeStorySection component to display project statistics and images.
- Added ShowMoreIcon component for UI enhancement.

src/components/pages/home/HomeStorySection.tsx

@@ -0,0 +1,73 @@
+import images from '@/assets/images/images';
+import SectionTitle from '@/components/layout/sectionTitle';
+import { t } from '@/locales/translates';
+import Image from 'next/image';
+
+export default function HomeStorySection({
+  className = '',
+}: {
+  className?: string;
+}) {
+  const statisticsData = [
+    {
+      title: t('com_home_story_projects_count') as string,
+      count: '10K',
+    },
+    {
+      title: t('com_home_story_customer_count') as string,
+      count: '500',
+    },
+    {
+      title: t('com_home_story_experience') as string,
+      count: '25',
+    },
+  ];
+
+  return (
+    <div className={`container mx-auto flex flex-col gap-12 ${className}`}>
+      <div className="grid grid-cols-2 gap-10">
+        <SectionTitle
+          title={t('com_home_story_title') as string}
+          description={t('com_home_story_slogan') as string}
+          description_bold={t('com_home_story_slogan_bold') as string}
+        />
+        <div className="grid grid-cols-2 gap-3">
+          {[images.homeBanner, images.aboutImg_1].map((e, i) => (
+            <div
+              className="aspect-video w-full overflow-hidden rounded-3xl"
+              key={i}
+            >
+              <Image src={e} alt="" className="w-full object-cover" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-10">
+        <div className="aspect-video w-full overflow-hidden rounded-3xl">
+          <Image
+            src={images.whatWeDoImage}
+            alt=""
+            className="h-full w-full object-cover"
+          />
+        </div>
+        <div className="flex flex-col py-8">
+          <p className="text-base font-light text-gray-500">
+            {t('com_home_story_description') as string}
+          </p>
+          <hr className="my-10 text-gray-100/50" />
+          <div className="grid grid-cols-3 justify-between gap-1">
+            {statisticsData.map((stat, index) => (
+              <div key={index} className="flex flex-col gap-1">
+                <h3 className="text-primary text-2xl font-bold">
+                  +{stat.count}
+                </h3>
+                <p className="text-sm text-gray-500">{stat.title}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/pages/home/Products.tsx

@@ -31,7 +31,7 @@ export default function HomePageProducts() {
         <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}
+            title={t('pages_products_title') as string}
             description={t('com_home_products_title') as string}
             reverseColor
           />