connected backend to service page and detail

components/pages/services/loading.tsx

@@ -0,0 +1,46 @@
+import { motion } from "framer-motion";
+
+
+// Loading Skeleton Component
+function ServiceCardSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4 py-6 px-8 rounded-xl bg-linear-to-br from-gray-800 to-gray-900">
+      <div className="h-6 bg-gray-700 rounded w-3/4"></div>
+      <div className="h-4 bg-gray-700 rounded w-full"></div>
+      <div className="h-4 bg-gray-700 rounded w-5/6"></div>
+      <div className="h-8 bg-gray-700 rounded w-32"></div>
+    </div>
+  );
+}
+
+// Loading Component
+export function ServicesLoading() {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="max-w-250 w-full mx-auto space-y-5"
+    >
+      {/* Top Cards Skeleton */}
+      <div className="flex sm:flex-row flex-col items-center gap-5">
+        <div className="sm:w-[55%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+        <div className="sm:w-[45%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+      </div>
+
+      {/* Bottom Cards Skeleton */}
+      <div className="flex sm:flex-row flex-col items-start justify-between gap-5">
+        <div className="sm:w-[40%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+        <div className="sm:w-[60%] w-full space-y-5">
+          <ServiceCardSkeleton />
+          <div className="h-24 bg-gray-800 rounded-xl animate-pulse"></div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}