Added the call and mail buttons to each service specific page

src/pages/services/ApoyoPage.tsx

   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>
             durante su espera. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/CasitaPage.tsx

   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>
             llame a nuestras oficinas para más información. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/ConsejosPage.tsx

   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>
             cómodo. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/EducacionPage.tsx

   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>
             familia y en la sociedad. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/LazosPage.tsx

   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>
             más información. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/SupervisadasPage.tsx

   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>
             envueltos. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/TalleresPage.tsx

   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>
             profesionales para fortalecer nuestra comunidad.
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );

src/pages/services/TerapeuticasPage.tsx

   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>
             virtual. 
           </IonCardContent>
         </IonCard>
+        <ButtonComponent body={body}></ButtonComponent>
       </IonContent>
     </IonPage>
   );