#57 Sponsor Logos Not Appearing

src/components/SponsorLogo.tsx

@@ -1,25 +1,47 @@
+import Image, { StaticImageData } from "next/image";
 import Link from "next/link";
+import { motion } from "framer-motion";
 
 type SponsorLogoProps = {
   sponsorLink: string;
-  sponsorImage: string;
+  sponsorImage: StaticImageData | string;
+  alt: string;
 };
 
-const SponsorLogo = (props: SponsorLogoProps) => {
+const SponsorLogo = ({ alt, sponsorImage, sponsorLink }: SponsorLogoProps) => {
+  const resolvedSrc =
+    typeof sponsorImage === "string" ? sponsorImage : sponsorImage.src;
+  const isSvg = resolvedSrc?.toLowerCase().endsWith(".svg");
+
+  const sharedProps = {
+    alt,
+    className: "mx-auto h-auto w-full max-w-[260px]",
+    loading: "lazy" as const,
+  };
+
   return (
     <Link
+      aria-label={`Visit ${alt}`}
       className="relative m-5 block opacity-100 transition-opacity duration-300 ease-in-out hover:opacity-100"
-      data-aos="zoom-in-up"
-      href={props.sponsorLink}
-      target="blank"
+      href={sponsorLink}
+      rel="noreferrer"
+      target="_blank"
     >
-      <img
-        alt=""
-        data-aos="zoom-in-up"
-        data-aos-duration="1000"
-        data-aos-easing="ease-in-out"
-        src={props.sponsorImage}
-      />
+      <motion.div
+        className="flex items-center justify-center"
+        initial={{ opacity: 0, scale: 0.92, y: 24 }}
+        transition={{ duration: 0.45, ease: "easeOut" }}
+        viewport={{ amount: 0.2, once: false }}
+        whileInView={{ opacity: 1, scale: 1, y: 0 }}
+      >
+        {isSvg ? (
+          <img {...sharedProps} src={resolvedSrc} />
+        ) : typeof sponsorImage === "string" ? (
+          <img {...sharedProps} src={sponsorImage} />
+        ) : (
+          <Image {...sharedProps} sizes="260px" src={sponsorImage} />
+        )}
+      </motion.div>
     </Link>
   );
 };

src/components/SponsorSection/SponsorSection.tsx

@@ -19,6 +19,7 @@ const SponsorSection = () => {
               key={sponsor.sponsorLink}
             >
               <SponsorLogo
+                alt={sponsor.alt}
                 sponsorImage={sponsor.sponsorImage}
                 sponsorLink={sponsor.sponsorLink}
               />

src/components/SponsorSection/SponsorsInfo.ts

@@ -1,23 +1,34 @@
 import sponsorLogoArcurve from "../../images/sponsors/sponsor-logo-arcurve.png";
 import sponsorPason from "../../images/sponsors/sponsor-logo-pason.svg";
 import sponsorIEEE from "../../images/sponsors/sponsor-logo-ieee.png";
+import sponsorSeisware from "../../images/sponsors/sponsor-logo-seisware.png";
+import type { StaticImageData } from "next/image";
 
 export type Organization = {
   sponsorLink: string;
-  sponsorImage: string;
+  sponsorImage: StaticImageData | string;
+  alt: string;
 };
 
 export const SponsorList: Organization[] = [
   {
-    sponsorImage: sponsorPason.src,
+    alt: "Pason logo",
+    sponsorImage: sponsorPason,
     sponsorLink: "https://www.pason.com/",
   },
   {
-    sponsorImage: sponsorLogoArcurve.src,
+    alt: "Arcurve logo",
+    sponsorImage: sponsorLogoArcurve,
     sponsorLink: "https://www.arcurve.com/",
   },
   {
-    sponsorImage: sponsorIEEE.src,
+    alt: "IEEE logo",
+    sponsorImage: sponsorIEEE,
     sponsorLink: "https://www.ieee.org/",
   },
+  {
+    alt: "Seisware logo",
+    sponsorImage: sponsorSeisware,
+    sponsorLink: "https://www.seisware.com/",
+  },
 ];

src/pages/_app.tsx

@@ -15,7 +15,10 @@ const inter = Inter({ subsets: ["latin"] });
 
 export default function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
-    Aos.init({ duration: 1000 }); // Init AOS. Sets AOS default duration as 1s
+    Aos.init({
+      duration: 1000, // default duration 1s
+      offset: 50, // start animations sooner after entering viewport
+    });
   }, []);
 
   return (