implemented home page also updated package.json and translation files

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;