initial commit

src/components/Skeletons/homePage.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Skeleton, Card } from "antd";
+import styles from "./skeleton.module.scss";
+
+const SkeletonProductCard = () => {
+  return (
+    <div className={styles.skeletonCard}>
+      <Card
+        bordered={false}
+        cover={
+          <Skeleton.Image className={styles.skeletonImage} active={true} />
+        }
+      >
+        <Skeleton active paragraph={{ rows: 2 }} title={{ width: "70%" }} />
+        <Skeleton.Button
+          active
+          size="default"
+          shape="round"
+          className={styles.priceButton}
+        />
+      </Card>
+    </div>
+  );
+};
+
+export default SkeletonProductCard;

src/components/Skeletons/skeleton.module.scss

@@ -0,0 +1,23 @@
+.skeletonCard {
+    width: 100%;
+    margin-bottom: 1rem;
+    
+    :global {
+      .ant-card {
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+    }
+    
+    .skeletonImage {
+      width: 100% !important;
+      height: 250px !important;
+      object-fit: cover;
+    }
+    
+    .priceButton {
+      margin-top: 12px;
+      width: 40%;
+    }
+  }