Add sponsor social media links and logos

client/public/logos/instagram-logo.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21f86b55f986848665ce54ab354ff6b43b7705e6c421d90c04369882b5956766
+size 2648790

client/public/logos/website-logo.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b2eb2103aadf922017a07cdc5e8ce6bc0627b358c7d7227900c69ca89e091a03
+size 246153

client/src/components/Footer.tsx

@@ -102,7 +102,7 @@ const Footer: React.FC = () => {
               className="inline-block mt-4 transition-transform duration-300 ease-in-out transform hover:scale-110"
             >
               <img 
-                src="/facebook-logo.png" 
+                src="logos/facebook-logo.png" 
                 alt="Facebook" 
                 className="w-10 h-10 rounded-full shadow-lg hover:shadow-xl"
                 style={{

client/src/components/Sponsors.tsx

@@ -6,9 +6,12 @@ interface SponsorCardProps {
   logoPath: string;
   description: string;
   onClick: () => void;
+  websiteUrl?: string;
+  facebookUrl?: string;
+  instagramUrl?: string;
 }
 
-const SponsorCard: React.FC<SponsorCardProps> = ({ name, logoPath, onClick }) => (
+const SponsorCard: React.FC<SponsorCardProps> = ({ name, logoPath, onClick, websiteUrl, facebookUrl, instagramUrl }) => (
   <motion.div
     className="bg-white rounded-lg shadow-md p-4 sm:p-6 flex flex-col items-center h-full cursor-pointer"
     whileHover={{ scale: 1.03 }}
@@ -16,13 +19,39 @@ const SponsorCard: React.FC<SponsorCardProps> = ({ name, logoPath, onClick }) =>
     onClick={onClick}
   >
     <h2 className="text-xl sm:text-2xl font-semibold text-[#8C1D40] mb-2 sm:mb-4 text-center">{name}</h2>
-    <div className="w-full h-32 sm:h-48 flex items-center justify-center">
+    <div className="w-full h-32 sm:h-48 flex items-center justify-center mb-4">
       <img src={logoPath} alt={`${name} logo`} className="max-w-full max-h-full object-contain" />
     </div>
+    <div className="flex justify-center space-x-4 mt-auto">
+      {websiteUrl && (
+        <a href={websiteUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
+          <img src="/logos/website-logo.png" alt="Website" className="w-6 h-6" />
+        </a>
+      )}
+      {facebookUrl && (
+        <a href={facebookUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
+          <img src="/logos/facebook-logo.png" alt="Facebook" className="w-6 h-6" />
+        </a>
+      )}
+      {instagramUrl && (
+        <a href={instagramUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
+          <img src="/logos/instagram-logo.png" alt="Instagram" className="w-6 h-6" />
+        </a>
+      )}
+    </div>
   </motion.div>
 );
 
-const Popup: React.FC<{ isOpen: boolean; onClose: () => void; children: React.ReactNode }> = ({ isOpen, onClose, children }) => (
+interface PopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  websiteUrl?: string;
+  facebookUrl?: string;
+  instagramUrl?: string;
+}
+
+const Popup: React.FC<PopupProps> = ({ isOpen, onClose, children, websiteUrl, facebookUrl, instagramUrl }) => (
   <AnimatePresence>
     {isOpen && (
       <motion.div
@@ -40,6 +69,23 @@ const Popup: React.FC<{ isOpen: boolean; onClose: () => void; children: React.Re
           onClick={(e) => e.stopPropagation()}
         >
           {children}
+          <div className="flex justify-center space-x-4 mt-4 mb-4">
+            {websiteUrl && (
+              <a href={websiteUrl} target="_blank" rel="noopener noreferrer">
+                <img src="/logos/website-logo.png" alt="Website" className="w-6 h-6" />
+              </a>
+            )}
+            {facebookUrl && (
+              <a href={facebookUrl} target="_blank" rel="noopener noreferrer">
+                <img src="/logos/facebook-logo.png" alt="Facebook" className="w-6 h-6" />
+              </a>
+            )}
+            {instagramUrl && (
+              <a href={instagramUrl} target="_blank" rel="noopener noreferrer">
+                <img src="/logos/instagram-logo.png" alt="Instagram" className="w-6 h-6" />
+              </a>
+            )}
+          </div>
           <button className="mt-4 bg-[#8C1D40] text-white px-4 py-2 rounded w-full sm:w-auto" onClick={onClose}>Close</button>
         </motion.div>
       </motion.div>
@@ -47,13 +93,39 @@ const Popup: React.FC<{ isOpen: boolean; onClose: () => void; children: React.Re
   </AnimatePresence>
 );
 
+interface SponsorInfo {
+  description: string;
+  logoPath: string;
+  websiteUrl?: string;
+  facebookUrl?: string;
+  instagramUrl?: string;
+}
+
 const Sponsors: React.FC = () => {
   const [selectedSponsor, setSelectedSponsor] = useState<string | null>(null);
 
-  const sponsorInfo = {
+  const sponsorInfo: Record<string, SponsorInfo> = {
-    "Drum Coffee": "Drum Coffee partnered with MCDi to provide ASL lessons on coffee-related signology, enhancing their ability to serve Deaf community members. This initiative promotes inclusivity and improves communication in their bustling cafe environment.",
+    "Drum Coffee": {
-    "Imagine Nation Brewing": "Imagine Nation Brewing hosted a vibrant fundraising event, donating proceeds to MCDi. Their generous support not only raised funds but also raised awareness about the Deaf community, making a significant impact on our mission.",
+      description: "Drum Coffee partnered with MCDi to provide ASL lessons on coffee-related signology, enhancing their ability to serve Deaf community members. This initiative promotes inclusivity and improves communication in their bustling cafe environment.",
-    "Gild Brewing": "Gild Brewing organized a community-focused fundraiser for MCDi, combining craft beer tasting with Deaf culture education. Their event not only raised funds but also fostered a deeper understanding of Deaf culture, making a significant impact on our mission.",
+      logoPath: "/sponsors/drum-coffee-missoula.png",
+      websiteUrl: "https://drumcoffeeroasting.com/",
+      facebookUrl: "https://www.facebook.com/drumcoffeemt",
+      instagramUrl: "https://www.instagram.com/drumcoffee/"
+    },
+    "Imagine Nation Brewing": {
+      description: "Imagine Nation Brewing hosted a vibrant fundraising event, donating proceeds to MCDi. Their generous support not only raised funds but also raised awareness about the Deaf community, making a significant impact on our mission.",
+      logoPath: "/sponsors/imagine-nation-brewing.png",
+      websiteUrl: "https://imaginenationbrewing.com/",
+      facebookUrl: "https://www.facebook.com/ImagineNationBrewing",
+      instagramUrl: "https://www.instagram.com/imaginenationbrewingco"
+    },
+    "Gild Brewing": {
+      description: "Gild Brewing organized a community-focused fundraiser for MCDi, combining craft beer tasting with Deaf culture education. Their event not only raised funds but also fostered a deeper understanding of Deaf culture, making a significant impact on our mission.",
+      logoPath: "/sponsors/gild-brewing.png",
+      websiteUrl: "https://www.gildbrewing.com/",
+      facebookUrl: "https://www.facebook.com/gildbrewing/",
+      instagramUrl: "https://www.instagram.com/gildbrewing/"
+    },
   };  
 
   return (
@@ -66,32 +138,32 @@ const Sponsors: React.FC = () => {
         <h1 className="text-3xl sm:text-4xl font-bold text-[#8C1D40] mb-6 sm:mb-8 text-center">Our Sponsors</h1>
         
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-8">
+          {Object.entries(sponsorInfo).map(([name, info]) => (
             <SponsorCard 
-            name="Drum Coffee" 
+              key={name}
-            logoPath="/sponsors/drum-coffee-missoula.png" 
+              name={name} 
-            description={sponsorInfo["Drum Coffee"]}
+              logoPath={info.logoPath}
-            onClick={() => setSelectedSponsor("Drum Coffee")}
+              description={info.description}
-          />
+              onClick={() => setSelectedSponsor(name)}
-          <SponsorCard 
+              websiteUrl={info.websiteUrl}
-            name="Imagine Nation Brewing" 
+              facebookUrl={info.facebookUrl}
-            logoPath="/sponsors/imagine-nation-brewing.png" 
+              instagramUrl={info.instagramUrl}
-            description={sponsorInfo["Imagine Nation Brewing"]}
-            onClick={() => setSelectedSponsor("Imagine Nation Brewing")}
-          />
-          <SponsorCard 
-            name="Gild Brewing" 
-            logoPath="/sponsors/gild-brewing.png" 
-            description={sponsorInfo["Gild Brewing"]}
-            onClick={() => setSelectedSponsor("Gild Brewing")}
             />
+          ))}
         </div>
       </motion.div>
 
-      <Popup isOpen={!!selectedSponsor} onClose={() => setSelectedSponsor(null)}>
+      <Popup 
+        isOpen={!!selectedSponsor} 
+        onClose={() => setSelectedSponsor(null)}
+        websiteUrl={selectedSponsor ? sponsorInfo[selectedSponsor].websiteUrl : undefined}
+        facebookUrl={selectedSponsor ? sponsorInfo[selectedSponsor].facebookUrl : undefined}
+        instagramUrl={selectedSponsor ? sponsorInfo[selectedSponsor].instagramUrl : undefined}
+      >
         {selectedSponsor && (
           <>
             <h2 className="text-xl sm:text-2xl font-bold mb-4">{selectedSponsor}</h2>
-            <p className="text-sm sm:text-base">{sponsorInfo[selectedSponsor as keyof typeof sponsorInfo]}</p>
+            <p className="text-sm sm:text-base">{sponsorInfo[selectedSponsor].description}</p>
           </>
         )}
       </Popup>