fix: blog card item and skeleton styling

src/app/globals.css

@@ -8,6 +8,7 @@
   --ext-color-primary-3: #2e2d51;
   --ext-color-primary-4: #d4a187;
   --ext-color-primary-5: #e7ccc0;
+  --ext-color-primary-6: #64b3b4;
   --background: #ffffff;
   --foreground: #171717;
 }
@@ -19,6 +20,7 @@
     --ext-color-primary-3: #2e2d51;
     --ext-color-primary-4: #d4a187;
     --ext-color-primary-5: #e7ccc0;
+    --ext-color-primary-6: #64b3b4;
     --background: #0a0a0a;
     --foreground: #ededed;
   }
@@ -34,18 +36,25 @@ body {
   .ext-btn {
     @apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline;
   }
-
   .ext-btn-primary {
     @apply bg-extColorPrimary text-white;
   }
-
   .ext-btn-primary2 {
     @apply bg-extColorPrimary2 text-white;
   }
-
   .ext-btn-primary3 {
     @apply bg-extColorPrimary3 text-white;
   }
+  .ext-btn-primary4 {
+    @apply bg-extColorPrimary4 text-white;
+  }
+
+  .ext-btn-shadow-sm {
+    @apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)];
+  }
+  .ext-btn-shadow-sm-primary4 {
+    @apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
+  }
 }
 
 .bg-gradient {

src/components/Blogs/BlogCardItem.tsx

@@ -19,36 +19,21 @@ export interface BlogCardItemProps {
 
 export function BlogCardItem({ data }: BlogCardItemProps) {
   return (
-    <div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50">
+    <div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50">
-      <div className="post-prev-3-container d-block d-sm-flex">
+      <div className="post-prev-3-container flex flex-col">
-        <div className="post-prev-3-img">
+        <div>
           <a href={`/${data.slug}/`}>
-            <Image width={400} height={488} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
+            <Image width={684} height={454} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
           </a>
         </div>
-        <div className="post-prev-3-intro">
+        <div className="px-4 py-3 h-full flex flex-col justify-between">
-          <h4 className="post-prev-3-title">
+          <h2 className="text-lg text-center">
             <a href={`/${data.slug}/`}>{data.title}</a>
-          </h4>
+          </h2>
-          <div className="post-prev-3-text">{data.contentPreview}</div>
+          <div className="flex justify-center mt-2">
-          <div className="post-prev-3-info clearfix">
+            <a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary4">
-            {!!data?.author?.name && (
+              Continue Reading
-              <div className="float-start">
+            </a>
-                <a href="#">
-                  <Image
-                    className="post-prev-3-author-img"
-                    width={30}
-                    height={30}
-                    src={data.author?.img ?? "#"}
-                    alt="Image Description"
-                  />
-                </a>
-                <a href="#">{data.author.name}</a>
-              </div>
-            )}
-            <div className={!!data?.author?.name ? "float-end" : "float-start"}>
-              <a href="#">{data.date}</a>
-            </div>
           </div>
         </div>
       </div>
@@ -58,22 +43,14 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
 
 export function BlogCardItemSkeleton() {
   return (
-    <div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50 animate-pulse">
+    <div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50 animate-pulse">
-      <div className="post-prev-3-container d-block d-sm-flex">
+      <div className="post-prev-3-container flex flex-col">
-        <div className="post-prev-3-img">
+        <div className="h-48 w-full bg-gray-300"></div>
-          <div className="w-56 h-64 bg-gray-300 rounded-l-lg"></div>
+        <div className="px-4 py-3">
-        </div>
+          <div className="space-y-2 flex flex-col items-center">
-        <div className="post-prev-3-intro flex flex-1">
+            <div className="h-4 bg-gray-300 rounded w-full"></div>
-          <div className="flex flex-col flex-1 justify-between">
+            <div className="h-4 bg-gray-300 rounded w-full"></div>
-            <div>
+            <div className="h-4 bg-gray-300 rounded w-1/2"></div>
-              <div className="h-5 bg-gray-300 rounded w-3/4 mb-2"></div>
-              <div className="h-4 bg-gray-300 rounded w-5/6 mb-2"></div>
-              <div className="h-4 bg-gray-300 rounded w-2/3"></div>
-              <div className="h-3 bg-gray-300 rounded w-1/4 mt-3"></div>
-            </div>
-            <div>
-              <div className="h-3 bg-gray-300 rounded w-1/4 mt-3"></div>
-            </div>
           </div>
         </div>
       </div>

tailwind.config.ts

@@ -15,6 +15,8 @@ export default {
         extColorPrimary2: "var(--ext-color-primary-2)",
         extColorPrimary3: "var(--ext-color-primary-3)",
         extColorPrimary4: "var(--ext-color-primary-4)",
+        extColorPrimary5: "var(--ext-color-primary-5)",
+        extColorPrimary6: "var(--ext-color-primary-6)",
       },
     },
   },