implemented home page also updated package.json and translation files

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "my-project",
+  "name": "osaka",
   "private": true,
   "version": "0.0.0",
   "type": "module",

public/locales/bn/translation.json

@@ -36,6 +36,14 @@
     "myIntimation": "আমার বিজ্ঞপ্তি",
     "changePassword": "পাসওয়ার্ড পরিবর্তন",
     "resetLogin": "লগইন স্ট্যাটাস রিসেট করুন",
-    "currentDate" : "{{val, datetime}}"
+    "currentDate" : "{{val, datetime}}",
+    "notifications": "বিজ্ঞপ্তি",
+    "holidayList": "ছুটির তালিকা",
+    "information": "তথ্য",
+    "hpn_complete_before_31": "অনুগ্রহ করে ৩১শে মার্চের সমস্ত লেনদেন ২১:০০ ঘটিকার আগে সম্পন্ন করুন",
+    "hpn_npa": "আগামী ৩১শে মার্চ ২১:০০ ঘটিকার আগে ঋণ এনপিএ রিপোর্ট থেকে প্রস্তাবিত এনপিএ স্থিতি যাচাই করার পরে প্রযোজ্য ঋণ অ্যাকাউন্টের জন্য এনপিএ চিহ্নিত/অচিহ্নিত করুন",
+    "hpn_helpdesk_contact": "ফোনে সমস্যার সমাধানের জন্য আমাদের সাথে যোগাযোগ করুন 033-4065-9546 / 4071-8135 (সকাল ৯:০০ থেকে রাত ৯:০০ পর্যন্ত)",
+    "hpn_rupay_kcc_time": "সমস্ত রূপে কিসান ক্রেডিট কার্ড লেনদেন ১৯:০০ ঘটিকার আগে সম্পন্ন করুন",
+    "hpn_rupay_kcc_atm": "কিছু অভ্যন্তরীণ পরিবর্তনের কারণে, মাইক্রো-এটিএম এর মাধ্যমে রূপে কিসান ক্রেডিট কার্ড কার্যক্রম বন্ধ করা হয়েছে। সেবা আগামীকাল থেকে পুনরায় চালু হবে।"
 
 }

public/locales/en/translation.json

@@ -37,5 +37,13 @@
     "myIntimation": "My Intimation",
     "changePassword": "Change Password",
     "resetLogin": "Reset Login Status",
-    "currentDate" : "{{val, datetime}}"
+    "currentDate" : "{{val, datetime}}",
+    "notifications": "Notification",
+    "holidayList": "Holiday List",
+    "information": "Information",
+    "hpn_complete_before_31": "Please complete all transactions of 31st March before 21:00 Hrs", 
+    "hpn_npa": "Do Mark/Unmark NPA for applicable loan accounts after verifying suggestive NPA status from loan NPA reports before upcoming 31st March 21:00 Hrs",
+    "hpn_helpdesk_contact": "For on call issue resolution reach us at 033-4065-9546 / 4071-8135 (9:00 AM to 9:00 PM)",
+    "hpn_rupay_kcc_time": "Complete all Rupay KCC transactions before 19:00 Hrs", 
+    "hpn_rupay_kcc_atm": "Due to some internal changes, Rupay KCC Operations through Micro-ATM has been stopped. The service will resume starting tomorrow."
 }

public/locales/hi/translation.json

@@ -37,5 +37,14 @@
     "myIntimation": "मेरा सूचितकरण",
     "changePassword": "पासवर्ड बदलें",
     "resetLogin": "लॉगिन स्थिति रीसेट करें",
-    "currentDate" : "{{val, datetime}}"
+    "currentDate" : "{{val, datetime}}",
+    "notifications": "सूचना",
+    "holidayList": "छुट्टी की सूची",
+    "information": "जानकारी",
+    "hpn_complete_before_31": "कृपया 31 मार्च के सभी लेनदेन 21:00 बजे से पहले पूरा करें",
+    "hpn_npa": "कृपया आगामी 31 मार्च 21:00 बजे से पहले ऋण एनपीए रिपोर्ट से सुझावित एनपीए स्थिति की जांच के बाद संबंधित ऋण खातों के लिए एनपीए को चिह्नित/अचिह्नित करें",
+    "hpn_helpdesk_contact": "किसी भी समस्या के समाधान के लिए हमें 033-4065-9546 / 4071-8135 (सुबह 9:00 से रात 9:00 बजे तक) पर संपर्क करें",
+    "hpn_rupay_kcc_time": "सभी रुपे केसीसी लेनदेन 19:00 बजे से पहले पूरा करें",
+    "hpn_rupay_kcc_atm": "कुछ आंतरिक बदलावों के कारण, माइक्रो-एटीएम के माध्यम से रुपे केसीसी संचालन बंद कर दिया गया है। सेवा कल से फिर से शुरू होगी।"
+
 }

