From ed027d80a9a5534f32f3edf677972212f49b1991 Mon Sep 17 00:00:00 2001
From: Space <space@reversed.dev>
Date: Thu, 23 Jan 2025 20:46:28 +0100
Subject: [PATCH] Refactor layout and styles in Index component for improved
 responsiveness and readability

---
 app/routes/_index.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index c16ec80..a8365a9 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -200,24 +200,23 @@ export default function Index() {
 						My Dawg
 					</h2>
 					<div
-						className="p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
-            flex flex-col md:flex-row gap-8 items-center"
+						className="p-4 sm:p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg flex flex-col gap-8 items-center"
 					>
-						<div className="flex-1 space-y-6">
+						<div className="flex-1 space-y-6 w-full">
 							<img
 								src="https://cdn.reversed.dev/pictures/20250103_121234.jpg"
 								alt="Charly Image"
-								className="w-full h-96 object-cover rounded-lg shadow-lg"
+								className="w-full h-64 sm:h-96 object-cover rounded-lg shadow-lg"
 							/>
-							<p className="text-gray-300 text-lg leading-relaxed">
+							<p className="text-gray-300 text-base sm:text-lg leading-relaxed">
 								This is Charly🙏 This lil guy is about{" "}
 								<span className="italic">13</span> Years old. Very mixed.
 							</p>
-							<div className="bg-white/5 p-6 rounded-lg backdrop-blur-sm">
+							<div className="bg-white/5 p-4 sm:p-6 rounded-lg backdrop-blur-sm">
 								<h3 className="text-xl font-bold text-gray-100 mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
 									Charly
 								</h3>
-								<div className="grid grid-cols-4">
+								<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
 									<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
 										<span className="text-2xl">🗣️</span>
 										<span>the guy is a little deaf</span>