update card colors and animation for dark mode

Author: Max Shkutnyk

fern/components/cookbooks/CookbookCard.tsx

@@ -10,10 +10,10 @@ interface CookbookCardProps {
 export const CookbookCard: React.FC<CookbookCardProps> = ({ cookbook, bgColor }) => (
   <a
     href={cookbook.href}
-    className={`block border border-gray-200 rounded-lg hover:shadow-md transition-shadow ${bgColor} dark:hover:brightness-110 dark:hover:border-gray-500 transition-colors `}
+    className={`block border border-gray-200 rounded-lg hover:shadow-md transition-shadow ${bgColor} dark:border-gray-800 dark:hover:brightness-125 dark:hover:border-gray-400 transition-colors `}
   >
     <div className="p-6 flex flex-col justify-between h-full">
-      <h3 className="text-base font-medium text-gray-800 mb-3">{cookbook.title}</h3>
+      <h3 className="text-base font-medium text-gray-800 dark:dark-theme-text-color mb-3">{cookbook.title}</h3>
       <div>
         {cookbook.author?.name && (
           <div className="flex items-center mb-4">
@@ -22,14 +22,14 @@ export const CookbookCard: React.FC<CookbookCardProps> = ({ cookbook, bgColor })
               alt={cookbook.author.name}
               className="w-5 h-5 rounded-full mr-2"
             />
-            <span className="text-xs text-gray-600">{cookbook.author.name}</span>
+            <span className="text-xs text-gray-600 dark:dark-theme-text-color">{cookbook.author.name}</span>
           </div>
         )}
         <div className="flex flex-wrap gap-1.5">
           {cookbook.tags.products.map(tag => (
             <span
               key={tag}
-              className="px-1.5 py-0.5 text-[10px] text-gray-600 bg-white/50 rounded-full"
+              className="px-1.5 py-0.5 text-[10px] text-gray-600 bg-white/50 rounded-full dark:dark-theme-text-color"
             >
               {generateDisplayTag(tag)}
             </span>

fern/components/cookbooks/Cookbooks.tsx

@@ -5,7 +5,7 @@ import { CookbookCard } from './CookbookCard';
 import { TagCategories } from './types';
 import { cookbooks } from './data/cookbooks';
 
-const CARD_COLORS = ['bg-[#EEF0EF] dark:bg-[#bcc2bf]', 'bg-[#FDF2F0] dark:bg-[#e9ada2]', 'bg-[#F8F1F9] dark:bg-[#d2b1d7]', 'bg-[#F0F2FB] dark:bg-[#a9b3e0]'];
+const CARD_COLORS = ['bg-[#EEF0EF] dark:bg-[#636363]', 'bg-[#FDF2F0] dark:bg-[#3b3b3b]', 'bg-[#F8F1F9] dark:bg-[#222222]', 'bg-[#F0F2FB] dark:bg-[#141414]'];
 
 export const Cookbooks: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState('');