Merge pull request #766 from mehul-m-prajapati/hot_topics

Added spacing between hot topic cards and hover effects

ml-nexus/src/components/Card.jsx

@@ -1,24 +1,17 @@
-import React from 'react'
+// Card.js
+import React from 'react';
 
-function Card({data}) {
+function Card({ data }) {
   return (
-
-
-<div className="lg:w-60 lg:h-72 group hover:dark:bg-[#3A5064] hover:text-[#B9D1DA] bg-white border border-gray-200 rounded-lg shadow dark:bg-[#324655] dark:border-gray-700 overflow-hidden">
-    <a href="#">
-        <img className="rounded-t-lg h-36 w-full object-cover group-hover:scale-105 ease-in duration-200" src={data.img} alt="" />
-    </a>
-    <div className="px-5 py-3">
-        <a href="#">
-            <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">{data.title}</h5>
-        </a>
-        <p className="mb-3 font-normal text-sm text-gray-700 dark:text-gray-400">{data.desc.split(" ").splice(0,8).join(" ") + "..."} 
-          <a className='text-[#61B3A0] group-hover:opacity-100 ease-in-out duration-200 opacity-0' href={data.ref}>Explore more</a>
-        </p>
+    <div className="w-full max-w-xs bg-gray shadow-lg rounded-lg overflow-hidden transform transition duration-300 ease-in-out hover:scale-105 hover:shadow-xl">
+      <img src={data.img} alt={data.title} className="w-full h-48 object-cover" />
+      <div className="p-2">
+        <h2 className="text-xl font-bold">{data.title}</h2>
+        <p className="text-sm mt-2">{data.desc}</p>
+        <a href={data.ref} target="_blank" rel="noopener noreferrer" className="text-green-500 hover:text-green-700 mt-4 block">Learn More</a>
+      </div>
     </div>
-</div>
-
-  )
+  );
 }
 
-export default Card
+export default Card;

ml-nexus/src/components/Hero.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import Btn from './Btn'
-import Card from './Card'
-import { Swiper, SwiperSlide } from 'swiper/react'
+import React from 'react';
+import Btn from './Btn';
+import Card from './Card';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper/modules';
@@ -44,7 +44,7 @@ function Hero() {
     <div className="h-full w-full flex justify-center flex-col">
       <div className="flex mx-auto flex-col items-center">
         <h1 className='text-2xl mt-16 text-center flex items-center'>
-          Welcome To <span className='dark:text-green-400 inline-block text-3xl lg:text-9xl'>ML Nexus</span>
+          Welcome To ML Nexus
         </h1>
         <p className='w-[90vw] lg:w-[65vw] text-center mt-4'>
           This repository is dedicated to providing top-quality machine learning tools and resources. Track our milestones, see top programming languages in use, and monitor community progress—all in one place.
@@ -57,9 +57,10 @@ function Hero() {
           <Btn value={{name: "Contribute", ref: "https://github.com/UppuluriKalyani/ML-Nexus/issues"}} git={true} />
         </div>
 
-
-        <div className="hidden lg:flex justify-evenly">
-          {info.map((data, i) => <Card data={data} key={i} />)}
+        <div className="hidden lg:flex justify-evenly space-x-4">
+          {info.map((data, i) => (
+            <Card key={i} data={data} />
+          ))}
         </div>
 
         <div className="block lg:hidden">