From 880019d62dc55e0ff4b09d3ccd2843e30b8b399b Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Tue, 12 Mar 2024 14:52:48 -0500
Subject: [PATCH] Clarify DB landing page (#1012)

---
 src/pages/db/_components/Hero.astro |  6 ++--
 src/pages/db/_components/Pill.astro | 45 +++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/db/_components/Pill.astro

diff --git a/src/pages/db/_components/Hero.astro b/src/pages/db/_components/Hero.astro
index 846b9256e..9216b12e4 100644
--- a/src/pages/db/_components/Hero.astro
+++ b/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>
 
diff --git a/src/pages/db/_components/Pill.astro b/src/pages/db/_components/Pill.astro
new file mode 100644
index 000000000..22121d0fc
--- /dev/null
+++ b/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>