fix: improve the light-theme

components/Breadcrumbs/index.tsx

@@ -11,9 +11,9 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
       <div className="hidden sm:flex py-3">
         <Link
           href={`/`}
-          className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer"
-        >
-          <HomeIcon className="m-auto fill-text-primary-light dark:fill-text-quaternary" />
+          className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer
+        border-light-silver border-2 border-opacity-75">
+          <HomeIcon className="m-auto fill-text-primary-light dark:fill-text-quaternary"/>
           <div>Home</div>
         </Link>
         <div className="text-2xl mx-2.5 font-semibold text-text-secondary-light">
@@ -23,19 +23,21 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
           <Link
             key={i}
             href={section.url}
-            className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer"
-          >
+            className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer
+            border-dark-silver border-2 border-opacity-75">
             {section.name?.split('-').join(' ')}
           </Link>
         ))}
       </div>
-      <div className="flex sm:hidden">
+      <div className="flex sm:hidden border-gray-300 border-2 border-opacity-75">
         <Link
           href={`/`}
           className="flex gap-x-2 text-text-quaternary text-lg py-0.5 rounded-lg cursor-pointer my-auto capitalize"
         >
           <IoChevronBack className="text-text-quinary" />
         </Link>
+        <div className="dark:text-text-primary text-1.5xl capitalize font-medium mx-2.5 my-auto border-light-silver border-2 border-opacity-75">
+          {sections[0].name}
         <div className="dark:text-text-primary text-1.5xl capitalize font-medium mx-2.5 my-auto">
           {sections[0].name?.split('-').join(' ')}
         </div>

components/Cards/Card.tsx

@@ -27,7 +27,7 @@ export const Card: FC<CardProps> = ({ data, onClick }) => {
   }, [])
 
   return (
-    <article className="z-10 h-full w-full rounded-3xl dark:bg-slate-800 dark:text-text-primary dark:shadow-sm bg-light-white">
+    <article className="z-10 h-full w-full rounded-3xl dark:bg-slate-800 dark:text-text-primary dark:shadow-sm bg-light-white border-light-silver border-2 border-opacity-75">
       <div className="card-body">
         <header className="flex justify-between items-center gap-2">
           <h2

components/Cards/CardsList.tsx

@@ -19,7 +19,7 @@ const CardsList: FC<{ cards: IData[] }> = ({ cards }) => {
 
   return (
     <>
-      <ul className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 justify-items-stretch ">
+      <ul className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 justify-items-stretch border-gray-300 border-2 border-opacity-75">
         {cards.map((data: IData) => (
           <CardsListItem
             key={data.id}

components/Footer/Footer.tsx

@@ -7,7 +7,7 @@ export const Footer: FC = () => {
   const isDarkMode = resolvedTheme === 'dark'
 
   return (
-    <footer className="z-10 flex w-full items-baseline justify-center rounded-lg text-center px-2">
+    <footer className="z-10 flex w-full items-baseline justify-center rounded-lg text-center px-2 border-gray-700 border-2 border-opacity-75 shadow-lg shadow-gray-700">
       <div className="text-sm leading-7 md:tracking-wide text-center text-black dark:text-theme-secondary-light">
         <div>&copy; {new Date().getFullYear()} LinksHub | MIT License </div>
         <div className="lg:flex">

components/Searchbar/Searchbar.tsx

@@ -124,7 +124,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({
             type="text"
             id="simple-search"
             name="simple-search"
-            className="peer h-12 w-full flex items-center justify-start pl-[46px] pr-4 py-3 bg-slate-100 bg-opacity-50 dark:bg-zinc-400 dark:bg-opacity-20 rounded-[10px] outline-none hover:shadow-input-hover focus:shadow-input-focus dark:hover:shadow-input-hover-dark dark:focus:shadow-input-focus-dark"
+            className="peer h-12 w-full flex items-center justify-start pl-[46px] pr-4 py-3 bg-slate-100 bg-opacity-50 dark:bg-zinc-400 dark:bg-opacity-20 rounded-[10px] outline-none hover:shadow-input-hover focus:shadow-input-focus dark:hover:shadow-input-hover-dark dark:focus:shadow-input-focus-dark border-gray-300 border-2 border-opacity-75"
             placeholder="Quick search..."
             value={searchQuery}
             onChange={handleSearchChange}

pages/index.tsx

@@ -341,13 +341,13 @@ export default function Home() {
             )}
           </div>
         </div>
-        <div className="mt-10 mb-6 md:mb-0">
+        <div className="mt-10 mb-6 md:mb-0 border-dark-silver border-2 border-opacity-75 shadow-lg shadow-silver">
           <div className="dark:bg-slate-800 bg-light-white rounded-lg border border-[#BDBDBD14] sm:flex-row items-center justify-between md:p-7 md:pr-12 p-5">
             <div className="md:flex items-center gap-4">
               <div className="text-yellow-400 ml-4 lg:ml-0">
                 <StarIcon />
               </div>
-              <h1 className="text-xl dark:text-text-tertiary">
+              <h1 className="text-xl dark:text-text-tertiary ">
                 More awesome resources are coming soon!
               </h1>
             </div>