Partnership page overhaul exploration

public/_redirects

@@ -7,7 +7,6 @@
 
 # Useful redirects
 /chat/                  https://discord.gg/grF4GTXXYm
-/partnerships/          https://astroinc.notion.site/Partner-with-Astro-b05cfd5dcf4248dcbea4a2d81554efed
 /studio/                https://studio.astro.build/
 
 # Common GitHub destinations

src/components/PartnershipNote.astro

@@ -0,0 +1,5 @@
+<aside class={`my-6 px-6 py-4 border border-astro-gray-500 bg-astro-gray-600`}>
+	<div class="my-3 space-y-3">
+		<slot />
+	</div>
+</aside>

src/components/StatsFeature.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+	stats: {
+		amount: string;
+		text: string;
+		source?: string;
+		url?: string;
+	}[];
+}
+---
+
+<section class="my-20 w-full max-w-screen-xl mx-auto">
+	<div class="mt-4 sm:mt-8 grid grid-cols-2 sm:grid-cols-3 gap-2 lg:gap-4">
+		{
+			Astro.props.stats.map(({ amount, text, source, url }) => (
+				<div class="flex flex-col border border-astro-gray-500 bg-astro-gray-600 overflow-hidden">
+					<div class="p-4 xl:p-6 space-y-2">
+						<p class="block text-white font-light text-sm xl:text-base md:text-balance">
+							<span class="block font-semibold text-3xl">{amount}</span>
+							{text}
+						</p>
+						{source && (
+							<a href={url}>
+								<p class="block text-white font-light text-xs pt-4">{source}</p>
+							</a>
+						)}
+					</div>
+				</div>
+			))
+		}
+	</div>
+</section>

src/content/config.ts

@@ -1,5 +1,5 @@
 import { defineCollection } from 'astro:content';
-import { file } from 'astro/loaders';
+import { file, glob } from 'astro/loaders';
 import { z } from 'astro/zod';
 import authors from '../data/authors/authors.json';
 
@@ -138,13 +138,23 @@ export const collections = {
 			badge: z.string().optional(),
 		}),
 	},
-	pages: {
-		schema: z.object({
-			seo: seoSchema,
-			updated_date: z.date().describe('The date this content was last updated.'),
-			locale: z.enum(['en']).default('en'),
-		}),
-	},
+	pages: defineCollection({
+		schema: ({ image }) =>
+			z.discriminatedUnion('pageLayout', [
+				z.object({
+					seo: seoSchema,
+					locale: z.enum(['en']).default('en'),
+					pageLayout: z.literal('blog'),
+					image: image(),
+				}),
+				z.object({
+					seo: seoSchema,
+					locale: z.enum(['en']).default('en'),
+					pageLayout: z.literal('legal').optional(),
+					updated_date: z.date().describe('The date this content was last updated.'),
+				}),
+			]),
+	}),
 	partials: {
 		schema: z.object({}),
 	},

src/content/pages/partnerships.mdx

