pushing Hero down a bit and adding active states in routed links

frontend/src/Navigation.tsx

@@ -59,7 +59,11 @@ export default function Navigation({
         </div>
         <NavLink
           to={'/'}
-          className="my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+          className={({ isActive }) =>
+            `${
+              isActive ? 'bg-gray-3000' : ''
+            } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100`
+          }
         >
           <img src={Message} className="ml-2 w-5"></img>
           <p className="my-auto text-eerie-black">Chat</p>
@@ -94,7 +98,11 @@ export default function Navigation({
         <div className="flex h-48 flex-col border-b-2 border-gray-100">
           <NavLink
             to="/about"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+            className={({ isActive }) =>
+              `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100 ${
+                isActive ? 'bg-gray-3000' : ''
+              }`
+            }
           >
             <img src={Info} alt="info" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">About</p>

frontend/src/conversation/Conversation.tsx

@@ -42,7 +42,7 @@ export default function Conversation() {
             ></ConversationBubble>
           );
         })}
-        {messages.length === 0 && <Hero className="mt-24 md:mt-36"></Hero>}
+        {messages.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
       </div>
       <div className="fixed bottom-14 flex w-10/12 md:bottom-12 md:w-[50%]">
         <div

frontend/tailwind.config.cjs

@@ -13,6 +13,7 @@ module.exports = {
         'gray-alpha': 'rgba(0,0,0, .1)',
         'gray-1000': '#F6F6F6',
         'gray-2000': 'rgba(0, 0, 0, 0.5)',
+        'gray-3000': 'rgba(243, 243, 243, 1)',
         'red-1000': 'rgb(254, 202, 202)',
         'red-2000': '#F44336',
         'red-3000': '#621B16',