fix:minor layout and link issues (#161)

Co-authored-by: Francesco Ciulla <[email protected]>
FrancescoXX · Oct 1, 2024 · 2ef4c39 · 2ef4c39
1 parent bf46cf0
commit 2ef4c39
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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>
   );
 };