@@ -0,0 +1,120 @@
+---
+seo:
+  title: Partner with Astro
+  description: Want to partner with Astro?
+pageLayout: blog
+image: ../../assets/partnerships-page-1.webp
+---
+
+import StatsFeature from '~/components/StatsFeature.astro'
+import Note from '~/components/PartnershipNote.astro'
+
+**Let's improve the web, together!**
+
+## ❤ Sponsorships and Official Partners
+
+The easiest way to partner with Astro is to become a sponsor! Your financial contributions support the open-source project's ongoing maintenance and developent.
+
+We recognize some levels of sponsorship with a logo and/or link on Astro sites such as our homepage, GitHub README, and docs website.
+
+<Note color="purple">
+  💸 **To sponsor:** Visit [Open Collective](https://opencollective.com/astrodotbuild) or [GitHub Sponsors](https://github.com/sponsors/withastro) and choose from a list of contribution tiers. Thank you for supporting Astro!
+</Note>
+
+If you don't see your desired level of sponsorship listed, please contact us at `[email protected]`!
+
+We are always happy to work directly with larger sponsors ($2000+ per month) to create a custom sponsorship package. There are also limited options for being an exclusive "official" partner for a particular category ($10,000+ per month). Current official sponsors include:
+
+- [Official Deployment Partner: Netlify](/blog/netlify-official-deployment-partner/)
+- [Official App Monitoring Partner: Sentry](/blog/sentry-official-monitoring-partner/)
+- [Official Online Editor Partner: Google Project IDX](/blog/idx-official-online-editor-partner/)
+
+## 📊 About Astro
+
+{/* The icons from the original are a nice touch! Can we use them here? e.g. trophy for #1 in retention */}
+
+<StatsFeature stats={[
+  { amount: "📦 240k", text: "monthly downloads", source: "NPM downloads", url: "https://www.npmjs.com/package/astro"},
+  { amount: "🌐 79k", text: "X/Twitter Followers", source: "@astrodotbuild", url:"https://x.com/astro.build"},
+  { amount: "⭐ 49k", text: "GitHub Stars", source: "withastro/astro", url:"https://github.com/withastro/astro"},
+  { amount: "🏆 #1", text: "in developer retention", source: "State of JS 2024", url:"https://2024.stateofjs.com/en-US/libraries/meta-frameworks/" },
+  { amount: "❤ #1", text: "in developer interest", source: "State of JS 2024", url:"https://2024.stateofjs.com/en-US/libraries/meta-frameworks/" },
+  { amount: "📈 3x", text: "growth in usage", source: "State of JS 2024", url:"https://2024.stateofjs.com/en-US/libraries/meta-frameworks/" },
+]}/>
+
+## 🤝 Other ways to partner with Astro
+
+Astro maintains relationships with companies, content creators, and other open-source projects.
+
+Reach out to `[email protected]` to explore activities such as:
+
+- [Co-marketing](#-co-marketing)
+- Building or funding [feature development](#-development)
+- Providing a [technical case study](#-technical-case-studies)
+- Inviting us on [podcasts or live streams](#-podcasts-and-livestreams)
+- Creating [video content](#-videos-and-shorts)
+- Submitting [third-party guides](#-third-party-guides) to our docs site
+
+## 📣 Co-Marketing
+
+Co-marketing is partners helping each other by amplifying the others’ message, content, or resources to the benefit of both of communities. 
+
+If you create or build something with or featuring us, we’re happy to share it! This could take the form of a social media post or boost, a blog post announcing our joint-feature, or placement in our newsletter.
+
+For larger coordinated efforts, reach out to us to discuss a potential partnership with a financial arrangement.
+
+<Note color="purple">
+  ✍🏻 **To co-market:** Email `[email protected]` a brief summary of what you want us to amplify, where you want us to amplify it, and how it helps Astro users.
+</Note>
+
+## 🖥 Development
+
+Astro stays lightweight, environmentally friendly, and blazingly fast by being a small set of core features with minimal dependencies. That's why Astro's integration ecosystem is so powerful! Astro integrations extend basic functionality on an opt-in basis. 
+
+**Creating an Astro integration for your product or service is a great way to make it easy for people to use you in their Astro project, and grows the entire ecosystem!**
+
+Don't have the time or people to build your own Astro integration for your company or product? You can partner with us to **directly fund development of an integration**. This allows Astro to prioritize the functionality you need, and create a plug-and-play way for Astro projects to use your service.
+
+Is Astro missing a core feature that would allow you to use or migrate to it? As an open-source project, we welcome community contributors! Check out our [public roadmap](https://github.com/withastro/roadmap) and submit a proposal for missing features that you'd like to see added. If accepted, you are welcome to build it yourself with support and oversight of a core member.
+
+**We also work with partners who are able to fund the development of these core features, so get in touch!**
+
+<Note color="purple">
+  ✍🏻 **To directly fund feature development:** Email `[email protected]` with a brief summary of who you are, and the feature or integration you need. 
+</Note>
+
+## 📑 Technical Case Studies
+
+We’d love to interview companies that have used Astro for a unique or complex use-case in production. [Case studies](/case-studies/) inspire confidence in using Astro and showcase your organization as an Astro adopter.
+
+<Note color="purple">
+  ✍🏻 **To book an interview:** Email `[email protected]` with a description of your project.
+</Note>
+
+## 🎙 Podcasts and Livestreams
+
+Let’s get together and talk about either Astro or a related topic! We can help coordinate booking different members of the core team as guests for your show.
+
+<Note color="purple">
+  ✍🏻 **To book:** Email `[email protected]` with the name of your show or channel and available recording times.
+</Note>
+
+## 📺 Videos and Shorts
+
+Have an idea for compelling Astro content? Reach out and let us know how we can be involved!
+
+<Note color="purple">
+  ✍🏻 **To record:** Email `[email protected]` with your idea, timeline, and resources.
+</Note>
+
+## 📚 Third-party Guides
+
+Astro is proud of its commitment to documentation, and developers love our docs! Developers rely heavily on high quality documentation and written resources when they build for the web. When they don't get it, they move on and choose something else.
+
+Astro accepts third-party guides for installing, configuring, and integrating services with Astro (e.g. content management systems, deploy hosts, storage solutions etc.) on a case-by-case basis. If accepted, our docs team will work with you to ensure a high quality, polished product up to the standard of our own documentation. These guides let Astro users know that your product or service can be used with Astro, and shows them exactly how to get started!
+
+Please be advised that these documents can require extensive writing, testing, and editing to produce content that meets our documentation standards. Therefore, we may not always have the available resources to review and accept submissions. To help us include yours, you can **directly fund our docs team** to work with you on guides about using your product or service with Astro.
+
+<Note color="purple">
+  ✍🏻 **To propose a guide or fund additional docs work:** Email `[email protected]` with your service, timeline, and resources.
+</Note>

src/pages/[slug].astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from 'astro:assets';
 import { type CollectionEntry, getCollection } from 'astro:content';
 import MainLayout from '~/layouts/MainLayout.astro';
 
@@ -14,23 +15,59 @@ export async function getStaticPaths() {
 }
 
 const { page } = Astro.props as { page: CollectionEntry<'pages'> };
-const { seo, updated_date } = page.data;
+const { seo, pageLayout } = page.data;
 const { Content } = await page.render();
 ---
 
 <MainLayout {...seo}>
-	<section class="mb-20 bg-blue-purple-gradient sm:mb-24 md:mb-28 lg:mb-32">
-		<div class="mx-auto flex max-w-screen-lg flex-col items-center pb-16 pt-24 text-center">
-			<p class="code">
-				Last updated on {updated_date.toLocaleDateString('en-US', { dateStyle: 'long' })}
-			</p>
-			<h1 class="heading-3 pb-10 pt-3 sm:heading-2">{seo.title}</h1>
-		</div>
-	</section>
+	{
+		pageLayout !== 'blog' ? (
+			<>
+				<section class="mb-20 bg-blue-purple-gradient sm:mb-24 md:mb-28 lg:mb-32">
+					<div class="mx-auto flex max-w-screen-lg flex-col items-center pb-40 pt-48 text-center">
+						<p class="code">
+							Last updated on{' '}
+							{page.data.updated_date.toLocaleDateString('en-US', { dateStyle: 'long' })}
+						</p>
+						<h1 class="heading-3 pb-10 pt-3 sm:heading-2">{seo.title}</h1>
+					</div>
+				</section>
 
-	<section class="grid-container">
-		<article class="prose">
-			<Content />
-		</article>
-	</section>
+				<section class="grid-container">
+					<article class="prose">
+						<Content />
+					</article>
+				</section>
+			</>
+		) : (
+			<>
+				{page.data.image ? (
+					<div class="mx-auto w-full max-w-screen-lg md:-mb-10 lg:-mb-12 xl:-mb-16">
+						<Image
+							src={page.data.image}
+							widths={[766, 1500]}
+							sizes="100vw"
+							loading="eager"
+							alt=""
+							class="min-h-[240px] w-full object-cover"
+						/>
+					</div>
+				) : (
+					<div class="z-blur -mb-56 h-64 w-full md:-mb-52 md:h-64 lg:-mb-80 lg:h-96" />
+				)}
+
+				<div class="grid-container relative mx-auto max-w-screen-lg md:z-10">
+					<div class="mx-auto w-fit max-w-full bg-black py-8 md:px-10 md:py-12 lg:p-12 lg:py-16 xl:p-16 xl:py-20">
+						<header class="mx-auto w-full max-w-prose text-center">
+							<h1 class="heading-3 mb-4 mt-2 md:heading-2 sm:mb-5 sm:mt-3">{seo.title}</h1>
+						</header>
+						<hr class="-mx-16 my-8 border-astro-gray-500 lg:my-16" />
+						<article class="prose">
+							<Content />
+						</article>
+					</div>
+				</div>
+			</>
+		)
+	}
 </MainLayout>