fix: calculate actual read time and improve read time UI on blog cards

Fixes #1491

- Replaced hardcoded '5 min read' with dynamically calculated read time
- Read time is calculated based on content length (200 words/min average)
- Added clock emoji for better visual clarity
- Applied to both blogCard component and blogs index page

Author: aaniya22

src/components/blogCarousel/blogCard.tsx

@@ -134,7 +134,9 @@ const BlogCard = ({
                 ))}
               </div>
             </div>
-            <span className="card-read-time">5 min read</span>
+            <span className="card-read-time">
+  🕒 {Math.max(1, Math.ceil(content.split(" ").length / 200))} min read
+</span>
           </div>
 
           {/* Read More Button */}

src/pages/blogs/index.tsx

@@ -335,12 +335,15 @@ const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => {
             </div>
           </div>
 
-          {/* Read link */}
+          {/* Read time + Read link */}
+          <span className="card-read-time">
+            🕒 {Math.max(1, Math.ceil((blog.description || "").split(" ").length / 200))} min read
+          </span>
           <Link to={`/blog/${blog.slug}`} className="card-read-link">
             Read →
           </Link>
         </div>
       </div>
     </div>
   );
-};
+};