Merge branch 'main' into matteing-sprint-1

# Conflicts:
#	src/components/DropdownComponent.tsx

.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
+}

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 */
@@ -36,6 +43,11 @@ import LawListPage from "./pages/LawListPage";
 import ArticlePage from "./pages/ArticlePage";
 import "./theme/global.css";
 import "react-notion-x/src/styles.css";
+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();
 
@@ -47,30 +59,61 @@ const App: React.FC = () => (
           <Route exact path="/home">
             <Home />
           </Route>
+
           <Route path="/advice">
             <AdviceListPage />
           </Route>
+
           <Route path="/laws">
             <LawListPage />
           </Route>
+
           <Route path="/article/:articleId" component={ArticlePage} />
+
+          <Route path="/services/lazos">
+            <LazosPage />
+          </Route>
+
+          <Route path="/services/crecemos">
+            <CrecemosPage />
+          </Route>
+
+          <Route path="/services/supervisadas">
+            <SupervisadasPage />
+          </Route>
+
+          <Route path="/about">
+            <AboutListPage />
+          </Route>
+
+          <Route path="/services/casita">
+            <CasitaPage />
+          </Route>
+
           <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/components/DropdownComponent.css

@@ -1,3 +0,0 @@
-.accordion-list-container {
-    width: 100%;
-}

src/components/DropdownComponent.tsx

@@ -1,28 +0,0 @@
-import {
-  IonAccordion,
-  IonAccordionGroup,
-  IonItem,
-  IonLabel,
-} from "@ionic/react";
-import { PropsWithChildren } from "react";
-import "./DropdownComponent.css";
-
-const DropdownComponent: React.FC<
-  {
-    name: string;
-  } & PropsWithChildren
-> = ({ name, children }) => {
-  return (
-    <IonAccordionGroup>
-      <IonAccordion value={name}>
-        <IonItem slot="header" color="light">
-          <IonLabel>{name}</IonLabel>
-        </IonItem>
-        <IonItem slot="content">
-          <div className="accordion-list-container">{children}</div>
-        </IonItem>
-      </IonAccordion>
-    </IonAccordionGroup>
-  );
-};
-export default DropdownComponent;

src/pages/AboutListPage.tsx

@@ -0,0 +1,60 @@
+import {
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+
+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;