Repository: srbhr/Resume-Matcher
File: webapp/app/_components/footer/footer.tsx (TypeScript)

Code before:
            </div>
          </a>

          <a href="https://www.producthunt.com/posts/resume-matcher">
            <div className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300">
              <Image
                className="hover:bg-[#44365F]"
                src="/icons/productHunt-light.svg"
                width={20}
                height={20}
                alt="GitHub Octocat Logo"
              />{" "}
            </div>
          </a>
          <a href="https://discord.com/invite/t3Y9HEuV34">
            <div className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300">
              <Image
                className="hover:bg-[#44365F]"
                src="/icons/github-light.svg"
                width={20}
                height={20}
                alt="GitHub Octocat Logo"
              />
            </div>
          </a>
        </div>
      </div>
    </section>
  );
};
export default Footer;


Review comment (bug):
🆕   Firstly, since each of these icon links point to external sites, I think these should also open in new tabs also (same as the text links), by adding the attributes to the`<a>` element; `target="_blank"` and `rel="noopener noreferrer"`.

🐛 ⚠️   Secondly, the links for the Discord and GitHub icons seems to be misplaced the wrong way around. For example, the GitHub icon links to the Discord site, and vice versa.

:accessibility:  Thirdly, for accessibility purposes, I believe we should add a `title` attribute to the link `<a>` elements, that way when a user hovers over the icon links, they a tooltip is displayed describing where the link will navigate the user to.

💡 Finally, the `<div>` wrapper around each icon `<Image>` component is redundant in my opinion, as we can simply apply the same classNames directly on the `<a>` element.

See the full solution catering to the four above suggestions, below:

```suggestion
        <div className="flex gap-5">
          <a
            href="https://discord.com/invite/t3Y9HEuV34"
            className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
            title="Discord"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              className="hover:bg-[#44365F]"
              src="/icons/discord-light.svg"
              width={20}
              height={20}
              alt="GitHub Octocat Logo"
            />
          </a>

          <a
            href="https://www.producthunt.com/posts/resume-matcher"
            className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
            title="Product Hunt"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              className="hover:bg-[#44365F]"
              src="/icons/productHunt-light.svg"
              width={20}
              height={20}
              alt="GitHub Octocat Logo"
            />
          </a>
          <a
            href="https://github.com/srbhr/Resume-Matcher"
            className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
            title="GitHub"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              className="hover:bg-[#44365F]"
              src="/icons/github-light.svg"
              width={20}
              height={20}
              alt="GitHub Octocat Logo"
            />
          </a>
        </div>
```

Code after:
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/productHunt-light.svg"
            width={20}
            height={20}
            alt="Product Hunt Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://github.com/srbhr/Resume-Matcher"
          title="GitHub"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/github-light.svg"
            width={20}
            height={20}
            alt="GitHub Logo"
          />
        </a>
      </div>
    </section>
  );
};
export default Footer;