Update text colors in About, Experience, and Hero components for improved readability

src/components/About.astro

@@ -6,12 +6,12 @@ const { aboutMe } = Astro.props;
 ---
 
 <Section id="about-me">
-    <h3 class="text-3xl font-bold text-white text-center mb-10">
+    <h3 class="text-3xl font-bold text-gray-100 text-center mb-10">
         Acerca de mí
     </h3>
     {aboutMe.split("\n").map((line: string) => (
         line.trim() !== "" ? (
-            <p class="text-gray-400 mb-4 text-wrap">{line}</p>
+            <p class="text-gray-300 mb-4 text-wrap">{line}</p>
         ) : null
     ))}
 </Section>

src/components/Experience.astro

@@ -28,13 +28,13 @@ interface ExperienceProps {
                         <span class="text-sm text-sky-400 mb-4 block">
                             {exp.duration}
                         </span>
-                        <h4 class="text-xl font-bold text-white mb-2">
+                        <h4 class="text-xl font-bold text-gray-200 mb-2">
                             {exp.role}
                         </h4>
-                        <h5 class="text-md font-medium text-gray-500 mb-4">
+                        <h5 class="text-md font-medium text-gray-300 mb-4">
                             {exp.company}
                         </h5>
-                        <p class="text-gray-400 text-wrap">{exp.description}</p>
+                        <p class="text-gray-300 text-wrap">{exp.description}</p>
                     </div>
                 </div>
             </div>

src/components/Hero.astro

@@ -24,7 +24,7 @@ const { name, title, bio, github, linkedin } = Astro.props;
             >
                 {title}
             </h2>
-            <p class="text-lg text-gray-400 max-w-full text-wrap">{bio}</p>
+            <p class="text-lg text-gray-300 max-w-full text-wrap">{bio}</p>
         </div>
     </div>
     <div class="mt-8 flex space-x-6 items-center justify-center max-w-4xl w-full">