hover effect

Author: corwintines

app/[locale]/roadmap/_components/roadmap.tsx

@@ -250,7 +250,7 @@ const RoadmapPage = () => {
             {technicalUpgradesItems.map((item) => (
               <LinkBox
                 key={item.title}
-                className="flex flex-col rounded-3xl border border-[rgba(159,43,212,0.11)] bg-roadmap-upgrade-card-gradient p-6"
+                className="flex flex-col rounded-3xl border border-[rgba(159,43,212,0.11)] bg-roadmap-upgrade-card-gradient p-6 hover:bg-roadmap-upgrade-card-gradient-hover hover:shadow-lg"
               >
                 <div className="mb-3 flex gap-4">
                   {item.icon}
@@ -259,8 +259,15 @@ const RoadmapPage = () => {
                 <p className="m-0 p-0 pb-3 text-body-medium">
                   {item.description}
                 </p>
-                <InlineLink href={item.href}>Learn more</InlineLink>
-                <LinkOverlay href={item.href} />
+
+                <LinkOverlay href={item.href}>
+                  <InlineLink
+                    href={item.href}
+                    className="hover:text-primary-hover"
+                  >
+                    Learn more
+                  </InlineLink>
+                </LinkOverlay>
               </LinkBox>
             ))}
           </div>

src/styles/semantic-tokens.css

@@ -87,6 +87,7 @@
 
     --roadmap-card-gradient: linear-gradient(123deg, rgba(255, 255, 255, 0.20) 58.99%, rgba(174, 110, 203, 0.13) 104.04%);
     --roadmap-upgrade-card-gradient: linear-gradient(95deg, rgba(211, 145, 242, 0.12) 0%, rgba(159, 43, 212, 0.12) 102.78%);
+    --roadmap-upgrade-card-gradient-hover: linear-gradient(95deg, rgba(211, 145, 242, 0.2) 0%, rgba(159, 43, 212, 0.2) 102.78%);
 
     /* Shadows */
     --shadow-color-a: hsla(var(--purple-800), 0.02);

tailwind.config.ts

@@ -233,6 +233,8 @@ const config = {
         "gradient-staking": "var(--gradient-staking)",
         "roadmap-card-gradient": "var(--roadmap-card-gradient)",
         "roadmap-upgrade-card-gradient": "var(--roadmap-upgrade-card-gradient)",
+        "roadmap-upgrade-card-gradient-hover":
+          "var(--roadmap-upgrade-card-gradient-hover)",
       },
       boxShadow: {
         "table-box": "var(--table-box-shadow)",