Added moti messages to home

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

src/pages/Home.tsx

@@ -1,8 +1,17 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonText } from '@ionic/react';
+import { IonContent, IonHeader,IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonTitle, IonToolbar, IonButton, IonIcon } from '@ionic/react';
+import { arrowDownCircle } from 'ionicons/icons';
 import './styles/styles.css';
 
+// This is the date that is going to appear on the
+// card with the Motivational message
+const current = new Date();
+const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;
+
+
 const Home: React.FC = () => {
+
   return (
+    
     <IonPage>
       <IonHeader>
         <IonToolbar>
@@ -10,9 +19,28 @@ const Home: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonText>
-          <p>Un texto</p>
-        </IonText>
+
+        {/* Card 1 */}
+        <IonCard class="moti-card">
+          <IonCardHeader class="card-header">
+            <IonCardTitle class="card-date">
+              {date}
+              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton> 
+            </IonCardTitle>
+          </IonCardHeader>
+          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./generatedMsgs/moti1.jpeg")}></IonImg>
+        </IonCard>
+
+        {/* Card 2 */}
+        <IonCard class="moti-card">
+          <IonCardHeader class="card-header">
+            <IonCardTitle class="card-date">
+              {date}
+              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton>
+            </IonCardTitle>
+          </IonCardHeader>
+          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./generatedMsgs/moti1.jpeg")}></IonImg>
+        </IonCard>
       </IonContent>
     </IonPage>
   );

src/pages/styles/styles.css

@@ -20,4 +20,34 @@
 
 .info-p {
     line-height: 1.5;
-}
+}
+
+/* Styles for home screen */
+
+.card-header {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.moti-download {
+    font-size: 40px;
+}
+
+.moti-card {
+    background-color: #fff;
+    border-radius: 15px !important;
+    padding: 15px;
+    margin: 15px;
+}
+
+.moti-img {
+    border-radius: 15px !important;
+    overflow: hidden;
+}
+.card-date {
+    color:#8f00ff;
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+}
+