Add sponsor social media links and logos
This commit is contained in:
parent
8180099165
commit
16dec47ddc
5 changed files with 106 additions and 28 deletions
3
client/public/logos/instagram-logo.png
Normal file
3
client/public/logos/instagram-logo.png
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:21f86b55f986848665ce54ab354ff6b43b7705e6c421d90c04369882b5956766
|
||||
size 2648790
|
||||
3
client/public/logos/website-logo.png
Normal file
3
client/public/logos/website-logo.png
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b2eb2103aadf922017a07cdc5e8ce6bc0627b358c7d7227900c69ca89e091a03
|
||||
size 246153
|
||||
|
|
@ -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={{
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
"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.",
|
||||
"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.",
|
||||
"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.",
|
||||
const sponsorInfo: Record<string, SponsorInfo> = {
|
||||
"Drum Coffee": {
|
||||
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.",
|
||||
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"
|
||||
logoPath="/sponsors/drum-coffee-missoula.png"
|
||||
description={sponsorInfo["Drum Coffee"]}
|
||||
onClick={() => setSelectedSponsor("Drum Coffee")}
|
||||
/>
|
||||
<SponsorCard
|
||||
name="Imagine Nation Brewing"
|
||||
logoPath="/sponsors/imagine-nation-brewing.png"
|
||||
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")}
|
||||
key={name}
|
||||
name={name}
|
||||
logoPath={info.logoPath}
|
||||
description={info.description}
|
||||
onClick={() => setSelectedSponsor(name)}
|
||||
websiteUrl={info.websiteUrl}
|
||||
facebookUrl={info.facebookUrl}
|
||||
instagramUrl={info.instagramUrl}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue