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

Code before:
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div className="flex gap-5 pt-12">
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://discord.com/invite/t3Y9HEuV34"
          title="Discord Logo"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/discord-light.svg"
            width={20}
            height={20}
            alt="Discord Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://www.producthunt.com/posts/resume-matcher"
          title="Producthunt Logo"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/productHunt-light.svg"
            width={20}
            height={20}
            alt="Producthunt 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 Logo"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/github-light.svg"
            width={20}
            height={20}
            alt="GitHub Logo"
          />

Review comment (suggestion):
Minor accessibility improvement: The `title` attribute of the `<a>`  should describe the link itself rather than the image. Also the image already has the `alt` attribute value applied that describes the underlying icon image.

```suggestion
          title="Product Hunt"
```

💡 Also note that I corrected the mispeling of `Producthunt` with `Product Hunt` in the suggestion above.

Code after:
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div className="flex gap-5 pt-12">
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://discord.com/invite/t3Y9HEuV34"
          title="Discord"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/discord-light.svg"
            width={20}
            height={20}
            alt="Discord Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://www.producthunt.com/posts/resume-matcher"
          title="Product Hunt"
          rel="noopener noreferrer"
        >
          <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>