Refactor styles across components to utilize variable-based border-radius for consistency and improved maintainability. Added SkeletonUI component and corresponding styles for loading states.

app/src/components/templates/SkeletonUI.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+
+const SkeletonUI = () => {
+  return (
+    <div className="skeleton-wrapper">
+      <div className="skeleton-header">
+        <div className="skeleton skeleton-title"></div>
+        <div className="skeleton skeleton-subtitle"></div>
+      </div>
+
+      <div className="skeleton-content">
+        <div className="skeleton skeleton-card"></div>
+        <div className="skeleton skeleton-card"></div>
+      </div>
+      
+    </div>
+  );
+};
+
+export default SkeletonUI;