feature(website): org carousel update with links (#667)

website/src/app/[lang]/[region]/(website)/our-work/(sections)/contributors-orgs-carousel.tsx

@@ -3,10 +3,12 @@
 import { useScreenSize } from '@/hooks/useScreenSize';
 import { Carousel, CarouselContent } from '@socialincome/ui';
 import Image from 'next/image';
+import Link from 'next/link';
 import epflSVG from '../(assets)/epfl.svg';
 import govSVG from '../(assets)/gov.svg';
 import mckinseySVG from '../(assets)/mckinsey.svg';
 import microsoftSVG from '../(assets)/microsoft.svg';
+import milkSVG from '../(assets)/milk.svg';
 import r17SVG from '../(assets)/r17.svg';
 import srgSVG from '../(assets)/srg.svg';
 import unSVG from '../(assets)/un.svg';
@@ -15,13 +17,14 @@ export function ContributorsOrgsCarousel() {
 	const screenSize = useScreenSize();
 
 	const companyLogos = [
-		{ logo: govSVG, name: 'FDFA' },
-		{ logo: microsoftSVG, name: 'Microsoft' },
-		{ logo: mckinseySVG, name: 'McKinsey' },
-		{ logo: unSVG, name: 'UN' },
-		{ logo: srgSVG, name: 'SRG' },
-		{ logo: epflSVG, name: 'EPFL' },
-		{ logo: r17SVG, name: 'R17' },
+		{ logo: govSVG, name: 'FDFA', url: 'https://www.fdfa.admin.ch' },
+		{ logo: microsoftSVG, name: 'Microsoft', url: 'https://www.microsoft.com' },
+		{ logo: mckinseySVG, name: 'McKinsey', url: 'https://www.mckinsey.com' },
+		{ logo: unSVG, name: 'UN', url: 'https://www.un.org' },
+		{ logo: srgSVG, name: 'SRG', url: 'https://srf.ch' },
+		{ logo: epflSVG, name: 'EPFL', url: 'https://www.epfl.ch' },
+		{ logo: r17SVG, name: 'R17', url: 'https://r17ventures.com' },
+		{ logo: milkSVG, name: 'Milk', url: 'https://milkinteractive.ch' },
 	];
 
 	let slidesToScroll;
@@ -32,10 +35,10 @@ export function ContributorsOrgsCarousel() {
 			slidesToScroll = 2;
 			break;
 		case 'md':
-			slidesToScroll = 3;
+			slidesToScroll = 4;
 			break;
 		default:
-			slidesToScroll = 4;
+			slidesToScroll = 5;
 			break;
 	}
 
@@ -49,8 +52,10 @@ export function ContributorsOrgsCarousel() {
 			showDots
 		>
 			{companyLogos.map((entry, index) => (
-				<CarouselContent key={index} className="aspect-video p-4">
-					<Image src={entry.logo} alt={`${entry.name} Logo`} className="h-full object-contain" />
+				<CarouselContent key={index} className="aspect-video p-8">
+					<Link href={entry.url} target="_blank">
+						<Image src={entry.logo} alt={`${entry.name} Logo`} className="h-full object-contain" />
+					</Link>
 				</CarouselContent>
 			))}
 		</Carousel>