feat: Create Button.astro

- Create `components/shared` folder
- Create `Button.astro` in `shared` folder (due this component will be used in multiple pages across our website
- Add `Button.astro` in `About.astro`

Author: nsandoya

src/components/AboutUs.astro

@@ -1,5 +1,6 @@
 ---
 import heroImage from "../assets/hacktoberfest.jpg";
+import Button from "./shared/Button.astro";
 ---
 
 <section id="about-us" class="py-16 bg-gray-50">
@@ -15,10 +16,11 @@ import heroImage from "../assets/hacktoberfest.jpg";
           de la innovación y la colaboración. Únete a nosotros y sé parte del
           cambio.
         </p>
-        <a
+        <Button text="Conoce más" link="https://forms.gle/un4KaPsmmqS5Yx7Z9" style="primary"/>
+        <!-- <a
           href="https://forms.gle/un4KaPsmmqS5Yx7Z9"
           class="text-blue-600 font-semibold hover:text-blue-700"
-        >Sé voluntario →</a>
+        >Sé voluntario →</a> -->
       </div>
       <div class="bg-gray-200 h-64 rounded-lg">
         <img

src/components/shared/Button.astro

@@ -0,0 +1,12 @@
+---
+const { text, link, style } = Astro.props;
+---
+<a href={link}>
+  <div class:list={[
+    "base-btn",
+    {"outlined-white-btn": style === "outline"},
+    {"primary-btn": style === "primary"},
+  ]}>
+    <p class="text-base">{text}</p>
+  </div>
+</a>

src/styles/globals.css

@@ -43,6 +43,22 @@
 	}
 
 	/* Components custom styles */
+	.base-btn {
+		@apply w-fit border-solid border-2 bg-transparent px-5 py-2 rounded-xl font-medium;
+		border: solid 2px !important;
+	}
+
+	.primary-btn {
+		@apply font-semibold  text-blue-600  hover:bg-blue-600 hover:text-white;
+		/* border: solid 2px !important;
+		border-color: #2563eb; */
+	}
+
+	.outlined-white-btn {
+		@apply border-white font-semibold text-white hover:bg-white hover:text-blue-600;
+	}
+
+
 	.faqs-container {
 		@apply mx-auto shadow-md p-6 pt-0 rounded-xl;
 	}