update home page

components/shared/IconBox.tsx

@@ -1,38 +1,53 @@
 import { ReactNode } from "react";
 
 interface IconBoxProps {
-  icon: ReactNode;
+  icon?: ReactNode;
   title: string;
   description: string;
   hasBorder?: boolean;
+  theme?: "dark" | "light";
 }
 
-export function IconBox({ icon, title, description, hasBorder = true }: IconBoxProps) {
+export function IconBox({ icon, title, description, hasBorder = true, theme = "dark" }: IconBoxProps) {
+  const isLight = theme === "light";
+  
   return (
-    <div className="flex flex-col items-start gap-[20px] sm:flex-row sm:gap-[40px]">
-      <div className="flex h-[88px] w-[88px] shrink-0 items-center justify-center">
-        {icon}
-      </div>
-      
-      <div
-        className={`flex-1 pb-[30px] pt-[5px] ${
-          hasBorder ? "border-b border-[#3F3F3F]" : ""
-        }`}
-      >
-        <h5
-          className="mb-[15px] text-white"
-          style={{
-            fontFamily: "var(--font-manrope)",
-            fontSize: "25px",
-            lineHeight: 1.4,
-            fontWeight: 500,
-          }}
+    <div className="aiero-icon-box-widget w-full">
+      <div className="icon-box-item flex flex-col items-start gap-[20px] sm:flex-row sm:gap-[40px]">
+        {icon && (
+          <div className="icon-container background-type-none flex h-[88px] w-[88px] shrink-0 items-center justify-center">
+            <span className="icon block h-full w-full">
+              {icon}
+            </span>
+          </div>
+        )}
+        
+        <div
+          className={`content-container flex-1 pb-[30px] pt-[5px] ${
+            hasBorder 
+              ? isLight 
+                ? "border-b border-gray-200" 
+                : "border-b border-aiero-card-border" 
+              : ""
+          }`}
         >
-          {title}
-        </h5>
-        <p className="text-[16px] leading-[1.6] text-[#87899B]">
-          {description}
-        </p>
+          <h5
+            className={`icon-box-title mb-[15px] ${isLight ? "text-aiero-dark" : "text-white"}`}
+            style={{
+              fontFamily: "var(--font-manrope)",
+              fontSize: "25px",
+              lineHeight: 1.4,
+              fontWeight: 500,
+            }}
+          >
+            {title}
+          </h5>
+          <div className="icon-box-info">
+            <p className="text-[16px] leading-[1.6] text-aiero-text-muted">
+              {description}
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   );