From 2ef4c390b6d2a3c2ce5999f59fb366d08355d75f Mon Sep 17 00:00:00 2001
From: Aditya NV <138525577+Aditya-NV-06@users.noreply.github.com>
Date: Tue, 1 Oct 2024 22:51:01 +0530
Subject: [PATCH] fix:minor layout and link issues (#161)

Co-authored-by: Francesco Ciulla <francescociullaroma@gmail.com>
---
 package-lock.json                |  2 +-
 src/components/Card.tsx          |  4 ++++
 src/components/Footer.tsx        | 37 ++++++++++++--------------------
 src/components/navbar/Navbar.tsx |  4 +++-
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d19221..8442b20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "rustcrab",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "canvas-confetti": "^1.9.3",
         "js-cookie": "^3.0.5",
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index cbc400f..6e458cb 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -32,6 +32,7 @@ const Card: FC<CardProps> = ({ item, key }) => {
   }, []);
 
   return (
+    
     <Link
       target="_blank"
       href={item.link}
@@ -40,6 +41,7 @@ const Card: FC<CardProps> = ({ item, key }) => {
     >
       <div className="flex items-center gap-5 sm:gap-10 relative hover:scale-105 p-6 px-10 transition duration-300">
         <div className="flex flex-col md:flex-row gap-5 items-start w-full">
+        <div className="md:flex flex-col">
           <Image
             src={item.icon ?? item.cover ?? ""}
             alt={item.name ?? item.title ?? ""}
@@ -55,10 +57,12 @@ const Card: FC<CardProps> = ({ item, key }) => {
               {item.description}
             </p>
           </div>
+          </div>
         </div>
         <FaArrowRight className="dark:text-white opacity-0 group-hover:opacity-100 -translate-x-10 group-hover:translate-x-0 transition duration-300" />
       </div>
     </Link>
+    
   );
 };
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e877c8c..48df5f7 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -8,54 +8,45 @@ export default function Footer() {
   return (
     <footer className="flex flex-col items-center justify-center space-y-4 p-4 border-t-2 bg-white dark:bg-black">
       <div className="flex justify-center space-x-6">
-        <a
-          href="https://x.com/FrancescoCiull4"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-2xl text-black dark:text-white hover:text-black hover:scale-125 transform transition duration-400"
-        >
+        <Link href="https://x.com/FrancescoCiull4" target="_blank" rel="noopener noreferrer" className="text-2xl text-black dark:text-white hover:text-black hover:scale-125 transform transition duration-400">
           <FaXTwitter />
-        </a>
-        <a
-          href="https://www.linkedin.com/in/francesco-ciulla-roma/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-2xl text-black dark:text-white hover:text-blue-900 hover:scale-125 transform transition duration-400"
-        >
-          <FaLinkedin />
-        </a>
-        <a
+        </Link>
+        <Link href="https://www.linkedin.com/in/francesco-ciulla-roma/" target="_blank" rel="noopener noreferrer" className="text-2xl text-black dark:text-white hover:text-blue-900 hover:scale-125 transform transition duration-400">
+        <FaLinkedin />
+        </Link>
+
+        <Link
           href="https://www.youtube.com/@francescociulla"
           target="_blank"
           rel="noopener noreferrer"
           className="text-2xl text-black dark:text-white hover:text-red-600 hover:scale-125 transform transition duration-400"
         >
           <FaYoutube />
-        </a>
-        <a
+        </Link>
+        <Link
           href="https://discord.gg/4c-784142072763383858"
           target="_blank"
           rel="noopener noreferrer"
           className="text-2xl text-black dark:text-white hover:text-indigo-600 hover:scale-125 transform transition duration-400"
         >
           <FaDiscord />
-        </a>
-        <a
+        </Link>
+        <Link
           href="https://www.instagram.com/francescociull4/"
           target="_blank"
           rel="noopener noreferrer"
           className="text-2xl text-black dark:text-white hover:text-pink-500 hover:scale-125 transform transition duration-400"
         >
           <FaInstagram />
-        </a>
-        <a
+        </Link>
+        <Link
           href="https://www.threads.net/@francescociull4"
           target="_blank"
           rel="noopener noreferrer"
           className="text-2xl text-black dark:text-white hover:text-black hover:scale-125 transform transition duration-400"
         >
           <FaThreads />
-        </a>
+        </Link>
       </div>
       <div className='text-black dark:text-white sm:flex sm:items-center sm:justify-center gap-3'>
         <span className='sm:text-center gap-2 lg:flex lg:items-center lg:justify-center sm:block md:flex text-xs'>
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index a468573..c6b6cff 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -18,12 +18,14 @@ const menuItems = [
 
 const Navbar: React.FC = () => {
   return (
-    <ul className="flex space-x-4 small-medium:space-x-2 capitalize md:text-base text-base sm:text-sm">
+    <ul className="flex space-x-4 small-medium:space-x-2 capitalize">
+      <li className="space-x-4">
       {menuItems.map((item, index) => (
         <Link href={item.link} key={index} className="cursor-pointer transition ease-in-out">
           <span className="hover:text-orange-500">{item.items}</span>
         </Link>
       ))}
+      </li>
     </ul>
   );
 };