dev: featured cards design update

Author: dewanshparashar

packages/app/src/components/earn/BestOpportunityCard.tsx

@@ -27,49 +27,49 @@ export function BestOpportunityCard({
     <Link
       href={`/earn/opportunity/${opportunity.category}/${opportunity.id}`}
       onClick={() => onOpportunitySelect?.(opportunity, 'featured-card')}
-      className="group bg-neutral-100 rounded p-4 flex flex-col gap-4 hover:bg-default-black-hover transition-colors relative justify-between no-underline"
+      className="group flex flex-col justify-between gap-4 rounded-[15px] border-[0.5px] border-bright-blue bg-earn-featured-card p-4 no-underline transition-colors"
     >
       <div className="flex items-start justify-between gap-3">
-        <div className="flex items-start gap-3 flex-1 min-w-0">
-          <div className="shrink-0 w-10 h-10">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <div className="flex h-[46px] w-[46px] shrink-0 items-center justify-center rounded-xl border border-white/5 bg-white/5">
             <SafeImage
               src={opportunity.tokenIcon}
               alt={opportunity.token}
-              width={40}
-              height={40}
-              className="shrink-0 object-contain rounded w-10 h-10"
+              width={34}
+              height={34}
+              className="shrink-0 rounded object-contain"
             />
           </div>
-          <div className="flex-1 min-w-0">
-            <p className="text-base font-semibold text-white leading-tight truncate">
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-lg font-bold leading-tight text-white">
               {opportunity.name}
             </p>
-            <p className="text-xs text-white/50 leading-tight truncate mt-0.5">
+            <p className="mt-1 truncate text-xs leading-tight text-white/50">
               {categoryDisplayName}
             </p>
           </div>
         </div>
         <Tooltip
           content={
-            <p className="text-xs text-white leading-relaxed">
+            <p className="text-xs leading-relaxed text-white">
               This opportunity has the highest total value locked (TVL) in its category, making it
               one of the most popular choices.
             </p>
           }
         >
-          <div className="shrink-0 flex items-center gap-1 bg-primary-cta rounded px-2 py-1 cursor-help">
+          <div className="flex shrink-0 cursor-help items-center gap-1 rounded-md bg-earn-featured-badge px-2 py-1">
             <SparklesIconSolid className="h-3 w-3 text-white" />
-            <span className="text-xs font-medium text-white">Featured</span>
+            <span className="text-xs text-white">Featured</span>
           </div>
         </Tooltip>
       </div>
 
       <div className="flex items-end justify-between gap-3">
-        <div className="flex flex-col gap-1">
-          <p className="text-xs text-white/50 leading-none">APY</p>
-          <p className="text-2xl font-semibold text-white leading-tight">{opportunity.apy}</p>
+        <div className="flex flex-col">
+          <p className="text-sm leading-none text-white/50">APY</p>
+          <p className="text-xl font-medium leading-tight text-white">{opportunity.apy}</p>
         </div>
-        <div className="shrink-0 bg-white/10 rounded p-2 flex items-center justify-center group-hover:bg-white/20">
+        <div className="bg-white/10 rounded p-2 flex items-center justify-center group-hover:bg-white/20 shrink-0">
           <ChevronRightIcon className="h-4 w-4 text-white" />
         </div>
       </div>

packages/app/tailwind.config.js

@@ -62,6 +62,10 @@ module.exports = {
         'banner-gradient':
           'linear-gradient(90deg, rgba(40, 160, 240, 0.5) 1.46%, rgba(239, 130, 32, 0.5) 98.51%)',
         'celebration-gradient': 'linear-gradient(to right, #1B4ADD6F, #E573106F)',
+        'earn-featured-card':
+          'linear-gradient(rgba(18, 170, 255, 0.05), rgba(27, 74, 221, 0.05)), linear-gradient(90deg, rgba(33, 33, 33, 0.8), rgba(33, 33, 33, 0.8)), linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1))',
+        'earn-featured-badge':
+          'linear-gradient(170.5deg, rgb(24, 192, 218) 16.333%, rgb(12, 74, 237) 95.811%)',
       },
       backgroundSize: {
         '1/2': '50%',
@@ -78,7 +82,7 @@ module.exports = {
         'orange': '#FFEED3',
         'lime': '#E8FFE4',
         'lavender': '#7693EB',
-        'bright-blue': '#00FBFF',
+        'bright-blue': '#18c0da',
         'blue': '#12aaff',
 
         // SECONDARY