completed homepage design

package-lock.json

@@ -1,13 +1,14 @@
 {
-  "name": "my-project",
+  "name": "osaka",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "my-project",
+      "name": "osaka",
       "version": "0.0.0",
       "dependencies": {
+        "clsx": "^2.1.1",
         "i18next": "^23.15.1",
         "i18next-browser-languagedetector": "^8.0.0",
         "i18next-http-backend": "^2.6.1",
@@ -1907,6 +1908,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.6.1",

src/components/Footer.jsx

@@ -1,7 +1,8 @@
 function Footer() {
   return (
-    <footer>
+    <footer className="flex justify-between p-2 px-7 font-body bg-tertiary text-sm text-primary dark:bg-tertiary-dark dark:text-primary-dark">
-      <p>© 2021</p>
+      <p>Copyright © 2023, Tata Consultancy Services. All rights reserved</p>
+      <p>Privacy Policy | Terms of Use</p>
     </footer>
   );
 }

src/components/FormBox.jsx

@@ -1,9 +1,10 @@
 import { PropTypes } from 'prop-types';
+import clsx from 'clsx';
 
-function FormBox({title, children}) {
+function FormBox({title, children, alt = false}) {
   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'>
+    <div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-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>
+        <label className={clsx( alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', '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>
   );
@@ -11,7 +12,8 @@ function FormBox({title, children}) {
 
 FormBox.propTypes = {
   children: PropTypes.node.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  alt: PropTypes.bool,
 };
 
 export default FormBox;

src/components/MenuBar.jsx

@@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
 const SubMenu = ({ items }) => {
   const {t} = useTranslation();
   return (
-    <div className="
+    <div className="invisible opacity-0
-      hidden  absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary
+      absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary -translate-y-6
-       dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary group-hover:block z-10"
+    dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary z-50 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-200"
     >
       {items.map((subItem, index) => (
         <div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">

src/components/Separator.jsx

@@ -1,7 +1,7 @@
 function Separator() {
   return (
     <div className="h-[2px]">
-        <div className="h-full w-full bg-white dark:bg-primary rounded-md"></div>
+        <div className="h-full w-full bg-white dark:bg-primary-dark rounded-md"></div>
     </div>
   )
 }

src/pages/Home.jsx

@@ -12,10 +12,10 @@ function Home() {
     <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('holidayList')}>
+          <FormBox title={t('holidayList')} alt={true}>
             <ul className="list-inside list-disc px-4">
               {holidayList.map((holiday, index) => (
-                <li key={index} className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose">{holiday.date} - {holiday.name}</li>
+                <li key={index} className="font-body py-2 text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
               ))}
             </ul>
           </FormBox>
@@ -25,7 +25,7 @@ function Home() {
             <ul className="list-inside list-disc px-4">
               {
                 Object.keys(userInformation).map((key, index) => (
-                  <li key={index} className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
+                  <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
                 ))
               }
             </ul>
@@ -37,13 +37,12 @@ function Home() {
           <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>
+                <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
               ))}
             </ul>
           </FormBox>
         </div>
       </div>
-      
     </div>
   );
 }

tailwind.config.js

@@ -12,18 +12,23 @@ export default {
       transparent: 'transparent',
       primary: {
         DEFAULT: '#008C46',
-        dark: '#6affb4'
+        // dark: '#6affb4'
+        dark: '#E6F4E1'
       },
       secondary: {
         DEFAULT: '#B1E1B3',
-        dark: '#20542f',
+        // dark: '#20542f',
-        // dark: '#3d9f59',
+        dark: '#7DBD80',
-        variant: {DEFAULT: '#80AE82', dark: '#5F8E5F'}
+        variant: {DEFAULT: '#80AE82', dark: '#5B875D'}
+      },
+      tertiary: {
+        DEFAULT: '#f2f2df',
+        dark: '#3d3d29',
       },
       surface: {
         DEFAULT: '#F6F6F6',
-        dark: '#2d3133',
+        dark: '#2d332d',
-        variant: {DEFAULT: '#F4FFF4', dark: '#3e4345'}
+        variant: {DEFAULT: '#F4FFF4', dark: '#2b372c'}
       },
       
     },