updated compoennt file structure

components/pages/about/aboutDetail/loading/guidLoading.tsx

@@ -0,0 +1,24 @@
+export function DownloadCardSkeleton() {
+  return (
+    <div
+      className="min-h-40 h-full relative w-full max-w-md border border-white/10 bg-[#171616b8] rounded-lg p-4 flex flex-col gap-4 items-start justify-between"
+    >
+      {/* Top section */}
+      <div className="flex justify-between items-start w-full gap-4">
+        {/* Title */}
+        <div className="space-y-2 flex-1">
+          <div className="h-4 w-3/4 rounded bg-white/8 animate-pulse" />
+          <div className="h-4 w-1/2 rounded bg-white/8 animate-pulse" />
+        </div>
+        {/* File type badge */}
+        <div className="h-4 w-10 rounded bg-white/8 animate-pulse shrink-0" />
+      </div>
+
+      {/* Bottom section */}
+      <div className="flex w-full justify-between items-center">
+        <div className="h-3 w-16 rounded bg-white/8 animate-pulse" />
+        <div className="w-5 h-5 rounded bg-white/8 animate-pulse" />
+      </div>
+    </div>
+  );
+}

components/pages/about/aboutDetail/loading/loading.tsx

@@ -0,0 +1,44 @@
+export function CertCardSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <>
+      <article className="flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 w-full">
+        {/* Badge row */}
+        <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 flex-wrap">
+              {/* Award badge */}
+              <div className="flex items-center gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-sm bg-red-900/40 animate-pulse" />
+                <div className="h-2.5 w-20 rounded-full bg-red-900/40 animate-pulse" />
+              </div>
+              {/* Category pill */}
+              <div className="h-4 w-16 rounded-full border border-white/10 bg-white/5 animate-pulse" />
+            </div>
+
+            {/* Title lines */}
+            <div className="space-y-1.5 pt-1">
+              <div className="h-3.5 w-full rounded bg-white/8 animate-pulse" />
+              <div className="h-3.5 w-3/4 rounded bg-white/8 animate-pulse" />
+            </div>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
+
+        {/* Document list */}
+        <ul className="flex flex-col gap-2.5">
+          {Array.from({ length: 3 }).map((_, di) => (
+            <li key={di} className="flex items-start gap-2.5">
+              <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-900/40 animate-pulse" />
+              <div
+                className="h-3 rounded bg-white/8 animate-pulse"
+                style={{ width: `${75 - di * 10}%` }}
+              />
+            </li>
+          ))}
+        </ul>
+      </article>
+    </>
+  );
+}