Merge pull request #18 from vanshanand34/mybranch-2

Improved the changes made to resolve issue #7

src/components/Homeque.js

@@ -112,21 +112,22 @@ const Homeque = () => {
           <div className="flex justify-between items-center w-full max-w-xl mb-8">
             <Link
               to={`/api/chapter/${chap}/shlok/${ver - 1}`}
-              className="transform rotate-180"
-            >
+              className="transform rotate-180">
               <img
-                className="w-8 h-6 sm:w-10 sm:h-8 opacity-20 hover:opacity-50 duration-300 cursor-pointer"
+                className="w-10 h-8 sm:w-10 sm:h-8 opacity-45 hover:opacity-100 duration-300 cursor-pointer"
                 onClick={handlePrevious}
                 src={icon}
                 alt="Previous"
+                title="Previous Shlok"
               />
             </Link>
             <Link to={`/api/chapter/${chap}/shlok/${ver + 1}`}>
               <img
-                className="w-8 h-6 sm:w-10 sm:h-8 opacity-20 hover:opacity-50 duration-300 cursor-pointer"
+                className="w-10 h-8 sm:w-10 sm:h-8 opacity-45 hover:opacity-100 duration-300 cursor-pointer"
                 onClick={handleNext}
-                src={icon}
                 alt="Next"
+                src={icon}
+                title="Next Shlok"
               />
             </Link>
           </div>

src/components/style.css

@@ -4,7 +4,7 @@
   width: 100%;
   position: fixed;
   z-index: 99;
-  color: white;
+  color:white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -27,7 +27,7 @@
 #welcome_container {
   background-color: #fff;
   border: 1px solid #ddd;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px #0000001a;
   padding: 2rem;
   border-radius: 8px;
   margin: 2rem 0;