subtle border on card hover

apps/www/components/Panel/index.tsx

@@ -5,6 +5,7 @@ interface Props {
   outerClassName?: string
   innerClassName?: string
   hasActiveOnHover?: boolean
+  activeColor?: 'default' | 'brand'
   hasShimmer?: boolean
   hasInnerShimmer?: boolean
   shimmerFromColor?: string
@@ -15,6 +16,7 @@ const Panel = ({
   outerClassName,
   innerClassName,
   hasActiveOnHover = false,
+  activeColor = 'default',
   hasShimmer = false,
   hasInnerShimmer = false,
   shimmerFromColor,
@@ -38,7 +40,9 @@ const Panel = ({
     if (hasShimmer) {
       const activeGlow =
         hasActiveOnHover && isActive
-          ? `radial-gradient(65rem circle at ${x}px ${y}px, var(--colors-brand9), transparent), `
+          ? `radial-gradient(65rem circle at ${x}px ${y}px, var(${
+              activeColor === 'brand' ? '--colors-brand9' : '--colors-scale9'
+            }), transparent), `
           : ''
       outerElement.style.backgroundImage = `
       ${activeGlow}radial-gradient(30rem circle at ${x}px ${y}px, ${
@@ -67,7 +71,7 @@ const Panel = ({
       ref={outerRef}
       className={[
         'relative z-0 rounded-xl bg-gradient-to-b from-background-surface-300 to-scale-400 p-px shadow-md',
-        !trackCursor && hasActiveOnHover ? 'hover:bg-none hover:!bg-brand' : '',
+        !trackCursor && hasActiveOnHover ? 'hover:bg-none hover:!bg-scale-800' : '',
         outerClassName,
       ].join(' ')}
       whileHover="hover"

apps/www/components/Products/ProductCard.tsx

@@ -26,13 +26,13 @@ const ProductCard = ({
   <Link href={url}>
     <a
       className={[
-        'group relative w-full h-[400px] sm:aspect-square md:aspect-auto sm:h-[400px] flex flex-col gap-5 lg:flex-row focus:outline-none focus:border-none focus:ring-brand-600 focus:ring-2 focus:rounded-xl',
+        'group relative w-full h-[400px] flex flex-col gap-5 lg:flex-row focus:outline-none focus:border-none focus:ring-brand-600 focus:ring-2 focus:rounded-xl',
         className,
       ].join(' ')}
       onClick={onClick}
     >
       <Panel
-        // hasShimmer
+        hasShimmer
         hasActiveOnHover
         outerClassName="relative w-full h-full shadow-lg p-0"
         innerClassName="relative overflow-hidden flex-1 flex flex-col items-center gap-5 lg:items-start justify-between w-full rounded-xl h-full bg"