From 4083b4616219ca529e053d51c4ebfd289607460d Mon Sep 17 00:00:00 2001
From: Atul Patidar <48468580+AtulPatidar1709@users.noreply.github.com>
Date: Tue, 15 Aug 2023 19:14:49 +0530
Subject: [PATCH 1/2] #584 Share Icon for twitter added with some pre written
 text about our Website.

---
 src/components/Card.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index d659a9f..2362c4c 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,7 +1,15 @@
 import React from "react";
 import { motion } from "framer-motion";
-
+import { BiSolidShareAlt } from "react-icons/bi";
 const Card = ({ title, link, description, i, img }) => {
+  const handleShareClick = () => {
+    const tweetText = encodeURIComponent(
+      "Just stumbled upon an amazing free resource for learning programming! 🚀 Sharing the wealth of knowledge, check it out! 💻 Link :- https://web-resources-hub-project.vercel.app/" + "    " + "#Programming #LearningJourney"
+    );
+    const twitterURL = `https://twitter.com/intent/tweet?text=${tweetText}`;
+    window.open(twitterURL, "_blank");
+  };
+
   return (
     <a href={link} target={"_blank"} rel="noreferrer">
       <motion.div
@@ -11,6 +19,14 @@ const Card = ({ title, link, description, i, img }) => {
         animate={{ opacity: 1, translateX: 0 }}
         transition={{ duration: 0.2, delay: i * 0.2 }}
       >
+        <div className="relative">
+          <button
+            className="twt-icon absolute top-0 right-0 -mt-2 -mr-2"
+            onClick={handleShareClick}
+          >
+            <BiSolidShareAlt />
+          </button>
+        </div>
         <div className="img img-container self-center">
           {/* src={`'${img}'`} */}
           <img className="rounded-sm w-40 h-20" src={img} alt="img" />

From fee2034a175bc2e7b90571a3aff858bcb6185d5c Mon Sep 17 00:00:00 2001
From: Atul Patidar <48468580+AtulPatidar1709@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:42:28 +0530
Subject: [PATCH 2/2] Fix: Change some css #654

---
 src/components/Card.jsx | 53 ++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 2362c4c..6f81124 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,10 +1,13 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { BiSolidShareAlt } from "react-icons/bi";
+
 const Card = ({ title, link, description, i, img }) => {
   const handleShareClick = () => {
     const tweetText = encodeURIComponent(
-      "Just stumbled upon an amazing free resource for learning programming! 🚀 Sharing the wealth of knowledge, check it out! 💻 Link :- https://web-resources-hub-project.vercel.app/" + "    " + "#Programming #LearningJourney"
+      "Just stumbled upon an amazing free resource for learning programming! 🚀 Sharing the wealth of knowledge, check it out! 💻 Link :- https://web-resources-hub-project.vercel.app/" +
+        "    " +
+        "#Programming #LearningJourney"
     );
     const twitterURL = `https://twitter.com/intent/tweet?text=${tweetText}`;
     window.open(twitterURL, "_blank");
@@ -12,36 +15,26 @@ const Card = ({ title, link, description, i, img }) => {
 
   return (
     <a href={link} target={"_blank"} rel="noreferrer">
-      <motion.div
-        className="card border-b-2 bg-gradient-to-r from-[#545454] to-[#807f7f]  border-b-[#000000] flex flex-col rounded-lg  gap-4 p-4 shadow-3xl h-[16rem] w-[24rem] hover:shadow-4xl "
-        key={i}
-        initial={{ opacity: 0, translateX: -100 }}
-        animate={{ opacity: 1, translateX: 0 }}
-        transition={{ duration: 0.2, delay: i * 0.2 }}
-      >
-        <div className="relative">
-          <button
-            className="twt-icon absolute top-0 right-0 -mt-2 -mr-2"
-            onClick={handleShareClick}
-          >
-            <BiSolidShareAlt />
-          </button>
-        </div>
-        <div className="img img-container self-center">
-          {/* src={`'${img}'`} */}
-          <img className="rounded-sm w-40 h-20" src={img} alt="img" />
-        </div>
-
-        <div className="content flex flex-col gap-4 items-center">
-          <h2 className="text-[#e5e5e5] hover:text-[#fff] text-lg font-bold hover:text-orange-500">
-            {title}
-          </h2>
-
-          <p className="text-[0.9rem] text-[#e2e1e1] w-4/5 font-inter tracking-wide leading-5">
-            {description.slice(0, 120) + "..."}
-          </p>
+      <div className="h-[20rem]">
+        <div className="relative w-64 border bg-[#cacaca] border-gray-300 rounded-lg shadow-md shadow-black-100 overflow-hidden transform transition-transform hover:scale-105 hover:bg-[#e2e1e1] hover:shadow-black-100">
+          <div className="relative">
+            <img
+              src={img}
+              alt={title}
+              className="w-full h-32 object-cover transform transition-transform hover:scale-110"
+            />
+            <div className="absolute top-2 right-2">
+              <BiSolidShareAlt onClick={handleShareClick} className="h-6 w-6 text-[#cacaca] hover:text-blue-500 cursor-pointer" />
+            </div>
+          </div>
+          <div className="p-4">
+            <h3 className="text-xl font-semibold mb-2">{title}</h3>
+            <p className="text-white-600">
+              {description.slice(0, 120) + "..."}
+            </p>
+          </div>
         </div>
-      </motion.div>
+      </div>
     </a>
   );
 };