refactor!: Rename and parametrize AboutUs.astro to create reusable AboutSection.astro

- Renamed `AboutUs.astro` to `AboutSection.astro` (a more descriptive name)
- Made AboutSection parametric: replaced hardcoded content with props for title, description, image, and call to action (CTA)
- Updated styles according latest design mockup

Author: nsandoya

src/assets/home-sections.json

@@ -1,7 +1,7 @@
 {
     "aboutUs": {
         "id": "about-us",
-        "title": "Somos la metacomunidad que conecta y potencia a las comunidades tech.",
+        "title": "Somos la metacomunidad que conecta y potencia a las comunidades tech",
         "subtitle": "",
         "description": "En nuestra metacomunidad, unimos fuerzas, compartimos conocimientos y crecemos juntos. Conectamos comunidades tech para impulsar el futuro de la innovación y la colaboración. Únete a nosotros y sé parte del cambio.",
         "image": {
@@ -29,7 +29,7 @@
     },
     "exploreEvents": {
         "id": "explore-events",
-        "title": "Únete a nuestros próximos eventos y amplía tus horizontes.",
+        "title": "Únete a nuestros próximos eventos y amplía tus horizontes",
         "subtitle": "",
         "description": "Nos encanta aprender, compartir y expandir nuestros horizontes constantemente. ¡Anímate a explorar todas las actividades que las comunidades tech tienen para ti!",
         "image": {

src/components/AboutSection.astro

@@ -0,0 +1,29 @@
+---
+//import heroImage from "../assets/hacktoberfest.jpg";
+import Button from "./shared/Button.astro";
+
+const {id, title, description, image, cta} = Astro.props;
+---
+
+<section id={id} class="py-16 bg-gray-50">
+  <div class="container mx-auto px-4">
+    <div class="w-[88%] lg:w-[92%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+      <div class="order-2 lg:order-1">
+        <h2 class="text-3xl font-bold mb-6">
+          {title}
+        </h2>
+        <p class="text-gray-600 mb-6">
+          {description}
+        </p>
+        <Button text={cta.text} link={cta.link} style="primary"/>
+      </div>
+      <div class="bg-gray-200 order-1 lg:order-2 rounded-lg">
+        <img
+          src={image.link}
+          alt={image.alt}
+          class="w-full object-cover h-64 rounded-xl transform hover:scale-105 transition-transform duration-300"
+        />
+      </div>
+    </div>
+  </div>
+</section>