Merge pull request #1307 from bhanuprakash-egov/HLM-729-|-VC-LandingPage

Hlm 729 | vc landing page-update

tenant-portal/public/locales/en/translation.json

@@ -0,0 +1,37 @@
+{
+    "homePage": {
+        "title": "Welcome to DIVOC VC Issuance Platform",
+        "text": "Create verifiable credentials.",
+        "view": "View",
+        "trainingMaterial": "Training Material",
+        "or": "or",
+        "videosLink": "Videos",
+        "genTokenCard": {
+            "title": "Generate Token",
+            "text":"Generate token to connect your system with the DIVOC platform"
+        },
+        "manageSchemaCard": {
+            "title": "Manage Schema",
+            "text":"Create New Schemas, View / Edit existing schemas"
+        }
+    },
+
+    "genTokenPage": {
+        "title": "Connect your system with the DIVOC Platform",
+        "text": "You need to connect to your system with the DIVOC platform to start issuing verifiable credentials.",
+        "buttonClickInfo": "Click on the button below to generate the token to connect your system with DIVOC",
+        "buttonText": "Generate Token"
+    },
+
+    "viewTokenPage": {
+        "title": "Connect your system with the DIVOC Platform",
+        "text": "Please find the token generated below. You can copy it to the clipboard or download  the same",
+        "copyButton": "Copy",
+        "downloadButton": "Download",
+        "alertCard": {
+            "title": "Alert!",
+            "text": "Make sure to store this safely. Once you leave this page, you will not be able to access this token again",
+            "imptext":"This token is valid for 1 year."
+        }   
+    }
+}

tenant-portal/public/locales/hi/translation.json

@@ -0,0 +1,37 @@
+{
+    "homePage": {
+        "title": "DIVOC VC Issuance Platform में आपका स्वागत है",
+        "text": "सत्यापन योग्य क्रेडेंशियल बनाएं।",
+        "view": "राय",
+        "trainingMaterial": "प्रक्षिक्षण सामग्री",
+        "or": "या",
+        "videosLink": "वीडियो",
+        "genTokenCard": {
+            "title": "टोकन उत्पन्न करें",
+            "text":"अपने सिस्टम को DIVOC प्लेटफॉर्म से जोड़ने के लिए टोकन जेनरेट करें"
+        },
+        "manageSchemaCard": {
+            "title": "स्कीमा प्रबंधित करें",
+            "text":"नई स्कीमा बनाएं, मौजूदा स्कीमा देखें / संपादित करें"
+        }
+    },
+
+    "genTokenPage": {
+        "title": "DIVOC VC Issuance Platform में आपका स्वागत है",
+        "text": "सत्यापन योग्य क्रेडेंशियल जारी करना शुरू करने के लिए आपको अपने सिस्टम से DIVOC प्लेटफॉर्म से जुड़ने की आवश्यकता है।",
+        "buttonClickInfo": "अपने सिस्टम को DIVOC से जोड़ने के लिए टोकन जेनरेट करने के लिए नीचे दिए गए बटन पर क्लिक करें",
+        "buttonText": "टोकन उत्पन्न करें"
+    },
+
+    "viewTokenPage": {
+        "title": "DIVOC VC Issuance Platform में आपका स्वागत है",
+        "text": "कृपया नीचे जेनरेट किया गया टोकन ढूंढें। आप इसे क्लिपबोर्ड पर कॉपी कर सकते हैं या इसे डाउनलोड कर सकते हैं",
+        "copyButton": "प्रतिलिपि",
+        "downloadButton": "डाउनलोड",
+        "alertCard": {
+            "title": "चेतावनी!",
+            "text": "इसे सुरक्षित रूप से स्टोर करना सुनिश्चित करें। एक बार जब आप इस पेज को छोड़ देते हैं, तो आप इस टोकन को दोबारा एक्सेस नहीं कर पाएंगे",
+            "imptext":"यह टोकन 1 वर्ष के लिए वैध है."
+        }   
+    }
+}

tenant-portal/src/App.js

