From 7386df009959648af0ca885550858d6474302bef Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Tue, 7 Sep 2021 11:54:11 +0300
Subject: [PATCH] about content

---
 public/locales/en/translations.json           | 16 +++++++++
 public/locales/ro/translations.json           | 16 +++++++++
 .../about/components/AboutComponent.js        | 35 +++++++++++++++++++
 .../about/components/TechnologiesComponent.js | 15 ++++++--
 4 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index fa6da19..d6cf511 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -131,9 +131,18 @@
   "About": {
     "Title": "Overview",
     "Subtitle": "Expand to see details",
+    "WhatIs": "What is a reverse proxy?",
+    "CurrentSystem": "Current system",
     "Content1": "A reverse proxy is a server that accepts a request from a client, forwards the request to another one of many other servers and returns the results from the server that actually processed the request to the client as if the proxy server had processed the request itself.",
     "Content2": "A reverse proxy is a type of proxy server. Unlike a traditional proxy server, which is used to protect clients, a reverse proxy is used to protect servers.",
     "Content3": "The client only communicates directly with the reverse proxy server and it does not know that some other server actually processed its request.",
+    "Content4": "This system is composed of three components, each with its well-defined purpose.",
+    "ContentTitle": "More details about the concept",
+    "Description": {
+      "Server": "Server description",
+      "Api": "API description",
+      "Frontend": "Frontend description"
+    },
     "Actions": {
       "Documentation": "Documentation"
     },
@@ -141,5 +150,12 @@
       "Title": "Technologies",
       "Content": "This reverse proxy was built based on several technologies that were brought together as follows:"
     }
+  },
+  "System": {
+    "Components": {
+      "Server": "Server:",
+      "Api": "API:",
+      "Frontend": "Frontend:"
+    }
   }
 }
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 4bc2b40..8d8faba 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -122,9 +122,18 @@
   "About": {
     "Title": "Prezentare generală",
     "Subtitle": "Extindeţi pentru a vedea detalii",
+    "WhatIs": "Ce este un proxy invers?",
+    "CurrentSystem": "Sistem actual",
     "Content1": "Un proxy invers este un server care acceptă o cerere de la un client, redirecționează cererea către altul din multe alte servere și returnează rezultatele de la serverul care a procesat efectiv solicitarea către client ca și cum serverul proxy ar fi procesat solicitarea de unul singur.",
     "Content2": "Un proxy invers este un tip de server proxy. Spre deosebire de un server proxy tradițional, care este utilizat pentru a proteja clienții, un proxy invers este utilizat pentru a proteja serverele.",
     "Content3": "Clientul comunică direct cu serverul proxy invers și nu știe că un alt server i-a procesat cererea.",
+    "Content4": "Acest sistem este compus din trei componente, fiecare cu scopul său bine definit.",
+    "ContentTitle": "Mai multe detalii despre concept",
+    "Description": {
+      "Server": "Server description",
+      "Api": "API description",
+      "Frontend": "Frontend description"
+    },
     "Actions": {
       "Documentation": "Documentație"
     },
@@ -132,5 +141,12 @@
       "Title": "Tehnologii",
       "Content": "Acest reverse proxy a fost construit pe baza mai multor tehnologii care au fost aduse împreună după cum urmează:"
     }
+  },
+  "System": {
+    "Components": {
+      "Server": "Server:",
+      "Api": "API:",
+      "Frontend": "Frontend:"
+    }
   }
 }
diff --git a/src/features/about/components/AboutComponent.js b/src/features/about/components/AboutComponent.js
index 533e370..4d9852e 100644
--- a/src/features/about/components/AboutComponent.js
+++ b/src/features/about/components/AboutComponent.js
@@ -48,9 +48,40 @@ const AboutComponent = ({ onOpenDocumentation }) => {
         subheader={t("About.Subtitle")}
       />
       <CardContent>
+        <Typography variant="h6" color="textSecondary">
+          {t("About.WhatIs")}
+        </Typography>
         <Typography variant="body2" color="textSecondary" component="p">
           {t("About.Content1")}
         </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("About.CurrentSystem")}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" component="p">
+          {t("About.Content4")}
+        </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("System.Components.Server")}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" component="p">
+          {t("About.Description.Server")}
+        </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("System.Components.Api")}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" component="p">
+          {t("About.Description.Api")}
+        </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("System.Components.Frontend")}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" component="p">
+          {t("About.Description.Frontend")}
+        </Typography>
       </CardContent>
       <CardActions disableSpacing>
         <Tooltip title={t("About.Actions.Documentation")}>
@@ -71,6 +102,10 @@ const AboutComponent = ({ onOpenDocumentation }) => {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
+          <Typography variant="h6" color="textSecondary">
+            {t("About.ContentTitle")}
+          </Typography>
+          <br />
           <Grid container spacing={1}>
             <Grid item xs={12}>
               <Typography paragraph>{t("About.Content2")}</Typography>
diff --git a/src/features/about/components/TechnologiesComponent.js b/src/features/about/components/TechnologiesComponent.js
index b9bd5d4..98b08f1 100644
--- a/src/features/about/components/TechnologiesComponent.js
+++ b/src/features/about/components/TechnologiesComponent.js
@@ -21,6 +21,12 @@ const serverTechnologies = [
   { type: "Docker", level: 5 }
 ];
 
+const apiTechnologies = [
+  { type: "C#", level: 90 },
+  { type: "SQL Server", level: 10 },
+  { type: "Docker", level: 5 }
+];
+
 const frontendTechnologies = [
   { type: "React", level: 75 },
   { type: "Redux", level: 15 },
@@ -57,12 +63,17 @@ const TechnologiesComponent = () => {
         </Typography>
         <br />
         <Typography variant="h6" color="textSecondary">
-          Server:
+          {t("System.Components.Server")}
         </Typography>
         <SkillBar skills={serverTechnologies} colors={colors} height={20} />
         <br />
         <Typography variant="h6" color="textSecondary">
-          Frontend:
+          {t("System.Components.Api")}
+        </Typography>
+        <SkillBar skills={apiTechnologies} colors={colors} height={20} />
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("System.Components.Frontend")}
         </Typography>
         <SkillBar skills={frontendTechnologies} colors={colors} height={20} />
       </CardContent>