feat(marketing): use Geist Pixel font for hero headline

apps/marketing/package.json

@@ -19,7 +19,7 @@
 		"@superset/ui": "workspace:*",
 		"@t3-oss/env-nextjs": "^0.13.8",
 		"framer-motion": "^12.23.26",
-		"geist": "^1.5.1",
+		"geist": "^1.7.0",
 		"gray-matter": "^4.0.3",
 		"import-in-the-middle": "2.0.1",
 		"lucide-react": "^0.563.0",

apps/marketing/src/app/components/HeroSection/HeroSection.tsx

@@ -13,27 +13,37 @@ export function HeroSection() {
 
 	return (
 		<div>
-			<div className="flex mt-14 min-h-[calc(100svh-64px)] items-center overflow-hidden">
+			<div className="flex mt-14 min-h-[calc(100svh-64px)] items-center -translate-y-12 overflow-hidden">
 				<div className="relative w-full max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-[30px] py-8 sm:py-12 lg:py-16">
 					<div className="grid grid-cols-1 lg:grid-cols-[2fr_3fr] gap-8 lg:gap-16 items-center">
 						<div className="space-y-6 sm:space-y-8">
 							<div className="space-y-2 sm:space-y-6">
 								<h1
-									className="text-2xl sm:text-3xl lg:text-4xl font-normal tracking-normal leading-[1.3em] text-foreground relative"
+									className="text-3xl sm:text-4xl lg:text-5xl font-normal tracking-normal leading-[1.3em] text-foreground relative"
 									style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
 								>
 									<span className="invisible" aria-hidden="true">
 										The Terminal for Coding Agents.
 									</span>
 									<span className="absolute inset-0">
 										<TypewriterText
-											text="The Terminal for Coding Agents."
+											segments={[
+												{ text: "The Terminal for " },
+												{
+													text: "Coding Agents",
+													style: {
+														fontFamily: "var(--font-geist-pixel-grid)",
+														fontWeight: 900,
+													},
+												},
+												{ text: "." },
+											]}
 											speed={40}
 											delay={600}
 										/>
 									</span>
 								</h1>
-								<p className="text-sm sm:text-lg font-light text-muted-foreground max-w-[400px]">
+								<p className="text-base sm:text-xl font-light text-muted-foreground max-w-[400px]">
 									Orchestrate a team of Claude Code, Codex, or any other coding
 									agents
 								</p>

apps/marketing/src/app/components/HeroSection/components/TypewriterText/TypewriterText.tsx

@@ -3,23 +3,34 @@
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 
-interface TypewriterTextProps {
+interface TextSegment {
 	text: string;
 	className?: string;
 	style?: React.CSSProperties;
+}
+
+interface TypewriterTextProps {
+	text?: string;
+	segments?: TextSegment[];
+	className?: string;
+	style?: React.CSSProperties;
 	speed?: number;
 	delay?: number;
 	showCursor?: boolean;
 }
 
 export function TypewriterText({
 	text,
+	segments,
 	className,
 	style,
 	speed = 50,
 	delay = 500,
 	showCursor = true,
 }: TypewriterTextProps) {
+	const fullText = segments
+		? segments.map((s) => s.text).join("")
+		: (text ?? "");
 	const [displayedText, setDisplayedText] = useState("");
 	const [isTyping, setIsTyping] = useState(false);
 
@@ -34,20 +45,47 @@ export function TypewriterText({
 	useEffect(() => {
 		if (!isTyping) return;
 
-		if (displayedText.length < text.length) {
+		if (displayedText.length < fullText.length) {
 			const timeout = setTimeout(() => {
-				setDisplayedText(text.slice(0, displayedText.length + 1));
+				setDisplayedText(fullText.slice(0, displayedText.length + 1));
 			}, speed);
 
 			return () => clearTimeout(timeout);
 		}
-	}, [displayedText, isTyping, speed, text]);
+	}, [displayedText, isTyping, speed, fullText]);
+
+	const isTypingComplete = isTyping && displayedText.length === fullText.length;
+
+	const renderText = () => {
+		if (!segments) return displayedText;
+
+		let charIndex = 0;
+		return segments.map((segment) => {
+			const segStart = charIndex;
+			charIndex += segment.text.length;
+
+			if (segStart >= displayedText.length) return null;
+
+			const visibleText = segment.text.slice(
+				0,
+				Math.min(segment.text.length, displayedText.length - segStart),
+			);
 
-	const isTypingComplete = isTyping && displayedText.length === text.length;
+			return (
+				<span
+					key={segment.text}
+					className={segment.className}
+					style={segment.style}
+				>
+					{visibleText}
+				</span>
+			);
+		});
+	};
 
 	return (
 		<span className={className} style={style}>
-			{displayedText}
+			{renderText()}
 			{showCursor && (
 				<motion.span
 					className="inline-block ml-0.5 w-3 h-[1em] bg-current translate-y-0.5"

apps/marketing/src/app/layout.tsx

@@ -1,4 +1,5 @@
 import { COMPANY } from "@superset/shared/constants";
+import { GeistPixelGrid, GeistPixelSquare } from "geist/font/pixel";
 import type { Metadata } from "next";
 import { IBM_Plex_Mono, Inter, Micro_5 } from "next/font/google";
 import Script from "next/script";
@@ -114,7 +115,7 @@ export default function RootLayout({
 	return (
 		<html
 			lang="en"
-			className={`dark overscroll-none ${ibmPlexMono.variable} ${inter.variable} ${micro5.variable}`}
+			className={`dark overscroll-none ${ibmPlexMono.variable} ${inter.variable} ${micro5.variable} ${GeistPixelSquare.variable} ${GeistPixelGrid.variable}`}
 			suppressHydrationWarning
 		>
 			<head>

apps/web/package.json

@@ -26,7 +26,7 @@
 		"@uiw/react-md-editor": "^4.0.11",
 		"better-auth": "1.4.17",
 		"framer-motion": "^12.23.26",
-		"geist": "^1.5.1",
+		"geist": "^1.7.0",
 		"import-in-the-middle": "2.0.1",
 		"jose": "^6.1.3",
 		"lucide-react": "^0.563.0",