@@ -10,6 +10,7 @@ import config from "./config.json"
 import Footer from "./components/Footer/Footer";
 import ToastComponent from './components/Toast/Toast';
 import axios from 'axios';
+import './i18n';
 
 function App() {
   const { initialized, keycloak } = useKeycloak();
@@ -37,6 +38,7 @@ function App() {
     <div>
       <Router>
       <Header/>
+      <div style={{paddingBottom: "3rem", paddingTop: "3rem"}}>
         <Routes>
 
           <Route exact path={config.urlPath + "/"} element={<Home />} />
@@ -50,8 +52,9 @@ function App() {
            >
            </Route>
         </Routes>
-      </Router>
+        </div>
       <Footer/>
+      </Router>
       <ToastComponent/>
     </div>
   );

tenant-portal/src/components/Home/Home.js

@@ -1,18 +1,55 @@
 import React, {useEffect} from "react";
-import {useNavigate} from "react-router-dom";
-import config from "../../config.json"
+import 'bootstrap/dist/css/bootstrap.min.css';
+import {Card, Container, Col, Button, Row} from 'react-bootstrap';
+import { useNavigate, Link } from 'react-router-dom';
+import HomeImg from "../../assets/img/homeImage.png";
+import styles from './Home.module.css';
+import {useTranslation} from "react-i18next";
+import config from '../../config.json';
 
 function Home() {
 
     const navigate = useNavigate();
+    const { t } = useTranslation();
 
     useEffect(() => {
         navigate(config.urlPath + "/login");
     }, [navigate]);
 
     return(
-        <div>
-            <div>Home</div>
+        <div className="row mx-5 px-5 my-5">
+            <div className="col-md-6">
+                <div className="p-2">
+                    <h2>{t('homePage.title')}</h2><br/>
+                    <p>{t('homePage.text')}</p>
+                    <p>{t('homePage.view')} <a href="#" className="mx-2">{t('homePage.trainingMaterial')}</a> {t('homePage.or')} <a href="#" className="mx-2">{t('homePage.videosLink')}</a></p>
+                </div>
+                <Container fluid>
+                    <Row gutterX='3'>
+                        <Col>
+                        <Link to='/tenant-portal/generate-token' style={{textDecoration: 'none', }}>
+                            <Card style={{ cursor: "pointer" }} className={styles['card']}>
+                                <Card.Body>
+                                    <Card.Title className={styles['card-title']}>{t('homePage.genTokenCard.title')}</Card.Title>
+                                    <Card.Text className={styles['card-text']}>{t('homePage.genTokenCard.text')}</Card.Text>
+                                </Card.Body>
+                            </Card> 
+                        </ Link>
+                        </Col>
+                        <Col>
+                        <Link to='/tenant-portal/manage-schema' style={{textDecoration: 'none', }}>
+                            <Card style={{ cursor: "pointer" }}  className={styles['card']}>
+                                <Card.Body>
+                                    <Card.Title className={styles['card-title']}>{t('homePage.manageSchemaCard.title')}</Card.Title>
+                                    <Card.Text className={styles['card-text']}>{t('homePage.manageSchemaCard.text')}</Card.Text>
+                                </Card.Body>
+                            </Card> 
+                        </Link>
+                        </Col>
+                    </Row>
+                </Container>
+            </div>
+            <img src={HomeImg} alt="Home Image" className="col-md-6"/>
         </div>
     );
 }

tenant-portal/src/components/Home/Home.module.css

@@ -0,0 +1,33 @@
+.card-title{
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    background-color: #f3ec78;
+    background-image: linear-gradient(270deg, #5367CA, #73BAF4);
+    background-size: 100%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+}    
+
+.card-text{
+    font-size: 12px;
+    font-weight: 400;
+    text-align: center;
+    color: #717171 !important;
+}
+
+.card{
+    padding: 10px;
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.card:hover{
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
+    border: 1px solid transparent;
+    border-image: linear-gradient(270deg, #5367CA, #73BAF4) 1;
+}
+
+a {
+    color: #5976D2;
+}