[Homepage] Replace DevPlat cards with video (#17403)

* [Homepage] Replace DevPlat cards with video

* updating thumbnail

* adding the cf-stack image to assets

---------

Co-authored-by: Jason Farber <[email protected]>

Author: KianNH

src/assets/cloudflare-stack.jpg

@@ -4,6 +4,7 @@ import { z } from "astro:schema";
 import { marked } from "marked";
 
 import { CardGrid, Card, LinkCard } from "@astrojs/starlight/components";
+import Stream from "../Stream.astro";
 
 const props = z.object({
 	title: z.string(),
@@ -47,17 +48,36 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
 			</div>
 		)
 	}
-	<CardGrid>
+
+	<div class="w-full">
 		{
-			cards.map((card) => (
-				<Card title={card.title}>
-					<span set:html={marked.parse(card.text)} />
-					<br />
-					<LinkCard title={card.cta.title} href={card.cta.href} />
-				</Card>
-			))
+			title === "Developer Platform" ? (
+				<div class="[&>article]:gap-0">
+					<Card title="">
+						<Stream
+							videoId="d89f290431f98e551f2b1467f85d6561"
+							videoTitle="foo"
+							thumbnailTimeOrURL="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/cloudflare-stack.jpg"
+							moreVideosLink="false"
+						/>
+
+						<LinkCard title={"Explore our Developer Platform"} href={"/products/?product-group=Developer+platform"} />
+					</Card>
+				</div>
+			) : (
+				<CardGrid>
+					{cards.map((card) => (
+						<Card title={card.title}>
+							<span set:html={marked.parse(card.text)} />
+							<br />
+							<LinkCard title={card.cta.title} href={card.cta.href} />
+						</Card>
+					))}
+				</CardGrid>
+			)
 		}
-	</CardGrid>
+	</div>
+
 	{
 		imagePosition === "after" && (
 			<div class="w-full m-8">

src/components/homepage/FeaturedContentSection.astro

@@ -119,22 +119,23 @@ const featuredSections = [
 		},
 		imagePosition: "before",
 		cards: [
-			{
-				title: "Create API Tokens",
-				text: "If you are going to be using the Cloudflare API, you first need an API token to authenticate your requests.",
-				cta: {
-					title: "Create Tokens",
-					href: "/fundamentals/api/get-started/create-token/",
-				},
-			},
-			{
-				title: "View Workers Examples",
-				text: "Review fully functional sample scripts to get started with Workers.",
-				cta: {
-					title: "View Examples",
-					href: "/workers/examples/",
-				},
-			},
+			// Currently unused.
+			// {
+			// 	title: "Create API Tokens",
+			// 	text: "If you are going to be using the Cloudflare API, you first need an API token to authenticate your requests.",
+			// 	cta: {
+			// 		title: "Create Tokens",
+			// 		href: "/fundamentals/api/get-started/create-token/",
+			// 	},
+			// },
+			// {
+			// 	title: "View Workers Examples",
+			// 	text: "Review fully functional sample scripts to get started with Workers.",
+			// 	cta: {
+			// 		title: "View Examples",
+			// 		href: "/workers/examples/",
+			// 	},
+			// },
 		],
 	},
 	{