Refactor layout and styles in Index component for improved responsiveness and readability
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user