refactor: refactor the loading pages

src/app/dashboard/billing/loading.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from "~/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className=" space-y-8">
+      <Skeleton className=" h-[75px] rounded-md" />
+      <Skeleton className=" h-[200px] rounded-md" />
+    </div>
+  );
+}

src/app/dashboard/projects/loading.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from "~/components/ui/skeleton";
 
 export default function Loading() {
   return (
-    <div className="grid grid-cols-4 gap-4">
+    <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4">
       <Skeleton className="h-36 rounded-lg" />
       <Skeleton className="h-36 rounded-lg" />
       <Skeleton className="h-36 rounded-lg" />

src/app/dashboard/settings/loading.tsx

@@ -1,27 +1,5 @@
 import { Skeleton } from "~/components/ui/skeleton";
 
 export default function Loading() {
-  return (
-    <div className=" max-w-2xl">
-      <Skeleton className="mb-5 h-28 w-28 rounded-full" />
-      <div className=" space-y-8">
-        <div>
-          <Skeleton className="mb-2 h-4 w-10 rounded" />
-          <Skeleton className="h-10 w-full rounded" />
-        </div>
-        <div>
-          <Skeleton className="mb-2 h-4 w-10 rounded" />
-          <Skeleton className="h-10 w-full rounded" />
-        </div>
-        <div>
-          <Skeleton className="mb-2 h-4 w-10 rounded" />
-          <Skeleton className="h-20 w-full rounded" />
-        </div>
-        <div className="flex gap-x-4">
-          <Skeleton className="h-10 w-20 rounded" />
-          <Skeleton className="h-10 w-20 rounded" />
-        </div>
-      </div>
-    </div>
-  );
+  return <Skeleton className="h-[500px] max-w-2xl rounded-md" />;
 }

src/components/sections/features.tsx

@@ -11,7 +11,7 @@ export default function Features() {
           <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
             <Balancer>
               This template comes with features like Authentication, API routes,
-              File uploading and more in Next.js 13 app dir.
+              File uploading and more in Next.js App dir.
             </Balancer>
           </p>
         </div>

src/components/sections/hero.tsx

@@ -24,14 +24,14 @@ export default async function Hero() {
             title="Follow Updates"
             target="_blank"
             rel="noreferrer"
-            className="mx-auto mb-5 flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-colors duration-300 ease-linear animate-in slide-in-from-top hover:bg-blue-200"
+            className="mx-auto mb-5 flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-colors duration-300 hover:bg-blue-200"
           >
             <Icons.twitter className="h-5 w-5 text-blue-700" />
             <p className="text-sm font-semibold text-blue-700">
               Introducing ChadNext
             </p>
           </a>
-          <h1 className=" bg-gradient-to-br from-gray-900 via-gray-800 to-gray-400 bg-clip-text text-center font-heading text-[40px] font-bold leading-tight tracking-[-0.02em] text-transparent drop-shadow-sm duration-300 ease-linear animate-in zoom-in-50 dark:bg-gradient-to-br dark:from-gray-100 dark:to-gray-900 md:text-7xl md:leading-[5rem]">
+          <h1 className=" bg-gradient-to-br from-gray-900 via-gray-800 to-gray-400 bg-clip-text text-center font-heading text-[40px] font-bold leading-tight tracking-[-0.02em] text-transparent drop-shadow-sm duration-300 ease-linear animate-in zoom-in-75 dark:bg-gradient-to-br dark:from-gray-100 dark:to-gray-900 md:text-7xl md:leading-[5rem]">
             <Balancer>Quick Starter Template for your Next.js project</Balancer>
           </h1>
           <p className="mt-6 text-center text-muted-foreground md:text-xl">