added cobtent to home page

src/components/Icons.jsx

@@ -8,7 +8,9 @@ import { TbPlayerTrackNext, TbPlayerTrackPrev } from 'react-icons/tb'
 import { IoMdSettings } from "react-icons/io";
 import { LuMessageSquareText } from "react-icons/lu";
 import { LuPanelRight } from "react-icons/lu";
-
+import { FcGoogle } from "react-icons/fc";
+import { IoLogoApple } from "react-icons/io5";
+import { FcSalesPerformance } from "react-icons/fc";
 
 
 export default function Icons({name, className}) {
@@ -40,6 +42,12 @@ export default function Icons({name, className}) {
     <LuMessageSquareText className={`text-base ${className}`} />
     :name.toLowerCase() == 'right-panel' ?
     <LuPanelRight className={`text-base ${className}`} />
+    :name.toLowerCase() == 'google' ?
+    <FcGoogle className={`text-base ${className}`} />
+    :name.toLowerCase() == 'apple' ?
+    <IoLogoApple className={`text-base ${className}`} />
+    :name.toLowerCase() == 'sales' ?
+    <FcSalesPerformance className={`text-base ${className}`} />
     :
     null
     }

src/components/InputText.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-export default function InputText({id, name, type='text', value, handleChange}) {
+export default function InputText({id, name, type='text', placeholder, value, handleChange}) {
   return (
-    <div className='w-full h-10 round overflow-hidden'>
-        <input id={id} name={name} type={type} value={value} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-400 focus:border-purple-600 rounded' />
+    <div className='w-full h-12 overflow-hidden'>
+        <input id={id} name={name} type={type} value={value} placeholder={placeholder} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-300 focus:border-purple-600 rounded-md' />
     </div>
   )
 }

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -12,48 +12,40 @@ export default function BreadcrumbCom({title, span, paths}) {
 
       // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
       var rect = 10;
-      // window.addEventListener('scroll', ()=>{
-      //     if(window.scrollY >= rect + 20){
-      //         setStickNav(true)
-      //         console.log('tru')
-      //     }else{
-      //         setStickNav(false)
-      //         console.log('false')
-      //     }
-      // })
-
-    //   return () => window.removeEventListener('scroll', window.addEventListener('scroll', ()=>{
-    //     if(window.scrollY >= rect + 20){
-    //         setStickNav(true)
-    //     }else{
-    //         setStickNav(false)
-    //     }
-    // }))
+      window.addEventListener('scroll', ()=>{
+          if(window.scrollY >= rect + 20){
+              setStickNav(true)
+              console.log('tru')
+          }else{
+              setStickNav(false)
+              console.log('false')
+          }
+      })
   },[])
 
   return (
-    <div className={`${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}`}>
-
-    <div className= {`w-full py-2 flex justify-between items-center`}>
-      <div className='flex flex-col gap-2'>
-        <div className='flex flex-col md:flex-row gap-1 md:items-center'>
-          <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
-          <span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
+    // ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
+    <div className={`sticky -top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
+      <div className= {`w-full py-2 flex justify-between items-center`}>
+        <div className='flex flex-col gap-2'>
+          <div className='flex flex-col md:flex-row gap-1 md:items-center'>
+            <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
+            <span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
+          </div>
+          <div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
+              <TiHomeOutline className='text-black dark:text-white-body' />
+              {paths.map((item, index) => (
+                <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
+                  <MdKeyboardDoubleArrowRight />
+                  <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
+                </div>
+              ))}
+          </div>
         </div>
-        <div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
-            <TiHomeOutline className='text-black dark:text-white-body' />
-            {paths.map((item, index) => (
-              <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
-                <MdKeyboardDoubleArrowRight />
-                <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
-              </div>
-            ))}
+        <div className='hidden lg:flex'>
+          <DashboardHeader />
         </div>
       </div>
-      <div className='hidden lg:flex'>
-        <DashboardHeader />
-      </div>
-    </div>
     </div>
   )
 }

src/components/layouts/DashboardLayout.jsx

@@ -20,13 +20,13 @@ export default function DashboardLayout() {
             <DashboardAside />
         </div> */}
         <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} lg:hidden w-full fixed inset-0 z-[999]`}>
-            <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
-            <div className={`px-8 py-4 h-full w-4/5 sm:w-72 bg-white-aside dark:bg-black-aside dark:text-white-light`}>
+            <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
+            <div className={`fixed px-8 py-4 h-full w-4/5 sm:w-[400px] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
                 <DashboardAside />
             </div>
         </div>
 
-        <div className='main w-full bg-inherit large:mr-[350px]'>
+        <div className='main w-full bg-inherit large:mr-[400px]'>
             <div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
                 <DashboardHeader />
             </div> 
@@ -43,12 +43,12 @@ export default function DashboardLayout() {
         </div>
 
         {/* Right Aisde */}
-        <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+        <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
             <RightAsideBar />
         </div>
-        <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
+        <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
             {/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
-            <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+            <div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
                 <RightAsideBar />
             </div>
         </div>

src/context/GeneralLayoutContext.jsx

@@ -80,10 +80,12 @@ export default function GeneralLayoutContext({children}) {
       window.addEventListener('resize', ()=>{
           setShrinkAside(false)
           setShowAsideDrawer('')
+          setActiveMenu('')
       })
       return () => window.removeEventListener('resize', window.addEventListener('resize', ()=>{
           setShrinkAside(false)
           setShowAsideDrawer('')
+          setActiveMenu('')
       }))
   },[])
 

src/pages/HomePage.jsx

@@ -1,16 +1,72 @@
 import React from 'react'
 import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+import CustomCounter from '../components/CustomCounter'
+import Icons from '../components/Icons'
 
 export default function HomePage() {
   return (
     <div className='w-full flex flex-col gap-8'>
       <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
       <div className='grid grid-cols-1 gap-8'>
-        <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-8'>
-          <div className='w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
+        <div className='w-full grid grid-cols-1 lg:grid-cols-3 gap-8'>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
+            <p className='text-base sm:text-lg font-bold'>Earnings</p>
+            <div className='flex gap-2 items-end font-bold'>
+              <p className='text-3xl'><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
+              <p>- 12% this week</p>
+            </div>
+          </div>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
+            <p className='text-base sm:text-lg font-bold'>Contributions</p>
+            <div className='flex gap-2 items-end font-bold'>
+              <p className='text-3xl'>$<CustomCounter targetNumber='500' timeInSeconds='1' /></p>
+              <p>+ 56% this week</p>
+            </div>
+          </div>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
+            <p className='text-base sm:text-lg font-bold'>Summary</p>
+            <div className='grid grid-cols-2 gap-4 font-bold'>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Sales</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Revenue</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='265' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Tickets</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='5' timeInSeconds='1' />M</p>
+                  <p className='text-12 text-slate-500'>Tasks</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
+            <p className='text-base sm:text-lg font-bold'>Earnings</p>
+          </div> */}
         </div>
         <div className='w-full'>
           <div className='w-full p-8 min-h-96 bg-white dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-full shadow-[0px_0px_2px_rgba(0,_0,_0,_50)] dark:shadow-round_white'>