chore(web): improve sponsor banner with hover card feature

apps/web/package.json

@@ -21,6 +21,7 @@
     "@opennextjs/cloudflare": "^1.6.3",
     "@orama/orama": "^3.1.11",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/web/src/app/docs/layout.tsx

@@ -7,7 +7,7 @@ import { source } from "@/lib/source";
 const docsOptions: DocsLayoutProps = {
 	...baseOptions,
 	tree: source.pageTree,
-	links: [],
+	// links: [],
 	sidebar: {
 		banner: <SpecialSponsorBanner />,
 	},

apps/web/src/app/global.css

@@ -162,6 +162,8 @@
 }
 
 :root {
+	--color-fd-primary: #8839ef;
+	--color-fd-primary-foreground: #ffffff;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.44 0.04 279.33);
 	--card: oklch(1 0 0);
@@ -227,6 +229,8 @@
 }
 
 .dark {
+	--color-fd-primary: #cba6f7;
+	--color-fd-primary-foreground: #11111b;
 	--background: #11111b;
 	--foreground: #cdd6f4;
 	--card: #11111b;

apps/web/src/app/layout.config.tsx

@@ -20,7 +20,7 @@ export const links: LinkItemType[] = [
 	{
 		text: "Docs",
 		url: "/docs",
-		active: "nested-url" as const,
+		active: "nested-url",
 	},
 	{
 		text: "Builder",

apps/web/src/components/special-sponsor-banner.tsx

@@ -1,9 +1,17 @@
 "use client";
+import { Github, Globe, Star } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "@/components/ui/hover-card";
 import {
 	filterCurrentSponsors,
 	filterSpecialSponsors,
+	formatSponsorUrl,
+	getSponsorUrl,
 	sortSpecialSponsors,
 } from "@/lib/sponsor-utils";
 import type { Sponsor } from "@/lib/types";
@@ -34,12 +42,14 @@ export function SpecialSponsorBanner() {
 
 	if (loading) {
 		return (
-			<div className="">
-				<div className="flex items-center gap-3">
-					<div className="h-[30px] w-[30px] animate-pulse rounded border border-border bg-muted" />
-					<div className="min-w-0 flex-1">
-						<div className="h-4 w-20 animate-pulse rounded bg-muted" />
-					</div>
+			<div>
+				<div className="flex items-center gap-2 py-1">
+					{["s1", "s2", "s3", "s4"].map((key) => (
+						<div
+							key={key}
+							className="h-9 w-9 animate-pulse rounded border border-border bg-muted"
+						/>
+					))}
 				</div>
 			</div>
 		);
@@ -50,31 +60,107 @@ export function SpecialSponsorBanner() {
 	}
 
 	return (
-		<div className="">
-			<div className="flex flex-col gap-2">
-				{specialSponsors.map((sponsor) => (
-					<a
-						key={sponsor.sponsor.login}
-						className="flex items-center gap-3"
-						href={sponsor.sponsor.websiteUrl}
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<Image
-							src={sponsor.sponsor.customLogoUrl || sponsor.sponsor.avatarUrl}
-							alt={sponsor.sponsor.name || sponsor.sponsor.login}
-							width={30}
-							height={30}
-							className="rounded border border-border"
-							unoptimized
-						/>
-						<div className="min-w-0 flex-1">
-							<h4 className="truncate font-medium text-sm">
-								{sponsor.sponsor.name || sponsor.sponsor.login}
-							</h4>
-						</div>
-					</a>
-				))}
+		<div>
+			<div className="no-scrollbar flex items-center gap-2 overflow-x-auto whitespace-nowrap py-1">
+				{specialSponsors.map((entry) => {
+					const displayName = entry.sponsor.name || entry.sponsor.login;
+					const imgSrc = entry.sponsor.customLogoUrl || entry.sponsor.avatarUrl;
+					const since = new Date(entry.createdAt).toLocaleDateString(
+						undefined,
+						{
+							year: "numeric",
+							month: "short",
+						},
+					);
+					const sponsorUrl = getSponsorUrl(entry);
+
+					return (
+						<HoverCard key={entry.sponsor.login}>
+							<HoverCardTrigger asChild>
+								<a
+									href={entry.sponsor.websiteUrl || sponsorUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+									aria-label={displayName}
+									className="inline-flex"
+								>
+									<Image
+										src={imgSrc}
+										alt={displayName}
+										width={36}
+										height={36}
+										className="rounded border border-border"
+										unoptimized
+									/>
+								</a>
+							</HoverCardTrigger>
+							<HoverCardContent
+								align="start"
+								sideOffset={8}
+								className="bg-fd-background"
+							>
+								<div className="space-y-3">
+									<div className="flex items-center gap-2">
+										<Star className="h-4 w-4 text-yellow-500/90" />
+										<div className="ml-auto text-muted-foreground text-xs">
+											<span>SPECIAL</span>
+											<span className="px-1">•</span>
+											<span>SINCE {since.toUpperCase()}</span>
+										</div>
+									</div>
+									<div className="flex gap-3">
+										<Image
+											src={imgSrc}
+											alt={displayName}
+											width={80}
+											height={80}
+											className="rounded border border-border"
+											unoptimized
+										/>
+										<div className="grid grid-cols-1 grid-rows-[1fr_auto]">
+											<div>
+												<h3 className="truncate font-semibold text-sm">
+													{displayName}
+												</h3>
+												{entry.tierName ? (
+													<p className="text-primary text-xs">
+														{entry.tierName}
+													</p>
+												) : null}
+											</div>
+											<div className="flex flex-col gap-1">
+												<a
+													href={`https://github.com/${entry.sponsor.login}`}
+													target="_blank"
+													rel="noopener noreferrer"
+													className="group flex items-center gap-2 text-muted-foreground text-xs transition-colors hover:text-primary"
+												>
+													<Github className="h-4 w-4" />
+													<span className="truncate">
+														{entry.sponsor.login}
+													</span>
+												</a>
+												{entry.sponsor.websiteUrl || entry.sponsor.linkUrl ? (
+													<a
+														href={sponsorUrl}
+														target="_blank"
+														rel="noopener noreferrer"
+														className="group flex items-center gap-2 text-muted-foreground text-xs transition-colors hover:text-primary"
+													>
+														<Globe className="h-4 w-4" />
+														<span className="truncate">
+															{formatSponsorUrl(sponsorUrl)}
+														</span>
+													</a>
+												) : null}
+											</div>
+										</div>
+									</div>
+								</div>
+							</HoverCardContent>
+						</HoverCard>
+					);
+				})}
 			</div>
 		</div>
 	);

apps/web/src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function HoverCard({
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+	return (
+		<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+	);
+}
+
+function HoverCardContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+	return (
+		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
+			<HoverCardPrimitive.Content
+				data-slot="hover-card-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
+					className,
+				)}
+				{...props}
+			/>
+		</HoverCardPrimitive.Portal>
+	);
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

bun.lock

@@ -14,7 +14,7 @@
     },
     "apps/cli": {
       "name": "create-better-t-stack",
-      "version": "2.29.3",
+      "version": "2.30.0",
       "bin": {
         "create-better-t-stack": "dist/index.js",
       },
@@ -49,6 +49,7 @@
         "@opennextjs/cloudflare": "^1.6.3",
         "@orama/orama": "^3.1.11",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-hover-card": "^1.1.14",
         "babel-plugin-react-compiler": "^19.1.0-rc.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",