.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

package.json

@@ -27,7 +27,6 @@
     "react-dom": "^18.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.0",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",
@@ -72,7 +71,8 @@
     "@capacitor/cli": "4.4.0",
     "@ionic/lab": "3.2.15",
     "husky": "^8.0.0",
-    "pretty-quick": "^3.1.3"
+    "pretty-quick": "^3.1.3",
+    "react-scripts": "5.0.1"
   },
   "description": "An Ionic project"
 }

src/App.tsx

@@ -10,7 +10,14 @@ import {
   setupIonicReact,
 } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
-import { ellipse, home } from "ionicons/icons";
+import {
+  ellipse,
+  informationCircleSharp,
+  bookSharp,
+  appsSharp,
+  home,
+  peopleCircleSharp,
+} from "ionicons/icons";
 import Home from "./pages/Home";
 
 /* Core CSS required for Ionic components to work properly */
@@ -34,6 +41,11 @@ import "./theme/variables.css";
 import AdviceListPage from "./pages/AdviceListPage";
 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();
 
@@ -45,30 +57,60 @@ const App: React.FC = () => (
           <Route exact path="/home">
             <Home />
           </Route>
+
           <Route path="/advice">
             <AdviceListPage />
           </Route>
+
           <Route path="/laws">
             <LawListPage />
           </Route>
+
+          <Route path="/about">
+            <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" />
           </Route>
         </IonRouterOutlet>
+
         <IonTabBar slot="bottom">
           <IonTabButton tab="home" href="/home">
             <IonIcon icon={home} />
             <IonLabel>Home</IonLabel>
           </IonTabButton>
+
           <IonTabButton tab="advice" href="/advice">
-            <IonIcon icon={ellipse} />
+            <IonIcon icon={peopleCircleSharp} />
             <IonLabel>Advice</IonLabel>
           </IonTabButton>
+
           <IonTabButton tab="laws" href="/laws">
-            <IonIcon icon={ellipse} />
+            <IonIcon icon={bookSharp} />
             <IonLabel>Laws</IonLabel>
           </IonTabButton>
+          <IonTabButton tab="about" href="/about">
+            <IonIcon icon={informationCircleSharp} />
+            <IonLabel>About</IonLabel>
+          </IonTabButton>
         </IonTabBar>
       </IonTabs>
     </IonReactRouter>

src/pages/AboutListPage.tsx

@@ -0,0 +1,61 @@
+import {
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import ListComponent from "../components/ListComponent";
+
+const AboutListPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>About</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">About</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <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>
+  );
+};
+
+export default AboutListPage;

src/pages/services/CasitaPage.tsx

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,48 @@
+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;