editar paginas de servicios

src/App.tsx

   bookSharp,
   appsSharp,
   home,
+  peopleCircleSharp,
 } from "ionicons/icons";
 import Home from "./pages/Home";
 
 import LawListPage from "./pages/LawListPage";
 import ArticlePage from "./pages/ArticlePage";
 import AboutListPage from "./pages/AboutListPage";
+import CasitaPage from "./pages/services/CasitaPage";
+import CrecemosPage from "./pages/services/CrecemosPage";
+import LazosPage from "./pages/services/LazosPage";
+import SupervisadasPage from "./pages/services/SupervisadasPage";
 
 setupIonicReact();
 
             <AboutListPage />
           </Route>
 
+          <Route path="/services/casita">
+            <CasitaPage />
+          </Route>
+
+          <Route path="/services/supervisadas">
+            <SupervisadasPage />
+          </Route>
+
+          <Route path="/services/crecemos">
+            <CrecemosPage />
+          </Route>
+
+          <Route path="/services/lazos">
+            <LazosPage />
+          </Route>
+
           <Route path="/article/:slug" component={ArticlePage} />
           <Route exact path="/">
             <Redirect to="/home" />
           </IonTabButton>
 
           <IonTabButton tab="advice" href="/advice">
-            <IonIcon icon={appsSharp} />
+            <IonIcon icon={peopleCircleSharp} />
             <IonLabel>Advice</IonLabel>
           </IonTabButton>
 

src/pages/AboutListPage.tsx

 import {
   IonContent,
   IonHeader,
+  IonItem,
+  IonList,
   IonPage,
   IonTitle,
   IonToolbar,
             <IonTitle size="large">About</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent
-          items={[
-            "Proyecto Lazos",
-            "Casita de Paz",
-            "Crecemos",
-            "Talleres Educativos",
-            "Visitas Supervisadas",
-          ]}
-        />
+        <div className="ion-padding">
+          <h5>Bienvenidos</h5>
+          <p>
+            Aqui tenemos una lista de las cosas que Renacer Social ofrece a la
+            sociedad.
+          </p>
+        </div>
       </IonContent>
+      <IonList>
+        <IonItem routerLink={`/services/casita`}>
+          <p className="ListItemText">Casita de Paz</p>
+        </IonItem>
+      </IonList>
+
+      <IonList>
+        <IonItem routerLink={`/services/Crecemos`}>
+          <p className="ListItemText">Crecemos</p>
+        </IonItem>
+      </IonList>
+
+      <IonList>
+        <IonItem routerLink={`/services/Lazos`}>
+          <p className="ListItemText">Proyecto Lazos</p>
+        </IonItem>
+      </IonList>
+
+      <IonList>
+        <IonItem routerLink={`/services/Supervisadas`}>
+          <p className="ListItemText">Visitas Supervisadas</p>
+        </IonItem>
+      </IonList>
     </IonPage>
   );
 };

src/pages/services/CasitaPage.tsx

+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const CasitaPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Servicios</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>Casita de Paz</IonCardTitle>
+            <IonCardSubtitle></IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>Romper ciclos negativos</IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default CasitaPage;

src/pages/services/CrecemosPage.tsx

+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const CrecemosPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Servicios</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>Crecemos</IonCardTitle>
+            <IonCardSubtitle></IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>Educacion Co-parental</IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default CrecemosPage;

src/pages/services/LazosPage.tsx

+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const LazosPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Servicios</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>Proyecto de Lazos</IonCardTitle>
+            <IonCardSubtitle></IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>Maltrato de Parejas</IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default LazosPage;

src/pages/services/SupervisadasPage.tsx

+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const SupervisadasPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Servicios</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>Visitas Supervisadas</IonCardTitle>
+            <IonCardSubtitle></IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>
+            Espacio tranquilo y seguro para visitas supervisadas
+          </IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default SupervisadasPage;