feat: enhance UI with hover effects, animations and add download links

src/components/DevHub.tsx

@@ -1,18 +1,36 @@
-import { CodeBracketIcon } from '@heroicons/react/24/outline'
+import {
+  BookOpenIcon,
+  LifebuoyIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline';
 
 const features = [
   {
     name: 'Documentation',
     description: 'Documentation for Mycelium.',
+    href: 'https://threefold.info/mycelium_network/docs/',
+    icon: BookOpenIcon,
+  },
+  {
+    name: 'Support',
+    description: 'Talk to an expert.',
+    href: 'https://threefoldfaq.crisp.help/en/',
+    icon: LifebuoyIcon,
   },
-  { name: 'Support', description: 'Talk to an expert.' },
   {
     name: 'Forum',
     description: 'Forum for all your questions.',
+    href: 'https://forum.threefold.io/',
+    icon: ChatBubbleOvalLeftEllipsisIcon,
   },
-  { name: 'Community', description: 'Join our Developers community on telegram.' },
-
-]
+  {
+    name: 'Community',
+    description: 'Join our Developers community on telegram.',
+    href: 'https://t.me/threefoldtesting',
+    icon: UserGroupIcon,
+  },
+];
 
 export function DevHub() {
   return (
@@ -25,27 +43,31 @@ export function DevHub() {
               Developer Hub
             </p>
             <p className="mt-6 text-lg text-gray-300">
-               Our Developer Hub is a resource center for developers looking to build on top of Mycelium. Join our Developers community on telegram to get started.
+              Our Developer Hub is a resource center for developers looking to build on top of Mycelium. Join our Developers community on telegram to get started.
             </p>
           </div>
           <dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
             {features.map((feature) => (
-              <div key={feature.name} className="rounded-2xl border border-gray-700 p-6">
-                <div className="flex items-center gap-x-3">
-                  <CodeBracketIcon
-                    aria-hidden="true"
-                    className="h-6 w-6 flex-none text-cyan-500"
-                  />
-                  <dt className="flex-auto font-semibold text-white">
-                    {feature.name}
-                  </dt>
-                </div>
-                <dd className="mt-4 text-gray-400">{feature.description}</dd>
-              </div>
+              <a
+                key={feature.name}
+                href={feature.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block rounded-2xl border border-gray-700 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 hover:bg-gray-800"
+              >
+                <feature.icon
+                  aria-hidden="true"
+                  className="h-6 w-6 flex-none text-cyan-500 mb-4"
+                />
+                <dt className="font-semibold text-white">
+                  {feature.name}
+                </dt>
+                <dd className="mt-2 text-gray-400">{feature.description}</dd>
+              </a>
             ))}
           </dl>
         </div>
       </div>
     </div>
-  )
+  );
 }