Clarify DB landing page (#1012)

src/pages/db/_components/Hero.astro

@@ -2,6 +2,7 @@
 import PageTitleBlock from "~/components/PageTitleBlock.astro"
 import CTA from "../_components/CTA.astro"
 import HeroVideo from "./HeroVideo.astro"
+import Pill from "./Pill.astro"
 ---
 
 <section
@@ -13,7 +14,8 @@ import HeroVideo from "./HeroVideo.astro"
 	>
 	</div>
 
-	<div class="z-20 m-auto">
+	<div class="z-20 m-auto flex flex-col">
+		<Pill class="mx-auto mb-4" title="Astro DB" subtitle="Early Preview" />
 		<PageTitleBlock
 			wide
 			lg
@@ -27,7 +29,7 @@ import HeroVideo from "./HeroVideo.astro"
 			</h1>
 		</PageTitleBlock>
 		<CTA class="mb-4 mt-8" />
-		<p class="text-astro-gray-300">No credit card required. Cancel anytime.</p>
+		<p class="text-white/60">No credit card required. Cancel anytime.</p>
 	</div>
 </section>
 

src/pages/db/_components/Pill.astro

@@ -0,0 +1,45 @@
+---
+type Props = {
+	title: string
+	subtitle?: string
+	class?: string
+}
+
+const { title, subtitle, class: className } = Astro.props
+---
+
+<aside
+	class:list={[
+		"relative flex gap-2 rounded-full text-xs transition-colors duration-150 md:text-sm",
+		className,
+	]}
+>
+	<span class="flex items-center gap-2 pr-3">
+		<span class="pill relative m-px rounded-full px-3 py-1">{title}</span>
+		{subtitle && <span>{subtitle}</span>}
+	</span>
+</aside>
+
+<style>
+	aside::before {
+		@apply absolute inset-0 border border-white/40;
+		content: "";
+		border-radius: inherit;
+		z-index: -2;
+	}
+
+	.pill::before {
+		@apply absolute inset-0 bg-blue-green-gradient;
+		content: "";
+		margin: -1px;
+		border-radius: inherit;
+		z-index: -2;
+	}
+
+	.pill::after {
+		@apply absolute inset-0 bg-[#2F4CB3]/30;
+		content: "";
+		z-index: -1;
+		border-radius: inherit;
+	}
+</style>