Update sponsors (#1391)

src/pages/_components/landing-page/Sponsors.astro

@@ -3,21 +3,21 @@ import Icon from 'astro-icon';
 
 const mainSponsors = [
 	{
-		height: 60,
+		height: 66,
 		label: 'Netlify',
 		src: 'sponsors/netlify',
 		href: 'https://www.netlify.com/?utm_campaign=Astro-2024&utm_source=astro-referral',
 		caption: 'Official Deployment Partner',
 	},
 	{
-		height: 32,
+		height: 36,
 		label: 'Sentry',
 		src: 'sponsors/sentry',
 		caption: 'Official App Monitoring Partner',
 		href: 'https://sentry.io/welcome/?utm_medium=partner&utm_source=astro&utm_campaign=astro-homepage',
 	},
 	{
-		height: 45,
+		height: 50,
 		label: 'Google IDX',
 		src: 'sponsors/idx',
 		caption: 'Official Online Editor Partner',
@@ -74,6 +74,12 @@ const sponsors = [
 		src: 'sponsors/lucky-media',
 		href: 'https://www.luckymedia.dev/astro-development-agency?utm_campaign=sponsor&utm_source=astro&utm_medium=web',
 	},
+	{
+		height: 60,
+		label: 'Datadog',
+		src: 'sponsors/datadog',
+		href: 'https://www.datadoghq.com/',
+	},
 ];
 ---
 
@@ -99,7 +105,7 @@ const sponsors = [
 						href={sponsor.href}
 						rel="sponsored"
 						target="_blank"
-						class="h-40 p-4 size-full basis-1/3 flex flex-col lg:grid lg:grid-rows-subgrid lg:row-span-full items-center justify-center gap-2 sm:gap-4 -outline-offset-2 hover:bg-astro-gray-100/5 transition-colors duration-400"
+						class="h-40 p-4 size-full basis-1/3 flex flex-col lg:grid lg:grid-rows-subgrid lg:row-span-full items-center justify-center gap-4 -outline-offset-2 hover:bg-astro-gray-100/5 bg-clip-padding transition-colors duration-400"
 					>
 						<Icon
 							class="lg:row-start-2 lg:mx-auto max-w-full"
@@ -121,13 +127,22 @@ const sponsors = [
 						href={sponsor.href}
 						rel="sponsored"
 						target="_blank"
-						class="h-32 lg:h-44 grow shrink basis-1/2 p-4 lg:basis-1/4 flex flex-col items-center justify-center gap-2 sm:gap-4 first:border-t first:border-astro-dark-100/20 odd:border-r odd:border-astro-dark-100/20 lg:[&:nth-child(2)]:border-r lg:[&:nth-child(6)]:border-r lg:[&:nth-child]:border-astro-dark-100/20 hover:bg-astro-gray-100/5 transition-colors  duration-400 last:odd:col-span-2 last:odd:border-r-0 -outline-offset-2"
+						class="h-32 lg:h-44 grow shrink basis-1/2 p-4 lg:basis-1/4 flex flex-col items-center justify-center gap-2 sm:gap-4 first:border-t first:border-astro-dark-100/20 odd:border-r odd:border-astro-dark-100/20 lg:[&:nth-child(2)]:border-r lg:[&:nth-child(6)]:border-r lg:[&:nth-child]:border-astro-dark-100/20 hover:bg-astro-gray-100/5 bg-clip-padding transition-colors  duration-400 last:odd:col-span-2 last:odd:border-r-0 -outline-offset-2"
 					>
 						<Icon name={sponsor.src} height={sponsor.height} alt="" class="max-w-full" />
 						<span class="sr-only">{sponsor.label}</span>
 					</a>
 				))
 			}
+			<a
+				href="https://opencollective.com/astrodotbuild"
+				rel="sponsored"
+				target="_blank"
+				class="h-32 lg:h-44 grow shrink basis-1/2 p-4 lg:basis-1/4 flex flex-col items-center justify-center gap-2 first:border-t first:border-astro-dark-100/20 odd:border-r odd:border-astro-dark-100/20 lg:[&:nth-child(2)]:border-r lg:[&:nth-child(6)]:border-r lg:[&:nth-child]:border-astro-dark-100/20 hover:bg-astro-gray-100/5 bg-clip-padding transition-colors duration-400 last:odd:col-span-2 last:odd:border-r-0 -outline-offset-2"
+			>
+				<Icon name="heart" height="24" alt="" class="max-w-full text-astro-red" />
+				<span class="text-astro-gray-200">Sponsor Astro</span>
+			</a>
 		</div>
 	</div>
 </section>