update home page

components/shared/CardShared.tsx

@@ -1,4 +1,5 @@
 import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
+import styles from "./CardShared.module.css";
 
 interface CardHeadingProps {
   title: string;
@@ -19,20 +20,13 @@ export function CardHeading({
     <div className={`mb-5 ${wrapperClassName}`}>
       {subtitle && (
         <div
-          className={`aiero-subheading ${subtitleClassName}`}
-          style={{ fontFamily: "var(--font-sora)" }}
+          className={`aiero-subheading font-sora ${subtitleClassName}`}
         >
           {subtitle}
         </div>
       )}
       <h4
-        className={`tracking-[-0.03em] ${titleClassName}`}
-        style={{
-          fontFamily: "var(--font-dm-sans)",
-          fontSize: "30px",
-          fontWeight: 500,
-          lineHeight: "1.16666em",
-        }}
+        className={`font-dm-sans text-[30px] font-medium leading-[1.16666em] tracking-[-0.03em] ${titleClassName}`}
       >
         {title}
       </h4>
@@ -42,10 +36,17 @@ export function CardHeading({
 
 export function IconButton({ className = "" }: { className?: string }) {
   return (
-    <div className={`absolute bottom-0 right-0 icon-decoration ${className}`}>
-      <div className="icon-inner flex h-[52px] w-[52px] items-center justify-center rounded-tl-[30px] bg-white text-[#333333] transition-colors hover:bg-[#333333] hover:text-white">
-        <ArrowIcon className="h-3 w-3" />
-      </div>
+    <div className={`${styles.iconWrapper} ${className}`}>
+      <a
+        href="#"
+        className={`${styles.iconSlideAslant} flex h-[52px] w-[52px] items-center justify-center rounded-[15px] bg-aiero-card-dark text-white transition-all duration-300 hover:bg-aiero-teal hover:text-aiero-dark`}
+        aria-label="Open details"
+      >
+        <span className={styles.iconSlideAslantInner} aria-hidden="true">
+          <ArrowIcon className="h-3 w-3" />
+          <ArrowIcon className="h-3 w-3" />
+        </span>
+      </a>
     </div>
   );
 }