Homepage cosmetics

apps/www/components/announcement-badge.tsx

@@ -38,9 +38,6 @@ export function AnnouncementBadge({
 					<ArrowRight className="h-4 w-4 opacity-40 transition-all group-hover:opacity-100 group-hover:translate-x-0.5" />
 				)}
 			</span>
-
-			{/* Decorative background glow on hover */}
-			<div className="absolute inset-0 -z-10 rounded-full bg-blue-400/0 blur-xl transition-all group-hover:bg-blue-400/10" />
 		</Link>
 	);
 }

apps/www/components/hero-gradient-overlay.tsx

@@ -6,7 +6,7 @@ export const HeroGradientOverlay: FC = () => {
 			viewBox="0 0 1440 181"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
-			className="pointer-events-none absolute w-full top-0 left-0 h-40 z-10 opacity-100 text-blue-50 dark:text-[#011537]"
+			className="pointer-events-none absolute w-full top-0 left-0 h-40 z-10 opacity-100 text-blue-200/60 dark:text-blue-600/20"
 			preserveAspectRatio="none"
 			aria-hidden="true"
 			role="presentation"

apps/www/components/hero-visual.tsx

@@ -49,14 +49,6 @@ export function HeroVisual() {
 			aria-label="Interactive 2.5D visual representing ArkEnv's typesafe environment variables"
 			className="relative w-full max-w-125 lg:mt-8 aspect-square flex items-center justify-center perspective-[1000px] group select-none"
 		>
-			{/* Ambient Glow Background */}
-			<div
-				className="absolute inset-0 bg-blue-500/10 dark:bg-blue-400/5 rounded-full blur-[80px] transform-gpu transition-transform duration-500"
-				style={{
-					transform: `translate3d(${mousePos.x * 40}px, ${mousePos.y * 40}px, 0)`,
-				}}
-			/>
-
 			{/* The 2.5D Platform / Card */}
 			<div
 				className="relative w-75 h-75 transition-transform duration-300 ease-out transform-gpu"
@@ -80,7 +72,7 @@ export function HeroVisual() {
 						width="160"
 						height="160"
 						viewBox="0 0 12 12"
-						className="drop-shadow-[0_20px_40px_rgba(59,130,246,0.3)] filter brightness-110 animate-spin-slow origin-center"
+						className="animate-spin-slow origin-center"
 						xmlns="http://www.w3.org/2000/svg"
 						role="img"
 						aria-labelledby="hero-icon-title"

apps/www/components/page/quickstart-button.tsx

@@ -7,7 +7,7 @@ export function QuickstartButton() {
 		<Button
 			asChild
 			size="lg"
-			className="w-full sm:w-auto text-md font-semibold text-white relative overflow-hidden rounded-xl transition-all duration-200 ease-in-out bg-linear-to-br from-blue-600 via-blue-700 to-indigo-800 hover:scale-[1.05] hover:shadow-[0_8px_30px_rgba(59,130,246,0.5)] active:scale-[0.98] border-t border-white/20 shadow-[0_4px_12px_rgba(0,0,0,0.1)]"
+			className="w-full sm:w-auto text-md text-white relative overflow-hidden rounded-xl transition-all duration-200 ease-in-out bg-linear-to-br from-blue-600 via-blue-700 to-indigo-800 hover:-translate-y-0.5 hover:brightness-110 active:scale-[0.98] border-t border-white/60 shadow-[0_4px_12px_rgba(0,0,0,0.1)]"
 		>
 			<a
 				href="/docs/arkenv/quickstart"

apps/www/components/page/star-us-button.test.tsx

@@ -9,7 +9,7 @@ describe("StarUsButton", () => {
 	it("renders star button with correct text", () => {
 		render(<StarUsButton />);
 
-		const buttons = screen.getAllByText("Star us on GitHub!");
+		const buttons = screen.getAllByText("Star us on GitHub");
 		expect(buttons).toHaveLength(2); // One for mobile, one for desktop
 	});
 
@@ -35,7 +35,7 @@ describe("StarUsButton", () => {
 		render(<StarUsButton />);
 
 		// Should have two buttons with the same text (mobile and desktop versions)
-		const buttons = screen.getAllByText("Star us on GitHub!");
+		const buttons = screen.getAllByText("Star us on GitHub");
 		expect(buttons).toHaveLength(2);
 	});
 

apps/www/components/page/star-us-button.tsx

@@ -33,7 +33,7 @@ const starUsButtonVariants = cva("text-md font-bold", {
 				"rounded-xl",
 				"transition-all duration-200 ease-in-out scale-100",
 				"focus-visible:ring-2 focus-visible:ring-[rgba(255,150,0,0.7)] focus-visible:ring-offset-0",
-				"hover:scale-[1.05]",
+				"hover:-translate-y-0.5",
 				"active:scale-[0.98]",
 			],
 		},
@@ -43,27 +43,6 @@ const starUsButtonVariants = cva("text-md font-bold", {
 	},
 });
 
-const starUsShadowVariants = cva(
-	"absolute inset-0 rounded-xl pointer-events-none",
-	{
-		variants: {
-			variant: {
-				mobile: [
-					"shadow-[0_8px_16px_rgba(255,150,0,0.1)]",
-					"dark:shadow-[0_8px_16px_rgba(255,150,0,0.15)]",
-				],
-				desktop: [
-					"shadow-[0_16px_20px_rgba(255,150,0,0.1)]",
-					"dark:shadow-[0_16px_20px_rgba(255,150,0,0.15)]",
-				],
-			},
-		},
-		defaultVariants: {
-			variant: "desktop",
-		},
-	},
-);
-
 type StarUsProps = {
 	className?: string;
 } & VariantProps<typeof starUsButtonVariants>;
@@ -128,7 +107,6 @@ export function StarUsButton({ className }: StarUsProps) {
 			{/* Mobile: Simple button with glow */}
 			<div className="sm:hidden w-full relative">
 				{/* Shadow element for mobile */}
-				<div className={starUsShadowVariants({ variant: "mobile" })} />
 
 				<Button
 					asChild
@@ -143,7 +121,7 @@ export function StarUsButton({ className }: StarUsProps) {
 					>
 						<div className="flex items-center gap-2">
 							<SiGithub aria-hidden="true" className="w-4 h-4" />
-							<span className="font-medium">Star us on GitHub!</span>
+							<span className="font-medium">Star us on GitHub</span>
 							<Star
 								aria-hidden="true"
 								className="w-5 h-5 text-yellow-600 dark:text-yellow-400"
@@ -162,7 +140,6 @@ export function StarUsButton({ className }: StarUsProps) {
 			{/* Desktop: Complex button with animations and effects */}
 			<div className="hidden sm:block relative">
 				{/* Shadow element that doesn't scale */}
-				<div className={starUsShadowVariants({ variant: "desktop" })} />
 
 				<Button
 					asChild
@@ -204,7 +181,7 @@ export function StarUsButton({ className }: StarUsProps) {
 						{/* Main content */}
 						<div className="flex items-center gap-2 relative z-10">
 							<SiGithub aria-hidden="true" className="w-4 h-4" />
-							<span className="font-medium">Star us on GitHub!</span>
+							<span className="font-medium">Star us on GitHub</span>
 							<Star
 								aria-hidden="true"
 								className="w-5 h-5 transition-all duration-300 star-bounce text-yellow-600 dark:text-yellow-400"

apps/www/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
 				destructive:
 					"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
 				outline:
-					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground shadow-[0_0_15px_rgba(0,0,0,0.5)] shadow-blue-500/20",
+					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
 				secondary:
 					"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
 				ghost: "hover:bg-accent hover:text-accent-foreground",