feat: 💸 add sponsors cards to main page

.vscode/settings.json

@@ -17,7 +17,7 @@
 	"explorer.fileNesting.patterns": {
 		"*.tsx": "${capture}.*"
 	},
-	"cSpell.words": ["univoq"],
+	"cSpell.words": ["technoshop", "Technoshop", "univoq"],
 	"cssvar.enable": true,
 	"cssvar.files": ["./_fresh/*"],
 	"conventionalCommits.scopes": ["css", "config", "ui"]

components/SponsorCards.css

@@ -0,0 +1,25 @@
+.components__sponsor_cards {
+	display: flex;
+	gap: var(--_gap);
+	flex-wrap: wrap;
+	justify-content: center;
+	padding: var(--_gap);
+}
+
+.components__sponsor_card {
+	background-color: var(--_translucent);
+	aspect-ratio: 2/1;
+	padding: var(--_gap);
+	display: flex;
+	width: 15rem;
+	justify-content: center;
+	align-items: center;
+	border: var(--_border-size) solid transparent;
+	transition: all var(--_transition-delay) ease;
+	outline: none;
+
+	&:focus-visible,
+	&:hover {
+		border-color: var(--_accent-color);
+	}
+}

components/SponsorCards.tsx

@@ -0,0 +1,67 @@
+import { asset } from '$fresh/runtime.ts'
+
+export function SponsorCards() {
+	return (
+		<div class='components__sponsor_cards'>
+			{sponsors.map(SponsorCard)}
+		</div>
+	)
+}
+
+function SponsorCard(
+	{ href, src, alt }: { href: string; src: string; alt: string },
+) {
+	return (
+		<a class='components__sponsor_card' href={href} target='_blank'>
+			<img src={asset(src)} alt={alt} />
+		</a>
+	)
+}
+
+const sponsors = [
+	{
+		href: 'https://www.iut.u-bordeaux.fr/general/',
+		src: '/assets/sponsors/iut_bordeaux.png',
+		alt: 'IUT de Bordeaux',
+	},
+	{
+		href: 'https://www.u-bordeaux.fr/',
+		src: '/assets/sponsors/universite_bordeaux.png',
+		alt: 'Université de Bordeaux',
+	},
+	{
+		href: 'https://www.iut.u-bordeaux.fr/technoshop/',
+		src: '/assets/sponsors/technoshop.png',
+		alt: 'Technoshop',
+	},
+	{
+		href: 'https://aquitaine.maisons-pour-la-science.org/',
+		src: '/assets/sponsors/maison_pour_la_science.png',
+		alt: 'Maison pour la science',
+	},
+	{
+		href: 'https://www.math.u-bordeaux.fr/imb/spip.php',
+		src: '/assets/sponsors/imb.png',
+		alt: 'Institut de Mathématiques de Bordeaux',
+	},
+	{
+		href: 'https://terre-negre.fr/',
+		src: '/assets/sponsors/ehpad_terre_negre.png',
+		alt: 'EHPAD Terre Nègre',
+	},
+	{
+		href: 'https://capemploi33.org/',
+		src: '/assets/sponsors/cap_emploi_33.png',
+		alt: 'CAP Emploi 33',
+	},
+	{
+		href: 'https://www.inrae.fr/',
+		src: '/assets/sponsors/inrae.png',
+		alt: 'INRAE',
+	},
+	{
+		href: 'https://vegetalsignals.com/',
+		src: '/assets/sponsors/vegetal-signals.png',
+		alt: 'Vegetal Signals',
+	},
+]

src/stylesheets/components.css

@@ -1,4 +1,5 @@
 @import url('../../components/Header.css');
 @import url('../../components/Footer.css');
 @import url('../../components/Heros.css');
+@import url('../../components/SponsorCards.css');
 @import url('../../islands/ThemePicker.css');