styled class hover effects

src/App.jsx

@@ -6,7 +6,7 @@ import "./i18n.js";
 const App = () => {
   return (
     <>
-      <div className='min-h-screen grid grid-rows-[5rem_1fr] font-avenir'>
+      <div className='min-h-screen grid grid-rows-[5rem_1fr] font-avenir box-border'>
         <NavBar />
         <div className='hidden'></div>
         <div className='w-full'>

src/components/Button/Button.jsx

@@ -1,9 +1,9 @@
-const Button = ({ label, isOutline, onClick, className = "" }) => {
+const Button = ({ label, isOutline, onClick }) => {
   return (
     <button
-      className={`px-4 py-2 rounded-lg transition-colors duration-300 ${isOutline
-        ? 'border border-dark-blue-800 text-black-500 bg-white'
-        : 'text-white bg-dark-blue-800'
+      className={`px-4 py-2 rounded-lg transition-colors duration-300 border border-dark-blue-800 ${isOutline
+        ? 'text-dark-blue-800 bg-white hover:text-white hover:bg-dark-blue-800'
+        : 'text-white bg-dark-blue-800 hover:text-dark-blue-800 hover:bg-white'
         }`}
       onClick={onClick}
     >

src/components/Class.jsx

@@ -6,7 +6,7 @@ const Class = ({ classObj }) => {
   const ageGroup = classObj.ageGroup.toString();
 
   return (
-    <div className="p-6 bg-white rounded-lg border border-neutral-100 overflow-hidden hover:shadow-md transition-shadow">
+    <div className="p-6 bg-white rounded-lg shadow-shadow overflow-hidden hover:shadow-shadow-hover transition-shadow">
       <div className="flex flex-col gap-4">
         {/* Header */}
         <div>

src/components/ConversationClass.jsx

@@ -1,7 +1,7 @@
 
 const ConversationClass = ({ conversation }) => {
   return (
-    <div className="w-full h-full rounded-2xl shadow-lg grid grid-rows-[2fr_3fr]">
+    <div className="w-full h-full rounded-2xl shadow-shadow hover:shadow-shadow-hover transition-shadow grid grid-rows-[2fr_3fr]">
       <div className="bg-[url('/images/blue_mountains.png')] bg-no-repeat bg-cover bg-center rounded-t-2xl"></div>
       <div className="bg-white px-6 py-5 row-start-2 rounded-b-2xl">
         <h3 className='text-2xl font-semibold'>Talk to {conversation.instructor}</h3>

src/components/Level.jsx

@@ -9,15 +9,17 @@ const Level = ({ level, isSimplified }) => {
   }
 
   return isSimplified ? (
-    <div className={`py-6 pl-7 bg-white ${levelColorMapping[level.level]} rounded-2xl border border-neutral-100 overflow-hidden hover:drop-shadow-md transition-shadow`}>
-      <h3 className="text-xl font-extrabold text-dark-blue-800 mb-1">Level {level.level}</h3>
-      <p className="text-neutral-600 text-sm mb-2">{level.description || "New Concept Book 1 -- Ch. 1-72"}</p>
-      <p className="text-blue-500 text-sm font-medium">
-        View Level →
-      </p>
+    <div className="shadow-shadow hover:shadow-shadow-hover transition-shadow rounded-2xl">
+      <div className={`py-6 pl-7 bg-white ${levelColorMapping[level.level]} rounded-2xl overflow-hidden transition-shadow`}>
+        <h3 className="text-xl font-extrabold text-dark-blue-800 mb-1">Level {level.level}</h3>
+        <p className="text-neutral-600 text-sm mb-2">{level.description || "New Concept Book 1 -- Ch. 1-72"}</p>
+        <p className="text-blue-500 text-sm font-medium">
+          View Level →
+        </p>
+      </div>
     </div>
   ) : (
-    <div className="w-full h-full rounded-2xl shadow-lg grid grid-rows-[2fr_3fr]">
+    <div className="w-full h-full rounded-2xl shadow-shadow hover:shadow-shadow-hover transition-shadow grid grid-rows-[2fr_3fr]">
       <div className="bg-[url('/images/blue_mountains.png')] bg-no-repeat bg-cover bg-center rounded-t-2xl"></div>
       <div className="bg-white px-6 py-5 row-start-2 rounded-b-2xl">
         <h4 className='text-2xl font-semibold'>Level: {level.level}</h4>

src/components/NavBar/NavBar.jsx

@@ -14,7 +14,7 @@ const NavBar = () => {
         {/* Navbar content */}
         <div className='flex justify-between items-center sm:px-8 px-3 h-full'>
           <Link href="/" className="flex-shrink-0 flex items-center">
-            <img className="h-10 w-auto" src={dillarLogo} alt="Dillar English Academy" />
+            <img className="h-14 w-auto" src={dillarLogo} alt="Dillar English Academy" />
           </Link>
           {/* Desktop navigation */}
           <div className="hidden sm:flex sm:items-center sm:space-x-4">

src/components/NavBar/NavLink.jsx

@@ -1,12 +1,16 @@
-import { Link } from 'wouter';
+import { Link, useLocation } from 'wouter';
 
-const NavLink = ({ href, isMobile, children }) => (
-  <Link
-    href={href}
-    className={`font-normal text-black text-base ${isMobile ? "block pl-3 pr-4 py-2 border-l-4 border-transparent hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 transition duration-150 ease-in-out" : "hover:bg-gray-100 hover:text-gray-900 px-3 py-2 rounded-md transition duration-150 ease-in-out"}`}
-  >
-    {children}
-  </Link>
-);
+const NavLink = ({ href, isMobile, children }) => {
+  const [location] = useLocation();
+
+  return (
+    <Link
+      href={href}
+      className={`font-normal text-base ${location == href ? "text-blue-700 hover:text-blue-400" : "text-black hover:text-neutral-300"} ${isMobile ? "block pl-3 pr-4 py-2 border-l-4 border-transparent" : "px-3 py-2 rounded-md"}`}
+    >
+      {children}
+    </Link>
+  )
+};
 
 export default NavLink

src/pages/ClassesPage.jsx

@@ -22,7 +22,7 @@ const ClassesPage = () => {
 
     const fetchData = async () => {
       setLoading(true);
-      const classData = await getClasses(queryString.toString());
+      const classData = await getClasses(classFilter.toString());
       setClasses(classData);
       const levelData = await getLevels();
       setAllLevels(levelData);

tailwind.config.js

@@ -6,9 +6,6 @@ export default {
   ],
   theme: {
     extend: {
-      boxShadow:{
-        'level': 'inset 0.5em 0em #A5D3E9',
-      },
       fontFamily: {
         avenir: ["Avenir", "sans-serif"],
       },
@@ -51,9 +48,16 @@ export default {
           600: '#4C4B63',
           700: '#2A2A37',
         },
+      },
+      boxShadow: {
+        "shadow": "0 0.25rem 24px 0 rgba(76, 75, 99, 0.18)",
+        "shadow-hover": "0px 4px 16px 0px rgba(74, 73, 96, 30%), 0px 6px 36px 0px rgba(74, 73, 96, 16%)"
       }
     },
   },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   plugins: [],
 }