src/App.jsx

@@ -5,7 +5,7 @@ import Footer from "./components/Footer"
 function App() {
   return <div className="flex flex-col min-h-screen">
     <Header />
-    <main className="transition-color-mode px-7 flex-grow bg-surface dark:bg-surface-dark">
+    <main className="flex transition-color-mode px-7 flex-grow bg-surface dark:bg-surface-dark">
       <Outlet />
     </main>
     <Footer />

src/components/FormBox.jsx

@@ -0,0 +1,17 @@
+import { PropTypes } from 'prop-types';
+
+function FormBox({title, children}) {
+  return (
+    <div className='transition-color-mode font-body bg-surface-variant border-secondary dark:bg-surface-variant-dark dark:border-primary-dark border-2 p-4 rounded-3xl relative h-full'>
+        <label className='font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full'>{title}</label>
+      {children}
+    </div>
+  );
+}
+
+FormBox.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired
+};
+
+export default FormBox;

src/main.jsx

@@ -5,6 +5,7 @@ import './index.css'
 import './i18n'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import Placeholder from './pages/Placeholder.jsx';
+import Home from './pages/Home.jsx'
 
 const router = createBrowserRouter([
   {
@@ -13,7 +14,7 @@ const router = createBrowserRouter([
     children: [
       {
         index: true,
-        element: <Placeholder />
+        element: <Home />
       },
       {
         path: 'cabinet-maintenance',

src/pages/Home.jsx

@@ -0,0 +1,43 @@
+import FormBox from "../components/FormBox";
+import { useTranslation } from "react-i18next";
+
+function Home() {
+  const { t } = useTranslation();
+  const holidayList = [{ date: '23 May, 2024', name: 'Buddha Purnima' }, { date: '15 June, 2024', name: 'Raja Sankranti' }];
+  const homePageNotifications = ['hpn_complete_before_31', 'hpn_npa', 'hpn_helpdesk_contact', 'hpn_rupay_kcc_time', 'hpn_rupay_kcc_atm'];
+
+  return (
+    <div className="py-7 flex flex-grow gap-7">
+      <div className="flex gap-7 flex-col basis-1/3">
+        <div className="flex-grow">
+          <FormBox title={t('information')}>
+            <h1>Welcome to the Home Page</h1>
+          </FormBox>
+        </div>
+        <div className="flex-grow">
+          <FormBox title={t('holidayList')}>
+            <ul>
+              {holidayList.map((holiday, index) => (
+                <li key={index}>{holiday.date} - {holiday.name}</li>
+              ))}
+            </ul>
+          </FormBox>
+        </div>
+      </div>
+      <div className="basis-2/3">
+        <div className="h-full">
+          <FormBox title={t('notifications')}>
+            <ul className="list-inside list-disc px-4">
+              {homePageNotifications.map((notification, index) => (
+                <li className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose" key={index}>{t(notification)}</li>
+              ))}
+            </ul>
+          </FormBox>
+        </div>
+      </div>
+      
+    </div>
+  );
+}
+
+export default Home;

tailwind.config.js

@@ -17,12 +17,13 @@ export default {
       secondary: {
         DEFAULT: '#B1E1B3',
         dark: '#20542f',
+        // dark: '#3d9f59',
         variant: {DEFAULT: '#80AE82', dark: '#5F8E5F'}
       },
       surface: {
         DEFAULT: '#F6F6F6',
-        dark: '#3C3C3C',
-        variant: {DEFAULT: '#F4FFF4', dark: '#525252'}
+        dark: '#2d3133',
+        variant: {DEFAULT: '#F4FFF4', dark: '#3e4345'}
       },
       
     },