Activate buttons in hero section

src/components/Roadmaps/CategoryFilterButton.tsx

@@ -12,11 +12,13 @@ export function CategoryFilterButton(props: CategoryFilterButtonProps) {
   return (
     <button
       className={cn(
-        'border-b bg-gradient-to-l py-1.5 pr-3 text-center text-sm text-gray-500 hover:from-white hover:text-gray-900 sm:text-right',
+        'border-b bg-gradient-to-l py-1.5 pr-3 text-center text-sm text-gray-500 hover:text-gray-900 sm:text-right',
         {
           'from-white font-semibold text-gray-900':
             selected && category !== 'All Roadmaps',
-          'font-semibold text-gray-900': selected && category === 'All Roadmaps',
+          'font-semibold text-gray-900':
+            selected && category === 'All Roadmaps',
+          'hover:from-white': category !== 'All Roadmaps',
         },
       )}
       type="button"

src/components/Roadmaps/RoadmapsPageHeader.tsx

@@ -1,24 +1,40 @@
+import { isLoggedIn } from '../../lib/jwt.ts';
+import { showLoginPopup } from '../../lib/popup.ts';
+
 export function RoadmapsPageHeader() {
   return (
     <div className="bg-white py-3 sm:py-12">
       <div className="container">
-        <div className="flex flex-col items-start sm:items-center bg-white">
-          <h1 className="text-2xl sm:text-5xl font-bold">Developer Roadmaps</h1>
-          <p className="mb-3 mt-1 sm:my-3 text-sm sm:text-lg">
-            Browse the ever-growing list of up-to-date, community driven roadmaps
+        <div className="flex flex-col items-start bg-white sm:items-center">
+          <h1 className="text-2xl font-bold sm:text-5xl">Developer Roadmaps</h1>
+          <p className="mb-3 mt-1 text-sm sm:my-3 sm:text-lg">
+            Browse the ever-growing list of up-to-date, community driven
+            roadmaps
           </p>
-          <p className="flex flex-col sm:flex-row gap-1.5 sm:gap-3 w-full sm:w-auto mb-3 sm:mb-0">
+          <p className="mb-3 flex w-full flex-col gap-1.5 sm:mb-0 sm:w-auto sm:flex-row sm:gap-3">
             <a
-              className="inline-block rounded-md bg-black px-3.5 py-2 sm:py-1.5 text-sm sm:text-base text-white"
-              href="#"
+              className="inline-block rounded-md bg-black px-3.5 py-2 text-sm text-white sm:py-1.5 sm:text-base"
+              href="https://draw.roadmap.sh"
+              onClick={(e) => {
+                if (!isLoggedIn()) {
+                  e.preventDefault();
+                  showLoginPopup();
+                }
+              }}
             >
               Draw your own roadmap
             </a>
             <a
-              className="inline-block rounded-md bg-gray-300 px-3.5 py-2 sm:py-1.5 text-sm sm:text-base text-black"
-              href="#"
+              className="inline-block rounded-md bg-gray-300 px-3.5 py-2 text-sm text-black sm:py-1.5 sm:text-base"
+              href="https://roadmap.sh/ai"
+              onClick={(e) => {
+                if (!isLoggedIn()) {
+                  e.preventDefault();
+                  showLoginPopup();
+                }
+              }}
             >
-              Generate Roadmap with AI
+              Generate Roadmaps with AI
             </a>
           </p>
         </div>