feat(Root): Integrate Cloudinary for image optimization

- Added Cloudinary to optimize images for improved performance.

package.json

@@ -19,14 +19,14 @@
 		"@supabase/supabase-js": "2.39.7",
 		"@vercel/speed-insights": "1.0.10",
 		"astro": "4.4.8",
+		"cloudinary": "2.0.2",
 		"solid-js": "1.8.15",
 		"tailwindcss": "3.4.1",
 		"typescript": "5.3.3"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.5.3",
 		"@s-ui/mono": "2.45.0",
-		"markdownlint": "0.33.0",
-		"supabase": "1.145.4"
+		"markdownlint": "0.33.0"
 	}
 }

src/components/renders/RenderApps.astro

@@ -12,16 +12,18 @@ interface Props {
 const { apps } = Astro.props;
 ---
 
-<div class="flex flex-col md:flex-row gap-4 mt-4">
+<div
+  class="grid grid-cols-2 place-content-center max-sm:grid-cols-1 gap-4 mt-4"
+>
   {
     apps.map((app) => {
       const { name, description, githubRepoURL, logoURL, alternativeText } =
         app;
 
       return (
-        <div class="flex flex-col items-center justify-center bg-white rounded-lg shadow-md mt-4 p-4 w-max">
-          <h1 class="text-xl font-semibold">{name}</h1>
-          <p class="text-gray-700">{description}</p>
+        <div class="bg-white rounded-lg shadow-md mt-4 p-4 w-max">
+          <h1 class="text-xl font-semibold text-center text-balance">{name}</h1>
+          <p class="text-gray-700 text-center text-pretty">{description}</p>
           <img
             src={logoURL}
             alt={alternativeText}

src/config/cloudinary.ts

@@ -0,0 +1,9 @@
+import { v2 as cloudinary } from "cloudinary"
+
+export function configureCloudinary() {
+	cloudinary.config({
+		api_key: import.meta.env.CLOUDINARY_APY_KEY,
+		api_secret: import.meta.env.CLOUDINARY_APY_SECRET,
+		cloud_name: import.meta.env.CLOUDINARY_CLOUD_NAME
+	})
+}