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/uikit/button/button.d.ts

@@ -1,14 +1,17 @@
-export interface IBaseButtonProps  extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { IconName } from '../icons';
+
+export interface IBaseButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   loading?: boolean;
   disabled?: boolean;
-  className?: string
+  className?: string;
 }
 
-export interface ITextButtonProps extends IBaseButtonProps{
-  endIcon?: ReactNode;
+export interface ITextButtonProps extends IBaseButtonProps {
+  endIcon?: IconName;
+}
+export interface IIconButtonProps extends IBaseButtonProps {
+  color?: 'primary' | 'secondary';
+  size?: 'small' | 'medium' | 'large';
 }
-export interface IIconButtonProps extends IBaseButtonProps{
-    color?: 'primary' | 'secondary'
-    size?: 'small' | 'medium' | 'large'
-}

src/components/uikit/button/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import { IIconButtonProps, ITextButtonProps } from './button';
+import { Icon } from '../icons';
 
 const Button: React.FC<ITextButtonProps> = ({
   children,
@@ -12,7 +13,7 @@ const Button: React.FC<ITextButtonProps> = ({
 }) => {
   return (
     <button
-      className={`group relative flex h-12 cursor-pointer rounded-[0.5625rem] bg-[#FA003F] p-px ${className || ''}`}
+      className={`group bg-primary relative flex h-12 cursor-pointer rounded-[0.5625rem] p-[0.125rem] ${className || ''}`}
       disabled={disabled || loading}
       {...props}
     >
@@ -46,7 +47,9 @@ const Button: React.FC<ITextButtonProps> = ({
       </div>
 
       {endIcon && !loading ? (
-        <span className="flex items-center justify-center p-3">{endIcon}</span>
+        <span className="flex items-center justify-center p-3">
+          <Icon name={endIcon} className="text-white" />
+        </span>
       ) : null}
     </button>
   );

src/components/uikit/icons/index.tsx

@@ -5,6 +5,7 @@ import { SettingIcon } from './settingIcon';
 import { AchievementIcon } from './achievementIcon';
 import { PhoneIcon } from './phoneIcon';
 import { InstagramIcon } from './instagramIcon';
+import ShowMoreIcon from './showMoreIcon';
 
 export const icons = {
   close: CloseIcon,
@@ -13,6 +14,7 @@ export const icons = {
   achievement: AchievementIcon,
   phone: PhoneIcon,
   instagram: InstagramIcon,
+  showMore: ShowMoreIcon,
 };
 
 export type IconName = keyof typeof icons;

src/components/uikit/icons/showMoreIcon.tsx

@@ -0,0 +1,21 @@
+export default function ShowMoreIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width="25"
+      height="26"
+      viewBox="0 0 25 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.50488 19.6178C7.20488 19.6178 7.00488 19.5121 6.80488 19.3009C6.40488 18.8785 6.40488 18.2448 6.80488 17.8224L16.8049 7.26141C17.2049 6.83897 17.8049 6.83897 18.2049 7.26141C18.6049 7.68385 18.6049 8.31751 18.2049 8.73995L8.20488 19.3009C8.00488 19.5121 7.80488 19.6178 7.50488 19.6178Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.5049 18.5617C16.9049 18.5617 16.5049 18.1392 16.5049 17.5056V9.05678H8.50488C7.90488 9.05678 7.50488 8.63434 7.50488 8.00068C7.50488 7.36702 7.90488 6.94458 8.50488 6.94458H17.5049C18.1049 6.94458 18.5049 7.36702 18.5049 8.00068V17.5056C18.5049 18.1392 18.1049 18.5617 17.5049 18.5617Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}