update demo-react-quotes,

03_source/mobile/.prettierrc

@@ -3,13 +3,5 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "es5",
-  "printWidth": 160,
-  "overrides": [
-    {
-      "files": "src/App.tsx",
-      "options": {
-        "printWidth": 240
-      }
-    }
-  ]
-}
+  "printWidth": 100
+}

03_source/mobile/android/app/capacitor.build.gradle

@@ -12,6 +12,7 @@ dependencies {
     implementation project(':capacitor-barcode-scanner')
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-geolocation')
+    implementation project(':capacitor-google-maps')
     implementation project(':capacitor-preferences')
     implementation project(':capacitor-share')
 

03_source/mobile/android/capacitor.settings.gradle

@@ -11,6 +11,9 @@ project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacito
 include ':capacitor-geolocation'
 project(':capacitor-geolocation').projectDir = new File('../node_modules/@capacitor/geolocation/android')
 
+include ':capacitor-google-maps'
+project(':capacitor-google-maps').projectDir = new File('../node_modules/@capacitor/google-maps/android')
+
 include ':capacitor-preferences'
 project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')
 

03_source/mobile/ios/App/Podfile

@@ -14,6 +14,7 @@ def capacitor_pods
   pod 'CapacitorBarcodeScanner', :path => '../../node_modules/@capacitor/barcode-scanner'
   pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
   pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'
+  pod 'CapacitorGoogleMaps', :path => '../../node_modules/@capacitor/google-maps'
   pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
 end

03_source/mobile/package.json

@@ -11,6 +11,7 @@
     "@capacitor/clipboard": "^7.0.1",
     "@capacitor/core": "^7.0.0",
     "@capacitor/geolocation": "^7.1.2",
+    "@capacitor/google-maps": "^7.0.2",
     "@capacitor/ios": "7.0.1",
     "@capacitor/preferences": "^7.0.0",
     "@capacitor/share": "^7.0.1",
@@ -49,7 +50,7 @@
   },
   "scripts": {
     "start": "npm run dev",
-    "dev": "vite --host 0.0.0.0 --cors",
+    "dev": "vite --force --host 0.0.0.0 --cors",
     "ionic:serve": "vite",
     "ionic:build": "tsc && vite build",
     "build": "tsc && vite build",

03_source/mobile/public/assets/DemoBankingUi/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/src/App.tsx

@@ -65,7 +65,8 @@ import paths from './paths';
 import PrivacyAgreement from './pages/PrivacyAgreement';
 import AppRoute from './AppRoute';
 //
-import DemoReactShop from './pages/DemoReactShop';
+// TODO: resume DemoReactShop
+// import DemoReactShop from './pages/DemoReactShop';
 import DemoWeatherApp from './pages/DemoWeatherApp';
 import DemoClubHouse from './pages/DemoClubHouse';
 import DemoScoreBoard from './pages/DemoScoreBoard';
@@ -91,6 +92,11 @@ import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
 import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
 import DemoReactPollApp from './pages/DemoReactPollApp';
 import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
+import Demo2FaExample from './pages/Demo2FaExample';
+import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
+import DemoBankingUi from './pages/DemoBankingUi';
+import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
+import DemoColorTutorial from './pages/DemoColorTutorial';
 
 setupIonicReact();
 
@@ -116,7 +122,14 @@ interface DispatchProps {
 
 interface IonicAppProps extends StateProps, DispatchProps {}
 
-const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn, setUsername, loadConfData, loadUserData }) => {
+const IonicApp: React.FC<IonicAppProps> = ({
+  darkMode,
+  schedule,
+  setIsLoggedIn,
+  setUsername,
+  loadConfData,
+  loadUserData,
+}) => {
   useEffect(() => {
     loadUserData();
     loadConfData();
@@ -145,20 +158,86 @@ const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn,
             {/*  */}
             {/*  */}
             {/*  */}
-            <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} />
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+
+            <Route path={paths.DEMO_ACCORDION_TUTORIAL} render={() => <DemoAccordionTutorial />} />
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+
+            <Route path={paths.DEMO_BANKING_UI} render={() => <DemoBankingUi />} />
+            <Route
+              path={paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL}
+              render={() => <DemoCapacitorGoogleMapsTutorial />}
+            />
+
+            <Route path={paths.DEMO_COLOR_TUTORIAL} render={() => <DemoColorTutorial />} />
+
+            {/*
+              <Route path={paths.DEMO_ECOMMERCE_EXAMPLE} render={() => <DemoEcommerceExample />} />
+              <Route path={paths.DEMO_FACEBOOK_CLONE} render={() => <DemoFacebookClone />} />
+              <Route path={paths.DEMO_FAST_FOOD_APP} render={() => <DemoFastFoodApp />} />
+              <Route path={paths.DEMO_FLOATING_TABS} render={() => <DemoFloatingTabs />} />
+              <Route path={paths.DEMO_INSTAGRAM_CLONE} render={() => <DemoInstagramClone />} />
+              <Route path={paths.DEMO_KANBAN_BOARD} render={() => <DemoKanbanBoard />} />
+              <Route path={paths.DEMO_ORDERING_APP} render={() => <DemoOrderingApp />} />
+              <Route path={paths.DEMO_PROFILE_EXAMPLE} render={() => <DemoProfileExample />} />
+              <Route path={paths.DEMO_PULLSTATE_TUTORIAL} render={() => <DemoPullstateTutorial />} />
+              <Route path={paths.DEMO_REACT_ADD_TO_CART} render={() => <DemoReactAddToCart />} />
+              <Route path={paths.DEMO_REACT_CALCULATOR} render={() => <DemoReactCalculator />} />
+              <Route path={paths.DEMO_REACT_DRAWING_CANVAS} render={() => <DemoReactDrawingCanvas />} />
+              <Route path={paths.DEMO_REACT_HOOK_FORM_EXAMPLE} render={() => <DemoReactHookFormExample />} />
+              <Route path={paths.DEMO_REACT_ITEM_LIST} render={() => <DemoReactItemList />} />
+              <Route path={paths.DEMO_REACT_LIFECYCLES} render={() => <DemoReactLifecycles />} />
+              <Route path={paths.DEMO_REACT_LOGIN} render={() => <DemoReactLogin />} />
+              <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} />
+              <Route path={paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA} render(() => <DemoReactMovieAppWithAlgolia />} />
+              <Route path={paths.DEMO_REACT_NOTES} render={() => <DemoReactNotes />} />
+              <Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} />
+              <Route path={paths.DEMO_REACT_PROFILE_DASHBOARD_UI} render(() => <DemoReactProfileDashboardUI />} />
+              <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQRCode />} />
+              <Route path={paths.DEMO_REACT_QUOTES} render(() => <DemoReactQuotes />} />
+              <Route path={paths.DEMO_REACT_SHOP_UI} render(() => <DemoReactShopUI />} />
+              <Route path={paths.DEMO_REACT_TABS_MENUS_CUSTOM} render(() => <DemoReactTabsMenusCustom />} />
+              <Route path={paths.DEMO_REACT_THEME_SWITCHER} render(() => <DemoReactThemeSwitcher />} />
+              <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render(() => <DemoReactWhatsAppClone />} />
+              <Route path={paths.DEMO_SKELETON_TEXT} render(() => <DemoSkeletonText />} />
+              <Route path={paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE} render(() => <DemoStickyBottomSheetExample />} />
+              <Route path={paths.DEMO_STORAGE_EXAMPLE} render(() => <DemoStorageExample />} />
+              <Route path={paths.DEMO_SWIPERJS_TUTORIAL} render(() => <DemoSwiperjsTutorial />} />
+              <Route path={paths.DEMO_WEATHER_APP_UI} render(() => <DemoWeatherAppUI />} />
+               */}
+
+            <Route path={paths.DEMO_2FA_EXAMPLE} render={() => <Demo2FaExample />} />
+
+            {/* have problemx` */}
+            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
 
             <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
 
             <Route path={paths.DEMO_BLOG_POST_UI} render={() => <DemoBlogPostUi />} />
             <Route path={paths.DEMO_CLUB_HOUSE} render={() => <DemoClubHouse />} />
             <Route path={paths.DEMO_DICTIONARY_APP} render={() => <DemoDictionaryApp />} />
-            <Route path={paths.DEMO_PINTEREST_FLOATING_TAB_BAR} render={() => <DemoPinterestFloatingTabBar />} />
+            <Route
+              path={paths.DEMO_PINTEREST_FLOATING_TAB_BAR}
+              render={() => <DemoPinterestFloatingTabBar />}
+            />
             <Route path={paths.DEMO_QR_SCANNER} render={() => <DemoQrScanner />} />
             <Route path={paths.DEMO_QUIZ_APP} render={() => <DemoQuizApp />} />
             <Route path={paths.DEMO_QUOTE_APP} render={() => <DemoQuoteApp />} />
             <Route path={paths.DEMO_REACT_OVERLAY_HOOKS} render={() => <DemoReactOverlayHooks />} />
             <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
-            <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} />
+
+            {/* TODO: resume DemoReactShop */}
+            {/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
+
             <Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
             <Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
             <Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />

03_source/mobile/src/pages/Demo2FaExample/AppPages/Tab1.jsx

@@ -0,0 +1,96 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+
+import { Geolocation } from '@capacitor/geolocation';
+import { useEffect, useState } from 'react';
+import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
+import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
+
+function Tab1() {
+  const router = useIonRouter();
+
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  useEffect(() => {
+    getCurrentPosition();
+  }, []);
+
+  const getCurrentPosition = async () => {
+    setCurrentWeather(false);
+    const coordinates = await Geolocation.getCurrentPosition();
+    getAddress(coordinates.coords);
+  };
+
+  const getAddress = async (coords) => {
+    const query = `${coords.latitude},${coords.longitude}`;
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
+    );
+
+    const data = await response.json();
+    console.log(data);
+    setCurrentWeather(data);
+  };
+
+  // const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>My Weather</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton onClick={() => getCurrentPosition()}>
+              <IonIcon icon={refreshOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Dashboard</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
+          <IonCol size="12">
+            <h4>Here's your location based weather</h4>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-1.5rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <SkeletonDashboard />
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab1;

03_source/mobile/src/pages/Demo2FaExample/AppPages/Tab2.jsx

@@ -0,0 +1,81 @@
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useState } from 'react';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
+
+function Tab2() {
+  const [search, setSearch] = useState('');
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  const performSearch = async () => {
+    getAddress(search);
+  };
+
+  const getAddress = async (city) => {
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
+    );
+    const data = await response.json();
+
+    if (data && data.current && data.location) {
+      setCurrentWeather(data);
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Search</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Search</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
+          <IonCol size="7">
+            <IonSearchbar
+              placeholder="Try 'London'"
+              animated
+              value={search}
+              onIonChange={(e) => setSearch(e.target.value)}
+            />
+          </IonCol>
+
+          <IonCol size="5">
+            <IonButton
+              expand="block"
+              className="ion-margin-start ion-margin-end"
+              onClick={performSearch}
+            >
+              Search
+            </IonButton>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-0.8rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <h3 className="ion-text-center">Your search result will appear here</h3>
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab2;

03_source/mobile/src/pages/Demo2FaExample/components/Keypad.module.scss

@@ -0,0 +1,5 @@
+.keypad {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

03_source/mobile/src/pages/Demo2FaExample/components/Keypad.tsx

@@ -0,0 +1,118 @@
+import { IonRow } from "@ionic/react";
+import styles from "./Keypad.module.scss";
+import KeypadButton from "./KeypadButton";
+
+const Keypad = (props: any): JSX.Element => {
+  const { activeIndex, handleClick, handleRemove, amount, correct } = props;
+
+  const keypadButtons = [
+    [
+      {
+        value: "1",
+        handleClick: () => handleClick(activeIndex, 1),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "2",
+        handleClick: () => handleClick(activeIndex, 2),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "3",
+        handleClick: () => handleClick(activeIndex, 3),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "4",
+        handleClick: () => handleClick(activeIndex, 4),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "5",
+        handleClick: () => handleClick(activeIndex, 5),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "6",
+        handleClick: () => handleClick(activeIndex, 6),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "7",
+        handleClick: () => handleClick(activeIndex, 7),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "8",
+        handleClick: () => handleClick(activeIndex, 8),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "9",
+        handleClick: () => handleClick(activeIndex, 9),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "Resend",
+        handleClick: () => handleClick(activeIndex, 1),
+        small: true,
+        remove: false,
+      },
+      {
+        value: "0",
+        handleClick: () => handleClick(activeIndex, 2),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "",
+        handleClick: () => handleRemove(),
+        small: true,
+        remove: true,
+      },
+    ],
+  ];
+
+  return (
+    <div className={`${styles.keypad}`}>
+      {keypadButtons.map((keypadRow, index) => {
+        const isDisabled = parseInt(activeIndex) === parseInt(amount);
+
+        return (
+          <IonRow key={`keypadRow_${index}`}>
+            {keypadRow.map((button, index2) => {
+              return (
+                <KeypadButton
+                  correct={correct}
+                  isDisabled={isDisabled}
+                  key={`keypadButton_${index2}`}
+                  value={button.value}
+                  handleClick={button.handleClick}
+                  small={button.small}
+                  remove={button.remove}
+                />
+              );
+            })}
+          </IonRow>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Keypad;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadButton.module.scss

@@ -0,0 +1,30 @@
+.logo {
+  height: 4rem;
+  width: auto;
+}
+
+.keypadButton {
+  --background: none;
+  --color: black;
+  font-size: 2rem;
+  font-weight: 700;
+  --outline: none;
+  --border: none;
+  --box-shadow: none;
+  padding: none;
+  margin: none;
+  --background-hover: rgb(245, 245, 245) !important;
+  --background-focused: rgb(245, 245, 245) !important;
+  --background-activated: rgb(245, 245, 245) !important;
+}
+
+.smallKeypadButton {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
+.keypad {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

03_source/mobile/src/pages/Demo2FaExample/components/KeypadButton.tsx

@@ -0,0 +1,31 @@
+import { IonButton, IonCol, IonIcon } from "@ionic/react";
+import { backspaceOutline } from "ionicons/icons";
+import styles from "./KeypadButton.module.scss";
+
+const KeypadButton = (props: any): JSX.Element => {
+  const {
+    small,
+    value,
+    remove,
+    handleClick,
+    isDisabled = false,
+    correct,
+  } = props;
+
+  return (
+    <IonCol size="4" className={styles.keypadButton}>
+      <IonButton
+        disabled={(!small || correct) && isDisabled}
+        className={`${styles.keypadButton} ${
+          small && styles.smallKeypadButton
+        }`}
+        onClick={handleClick}
+      >
+        {!remove && value}
+        {remove && <IonIcon icon={backspaceOutline} />}
+      </IonButton>
+    </IonCol>
+  );
+};
+
+export default KeypadButton;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInput.module.scss

@@ -0,0 +1,38 @@
+.keypadInput {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  font-size: 2.5rem;
+  width: 100%;
+  min-height: 2.5rem;
+  background-color: rgb(245, 245, 245);
+  border-radius: 4px;
+  color: rgb(207, 207, 207);
+  transition: 0.2s linear;
+}
+
+.active {
+  background-color: rgba(26, 150, 251, 0.2);
+  border: 0 !important;
+  color: white !important;
+  transition: 0.2s linear;
+}
+
+.filled {
+  color: rgb(151, 151, 151);
+  transition: 0.2s linear;
+}
+
+.incorrect {
+  background-color: rgba(251, 26, 26, 0.2);
+  color: rgb(218, 67, 67);
+  transition: 0.2s linear;
+}
+
+.correct {
+  background-color: rgba(26, 251, 120, 0.2);
+  color: rgb(67, 218, 112);
+  transition: 0.2s linear;
+}

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInput.tsx

@@ -0,0 +1,28 @@
+import { IonCol } from "@ionic/react";
+import styles from "./KeypadInput.module.scss";
+
+const KeypadInput = (props: any): JSX.Element => {
+  const {
+    value,
+    isActive = false,
+    isFilled = false,
+    incorrect,
+    correct,
+  } = props;
+
+  return (
+    <IonCol size="2">
+      <div
+        className={`${styles.keypadInput} ${isActive && styles.active} ${
+          isFilled && styles.filled
+        } ${incorrect && styles.incorrect} ${correct && styles.correct}`}
+        onClick={props.handleChange}
+      >
+        {value}
+        {!isFilled && "0"}
+      </div>
+    </IonCol>
+  );
+};
+
+export default KeypadInput;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInputs.tsx

@@ -0,0 +1,50 @@
+import { IonRow } from "@ionic/react";
+import { useEffect, useRef } from "react";
+import KeypadInput from "./KeypadInput";
+
+const KeypadInputs = (props: any): JSX.Element => {
+  const { values, activeIndex, incorrect, correct } = props;
+  const keypadRef = useRef<HTMLIonRowElement>(null);
+
+  useEffect(() => {
+    if (incorrect && keypadRef.current) {
+      keypadRef.current.classList.add("incorrect");
+
+      setTimeout(() => {
+        if (keypadRef.current) {
+          keypadRef.current.classList.remove("incorrect");
+        }
+      }, 1000);
+    }
+  }, [incorrect]);
+
+  useEffect(() => {
+    if (correct) {
+      if (keypadRef.current) {
+        keypadRef.current.classList.add("correct");
+      }
+    }
+  }, [correct]);
+
+  return (
+    <IonRow ref={keypadRef} className="ion-justify-content-center">
+      {values.map((value: string, index: number) => {
+        const isActive = parseInt(index.toString()) === parseInt(activeIndex);
+        const isFilled = value !== "" ? true : false;
+
+        return (
+          <KeypadInput
+            correct={correct}
+            incorrect={incorrect}
+            isFilled={isFilled}
+            isActive={isActive}
+            value={value}
+            placeholder="0"
+          />
+        );
+      })}
+    </IonRow>
+  );
+};
+
+export default KeypadInputs;

03_source/mobile/src/pages/Demo2FaExample/index.tsx

@@ -0,0 +1,21 @@
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
+
+import { Route, Redirect } from 'react-router';
+
+import Home from './pages/Home';
+
+function Demo2FaExample() {
+  return (
+    <IonTabs className="demo-2fa-example">
+      <IonRouterOutlet>
+        <Route exact path="/demo-2fa-example/home">
+          <Home />
+        </Route>
+
+        <Redirect exact path="/demo-2fa-example" to="/demo-2fa-example/home" />
+      </IonRouterOutlet>
+    </IonTabs>
+  );
+}
+
+export default Demo2FaExample;

03_source/mobile/src/pages/Demo2FaExample/pages/Home.module.scss

@@ -0,0 +1,30 @@
+.logo {
+  height: 4rem;
+  width: auto;
+}
+
+.incorrect {
+  color: rgb(218, 67, 67);
+}
+
+.successContainer {
+}
+
+.successText {
+  background-color: rgba(26, 251, 120, 0.2);
+  color: rgb(67, 218, 112);
+  padding: 1rem;
+}
+
+.successContinue {
+  font-weight: 700;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.successContinue ion-icon {
+  margin-top: 0.2rem;
+}

03_source/mobile/src/pages/Demo2FaExample/pages/Home.tsx

@@ -0,0 +1,135 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonPage,
+  IonRow,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { arrowForwardOutline, chevronBackOutline } from 'ionicons/icons';
+import styles from './Home.module.scss';
+import KeypadInputs from '../components/KeypadInputs';
+import Keypad from '../components/Keypad';
+import { JSX, useEffect, useRef, useState } from 'react';
+
+const Home = (): JSX.Element => {
+  const correctCode = [5, 9, 2, 5];
+  const [keypadValues, setKeypadValues] = useState(['', '', '', '']);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const successRef = useRef<HTMLIonRowElement>(null);
+
+  const [incorrect, setIncorrect] = useState(false);
+  const [correct, setCorrect] = useState(false);
+
+  const tempValues: { [key: string]: any } = {};
+
+  const handleClick = (index: number, value: any) => {
+    const stringKey = index.toString();
+    tempValues[stringKey] = value;
+
+    setKeypadValues(value);
+    setActiveIndex((activeIndex) => activeIndex + 1);
+  };
+
+  const handleRemove = () => {
+    const tempValues = [...keypadValues];
+    tempValues[activeIndex - 1] = '';
+
+    setKeypadValues(tempValues);
+    activeIndex > 0 && setActiveIndex((activeIndex) => activeIndex - 1);
+    setIncorrect(false);
+    setCorrect(false);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  useEffect(() => {
+    if (parseInt(activeIndex.toString()) === parseInt(keypadValues.length.toString())) {
+      var error = false;
+
+      keypadValues.forEach((value, index) => {
+        if (parseInt(value) !== parseInt(correctCode[index].toString())) {
+          error = true;
+          return false;
+        }
+      });
+
+      if (error) {
+        setIncorrect(true);
+      } else {
+        setCorrect(true);
+
+        setTimeout(() => {
+          if (successRef.current) {
+            successRef.current.classList.remove('hidden');
+            successRef.current.classList.add('success');
+          }
+        }, 900);
+      }
+    }
+  }, [activeIndex]);
+
+  return (
+    <IonPage>
+      <IonToolbar>
+        <IonHeader></IonHeader>
+
+        <IonButtons slot="start">
+          <IonButton shape={'round'} onClick={() => handleBackClick()}>
+            <IonIcon icon={chevronBackOutline} color="primary" />
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+      <IonContent fullscreen>
+        <IonGrid className="ion-text-center ion-padding-top">
+          <IonRow>
+            <IonCol size="12">
+              <IonImg src="/assets/icon/favicon.png" className={styles.logo} />
+              <h1>Verification required</h1>
+              <p>Enter your 4 digit verification code</p>
+            </IonCol>
+          </IonRow>
+
+          <IonRow ref={successRef} className="ion-justify-content-center hidden">
+            <IonCol size="12" className={styles.successContainer}>
+              <p className={styles.successText}>
+                Awesome! You may continue.
+                <br />
+                <span className={styles.successContinue}>
+                  Continue&nbsp;&nbsp;
+                  <IonIcon icon={arrowForwardOutline} />
+                </span>
+              </p>
+            </IonCol>
+          </IonRow>
+
+          <KeypadInputs
+            incorrect={incorrect}
+            correct={correct}
+            values={keypadValues}
+            activeIndex={activeIndex}
+          />
+          {incorrect && <p className={styles.incorrect}>Wrong code entered</p>}
+          <Keypad
+            handleRemove={handleRemove}
+            handleClick={handleClick}
+            activeIndex={activeIndex}
+            amount={keypadValues.length}
+            correct={correct}
+          />
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/Demo2FaExample/theme/variables.scss

@@ -0,0 +1,249 @@
+.demo-2fa-example {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  * {
+    font-family: 'Lato', sans-serif;
+  }
+
+  .hidden {
+    display: none;
+    transition: 0.2s linear;
+  }
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+
+  .incorrect {
+    -webkit-animation: incorrect-animation 0.9s both;
+    animation: incorrect-animation 0.9s both;
+  }
+
+  @-webkit-keyframes incorrect-animation {
+    0% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+      -webkit-transform: scale3d(1.25, 0.75, 1);
+      transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+      -webkit-transform: scale3d(0.75, 1.25, 1);
+      transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+      -webkit-transform: scale3d(1.15, 0.85, 1);
+      transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+      -webkit-transform: scale3d(0.95, 1.05, 1);
+      transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+      -webkit-transform: scale3d(1.05, 0.95, 1);
+      transform: scale3d(1.05, 0.95, 1);
+    }
+
+    100% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes incorrect-animation {
+    0% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+      -webkit-transform: scale3d(1.25, 0.75, 1);
+      transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+      -webkit-transform: scale3d(0.75, 1.25, 1);
+      transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+      -webkit-transform: scale3d(1.15, 0.85, 1);
+      transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+      -webkit-transform: scale3d(0.95, 1.05, 1);
+      transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+      -webkit-transform: scale3d(1.05, 0.95, 1);
+      transform: scale3d(1.05, 0.95, 1);
+    }
+
+    100% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  .correct {
+    -webkit-animation: correct-animation 1s ease-in both;
+    animation: correct-animation 1s ease-in both;
+  }
+
+  @-webkit-keyframes correct-animation {
+    0% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+
+    100% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes correct-animation {
+    0% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+
+    100% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 1;
+    }
+  }
+
+  .success {
+    -webkit-animation: success-animation 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: success-animation 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+
+  @-webkit-keyframes success-animation {
+    0% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 0;
+    }
+
+    100% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+  }
+
+  @keyframes success-animation {
+    0% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 0;
+    }
+
+    100% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+  }
+}

03_source/mobile/src/pages/DemoAccordionTutorial/components/Accordion.jsx

@@ -0,0 +1,29 @@
+import { IonAccordion, IonAccordionGroup, IonIcon, IonItem, IonLabel, IonList } from '@ionic/react';
+import { topics } from '../data';
+
+export const Accordion = () => {
+  return (
+    <IonAccordionGroup>
+      {topics.map((topic, index) => {
+        return (
+          <IonAccordion key={`accordion_${index}`} value={topic.header.toLowerCase()}>
+            <IonItem slot="header">
+              <IonIcon icon={topic.icon} color={topic.color} />
+              <IonLabel className="ion-padding-start">{topic.header}</IonLabel>
+            </IonItem>
+
+            <IonList slot="content">
+              {topic.options.map((option, index2) => {
+                return (
+                  <IonItem key={`option_${index}_${index2}`} routerLink={`/topics/${option.label}`}>
+                    <IonLabel>{option.label}</IonLabel>
+                  </IonItem>
+                );
+              })}
+            </IonList>
+          </IonAccordion>
+        );
+      })}
+    </IonAccordionGroup>
+  );
+};

03_source/mobile/src/pages/DemoAccordionTutorial/components/Accordion.tsx

@@ -0,0 +1,30 @@
+import { IonAccordion, IonAccordionGroup, IonIcon, IonItem, IonLabel, IonList } from '@ionic/react';
+import { topics } from '../data';
+import React from 'react';
+
+export const Accordion: React.FC = () => {
+  return (
+    <IonAccordionGroup>
+      {topics.map((topic: any, index: number) => {
+        return (
+          <IonAccordion key={`accordion_${index}`} value={topic.header.toLowerCase()}>
+            <IonItem slot="header">
+              <IonIcon icon={topic.icon} color={topic.color} />
+              <IonLabel className="ion-padding-start">{topic.header}</IonLabel>
+            </IonItem>
+
+            <IonList slot="content">
+              {topic.options.map((option: any, index2: number) => {
+                return (
+                  <IonItem key={`option_${index}_${index2}`} routerLink={`/topics/${option.label}`}>
+                    <IonLabel>{option.label}</IonLabel>
+                  </IonItem>
+                );
+              })}
+            </IonList>
+          </IonAccordion>
+        );
+      })}
+    </IonAccordionGroup>
+  );
+};

03_source/mobile/src/pages/DemoAccordionTutorial/components/CurrentWeather/WeatherProperty.tsx

@@ -0,0 +1,62 @@
+import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+import { useEffect, useState } from 'react';
+
+export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
+  const [property, setProperty] = useState(false);
+
+  const properties = {
+    wind: {
+      isIcon: false,
+      icon: '/assets/WeatherDemo/wind.png',
+      alt: 'wind',
+      label: 'Wind',
+      value: `${currentWeather.current.wind_mph}mph`,
+    },
+    feelsLike: {
+      isIcon: true,
+      icon: thermometerOutline,
+      alt: 'feels like',
+      label: 'Feels like',
+      value: `${currentWeather.current.feelslike_c}°C`,
+    },
+    indexUV: {
+      isIcon: true,
+      icon: sunnyOutline,
+      alt: 'index uv',
+      label: 'Index UV',
+      value: currentWeather.current.uv,
+    },
+    pressure: {
+      isIcon: true,
+      icon: pulseOutline,
+      alt: 'pressure',
+      label: 'Pressure',
+      value: `${currentWeather.current.pressure_mb} mbar`,
+    },
+  };
+
+  useEffect(() => {
+    setProperty(properties[type]);
+  }, [type]);
+
+  return (
+    <IonCol size="6">
+      <IonRow className="ion-justify-content-center ion-align-items-center">
+        <IonCol size="3">
+          {!property.isIcon && (
+            <img alt={property.alt} src={property.icon} height="32" width="32" />
+          )}
+          {property.isIcon && (
+            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
+          )}
+        </IonCol>
+
+        <IonCol size="9">
+          <IonCardSubtitle>{property.label}</IonCardSubtitle>
+          <IonNote>{property.value}</IonNote>
+        </IonCol>
+      </IonRow>
+    </IonCol>
+  );
+};

03_source/mobile/src/pages/DemoAccordionTutorial/components/CurrentWeather/index.tsx

@@ -0,0 +1,48 @@
+import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
+import { WeatherProperty } from './WeatherProperty';
+
+export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            {currentWeather.location.region},{' '}
+            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <img
+            alt="condition"
+            src={currentWeather.current.condition.icon.replace('//', 'https://')}
+          />
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          {currentWeather.current.temp_c}&#8451;
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <WeatherProperty type="wind" currentWeather={currentWeather} />
+            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
+            <WeatherProperty type="pressure" currentWeather={currentWeather} />
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/DemoAccordionTutorial/components/SkeletonDashboard/index.tsx

@@ -0,0 +1,117 @@
+import {
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonGrid,
+  IonIcon,
+  IonNote,
+  IonRow,
+  IonSkeletonText,
+  IonText,
+  IonThumbnail,
+} from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+
+export const SkeletonDashboard = () => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <IonThumbnail>
+            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
+          </IonThumbnail>
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Wind</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Feels like</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Index UV</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Pressure</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/DemoAccordionTutorial/data.js

@@ -0,0 +1,120 @@
+import { bicycleOutline, fastFoodOutline, filmOutline, gameControllerOutline, libraryOutline } from 'ionicons/icons';
+
+export const topics = [
+  {
+    header: 'Attractions',
+    color: 'primary',
+    icon: filmOutline,
+    options: [
+      {
+        label: 'Cinema',
+      },
+      {
+        label: 'Bowling Alley',
+      },
+      {
+        label: 'Crazy Golf',
+      },
+      {
+        label: 'Theme Park',
+      },
+    ],
+  },
+  {
+    header: 'Dining',
+    color: 'success',
+    icon: fastFoodOutline,
+    options: [
+      {
+        label: 'Breakfast & Brunch',
+      },
+      {
+        label: 'New American',
+      },
+      {
+        label: 'Sushi Bars',
+      },
+      {
+        label: 'Filipino Food',
+      },
+      {
+        label: 'Asian Fusion',
+      },
+      {
+        label: 'Ramen Houses',
+      },
+      {
+        label: 'Dinner Venues',
+      },
+    ],
+  },
+  {
+    header: 'Gaming',
+    color: 'warning',
+    icon: gameControllerOutline,
+    options: [
+      {
+        label: 'Xbox',
+      },
+      {
+        label: 'Playstation',
+      },
+      {
+        label: 'Nintendo Switch',
+      },
+      {
+        label: 'PC',
+      },
+      {
+        label: 'Mobile',
+      },
+      {
+        label: 'Dreamcast',
+      },
+    ],
+  },
+  {
+    header: 'Exercise',
+    color: 'secondary',
+    icon: bicycleOutline,
+    options: [
+      {
+        label: 'Yoga',
+      },
+      {
+        label: 'Pilates',
+      },
+      {
+        label: 'Weight Training',
+      },
+      {
+        label: 'Cardio',
+      },
+      {
+        label: 'Zumba',
+      },
+    ],
+  },
+  {
+    header: 'Education',
+    color: 'danger',
+    icon: libraryOutline,
+    options: [
+      {
+        label: 'School',
+      },
+      {
+        label: 'High School',
+      },
+      {
+        label: 'University Bachelors',
+      },
+      {
+        label: 'University Masters',
+      },
+      {
+        label: 'University pHD',
+      },
+    ],
+  },
+];

03_source/mobile/src/pages/DemoAccordionTutorial/data.ts

@@ -0,0 +1,126 @@
+import {
+  bicycleOutline,
+  fastFoodOutline,
+  filmOutline,
+  gameControllerOutline,
+  libraryOutline,
+} from 'ionicons/icons';
+
+export const topics: any = [
+  {
+    header: 'Attractions',
+    color: 'primary',
+    icon: filmOutline,
+    options: [
+      {
+        label: 'Cinema',
+      },
+      {
+        label: 'Bowling Alley',
+      },
+      {
+        label: 'Crazy Golf',
+      },
+      {
+        label: 'Theme Park',
+      },
+    ],
+  },
+  {
+    header: 'Dining',
+    color: 'success',
+    icon: fastFoodOutline,
+    options: [
+      {
+        label: 'Breakfast & Brunch',
+      },
+      {
+        label: 'New American',
+      },
+      {
+        label: 'Sushi Bars',
+      },
+      {
+        label: 'Filipino Food',
+      },
+      {
+        label: 'Asian Fusion',
+      },
+      {
+        label: 'Ramen Houses',
+      },
+      {
+        label: 'Dinner Venues',
+      },
+    ],
+  },
+  {
+    header: 'Gaming',
+    color: 'warning',
+    icon: gameControllerOutline,
+    options: [
+      {
+        label: 'Xbox',
+      },
+      {
+        label: 'Playstation',
+      },
+      {
+        label: 'Nintendo Switch',
+      },
+      {
+        label: 'PC',
+      },
+      {
+        label: 'Mobile',
+      },
+      {
+        label: 'Dreamcast',
+      },
+    ],
+  },
+  {
+    header: 'Exercise',
+    color: 'secondary',
+    icon: bicycleOutline,
+    options: [
+      {
+        label: 'Yoga',
+      },
+      {
+        label: 'Pilates',
+      },
+      {
+        label: 'Weight Training',
+      },
+      {
+        label: 'Cardio',
+      },
+      {
+        label: 'Zumba',
+      },
+    ],
+  },
+  {
+    header: 'Education',
+    color: 'danger',
+    icon: libraryOutline,
+    options: [
+      {
+        label: 'School',
+      },
+      {
+        label: 'High School',
+      },
+      {
+        label: 'University Bachelors',
+      },
+      {
+        label: 'University Masters',
+      },
+      {
+        label: 'University pHD',
+      },
+    ],
+  },
+];

03_source/mobile/src/pages/DemoAccordionTutorial/index.tsx

@@ -0,0 +1,56 @@
+import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+
+import { cloudOutline, searchOutline } from 'ionicons/icons';
+import { Route, Redirect } from 'react-router';
+
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
+
+import Topic from './pages/Topic';
+import Home from './pages/Home';
+
+import './style.scss';
+
+function DemoAccordionTutorial() {
+  return (
+    <IonTabs className="demo-accordion-tutorial">
+      <IonRouterOutlet>
+        {/*
+        <Route exact path="/demo-accordion-tutorial/tab1">
+          <Tab1 />
+        </Route>
+        <Route exact path="/demo-accordion-tutorial/tab2">
+          <Tab2 />
+        </Route>
+        */}
+
+        <Route exact path="/demo-accordion-tutorial/home">
+          <Home />
+        </Route>
+
+        <Route exact path="/demo-accordion-tutorial/topics/:topic">
+          <Topic />
+        </Route>
+
+        <Redirect exact path="/demo-accordion-tutorial" to="/demo-accordion-tutorial/home" />
+
+        {/* <Redirect exact path="/demo-accordion-tutorial" to="/demo-accordion-tutorial/tab1" /> */}
+      </IonRouterOutlet>
+
+      {/*
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="tab1" href="/demo-accordion-tutorial/tab1">
+          <IonIcon icon={cloudOutline} />
+          <IonLabel>Dashboard</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab2" href="/demo-accordion-tutorial/tab2">
+          <IonIcon icon={searchOutline} />
+          <IonLabel>Search</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+      */}
+    </IonTabs>
+  );
+}
+
+export default DemoAccordionTutorial;

03_source/mobile/src/pages/DemoAccordionTutorial/pages/Home.jsx

@@ -0,0 +1,97 @@
+import {
+  IonAccordion,
+  IonAccordionGroup,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { Accordion } from '../components/Accordion';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Home = () => {
+  const router = useIonRouter();
+
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Accordion</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Accordion</IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <Accordion />
+
+        {/* <IonAccordionGroup>
+          <IonAccordion>
+            <IonItem slot="header">
+              <IonLabel>Languages</IonLabel>
+            </IonItem>
+
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>English</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Spanish</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Italian</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+
+          <IonAccordion>
+            <IonItem slot="header">
+              <IonLabel>Languages 2</IonLabel>
+            </IonItem>
+
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>English</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Spanish</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Italian</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+        </IonAccordionGroup> */}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoAccordionTutorial/pages/Home.tsx

@@ -0,0 +1,97 @@
+import {
+  IonAccordion,
+  IonAccordionGroup,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { Accordion } from '../components/Accordion';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Home: React.FC = () => {
+  const router = useIonRouter();
+
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Accordion</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Accordion</IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <Accordion />
+
+        {/* <IonAccordionGroup>
+          <IonAccordion>
+            <IonItem slot="header">
+              <IonLabel>Languages</IonLabel>
+            </IonItem>
+
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>English</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Spanish</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Italian</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+
+          <IonAccordion>
+            <IonItem slot="header">
+              <IonLabel>Languages 2</IonLabel>
+            </IonItem>
+
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>English</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Spanish</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Italian</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+        </IonAccordionGroup> */}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoAccordionTutorial/pages/Topic.jsx

@@ -0,0 +1,39 @@
+import { IonBackButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonLabel, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
+import { useParams } from 'react-router';
+
+const Topic = () => {
+
+  const { topic } = useParams();
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+
+          <IonButtons slot="start">
+            <IonBackButton text="Topics" />
+          </IonButtons>
+
+          <IonTitle>{ topic }</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">{ topic }</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonGrid>
+          <IonRow>
+            <IonCol size="12">
+              <IonLabel>This is the page for the topic: { topic }.</IonLabel>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Topic;

03_source/mobile/src/pages/DemoAccordionTutorial/pages/Topic.tsx

@@ -0,0 +1,49 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonLabel,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useParams } from 'react-router';
+
+const Topic = () => {
+  const { topic } = useParams<{ topic: string }>();
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton text="Topics" />
+          </IonButtons>
+
+          <IonTitle>{topic}</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">{topic}</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonGrid>
+          <IonRow>
+            <IonCol size="12">
+              <IonLabel>This is the page for the topic: {topic}.</IonLabel>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Topic;

03_source/mobile/src/pages/DemoAccordionTutorial/style.scss

@@ -0,0 +1,237 @@
+.demo-accordion-tutorial {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  * {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+    body {
+      --ion-color-primary: #428cff;
+      --ion-color-primary-rgb: 66, 140, 255;
+      --ion-color-primary-contrast: #ffffff;
+      --ion-color-primary-contrast-rgb: 255, 255, 255;
+      --ion-color-primary-shade: #3a7be0;
+      --ion-color-primary-tint: #5598ff;
+
+      --ion-color-secondary: #50c8ff;
+      --ion-color-secondary-rgb: 80, 200, 255;
+      --ion-color-secondary-contrast: #ffffff;
+      --ion-color-secondary-contrast-rgb: 255, 255, 255;
+      --ion-color-secondary-shade: #46b0e0;
+      --ion-color-secondary-tint: #62ceff;
+
+      --ion-color-tertiary: #6a64ff;
+      --ion-color-tertiary-rgb: 106, 100, 255;
+      --ion-color-tertiary-contrast: #ffffff;
+      --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+      --ion-color-tertiary-shade: #5d58e0;
+      --ion-color-tertiary-tint: #7974ff;
+
+      --ion-color-success: #2fdf75;
+      --ion-color-success-rgb: 47, 223, 117;
+      --ion-color-success-contrast: #000000;
+      --ion-color-success-contrast-rgb: 0, 0, 0;
+      --ion-color-success-shade: #29c467;
+      --ion-color-success-tint: #44e283;
+
+      --ion-color-warning: #ffd534;
+      --ion-color-warning-rgb: 255, 213, 52;
+      --ion-color-warning-contrast: #000000;
+      --ion-color-warning-contrast-rgb: 0, 0, 0;
+      --ion-color-warning-shade: #e0bb2e;
+      --ion-color-warning-tint: #ffd948;
+
+      --ion-color-danger: #ff4961;
+      --ion-color-danger-rgb: 255, 73, 97;
+      --ion-color-danger-contrast: #ffffff;
+      --ion-color-danger-contrast-rgb: 255, 255, 255;
+      --ion-color-danger-shade: #e04055;
+      --ion-color-danger-tint: #ff5b71;
+
+      --ion-color-dark: #f4f5f8;
+      --ion-color-dark-rgb: 244, 245, 248;
+      --ion-color-dark-contrast: #000000;
+      --ion-color-dark-contrast-rgb: 0, 0, 0;
+      --ion-color-dark-shade: #d7d8da;
+      --ion-color-dark-tint: #f5f6f9;
+
+      --ion-color-medium: #989aa2;
+      --ion-color-medium-rgb: 152, 154, 162;
+      --ion-color-medium-contrast: #000000;
+      --ion-color-medium-contrast-rgb: 0, 0, 0;
+      --ion-color-medium-shade: #86888f;
+      --ion-color-medium-tint: #a2a4ab;
+
+      --ion-color-light: #222428;
+      --ion-color-light-rgb: 34, 36, 40;
+      --ion-color-light-contrast: #ffffff;
+      --ion-color-light-contrast-rgb: 255, 255, 255;
+      --ion-color-light-shade: #1e2023;
+      --ion-color-light-tint: #383a3e;
+    }
+
+    /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+    .ios body {
+      --ion-background-color: #000000;
+      --ion-background-color-rgb: 0, 0, 0;
+
+      --ion-text-color: #ffffff;
+      --ion-text-color-rgb: 255, 255, 255;
+
+      --ion-color-step-50: #0d0d0d;
+      --ion-color-step-100: #1a1a1a;
+      --ion-color-step-150: #262626;
+      --ion-color-step-200: #333333;
+      --ion-color-step-250: #404040;
+      --ion-color-step-300: #4d4d4d;
+      --ion-color-step-350: #595959;
+      --ion-color-step-400: #666666;
+      --ion-color-step-450: #737373;
+      --ion-color-step-500: #808080;
+      --ion-color-step-550: #8c8c8c;
+      --ion-color-step-600: #999999;
+      --ion-color-step-650: #a6a6a6;
+      --ion-color-step-700: #b3b3b3;
+      --ion-color-step-750: #bfbfbf;
+      --ion-color-step-800: #cccccc;
+      --ion-color-step-850: #d9d9d9;
+      --ion-color-step-900: #e6e6e6;
+      --ion-color-step-950: #f2f2f2;
+
+      --ion-item-background: #000000;
+
+      --ion-card-background: #1c1c1d;
+    }
+
+    .ios ion-modal {
+      --ion-background-color: var(--ion-color-step-100);
+      --ion-toolbar-background: var(--ion-color-step-150);
+      --ion-toolbar-border-color: var(--ion-color-step-250);
+    }
+
+    /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+    .md body {
+      --ion-background-color: #121212;
+      --ion-background-color-rgb: 18, 18, 18;
+
+      --ion-text-color: #ffffff;
+      --ion-text-color-rgb: 255, 255, 255;
+
+      --ion-border-color: #222222;
+
+      --ion-color-step-50: #1e1e1e;
+      --ion-color-step-100: #2a2a2a;
+      --ion-color-step-150: #363636;
+      --ion-color-step-200: #414141;
+      --ion-color-step-250: #4d4d4d;
+      --ion-color-step-300: #595959;
+      --ion-color-step-350: #656565;
+      --ion-color-step-400: #717171;
+      --ion-color-step-450: #7d7d7d;
+      --ion-color-step-500: #898989;
+      --ion-color-step-550: #949494;
+      --ion-color-step-600: #a0a0a0;
+      --ion-color-step-650: #acacac;
+      --ion-color-step-700: #b8b8b8;
+      --ion-color-step-750: #c4c4c4;
+      --ion-color-step-800: #d0d0d0;
+      --ion-color-step-850: #dbdbdb;
+      --ion-color-step-900: #e7e7e7;
+      --ion-color-step-950: #f3f3f3;
+
+      --ion-item-background: #1e1e1e;
+
+      --ion-toolbar-background: #1f1f1f;
+
+      --ion-tab-bar-background: #1f1f1f;
+
+      --ion-card-background: #1e1e1e;
+    }
+  }
+}

03_source/mobile/src/pages/DemoBankingUi/AppPages/Tab1.jsx

@@ -0,0 +1,96 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+
+import { Geolocation } from '@capacitor/geolocation';
+import { useEffect, useState } from 'react';
+import { SkeletonDashboard } from '../components/SkeletonDashboard';
+import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
+import { CurrentWeather } from '../components/CurrentWeather';
+
+function Tab1() {
+  const router = useIonRouter();
+
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  useEffect(() => {
+    getCurrentPosition();
+  }, []);
+
+  const getCurrentPosition = async () => {
+    setCurrentWeather(false);
+    const coordinates = await Geolocation.getCurrentPosition();
+    getAddress(coordinates.coords);
+  };
+
+  const getAddress = async (coords) => {
+    const query = `${coords.latitude},${coords.longitude}`;
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
+    );
+
+    const data = await response.json();
+    console.log(data);
+    setCurrentWeather(data);
+  };
+
+  // const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>My Weather</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton onClick={() => getCurrentPosition()}>
+              <IonIcon icon={refreshOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Dashboard</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
+          <IonCol size="12">
+            <h4>Here's your location based weather</h4>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-1.5rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <SkeletonDashboard />
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab1;

03_source/mobile/src/pages/DemoBankingUi/AppPages/Tab2.jsx

@@ -0,0 +1,81 @@
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useState } from 'react';
+import { CurrentWeather } from '../components/CurrentWeather';
+
+function Tab2() {
+  const [search, setSearch] = useState('');
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  const performSearch = async () => {
+    getAddress(search);
+  };
+
+  const getAddress = async (city) => {
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
+    );
+    const data = await response.json();
+
+    if (data && data.current && data.location) {
+      setCurrentWeather(data);
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Search</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Search</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
+          <IonCol size="7">
+            <IonSearchbar
+              placeholder="Try 'London'"
+              animated
+              value={search}
+              onIonChange={(e) => setSearch(e.target.value)}
+            />
+          </IonCol>
+
+          <IonCol size="5">
+            <IonButton
+              expand="block"
+              className="ion-margin-start ion-margin-end"
+              onClick={performSearch}
+            >
+              Search
+            </IonButton>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-0.8rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <h3 className="ion-text-center">Your search result will appear here</h3>
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab2;

03_source/mobile/src/pages/DemoBankingUi/components/CardSlide.jsx

@@ -0,0 +1,75 @@
+import { IonButton, IonCardSubtitle, IonCol, IonIcon, IonList, IonRow } from '@ionic/react';
+import DebitCard from './DebitCard';
+
+import styles from './CardSlide.module.css';
+import TransactionItem from './TransactionItem';
+import { addOutline, arrowRedoOutline } from 'ionicons/icons';
+import { formatBalance } from '../data/Utils';
+
+const CardSlide = (props) => {
+  const { index, card, profile } = props;
+
+  return (
+    <>
+      <IonRow className="ion-text-center">
+        <IonCol size="12">
+          <IonCardSubtitle color="medium">balance</IonCardSubtitle>
+          <IonCardSubtitle id={`slide_${index}_balance`} className={` ${styles.balance} animate__animated`}>
+            <span className={styles.poundSign}>£</span>
+            &nbsp;{formatBalance(card.balance)}
+            <IonButton
+              className={styles.addButton}
+              size="small"
+              style={{ '--background': card.color, '--background-focused': card.color, '--background-hover': card.color, '--background-activated': card.color }}
+              routerLink={`/add-transaction/${card.id}`}
+            >
+              <IonIcon icon={addOutline} />
+            </IonButton>
+          </IonCardSubtitle>
+        </IonCol>
+      </IonRow>
+      <IonRow id={`card_${index}_container`} className="animate__animated ion-text-center ion-justify-content-center">
+        <IonCol size="12">
+          <DebitCard key={index} {...card} profile={profile} />
+        </IonCol>
+      </IonRow>
+
+      <IonRow className={styles.heading}>
+        <IonCol size="12">
+          <h6>Transactions</h6>
+        </IonCol>
+      </IonRow>
+
+      {card.transactions.length > 0 && (
+        <IonRow id={`slide_${index}_transactions`} className="animate__animated">
+          <IonCol size="12">
+            <IonList className={styles.transactionList}>
+              {card.transactions.length > 0 &&
+                card.transactions
+                  .slice(0)
+                  .reverse()
+                  .map((transaction, index) => <TransactionItem key={`card_transaction_${index}`} {...transaction} color={card.color} />)}
+            </IonList>
+          </IonCol>
+        </IonRow>
+      )}
+
+      {card.transactions.length === 0 && (
+        <IonRow id={`slide_${index}_transactions`} className="animate__animated">
+          <IonCol size="12">
+            <h5>No transactions found</h5>
+            <IonButton
+              style={{ '--background': card.color, '--background-focused': card.color, '--background-hover': card.color, '--background-activated': card.color }}
+              routerLink={`/add-transaction/${card.id}`}
+            >
+              <IonIcon icon={arrowRedoOutline} />
+              &nbsp;Transfer funds
+            </IonButton>
+          </IonCol>
+        </IonRow>
+      )}
+    </>
+  );
+};
+
+export default CardSlide;

03_source/mobile/src/pages/DemoBankingUi/components/CardSlide.module.css

@@ -0,0 +1,51 @@
+.customSlide {
+  display: flex;
+  flex-direction: column;
+}
+
+.transactionList {
+  overflow: scroll;
+  width: 100vw;
+}
+
+.balance {
+  font-weight: 300;
+  font-size: 1.5rem;
+  color: black;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.poundSign {
+  font-weight: 800;
+  font-size: 1.2rem;
+}
+
+.heading h6 {
+  padding: 0;
+  margin: 0;
+  text-align: left !important;
+  float: left !important;
+  text-align: left !important;
+  color: rgb(124, 124, 124);
+  font-weight: 400;
+}
+
+.heading {
+  width: 83%;
+  padding: 0;
+  margin: 0;
+  margin-top: 0.75rem;
+}
+
+.addButton {
+  --border-radius: 500px !important;
+  width: fit-content !important;
+  margin-top: 0.45rem;
+  margin-left: 1rem;
+  opacity: 0.6;
+}

03_source/mobile/src/pages/DemoBankingUi/components/CurrentWeather/WeatherProperty.tsx

@@ -0,0 +1,62 @@
+import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+import { useEffect, useState } from 'react';
+
+export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
+  const [property, setProperty] = useState(false);
+
+  const properties = {
+    wind: {
+      isIcon: false,
+      icon: '/assets/WeatherDemo/wind.png',
+      alt: 'wind',
+      label: 'Wind',
+      value: `${currentWeather.current.wind_mph}mph`,
+    },
+    feelsLike: {
+      isIcon: true,
+      icon: thermometerOutline,
+      alt: 'feels like',
+      label: 'Feels like',
+      value: `${currentWeather.current.feelslike_c}°C`,
+    },
+    indexUV: {
+      isIcon: true,
+      icon: sunnyOutline,
+      alt: 'index uv',
+      label: 'Index UV',
+      value: currentWeather.current.uv,
+    },
+    pressure: {
+      isIcon: true,
+      icon: pulseOutline,
+      alt: 'pressure',
+      label: 'Pressure',
+      value: `${currentWeather.current.pressure_mb} mbar`,
+    },
+  };
+
+  useEffect(() => {
+    setProperty(properties[type]);
+  }, [type]);
+
+  return (
+    <IonCol size="6">
+      <IonRow className="ion-justify-content-center ion-align-items-center">
+        <IonCol size="3">
+          {!property.isIcon && (
+            <img alt={property.alt} src={property.icon} height="32" width="32" />
+          )}
+          {property.isIcon && (
+            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
+          )}
+        </IonCol>
+
+        <IonCol size="9">
+          <IonCardSubtitle>{property.label}</IonCardSubtitle>
+          <IonNote>{property.value}</IonNote>
+        </IonCol>
+      </IonRow>
+    </IonCol>
+  );
+};

03_source/mobile/src/pages/DemoBankingUi/components/CurrentWeather/index.tsx

@@ -0,0 +1,48 @@
+import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
+import { WeatherProperty } from './WeatherProperty';
+
+export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            {currentWeather.location.region},{' '}
+            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <img
+            alt="condition"
+            src={currentWeather.current.condition.icon.replace('//', 'https://')}
+          />
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          {currentWeather.current.temp_c}&#8451;
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <WeatherProperty type="wind" currentWeather={currentWeather} />
+            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
+            <WeatherProperty type="pressure" currentWeather={currentWeather} />
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/DemoBankingUi/components/DebitCard.jsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import styles from './DebitCard.module.css';
+
+const DebitCard = (props) => {
+  const { type, number, profile, expiry, secret, color } = props;
+  const [lastFourCardNumbers, setLastFourCardNumbers] = useState('****');
+
+  const cardClass = `card_${color}`;
+  const cardTypeLogo = type === 'visa' ? '/visa.png' : '/mastercard.png';
+
+  useEffect(() => {
+    var lastFourNumbers = number ? number.substr(number.length - 4) : '1234';
+    setLastFourCardNumbers(lastFourNumbers);
+  }, [number]);
+
+  return (
+    <div className={styles.card}>
+      <div className={`${styles.card__front} ${styles.card__part} ${styles[cardClass]}`}>
+        <img className={`${styles.card__front_chip} ${styles.card__square}`} src="/chip.png" alt="1" />
+        <img className={`${styles.card__front_square} ${styles.card__square}`} src="/ionicwhite.png" alt="1" />
+        <img className={`${styles.card__front_logo} ${styles.card__logo}`} src={cardTypeLogo} alt="2" />
+        <p className={styles.card_number}>**** **** **** {lastFourCardNumbers}</p>
+        <div className={styles.card__space_75}>
+          <span className={styles.card__label}>Card holder</span>
+          <p className={styles.card__info}>{`${profile.firstname} ${profile.surname}`}</p>
+        </div>
+        <div className={styles.card__space_25}>
+          <span className={styles.card__label}>Expires</span>
+          <p className={styles.card__info}>{expiry}</p>
+        </div>
+      </div>
+
+      <div className={`${styles.card__back} ${styles.card__part} ${styles[cardClass]}`}>
+        <div className={styles.card__black_line}></div>
+        <div className={styles.card__back_content}>
+          <div className={styles.card__secret}>
+            <p className={styles.card__secret__last}>{secret}</p>
+          </div>
+
+          <img className={`${styles.card__back_square} ${styles.card__square}`} src="/ionicwhite.png" alt="3" />
+          <img className={`${styles.card__back_logo} ${styles.card__logo}`} src={cardTypeLogo} alt="5" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DebitCard;

03_source/mobile/src/pages/DemoBankingUi/components/DebitCard.module.css

@@ -0,0 +1,188 @@
+@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i');
+
+.card {
+  box-sizing: border-box;
+  font-family: 'Space Mono', monospace;
+  margin: 0 auto;
+}
+
+.title {
+  margin-bottom: 30px;
+  color: #162969;
+}
+
+.card {
+  width: 320px;
+  height: 190px;
+  -webkit-perspective: 600px;
+  -moz-perspective: 600px;
+  perspective: 600px;
+}
+
+.card__part {
+  box-shadow: 1px 1px #aaa3a3;
+  top: 0;
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  display: inline-block;
+  width: 320px;
+  height: 190px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  border-radius: 8px;
+
+  -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -ms-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+}
+
+.card_orange {
+  background: linear-gradient(to right bottom, #fd696b, #fa616e, #f65871, #c74261, #d62158);
+}
+
+.card_blue {
+  background: linear-gradient(to right bottom, #699dfd, #61b5fa, #58aff6, #4b86c9, #2151d6);
+}
+
+.card_black {
+  background: linear-gradient(to right bottom, #292929, #363636, #555555, #444444, #0f0f0f);
+}
+
+.card_purple {
+  background: linear-gradient(to right bottom, #7a43df, #644897, #8964cf, #633cac, #512c96);
+}
+
+.card__front {
+  padding: 18px;
+  -webkit-transform: rotateY(0);
+  -moz-transform: rotateY(0);
+}
+
+.card__back {
+  padding: 18px 0;
+  -webkit-transform: rotateY(-180deg);
+  -moz-transform: rotateY(-180deg);
+}
+
+.card__black_line {
+  margin-top: 5px;
+  height: 38px;
+  background-color: #303030;
+}
+
+.card__logo {
+  height: 16px !important;
+}
+
+.card__front_chip {
+  left: 1.2rem;
+  height: 1.5rem !important;
+  position: absolute;
+}
+
+.card__front_logo {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+}
+
+.card__square {
+  border-radius: 5px;
+  height: 30px !important;
+}
+
+.card_number {
+  display: block;
+  width: 100%;
+  word-spacing: 4px;
+  font-size: 20px;
+  letter-spacing: 2px;
+  color: #fff;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+.card__space_75 {
+  width: 75%;
+  float: left;
+}
+
+.card__space_25 {
+  width: 25%;
+  float: left;
+}
+
+.card__label {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 1px;
+}
+
+.card__info {
+  margin-bottom: 0;
+  margin-top: 5px;
+  font-size: 16px;
+  line-height: 18px;
+  color: #fff;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.card__back_content {
+  padding: 15px 15px 0;
+}
+.card__secret__last {
+  color: #303030;
+  text-align: right;
+  margin: 0;
+  font-size: 14px;
+}
+
+.card__secret {
+  padding: 5px 12px;
+  background-color: #fff;
+  position: relative;
+}
+
+.card__secret:before {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  height: calc(100% + 6px);
+  width: calc(100% - 42px);
+  border-radius: 4px;
+  background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
+}
+
+.card__back_logo {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+}
+
+.card__back_square {
+  position: absolute;
+  bottom: 15px;
+  left: 15px;
+}
+
+.card:hover .card__front {
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+}
+
+.card:hover .card__back {
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+}

03_source/mobile/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx

@@ -0,0 +1,118 @@
+import {
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonGrid,
+  IonIcon,
+  IonNote,
+  IonRow,
+  IonSkeletonText,
+  IonText,
+  IonThumbnail,
+} from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+import React from 'react';
+
+export const SkeletonDashboard = (): React.JSX.Element => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <IonThumbnail>
+            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
+          </IonThumbnail>
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Wind</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Feels like</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Index UV</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Pressure</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/DemoBankingUi/components/TransactionItem.jsx

@@ -0,0 +1,56 @@
+import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
+import { formatBalance } from '../data/Utils';
+import styles from './TransactionItem.module.css';
+
+const TransactionItem = (props) => {
+  const { name, amount, deposit, color } = props;
+
+  const getContactNameInitials = (contactName) => {
+    var nameInitials = '';
+
+    if (contactName && contactName !== '' && contactName !== undefined) {
+      const nameParts = contactName && contactName.split(' ');
+
+      if (nameParts) {
+        if (nameParts[0].charAt(0).match(/^[a-z]+$/i)) {
+          nameInitials += nameParts[0].charAt(0).toUpperCase();
+        }
+
+        if (nameParts[1]) {
+          if (nameParts[1].charAt(0).match(/^[a-z]+$/i)) {
+            nameInitials += nameParts[1].charAt(0).toUpperCase();
+          }
+        } else {
+          nameInitials += nameParts[0].charAt(1).toUpperCase();
+        }
+      }
+    }
+
+    return nameInitials;
+  };
+
+  return (
+    <IonItem lines="full" detail={false} className={`item-text-wrap ion-text-wrap ${styles.transactionItem}`}>
+      <div className={styles.transactionItemContent}>
+        <IonAvatar slot="start">
+          <div style={{ borderColor: 'grey', color: 'grey' }} className={styles.avatarImage}>
+            {getContactNameInitials(name)}
+          </div>
+        </IonAvatar>
+
+        <IonLabel className={`ion-text-wrap ${styles.transactionContent}`}>
+          <h2>{name}</h2>
+        </IonLabel>
+
+        <IonLabel className={`ion-text-wrap ${styles.transactionContent}`}>
+          <h4 className={deposit ? styles.green : styles.red}>
+            {deposit ? '+' : '-'}
+            &pound;{formatBalance(amount)}
+          </h4>
+        </IonLabel>
+      </div>
+    </IonItem>
+  );
+};
+
+export default TransactionItem;

03_source/mobile/src/pages/DemoBankingUi/components/TransactionItem.module.css

@@ -0,0 +1,48 @@
+.avatarImage {
+  /* background-color: var(--ion-color); */
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 500px;
+  color: black;
+  font-size: 1.3rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  padding: 0.5rem !important;
+  border: 2px solid rgb(44, 44, 44);
+  margin-top: 0.2rem;
+}
+
+.transactionItem {
+  flex-direction: row;
+  padding: 0;
+  margin: 0;
+}
+
+.transactionItemContent {
+  padding-left: 3rem;
+  padding-right: 2rem;
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: space-between;
+  width: 100%;
+  align-content: center;
+  align-items: center;
+  margin-top: -0.2rem;
+  margin-bottom: -0.2rem;
+}
+
+.transactionContent {
+  padding: 1rem;
+  text-align: left !important;
+}
+
+.green {
+  color: rgb(0, 165, 0);
+}
+
+.red {
+  color: red;
+}

03_source/mobile/src/pages/DemoBankingUi/data/AccountStore.js

@@ -0,0 +1,119 @@
+import { Store } from 'pullstate';
+
+export const AccountStore = new Store({
+  profile: {
+    firstname: 'Alan',
+    surname: 'Montgomery',
+    avatar: '/assets/DemoBankingUi/alan.jpg',
+  },
+  cards: [
+    {
+      id: 1,
+      type: 'visa',
+      description: 'Current Account',
+      number: '4859 2390 5635 7347',
+      expiry: '11/22',
+      secret: '483',
+      color: 'orange',
+      balance: '38.21',
+      transactions: [
+        {
+          name: 'Joe Bloggs',
+          amount: '2.50',
+          deposit: true,
+        },
+        {
+          name: 'Ocean Pratt',
+          amount: '12.99',
+          deposit: true,
+        },
+        {
+          name: 'Eugene Piper',
+          amount: '74.99',
+          deposit: false,
+        },
+        {
+          name: 'Emeli Potts',
+          amount: '4.20',
+          deposit: false,
+        },
+        {
+          name: 'Asia Wells',
+          amount: '12.73',
+          deposit: true,
+        },
+        {
+          name: 'Awais Brook',
+          amount: '17.10',
+          deposit: false,
+        },
+        {
+          name: 'Coen Haas',
+          amount: '9.99',
+          deposit: true,
+        },
+      ],
+    },
+    {
+      id: 2,
+      type: 'visa',
+      description: 'Savings',
+      number: '7349 1284 6790 4587',
+      expiry: '05/23',
+      secret: '590',
+      color: 'blue',
+      balance: '120.90',
+      transactions: [
+        {
+          name: 'Joe Bloggs',
+          amount: '120.90',
+          deposit: true,
+        },
+      ],
+    },
+    {
+      id: 3,
+      type: 'visa',
+      description: 'House Fund',
+      number: '6783 5692 4475 6682',
+      expiry: '01/24',
+      secret: '321',
+      color: 'purple',
+      balance: '0',
+      transactions: [],
+    },
+  ],
+});
+
+export const addCardToAccount = (newCard) => {
+  AccountStore.update((s) => {
+    s.cards = [...s.cards, newCard];
+  });
+};
+
+export const addTransactionToCard = (newTransaction, cardID) => {
+  AccountStore.update((s) => {
+    s.cards.find((c, index) =>
+      parseInt(c.id) === parseInt(cardID) ? (s.cards[index].transactions = [...s.cards[index].transactions, newTransaction]) : false
+    );
+  });
+
+  if (newTransaction.deposit) {
+    AccountStore.update((s) => {
+      s.cards.find((c, index) =>
+        parseInt(c.id) === parseInt(cardID) ? (s.cards[index].balance = parseFloat(s.cards[index].balance) + parseFloat(newTransaction.amount)) : false
+      );
+    });
+  } else {
+    AccountStore.update((s) => {
+      s.cards.find((c, index) =>
+        parseInt(c.id) === parseInt(cardID) ? (s.cards[index].balance = parseFloat(s.cards[index].balance) - parseFloat(newTransaction.amount)) : false
+      );
+    });
+  }
+};
+
+// export const removeFromCart = productIndex => {
+
+//     AccountStore.update(s => { s.product_ids.splice(productIndex, 1) });
+// }

03_source/mobile/src/pages/DemoBankingUi/data/CardStore.js

@@ -0,0 +1,6 @@
+import { Store } from 'pullstate';
+
+export const CardStore = new Store({
+  card_colors: ['orange', 'black', 'blue', 'purple'],
+  card_types: ['visa', 'mastercard'],
+});

03_source/mobile/src/pages/DemoBankingUi/data/Utils.js

@@ -0,0 +1,9 @@
+export const formatBalance = (balance) => {
+  var formatter = new Intl.NumberFormat('en-GB', {
+    // style: 'currency',
+    currency: 'GBP',
+    minimumFractionDigits: 2,
+  });
+
+  return formatter.format(balance);
+};

03_source/mobile/src/pages/DemoBankingUi/index.tsx

@@ -0,0 +1,42 @@
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
+
+import { Route, Redirect } from 'react-router';
+
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
+
+import Home from './pages/Home';
+import Account from './pages/Account';
+import AddCard from './pages/AddCard';
+import AddTransaction from './pages/AddTransaction';
+
+import './style.scss';
+import React from 'react';
+
+function DemoBankingUi(): React.JSX.Element {
+  return (
+    <IonTabs className="demo-banking-ui">
+      <IonRouterOutlet>
+        <Route path="/demo-banking-ui/home" exact={true}>
+          <Home />
+        </Route>
+
+        <Route path="/demo-banking-ui/account" exact={true}>
+          <Account />
+        </Route>
+
+        <Route path="/demo-banking-ui/account/add-card" exact={true}>
+          <AddCard />
+        </Route>
+
+        <Route path="/demo-banking-ui/add-transaction/:card_id" exact={true}>
+          <AddTransaction />
+        </Route>
+
+        <Redirect exact path="/demo-banking-ui" to="/demo-banking-ui/home" />
+      </IonRouterOutlet>
+    </IonTabs>
+  );
+}
+
+export default DemoBankingUi;

03_source/mobile/src/pages/DemoBankingUi/pages/Account.jsx

@@ -0,0 +1,95 @@
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import styles from './Account.module.css';
+import { AccountStore } from '../data/AccountStore';
+import { addOutline, logOutOutline } from 'ionicons/icons';
+import { formatBalance } from '../data/Utils';
+
+const Account = () => {
+  const cards = AccountStore.useState((s) => s.cards);
+  const profile = AccountStore.useState((s) => s.profile);
+
+  return (
+    <IonPage className={styles.accountPage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton color="dark" />
+          </IonButtons>
+
+          <IonTitle>Account</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton>
+              <IonIcon color="dark" icon={logOutOutline} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonGrid>
+          <IonRow className="ion-text-center ion-justify-content-center">
+            <IonCol size="4" className="animate__animated animate__fadeInTopLeft animate__faster">
+              <img src={profile.avatar} className={styles.avatar} alt="account avatar" />
+            </IonCol>
+          </IonRow>
+
+          <IonRow className={`ion-no-margin ion-text-center ion-justify-content-center ${styles.profileDetails}`}>
+            <IonCol size="12">
+              <h5>{`${profile.firstname} ${profile.surname}`}</h5>
+              <h6>{cards.length} current cards</h6>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonButton color="primary" routerLink="/account/add-card" routerDirection="forward">
+                <IonIcon icon={addOutline} />
+                Add Card
+              </IonButton>
+            </IonCol>
+          </IonRow>
+
+          <div className="ion-margin-top">
+            {cards.map((card, index) => {
+              return (
+                <IonRow key={`smallCard_${index}`} className="animate__animated animate__fadeInLeft animate__faster">
+                  <IonCol size="12">
+                    <IonItem className={styles.cardItem} detail={false} lines="none">
+                      <div className={styles.smallCard} style={{ backgroundColor: card.color }}></div>
+
+                      <IonLabel className={`ion-text-left ${styles.cardDescription}`}>
+                        <h4>{card.description}</h4>
+                      </IonLabel>
+
+                      <IonLabel className="ion-text-right">
+                        <h4>&pound;{formatBalance(card.balance)}</h4>
+                      </IonLabel>
+                    </IonItem>
+                  </IonCol>
+                </IonRow>
+              );
+            })}
+          </div>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Account;

03_source/mobile/src/pages/DemoBankingUi/pages/Account.module.css

@@ -0,0 +1,54 @@
+.accountPage ion-toolbar {
+  --border-style: none;
+  --padding-top: 1rem;
+  --padding-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.avatar {
+  border-radius: 500px;
+  border: 3px solid var(--ion-color-primary);
+  padding: 0.2rem;
+}
+
+.profileDetails {
+}
+
+.profileDetails h6,
+.profileDetails h5 {
+  margin: 0;
+  padding: 0;
+}
+
+.profileDetails h6 {
+  color: var(--ion-color-medium);
+}
+
+.cards {
+  /* margin-top:  */
+}
+
+.smallCard {
+  width: 15%;
+  height: 80%;
+  border-radius: 5px;
+  opacity: 0.7;
+}
+
+.cardDescription {
+  padding-left: 1.5rem;
+}
+
+.cardDescription h4 {
+  font-weight: 400;
+}
+
+.cardItem {
+  --background: rgb(246, 246, 246);
+  --border-radius: 5px;
+  --padding-start: 1rem;
+  --padding-end: 1rem;
+  --padding-top: 0.5rem;
+  --padding-bottom: 0.5rem;
+}

03_source/mobile/src/pages/DemoBankingUi/pages/AddCard.jsx

@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonRow,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import styles from './Account.module.css';
+import DebitCard from '../components/DebitCard';
+import { AccountStore, addCardToAccount } from '../data/AccountStore';
+import { CardStore } from '../data/CardStore';
+import { addOutline, timerOutline } from 'ionicons/icons';
+import { useHistory } from 'react-router';
+
+const AddCard = () => {
+  const cards = AccountStore.useState((s) => s.cards);
+  const cardTypes = CardStore.useState((s) => s.card_types);
+  const cardColors = CardStore.useState((s) => s.card_colors);
+  const profile = AccountStore.useState((s) => s.profile);
+
+  const [cardType, setCardType] = useState(cardTypes[0]);
+  const [cardColor, setCardColor] = useState(cardColors[0]);
+  const [cardDescription, setCardDescription] = useState('');
+  const [cardNumber, setCardNumber] = useState('1234 1234 1234 1234');
+  const [cardSecret, setCardSecret] = useState('123');
+  const [cardExpiry, setCardExpiry] = useState('01/22');
+  const [cardBalance, setCardBalance] = useState(0);
+
+  const history = useHistory();
+  const [adding, setAdding] = useState(false);
+
+  const addCard = async () => {
+    setAdding(true);
+
+    const newCard = {
+      id: cards.length + 1,
+      type: cardType,
+      color: cardColor,
+      description: cardDescription,
+      number: cardNumber,
+      secret: cardSecret,
+      expiry: cardExpiry,
+      balance: cardBalance,
+      transactions: [
+        {
+          name: 'Starting Balance',
+          amount: cardBalance,
+          deposit: true,
+        },
+      ],
+    };
+
+    await addCardToAccount(newCard);
+
+    setTimeout(() => {
+      setAdding(false);
+      history.goBack();
+    }, 500);
+  };
+
+  return (
+    <IonPage className={styles.accountPage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton color="dark" />
+          </IonButtons>
+
+          <IonTitle>Add Card</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonGrid>
+          <IonRow className="animate__animated animate__fadeInTopLeft animate__faster ion-justify-content-center ion-text-center">
+            <IonCol size="12" className="ion-justify-content-center ion-text-center">
+              <DebitCard color={cardColor} type={cardType} expiry={cardExpiry} number={cardNumber} secret={cardSecret} profile={profile} />
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-padding-top">
+            <IonCol size="6">
+              <IonItem lines="full">
+                <IonLabel position="floating">Card Type</IonLabel>
+                <IonSelect placeholder="Select type" value={cardType} onIonChange={(e) => setCardType(e.currentTarget.value)}>
+                  {cardTypes.map((option, index) => {
+                    return (
+                      <IonSelectOption key={index} value={option}>
+                        {option.toUpperCase()}
+                      </IonSelectOption>
+                    );
+                  })}
+                </IonSelect>
+              </IonItem>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonItem lines="full">
+                <IonLabel position="floating">Card Color</IonLabel>
+                <IonSelect placeholder="Select color" value={cardColor} onIonChange={(e) => setCardColor(e.currentTarget.value)}>
+                  {cardColors.map((option, index) => {
+                    return (
+                      <IonSelectOption key={index} value={option}>
+                        {option.toUpperCase()}
+                      </IonSelectOption>
+                    );
+                  })}
+                </IonSelect>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="6">
+              <IonItem lines="full">
+                <IonLabel position="floating">Card Name</IonLabel>
+                <IonInput
+                  type="text"
+                  inputmode="text"
+                  placeholder="Card name"
+                  value={cardDescription}
+                  onIonChange={(e) => setCardDescription(e.currentTarget.value)}
+                />
+              </IonItem>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonItem lines="full">
+                <IonLabel position="floating">Starting Balance</IonLabel>
+                <IonInput type="text" inputmode="text" placeholder="0" value={cardBalance} onIonChange={(e) => setCardBalance(e.currentTarget.value)} />
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonItem lines="full">
+                <IonLabel position="floating">Card Number</IonLabel>
+                <IonInput
+                  type="text"
+                  inputmode="text"
+                  placeholder="**** **** **** ****"
+                  value={cardNumber}
+                  onIonChange={(e) => setCardNumber(e.currentTarget.value)}
+                />
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="6">
+              <IonItem lines="full">
+                <IonLabel position="floating">Card Expiry</IonLabel>
+                <IonInput type="text" inputmode="text" placeholder="01/22" value={cardExpiry} onIonChange={(e) => setCardExpiry(e.currentTarget.value)} />
+              </IonItem>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonItem lines="full">
+                <IonLabel position="floating">Card Secret</IonLabel>
+                <IonInput type="text" inputmode="text" placeholder="123" value={cardSecret} onIonChange={(e) => setCardSecret(e.currentTarget.value)} />
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonButton
+                style={{ '--background': cardColor, '--background-focused': cardColor, '--background-hover': cardColor, '--background-activated': cardColor }}
+                expand="block"
+                disabled={adding}
+                onClick={addCard}
+              >
+                {!adding && (
+                  <>
+                    <IonIcon icon={addOutline} />
+                    &nbsp; Add Card
+                  </>
+                )}
+
+                {adding && (
+                  <>
+                    <IonIcon icon={timerOutline} />
+                    &nbsp; Adding...
+                  </>
+                )}
+              </IonButton>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AddCard;

03_source/mobile/src/pages/DemoBankingUi/pages/AddTransaction.jsx

@@ -0,0 +1,165 @@
+import { useState } from 'react';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonRow,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+  useIonViewWillEnter,
+} from '@ionic/react';
+import styles from './Account.module.css';
+import DebitCard from '../components/DebitCard';
+import { AccountStore, addCardToAccount, addTransactionToCard } from '../data/AccountStore';
+import { CardStore } from '../data/CardStore';
+import { addOutline, timerOutline } from 'ionicons/icons';
+import { useHistory, useParams } from 'react-router';
+
+const AddTransaction = () => {
+  const cards = AccountStore.useState((s) => s.cards);
+  const profile = AccountStore.useState((s) => s.profile);
+
+  const [cardID, setCardID] = useState(false);
+  const [card, setCard] = useState({});
+  const [transactionName, setTransactionName] = useState('Test Transaction');
+  const [transactionAmount, setTransactionAmount] = useState(0);
+  const [transactionDeposit, setTransactionDeposit] = useState(false);
+
+  const history = useHistory();
+  const params = useParams();
+  const [adding, setAdding] = useState(false);
+
+  useIonViewWillEnter(() => {
+    const tempCardID = params.card_id;
+    const tempCard = cards.filter((c) => parseInt(c.id) === parseInt(tempCardID))[0];
+    setCardID(tempCardID);
+    setCard(tempCard);
+  });
+
+  const addTransaction = async () => {
+    setAdding(true);
+
+    const newTransaction = {
+      name: transactionName,
+      amount: transactionAmount,
+      deposit: transactionDeposit,
+    };
+
+    await addTransactionToCard(newTransaction, cardID);
+
+    setTimeout(() => {
+      setAdding(false);
+      history.goBack();
+    }, 500);
+  };
+
+  return (
+    <IonPage className={styles.accountPage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton color="dark" />
+          </IonButtons>
+
+          <IonTitle>Add Transaction</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonGrid>
+          <IonRow className="animate__animated animate__fadeInTopLeft animate__faster ion-justify-content-center ion-text-center">
+            <IonCol size="12" className="ion-justify-content-center ion-text-center">
+              <DebitCard {...card} profile={profile} />
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="6">
+              <IonItem lines="full">
+                <IonLabel position="floating">Name</IonLabel>
+                <IonInput
+                  type="text"
+                  inputmode="text"
+                  placeholder="Transaction name"
+                  value={transactionName}
+                  onIonChange={(e) => setTransactionName(e.currentTarget.value)}
+                />
+              </IonItem>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonItem lines="full">
+                <IonLabel position="floating">Amount</IonLabel>
+                <IonInput
+                  type="text"
+                  inputmode="text"
+                  placeholder="0"
+                  value={transactionAmount}
+                  onIonChange={(e) => setTransactionAmount(e.currentTarget.value)}
+                />
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonItem lines="full">
+                <IonLabel>Deposit?</IonLabel>
+                <IonToggle
+                  style={{ '--background-checked': card.color }}
+                  slot="end"
+                  value={transactionDeposit}
+                  onIonChange={(e) => setTransactionDeposit(e.currentTarget.checked)}
+                />
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonButton
+                style={{
+                  '--background': card.color,
+                  '--background-focused': card.color,
+                  '--background-hover': card.color,
+                  '--background-activated': card.color,
+                }}
+                expand="block"
+                disabled={adding}
+                onClick={addTransaction}
+              >
+                {!adding && (
+                  <>
+                    <IonIcon icon={addOutline} />
+                    &nbsp; Add Transaction
+                  </>
+                )}
+
+                {adding && (
+                  <>
+                    <IonIcon icon={timerOutline} />
+                    &nbsp; Adding...
+                  </>
+                )}
+              </IonButton>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AddTransaction;

03_source/mobile/src/pages/DemoBankingUi/pages/Home.jsx

@@ -0,0 +1,146 @@
+import { useRef, useState } from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+  useIonViewDidEnter,
+} from '@ionic/react';
+import styles from './Home.module.css';
+import { AccountStore } from '../data/AccountStore';
+import CardSlide from '../components/CardSlide';
+import { chevronBackOutline, searchOutline } from 'ionicons/icons';
+
+// Import Swiper React components
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Import Swiper styles
+// import 'swiper/swiper.scss';
+import 'swiper/css';
+
+import stylesS from './Home.module.scss';
+
+const Home = () => {
+  const cards = AccountStore.useState((s) => s.cards);
+  const profile = AccountStore.useState((s) => s.profile);
+
+  const [pageTitle, setPageTitle] = useState(cards[0].description);
+  const [mainColor, setMainColor] = useState(cards[0].color);
+  const [slideSpace, setSlideSpace] = useState(10);
+
+  const slidesRef = useRef(null);
+
+  useIonViewDidEnter(() => {
+    setSlideSpace(0);
+  });
+
+  const changeSlide = async (e) => {
+    const swiper = e;
+    const swiperIndex = swiper.activeIndex;
+
+    setPageTitle(cards[swiperIndex].description);
+    setMainColor(cards[swiperIndex].color);
+
+    document.getElementById(`slide_${swiperIndex}_balance`).classList.add('animate__headShake');
+
+    setTimeout(() => {
+      document
+        .getElementById(`slide_${swiperIndex}_balance`)
+        .classList.remove('animate__headShake');
+    }, 1000);
+  };
+
+  const manageTouch = async (touched, e) => {
+    const swiper = e;
+    const swiperIndex = swiper.activeIndex;
+
+    if (touched) {
+      document
+        .getElementById(`slide_${swiperIndex}_transactions`)
+        .classList.add('animate__fadeOut');
+    } else {
+      document
+        .getElementById(`slide_${swiperIndex}_transactions`)
+        .classList.remove('animate__fadeOut');
+      document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeIn');
+    }
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage className={stylesS.homePage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            {/*  */}
+            <IonButton
+              //
+              routerLink="/demo-banking-ui/account"
+              className={stylesS.toolbarAvatar}
+            >
+              <img
+                alt="toolbar avatar"
+                className={stylesS.toolbarAvatarImage}
+                src={profile.avatar}
+              />
+            </IonButton>
+          </IonButtons>
+
+          <IonTitle>{pageTitle}</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+            {/*  */}
+            <IonButton>
+              <IonIcon
+                color="light"
+                icon={searchOutline}
+                style={{ backgroundColor: mainColor, borderRadius: '500px', padding: '0.2rem' }}
+              />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonGrid>
+          <Swiper
+            spaceBetween={slideSpace}
+            ref={slidesRef}
+            slidesPerView={1}
+            className={stylesS.cardsContainer}
+            onTouchStart={(e) => manageTouch(true, e)}
+            onTouchEnd={(e) => manageTouch(false, e)}
+            onSlideChange={(e) => changeSlide(e)}
+          >
+            {cards.map((card, index) => {
+              return (
+                <SwiperSlide
+                  key={`slide_${index}`}
+                  id={`slide_${index}`}
+                  className={stylesS.customSlide}
+                >
+                  <CardSlide key={index} card={card} profile={profile} index={index} />
+                </SwiperSlide>
+              );
+            })}
+          </Swiper>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoBankingUi/pages/Home.module.css

@@ -0,0 +1,38 @@
+.homePage ion-toolbar {
+  --border-style: none;
+  --padding-top: 1rem;
+  --padding-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.customSlide {
+  display: flex;
+  flex-direction: column;
+}
+
+.transactionList {
+  overflow: scroll;
+  width: 100vw;
+}
+
+.balance {
+  font-weight: 300;
+  font-size: 1.5rem;
+  color: black;
+}
+
+.poundSign {
+  font-weight: 800;
+  font-size: 1.2rem;
+}
+
+.toolbarAvatarImage {
+  border-radius: 500px;
+  height: 100%;
+  width: auto;
+}
+
+.helloworld {
+  background-color: gold;
+}

03_source/mobile/src/pages/DemoBankingUi/pages/Home.module.scss

@@ -0,0 +1,38 @@
+.homePage ion-toolbar {
+  --border-style: none;
+  --padding-top: 1rem;
+  --padding-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.customSlide {
+  display: flex;
+  flex-direction: column;
+}
+
+.transactionList {
+  overflow: scroll;
+  width: 100vw;
+}
+
+.balance {
+  font-weight: 300;
+  font-size: 1.5rem;
+  color: black;
+}
+
+.poundSign {
+  font-weight: 800;
+  font-size: 1.2rem;
+}
+
+.toolbarAvatarImage {
+  border-radius: 500px;
+  height: 32px;
+  width: auto;
+}
+
+.helloworld {
+  background-color: cyan;
+}

03_source/mobile/src/pages/DemoBankingUi/style.scss

@@ -0,0 +1,139 @@
+.demo-banking-ui {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  * {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+
+  ion-item {
+    --padding-start: 0;
+    --inner-padding-end: 0;
+  }
+
+  ion-label {
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+
+  ion-item h2 {
+    font-weight: 600;
+    margin: 0;
+  }
+
+  ion-item p {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 95%;
+  }
+
+  ion-item .date {
+    float: right;
+    align-items: center;
+    display: flex;
+  }
+
+  ion-item ion-icon {
+    color: #c9c9ca;
+  }
+
+  ion-item ion-note {
+    font-size: 15px;
+    margin-right: 8px;
+    font-weight: normal;
+  }
+
+  ion-item ion-note.md {
+    margin-right: 14px;
+  }
+
+  .dot {
+    display: block;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    align-self: start;
+    margin: 16px 10px 16px 16px;
+  }
+
+  .dot-unread {
+    background: var(--ion-color-primary);
+  }
+
+  ion-footer ion-title {
+    font-size: 11px;
+    font-weight: normal;
+  }
+}

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/AppPages/Tab1.jsx

@@ -0,0 +1,96 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+
+import { Geolocation } from '@capacitor/geolocation';
+import { useEffect, useState } from 'react';
+import { SkeletonDashboard } from '../components/SkeletonDashboard';
+import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
+import { CurrentWeather } from '../components/CurrentWeather';
+
+function Tab1() {
+  const router = useIonRouter();
+
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  useEffect(() => {
+    getCurrentPosition();
+  }, []);
+
+  const getCurrentPosition = async () => {
+    setCurrentWeather(false);
+    const coordinates = await Geolocation.getCurrentPosition();
+    getAddress(coordinates.coords);
+  };
+
+  const getAddress = async (coords) => {
+    const query = `${coords.latitude},${coords.longitude}`;
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
+    );
+
+    const data = await response.json();
+    console.log(data);
+    setCurrentWeather(data);
+  };
+
+  // const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>My Weather</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton onClick={() => getCurrentPosition()}>
+              <IonIcon icon={refreshOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Dashboard</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
+          <IonCol size="12">
+            <h4>Here's your location based weather</h4>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-1.5rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <SkeletonDashboard />
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab1;

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/AppPages/Tab2.jsx

@@ -0,0 +1,81 @@
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useState } from 'react';
+import { CurrentWeather } from '../components/CurrentWeather';
+
+function Tab2() {
+  const [search, setSearch] = useState('');
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  const performSearch = async () => {
+    getAddress(search);
+  };
+
+  const getAddress = async (city) => {
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
+    );
+    const data = await response.json();
+
+    if (data && data.current && data.location) {
+      setCurrentWeather(data);
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Search</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Search</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
+          <IonCol size="7">
+            <IonSearchbar
+              placeholder="Try 'London'"
+              animated
+              value={search}
+              onIonChange={(e) => setSearch(e.target.value)}
+            />
+          </IonCol>
+
+          <IonCol size="5">
+            <IonButton
+              expand="block"
+              className="ion-margin-start ion-margin-end"
+              onClick={performSearch}
+            >
+              Search
+            </IonButton>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-0.8rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <h3 className="ion-text-center">Your search result will appear here</h3>
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab2;

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/components/CurrentWeather/WeatherProperty.tsx

@@ -0,0 +1,62 @@
+import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+import { useEffect, useState } from 'react';
+
+export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
+  const [property, setProperty] = useState(false);
+
+  const properties = {
+    wind: {
+      isIcon: false,
+      icon: '/assets/WeatherDemo/wind.png',
+      alt: 'wind',
+      label: 'Wind',
+      value: `${currentWeather.current.wind_mph}mph`,
+    },
+    feelsLike: {
+      isIcon: true,
+      icon: thermometerOutline,
+      alt: 'feels like',
+      label: 'Feels like',
+      value: `${currentWeather.current.feelslike_c}°C`,
+    },
+    indexUV: {
+      isIcon: true,
+      icon: sunnyOutline,
+      alt: 'index uv',
+      label: 'Index UV',
+      value: currentWeather.current.uv,
+    },
+    pressure: {
+      isIcon: true,
+      icon: pulseOutline,
+      alt: 'pressure',
+      label: 'Pressure',
+      value: `${currentWeather.current.pressure_mb} mbar`,
+    },
+  };
+
+  useEffect(() => {
+    setProperty(properties[type]);
+  }, [type]);
+
+  return (
+    <IonCol size="6">
+      <IonRow className="ion-justify-content-center ion-align-items-center">
+        <IonCol size="3">
+          {!property.isIcon && (
+            <img alt={property.alt} src={property.icon} height="32" width="32" />
+          )}
+          {property.isIcon && (
+            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
+          )}
+        </IonCol>
+
+        <IonCol size="9">
+          <IonCardSubtitle>{property.label}</IonCardSubtitle>
+          <IonNote>{property.value}</IonNote>
+        </IonCol>
+      </IonRow>
+    </IonCol>
+  );
+};

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/components/CurrentWeather/index.tsx

@@ -0,0 +1,48 @@
+import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
+import { WeatherProperty } from './WeatherProperty';
+
+export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            {currentWeather.location.region},{' '}
+            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <img
+            alt="condition"
+            src={currentWeather.current.condition.icon.replace('//', 'https://')}
+          />
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          {currentWeather.current.temp_c}&#8451;
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <WeatherProperty type="wind" currentWeather={currentWeather} />
+            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
+            <WeatherProperty type="pressure" currentWeather={currentWeather} />
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/components/ExploreContainer.css

@@ -0,0 +1,24 @@
+.container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+.container a {
+  text-decoration: none;
+}

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/components/ExploreContainer.tsx

@@ -0,0 +1,14 @@
+import './ExploreContainer.css';
+
+interface ContainerProps { }
+
+const ExploreContainer: React.FC<ContainerProps> = () => {
+  return (
+    <div className="container">
+      <strong>Ready to create an app?</strong>
+      <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+    </div>
+  );
+};
+
+export default ExploreContainer;

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/components/MarkerInfoWindow.jsx

@@ -0,0 +1,54 @@
+import { IonButton, IonCol, IonContent, IonGrid, IonIcon, IonLabel, IonNote, IonRow } from '@ionic/react';
+import { globeOutline, heartOutline, locationOutline, navigateOutline, phonePortraitOutline } from 'ionicons/icons';
+
+export const MarkerInfoWindow = ({ marker, dismiss }) => {
+  return (
+    <IonContent>
+      <IonGrid className="ion-padding">
+        <IonRow className="ion-margin-bottom">
+          <IonCol size="12">
+            <IonLabel>
+              <h1>{marker.title}</h1>
+              <IonNote>{marker.description}</IonNote>
+            </IonLabel>
+          </IonCol>
+        </IonRow>
+
+        <IonRow className="ion-justify-content-start ion-align-items-center">
+          <IonCol size="2">
+            <IonIcon icon={locationOutline} color="primary" style={{ fontSize: '1.5rem' }} />
+          </IonCol>
+
+          <IonCol size="10">{marker.address}</IonCol>
+        </IonRow>
+
+        <IonRow className="ion-justify-content-start ion-align-items-center">
+          <IonCol size="2">
+            <IonIcon icon={globeOutline} color="primary" style={{ fontSize: '1.5rem' }} />
+          </IonCol>
+
+          <IonCol size="10">{marker.website}</IonCol>
+        </IonRow>
+
+        <IonRow className="ion-justify-content-start ion-align-items-center">
+          <IonCol size="2">
+            <IonIcon icon={phonePortraitOutline} color="primary" style={{ fontSize: '1.5rem' }} />
+          </IonCol>
+
+          <IonCol size="10">{marker.phone}</IonCol>
+        </IonRow>
+
+        <IonRow>
+          <IonButton>
+            <IonIcon icon={heartOutline} />
+            &nbsp; Favourite
+          </IonButton>
+          <IonButton>
+            <IonIcon icon={navigateOutline} />
+            &nbsp; Navigate
+          </IonButton>
+        </IonRow>
+      </IonGrid>
+    </IonContent>
+  );
+};

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/components/SkeletonDashboard/index.tsx

@@ -0,0 +1,117 @@
+import {
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonGrid,
+  IonIcon,
+  IonNote,
+  IonRow,
+  IonSkeletonText,
+  IonText,
+  IonThumbnail,
+} from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+
+export const SkeletonDashboard = () => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <IonThumbnail>
+            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
+          </IonThumbnail>
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Wind</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Feels like</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Index UV</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Pressure</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/data/index.js

@@ -0,0 +1,8 @@
+export const markers = [
+
+	{lat: 54.5258924, lng: -6.0812478, title: "Man Lee", description: "Chinese Takeaway", address: "122 Ballymacash Rd, Lisburn BT28 3EZ", website: "https://m.facebook.com/pages/Man-Lee/228415820694835", phone: "028 92 662853"},
+	{lat: 54.5097827, lng: -6.0572343, title: "Cam Hing", description: "Chinese Takeaway", address: "70 Longstone St, Lisburn BT28 1TR", website: "https://camhinglisbunr.com", phone: "028 92 677928"},
+	{lat: 54.5095162, lng: -6.0595896, title: "Golden Garden", description: "Chinese Takeaway", address: "140 Longstone St, Lisburn BT28 1TR", website: "https://golden-garden.business.site", phone: "028 92 671311"},
+	{lat: 54.5091808, lng: -6.0363902, title: "Pagoda", description: "Chinese Takeaway", address: "79 Sloan St, Lisburn BT27 5AG", website: "https://pagodalisburn.com", phone: "028 92 665289"},
+	{lat: 54.5989611, lng: -5.9972126, title: "Little Wing", description: "Pizzeria", address: "10 Ann St, Belfast BT1 4EF", website: "https://littlewingpizzeria.com", phone: "028 90 247000"}
+];

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/index.tsx

@@ -0,0 +1,34 @@
+import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+
+import { cloudOutline, searchOutline } from 'ionicons/icons';
+import { Route, Redirect } from 'react-router';
+
+import Tab1 from './AppPages/Tab1';
+import Tab2 from './AppPages/Tab2';
+
+import Home from './pages/Home';
+
+import './style.scss';
+
+function DemoCapacitorGoogleMapsTutorial() {
+  return (
+    <IonTabs>
+      <IonRouterOutlet>
+        <Route exact path="/demo-capacitor-google-maps-tutorial/tab1">
+          <Tab1 />
+        </Route>
+        <Route exact path="/demo-capacitor-google-maps-tutorial/tab2">
+          <Tab2 />
+        </Route>
+
+        <Route exact path="/demo-capacitor-google-maps-tutorial/home">
+          <Home />
+        </Route>
+
+        <Redirect exact path="/demo-capacitor-google-maps-tutorial" to="/demo-capacitor-google-maps-tutorial/home" />
+      </IonRouterOutlet>
+    </IonTabs>
+  );
+}
+
+export default DemoCapacitorGoogleMapsTutorial;

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/pages/Home.css

@@ -0,0 +1,5 @@
+capacitor-google-map {
+  display: inline-block;
+  width: 100%;
+  height: 86vh;
+}

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/pages/Home.jsx

@@ -0,0 +1,128 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonModal,
+  useIonRouter,
+  useIonViewWillEnter,
+} from '@ionic/react';
+import { useRef, useState } from 'react';
+import './Home.css';
+
+import { GoogleMap } from '@capacitor/google-maps';
+import { markers } from '../data';
+import { MarkerInfoWindow } from '../components/MarkerInfoWindow.jsx';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Home = () => {
+  //  This key is now dead!
+  //  Replace with your own :)
+  //  Remember to secure keys using env files or requesting from server!
+  //  This was for demo purposes :)
+  const key = 'AIzaSyBJwKYcub1yNcDd2V8iu4ZfGvDi4eW_fpU';
+  let newMap;
+  const mapRef = useRef(null);
+
+  const [selectedMarker, setSelectedMarker] = useState(null);
+
+  const [present, dismiss] = useIonModal(MarkerInfoWindow, {
+    marker: selectedMarker,
+  });
+
+  const modalOptions = {
+    initialBreakpoint: 0.4,
+    breakpoints: [0, 0.4],
+    backdropBreakpoint: 0,
+    onDidDismiss: () => dismiss(),
+  };
+
+  const [mapConfig, setMapConfig] = useState({
+    zoom: 10,
+    center: {
+      lat: markers[0].lat,
+      lng: markers[0].lng,
+    },
+  });
+
+  const markerClick = (marker) => {
+    setSelectedMarker(markers.filter((m) => m.lat === marker.latitude && m.lng === marker.longitude)[0]);
+    present(modalOptions);
+  };
+
+  const addMapMarker = async (marker) => {
+    await newMap.addMarker({
+      coordinate: {
+        lat: marker.lat,
+        lng: marker.lng,
+      },
+      title: marker.title,
+    });
+  };
+
+  const addMapMarkers = () => markers.forEach((marker) => addMapMarker(marker));
+
+  const createMap = async () => {
+    if (!mapRef.current) return;
+
+    newMap = await GoogleMap.create({
+      id: 'google-map',
+      element: mapRef.current,
+      apiKey: key,
+      config: mapConfig,
+    });
+
+    newMap.setOnMarkerClickListener((marker) => markerClick(marker));
+    addMapMarkers();
+  };
+
+  useIonViewWillEnter(() => createMap());
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Capacitor Google Map</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Capacitor Google Map</IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow>
+          <IonCol size="12">
+            <capacitor-google-map ref={mapRef} id="map"></capacitor-google-map>
+          </IonCol>
+        </IonRow>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoCapacitorGoogleMapsTutorial/style.scss

@@ -0,0 +1,2 @@
+.demo-capacitor-google-maps-tutorial {
+}

03_source/mobile/src/pages/DemoClubHouse/AppPages/Tab1.jsx

@@ -23,7 +23,7 @@ import { TalkCard } from '../components/TalkCard';
 import { useRef } from 'react';
 
 const Tab1 = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const talks = useStoreState(TalkStore, getTalks);
 
   const router = useIonRouter();

03_source/mobile/src/pages/DemoColorTutorial/AppPages/Tab1.jsx

@@ -0,0 +1,96 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+
+import { Geolocation } from '@capacitor/geolocation';
+import { useEffect, useState } from 'react';
+import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
+import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
+
+function Tab1() {
+  const router = useIonRouter();
+
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  useEffect(() => {
+    getCurrentPosition();
+  }, []);
+
+  const getCurrentPosition = async () => {
+    setCurrentWeather(false);
+    const coordinates = await Geolocation.getCurrentPosition();
+    getAddress(coordinates.coords);
+  };
+
+  const getAddress = async (coords) => {
+    const query = `${coords.latitude},${coords.longitude}`;
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
+    );
+
+    const data = await response.json();
+    console.log(data);
+    setCurrentWeather(data);
+  };
+
+  // const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>My Weather</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton onClick={() => getCurrentPosition()}>
+              <IonIcon icon={refreshOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Dashboard</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
+          <IonCol size="12">
+            <h4>Here's your location based weather</h4>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-1.5rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <SkeletonDashboard />
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab1;

03_source/mobile/src/pages/DemoColorTutorial/AppPages/Tab2.jsx

@@ -0,0 +1,81 @@
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useState } from 'react';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
+
+function Tab2() {
+  const [search, setSearch] = useState('');
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  const performSearch = async () => {
+    getAddress(search);
+  };
+
+  const getAddress = async (city) => {
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
+    );
+    const data = await response.json();
+
+    if (data && data.current && data.location) {
+      setCurrentWeather(data);
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Search</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Search</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
+          <IonCol size="7">
+            <IonSearchbar
+              placeholder="Try 'London'"
+              animated
+              value={search}
+              onIonChange={(e) => setSearch(e.target.value)}
+            />
+          </IonCol>
+
+          <IonCol size="5">
+            <IonButton
+              expand="block"
+              className="ion-margin-start ion-margin-end"
+              onClick={performSearch}
+            >
+              Search
+            </IonButton>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-0.8rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <h3 className="ion-text-center">Your search result will appear here</h3>
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab2;

03_source/mobile/src/pages/DemoColorTutorial/TestComponents/CurrentWeather/WeatherProperty.tsx

@@ -0,0 +1,62 @@
+import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+import { useEffect, useState } from 'react';
+
+export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
+  const [property, setProperty] = useState(false);
+
+  const properties = {
+    wind: {
+      isIcon: false,
+      icon: '/assets/WeatherDemo/wind.png',
+      alt: 'wind',
+      label: 'Wind',
+      value: `${currentWeather.current.wind_mph}mph`,
+    },
+    feelsLike: {
+      isIcon: true,
+      icon: thermometerOutline,
+      alt: 'feels like',
+      label: 'Feels like',
+      value: `${currentWeather.current.feelslike_c}°C`,
+    },
+    indexUV: {
+      isIcon: true,
+      icon: sunnyOutline,
+      alt: 'index uv',
+      label: 'Index UV',
+      value: currentWeather.current.uv,
+    },
+    pressure: {
+      isIcon: true,
+      icon: pulseOutline,
+      alt: 'pressure',
+      label: 'Pressure',
+      value: `${currentWeather.current.pressure_mb} mbar`,
+    },
+  };
+
+  useEffect(() => {
+    setProperty(properties[type]);
+  }, [type]);
+
+  return (
+    <IonCol size="6">
+      <IonRow className="ion-justify-content-center ion-align-items-center">
+        <IonCol size="3">
+          {!property.isIcon && (
+            <img alt={property.alt} src={property.icon} height="32" width="32" />
+          )}
+          {property.isIcon && (
+            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
+          )}
+        </IonCol>
+
+        <IonCol size="9">
+          <IonCardSubtitle>{property.label}</IonCardSubtitle>
+          <IonNote>{property.value}</IonNote>
+        </IonCol>
+      </IonRow>
+    </IonCol>
+  );
+};

03_source/mobile/src/pages/DemoColorTutorial/TestComponents/CurrentWeather/index.tsx

@@ -0,0 +1,48 @@
+import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
+import { WeatherProperty } from './WeatherProperty';
+
+export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            {currentWeather.location.region},{' '}
+            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <img
+            alt="condition"
+            src={currentWeather.current.condition.icon.replace('//', 'https://')}
+          />
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          {currentWeather.current.temp_c}&#8451;
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <WeatherProperty type="wind" currentWeather={currentWeather} />
+            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
+            <WeatherProperty type="pressure" currentWeather={currentWeather} />
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/DemoColorTutorial/TestComponents/SkeletonDashboard/index.tsx

@@ -0,0 +1,117 @@
+import {
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonGrid,
+  IonIcon,
+  IonNote,
+  IonRow,
+  IonSkeletonText,
+  IonText,
+  IonThumbnail,
+} from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+
+export const SkeletonDashboard = () => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <IonThumbnail>
+            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
+          </IonThumbnail>
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Wind</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Feels like</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Index UV</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Pressure</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/DemoColorTutorial/components/ExploreContainer.css

@@ -0,0 +1,24 @@
+.container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+.container a {
+  text-decoration: none;
+}

03_source/mobile/src/pages/DemoColorTutorial/components/ExploreContainer.tsx

@@ -0,0 +1,16 @@
+import './ExploreContainer.css';
+
+interface ContainerProps {
+  name: string;
+}
+
+const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
+  return (
+    <div className="container">
+      <strong>{name}</strong>
+      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+    </div>
+  );
+};
+
+export default ExploreContainer;

03_source/mobile/src/pages/DemoColorTutorial/index.tsx

@@ -0,0 +1,76 @@
+import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+
+import { cloudOutline, ellipse, searchOutline, square, triangle } from 'ionicons/icons';
+import { Route, Redirect } from 'react-router';
+
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
+
+import Tab1 from './pages/Tab1';
+import Tab2 from './pages/Tab2';
+import Tab3 from './pages/Tab3';
+
+import './style.scss';
+
+function DemoColorTutorial() {
+  return (
+    <IonTabs className="demo-color-tutorial">
+      {/*
+      <IonRouterOutlet>
+        <Route exact path="/demo-color-tutorial/tab1">
+          <Tab1 />
+        </Route>
+        <Route exact path="/demo-color-tutorial/tab2">
+          <Tab2 />
+        </Route>
+
+        <Redirect exact path="/demo-color-tutorial" to="/demo-color-tutorial/tab1" />
+      </IonRouterOutlet>
+
+      */}
+
+      <IonRouterOutlet>
+        <Route exact path="/demo-color-tutorial/tab1">
+          <Tab1 />
+        </Route>
+        <Route exact path="/demo-color-tutorial/tab2">
+          <Tab2 />
+        </Route>
+        <Route path="/demo-color-tutorial/tab3">
+          <Tab3 />
+        </Route>
+
+        <Redirect exact path="/demo-color-tutorial" to="/demo-color-tutorial/tab1" />
+      </IonRouterOutlet>
+
+      <IonTabBar slot="bottom">
+        {/*
+        <IonTabButton tab="tab1" href="/demo-color-tutorial/tab1">
+          <IonIcon icon={cloudOutline} />
+          <IonLabel>Dashboard</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab2" href="/demo-color-tutorial/tab2">
+          <IonIcon icon={searchOutline} />
+          <IonLabel>Search</IonLabel>
+        </IonTabButton>
+        */}
+
+        {/* update path base from `/` to `/demo-color-tutorial` */}
+        <IonTabButton tab="tab1" href="/demo-color-tutorial/tab1">
+          <IonIcon icon={triangle} />
+          <IonLabel>Tab 1</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab2" href="/demo-color-tutorial/tab2">
+          <IonIcon icon={ellipse} />
+          <IonLabel>Tab 2</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab3" href="/demo-color-tutorial/tab3">
+          <IonIcon icon={square} />
+          <IonLabel>Tab 3</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  );
+}
+
+export default DemoColorTutorial;

03_source/mobile/src/pages/DemoColorTutorial/pages/Tab1.tsx

@@ -0,0 +1,75 @@
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonPage,
+  IonRadio,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Tab1.css';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Tab1: React.FC = () => {
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Tab 1</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Tab 1</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonButton color="alans-color">Button</IonButton>
+
+        <IonItem>
+          <IonLabel>Toggle</IonLabel>
+          <IonToggle color="alans-color" />
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Checkbox</IonLabel>
+          <IonCheckbox color="alans-color" />
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Badge</IonLabel>
+          <IonBadge color="alans-color">14 notifications</IonBadge>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>Note</IonLabel>
+          <IonNote color="alans-color">3 unread</IonNote>
+        </IonItem>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;

03_source/mobile/src/pages/DemoColorTutorial/pages/Tab2.tsx

@@ -0,0 +1,25 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Tab2.css';
+
+const Tab2: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Tab 2</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Tab 2</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ExploreContainer name="Tab 2 page" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;

03_source/mobile/src/pages/DemoColorTutorial/pages/Tab3.tsx

@@ -0,0 +1,25 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Tab3.css';
+
+const Tab3: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Tab 3</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Tab 3</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ExploreContainer name="Tab 3 page" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab3;

03_source/mobile/src/pages/DemoColorTutorial/style.scss

@@ -0,0 +1,256 @@
+.demo-color-tutorial {
+  /*
+Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/
+*/
+
+  /** Ionic CSS Variables **/
+  * {
+    /** alans color **/
+    --ion-color-alans-color: #6c9400;
+    --ion-color-alans-color-rgb: 108, 148, 0;
+    --ion-color-alans-color-contrast: #ffffff;
+    --ion-color-alans-color-contrast-rgb: 255, 255, 255;
+    --ion-color-alans-color-shade: #5f8200;
+    --ion-color-alans-color-tint: #7b9f1a;
+
+    /** primary **/
+    --ion-color-primary: #be402f;
+    --ion-color-primary-rgb: 190, 64, 47;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #a73829;
+    --ion-color-primary-tint: #c55344;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+
+  .ion-color-alans-color {
+    --ion-color-base: var(--ion-color-alans-color);
+    --ion-color-base-rgb: var(--ion-color-alans-color-rgb);
+    --ion-color-contrast: var(--ion-color-alans-color-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-alans-color-contrast-rgb);
+    --ion-color-shade: var(--ion-color-alans-color-shade);
+    --ion-color-tint: var(--ion-color-alans-color-tint);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+    body {
+      --ion-color-primary: #428cff;
+      --ion-color-primary-rgb: 66, 140, 255;
+      --ion-color-primary-contrast: #ffffff;
+      --ion-color-primary-contrast-rgb: 255, 255, 255;
+      --ion-color-primary-shade: #3a7be0;
+      --ion-color-primary-tint: #5598ff;
+
+      --ion-color-secondary: #50c8ff;
+      --ion-color-secondary-rgb: 80, 200, 255;
+      --ion-color-secondary-contrast: #ffffff;
+      --ion-color-secondary-contrast-rgb: 255, 255, 255;
+      --ion-color-secondary-shade: #46b0e0;
+      --ion-color-secondary-tint: #62ceff;
+
+      --ion-color-tertiary: #6a64ff;
+      --ion-color-tertiary-rgb: 106, 100, 255;
+      --ion-color-tertiary-contrast: #ffffff;
+      --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+      --ion-color-tertiary-shade: #5d58e0;
+      --ion-color-tertiary-tint: #7974ff;
+
+      --ion-color-success: #2fdf75;
+      --ion-color-success-rgb: 47, 223, 117;
+      --ion-color-success-contrast: #000000;
+      --ion-color-success-contrast-rgb: 0, 0, 0;
+      --ion-color-success-shade: #29c467;
+      --ion-color-success-tint: #44e283;
+
+      --ion-color-warning: #ffd534;
+      --ion-color-warning-rgb: 255, 213, 52;
+      --ion-color-warning-contrast: #000000;
+      --ion-color-warning-contrast-rgb: 0, 0, 0;
+      --ion-color-warning-shade: #e0bb2e;
+      --ion-color-warning-tint: #ffd948;
+
+      --ion-color-danger: #ff4961;
+      --ion-color-danger-rgb: 255, 73, 97;
+      --ion-color-danger-contrast: #ffffff;
+      --ion-color-danger-contrast-rgb: 255, 255, 255;
+      --ion-color-danger-shade: #e04055;
+      --ion-color-danger-tint: #ff5b71;
+
+      --ion-color-dark: #f4f5f8;
+      --ion-color-dark-rgb: 244, 245, 248;
+      --ion-color-dark-contrast: #000000;
+      --ion-color-dark-contrast-rgb: 0, 0, 0;
+      --ion-color-dark-shade: #d7d8da;
+      --ion-color-dark-tint: #f5f6f9;
+
+      --ion-color-medium: #989aa2;
+      --ion-color-medium-rgb: 152, 154, 162;
+      --ion-color-medium-contrast: #000000;
+      --ion-color-medium-contrast-rgb: 0, 0, 0;
+      --ion-color-medium-shade: #86888f;
+      --ion-color-medium-tint: #a2a4ab;
+
+      --ion-color-light: #222428;
+      --ion-color-light-rgb: 34, 36, 40;
+      --ion-color-light-contrast: #ffffff;
+      --ion-color-light-contrast-rgb: 255, 255, 255;
+      --ion-color-light-shade: #1e2023;
+      --ion-color-light-tint: #383a3e;
+    }
+
+    /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+    .ios body {
+      --ion-background-color: #000000;
+      --ion-background-color-rgb: 0, 0, 0;
+
+      --ion-text-color: #ffffff;
+      --ion-text-color-rgb: 255, 255, 255;
+
+      --ion-color-step-50: #0d0d0d;
+      --ion-color-step-100: #1a1a1a;
+      --ion-color-step-150: #262626;
+      --ion-color-step-200: #333333;
+      --ion-color-step-250: #404040;
+      --ion-color-step-300: #4d4d4d;
+      --ion-color-step-350: #595959;
+      --ion-color-step-400: #666666;
+      --ion-color-step-450: #737373;
+      --ion-color-step-500: #808080;
+      --ion-color-step-550: #8c8c8c;
+      --ion-color-step-600: #999999;
+      --ion-color-step-650: #a6a6a6;
+      --ion-color-step-700: #b3b3b3;
+      --ion-color-step-750: #bfbfbf;
+      --ion-color-step-800: #cccccc;
+      --ion-color-step-850: #d9d9d9;
+      --ion-color-step-900: #e6e6e6;
+      --ion-color-step-950: #f2f2f2;
+
+      --ion-item-background: #000000;
+
+      --ion-card-background: #1c1c1d;
+    }
+
+    .ios ion-modal {
+      --ion-background-color: var(--ion-color-step-100);
+      --ion-toolbar-background: var(--ion-color-step-150);
+      --ion-toolbar-border-color: var(--ion-color-step-250);
+    }
+
+    /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+    .md body {
+      --ion-background-color: #121212;
+      --ion-background-color-rgb: 18, 18, 18;
+
+      --ion-text-color: #ffffff;
+      --ion-text-color-rgb: 255, 255, 255;
+
+      --ion-border-color: #222222;
+
+      --ion-color-step-50: #1e1e1e;
+      --ion-color-step-100: #2a2a2a;
+      --ion-color-step-150: #363636;
+      --ion-color-step-200: #414141;
+      --ion-color-step-250: #4d4d4d;
+      --ion-color-step-300: #595959;
+      --ion-color-step-350: #656565;
+      --ion-color-step-400: #717171;
+      --ion-color-step-450: #7d7d7d;
+      --ion-color-step-500: #898989;
+      --ion-color-step-550: #949494;
+      --ion-color-step-600: #a0a0a0;
+      --ion-color-step-650: #acacac;
+      --ion-color-step-700: #b8b8b8;
+      --ion-color-step-750: #c4c4c4;
+      --ion-color-step-800: #d0d0d0;
+      --ion-color-step-850: #dbdbdb;
+      --ion-color-step-900: #e7e7e7;
+      --ion-color-step-950: #f3f3f3;
+
+      --ion-item-background: #1e1e1e;
+
+      --ion-toolbar-background: #1f1f1f;
+
+      --ion-tab-bar-background: #1f1f1f;
+
+      --ion-card-background: #1e1e1e;
+    }
+  }
+}

03_source/mobile/src/pages/DemoColorTutorial/theme/variables.css

@@ -0,0 +1,254 @@
+/*
+Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/
+*/
+
+/** Ionic CSS Variables **/
+:root {
+  /** alans color **/
+  --ion-color-alans-color: #6c9400;
+  --ion-color-alans-color-rgb: 108, 148, 0;
+  --ion-color-alans-color-contrast: #ffffff;
+  --ion-color-alans-color-contrast-rgb: 255, 255, 255;
+  --ion-color-alans-color-shade: #5f8200;
+  --ion-color-alans-color-tint: #7b9f1a;
+
+  /** primary **/
+  --ion-color-primary: #be402f;
+  --ion-color-primary-rgb: 190, 64, 47;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #a73829;
+  --ion-color-primary-tint: #c55344;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+.ion-color-alans-color {
+  --ion-color-base: var(--ion-color-alans-color);
+  --ion-color-base-rgb: var(--ion-color-alans-color-rgb);
+  --ion-color-contrast: var(--ion-color-alans-color-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-alans-color-contrast-rgb);
+  --ion-color-shade: var(--ion-color-alans-color-shade);
+  --ion-color-tint: var(--ion-color-alans-color-tint);
+}
+
+@media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66, 140, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80, 200, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106, 100, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47, 223, 117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255, 213, 52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255, 73, 97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244, 245, 248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152, 154, 162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34, 36, 40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    --ion-background-color: #000000;
+    --ion-background-color-rgb: 0, 0, 0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+  }
+
+  .ios ion-modal {
+    --ion-background-color: var(--ion-color-step-100);
+    --ion-toolbar-background: var(--ion-color-step-150);
+    --ion-toolbar-border-color: var(--ion-color-step-250);
+  }
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18, 18, 18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
+  }
+}

03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab1.jsx

@@ -24,7 +24,7 @@ import { getFavourites, getSearchCount } from '../store/Selectors';
 
 const Tab1 = () => {
   const router = useIonRouter();
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const favourites = useStoreState(WordStore, getFavourites);
   const searchCount = useStoreState(WordStore, getSearchCount);
 

03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab2.jsx

@@ -17,7 +17,7 @@ import { WordStore } from '../store';
 import { searchWord } from '../utils';
 
 const Tab2 = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResult, setSearchResult] = useState(false);
   const [animatedClass, setAnimatedClass] = useState('');