Added the call and mail buttons to each service specific page

src/pages/services/ApoyoPage.tsx

@@ -12,9 +12,10 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent"
 
 const ApoyoPage: React.FC = () => {
+  let body= "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Seguridad y Apoyo. También me gustaría saber donde están actualmente ubicados."
   return (
     <IonPage>
       <IonHeader>
@@ -38,6 +39,7 @@ const ApoyoPage: React.FC = () => {
             durante su espera. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/CasitaPage.tsx

@@ -12,9 +12,10 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent"
 
 const CasitaPage: React.FC = () => {
+  let body= "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Casita. También me gustaría saber donde están actualmente ubicados."
   return (
     <IonPage>
       <IonHeader>
@@ -43,6 +44,7 @@ const CasitaPage: React.FC = () => {
             llame a nuestras oficinas para más información. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/ConsejosPage.tsx

@@ -12,9 +12,11 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const ConsejosPage: React.FC = () => {
+  let body =
+    "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Consejería. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
@@ -40,6 +42,7 @@ const ConsejosPage: React.FC = () => {
             cómodo. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/EducacionPage.tsx

@@ -12,9 +12,11 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const EducacionPage: React.FC = () => {
+  let body =
+    "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Educación. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
@@ -41,6 +43,7 @@ const EducacionPage: React.FC = () => {
             familia y en la sociedad. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/LazosPage.tsx

@@ -12,9 +12,11 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const LazosPage: React.FC = () => {
+  let body =
+  "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Lazos. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
@@ -42,6 +44,7 @@ const LazosPage: React.FC = () => {
             más información. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/SupervisadasPage.tsx

@@ -12,9 +12,11 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const SupervisadasPage: React.FC = () => {
+  let body =
+  "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Visitas Supervisadas. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
@@ -38,6 +40,7 @@ const SupervisadasPage: React.FC = () => {
             envueltos. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/TalleresPage.tsx

@@ -12,9 +12,11 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const TalleresPage: React.FC = () => {
+  let body =
+  "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Talleres Educativos. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
@@ -37,6 +39,7 @@ const TalleresPage: React.FC = () => {
             profesionales para fortalecer nuestra comunidad.
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/TerapeuticasPage.tsx

@@ -12,9 +12,11 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { RouteComponentProps } from "react-router";
+import ButtonComponent from "../../components/ButtonComponent";
 
 const TerapeuticasPage: React.FC = () => {
+  let body =
+    "Es de mi interés ponerme en contacto con ustedes para poder coordinar el uso de su servicio de Visitas Supervisadas Terapéuticas. También me gustaría saber donde están actualmente ubicados.";
   return (
     <IonPage>
       <IonHeader>
@@ -41,6 +43,7 @@ const TerapeuticasPage: React.FC = () => {
             virtual. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );