Refactor layout and styles in Index component for improved responsiveness and readability

This commit is contained in:
2025-01-23 20:46:28 +01:00
parent 3bc31af3c0
commit ed027d80a9

View File

@@ -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>