Hero section collection with eleven interchangeable variants: metric showcase, 3D tilt canvas, ASCII terminal stream, bento preview grid, developer terminal, interactive globe nodes, SaaS metrics dashboard, split device mockup, typing command center, video walkthrough modal, and glowing waitlist.
Also available for Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/hero.json$npx shadcn@latest add https://uipkge.dev/r/react/hero.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/hero.json$bunx shadcn@latest add https://uipkge.dev/r/react/hero.jsonnpx shadcn@latest add @uipkge-react/heroInstalls to:components/blocks/hero/Type aliases exported from this item's source. Use these to shape the data you pass in.
CommandPresetinterface CommandPreset {
id: string
label: string
command: string
output: string[]
}EdgeNodeinterface EdgeNode {
id: string
name: string
region: string
country: string
city: string
latencyMs: number
p99LatencyMs: number
cacheHitRatio: number
qps: number
status: 'optimal' | 'operational' | 'degraded'
coordinates: { x: number; y: number }
}MetricDatainterface MetricData {
mrr: string
growth: string
activeUsers: string
requests: string
chartPoints: number[]
}CommandActioninterface CommandAction {
id: string
title: string
category: 'Components' | 'Themes' | 'Git' | 'Workflows'
shortcut: string[]
icon: React.ComponentType<{ className?: string }>
description: string
status: string
}VideoChapterinterface VideoChapter {
id: string
title: string
timestamp: string
description: string
}RoleOptioninterface RoleOption {
id: Role
label: string
perk: string
}CSS custom properties referenced in this item. Override any of them in your :root or per-element to retheme.
--primaryimport { ArrowRight, PlayCircle } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
export function Hero01() {
return (
<section data-slot="hero-01" className="bg-background relative overflow-hidden">
<div className="relative mx-auto max-w-6xl px-6 py-24 lg:py-32">
<div className="grid gap-12 lg:grid-cols-2 lg:items-center">
<div className="space-y-6">
<h1 className="text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
The platform your team will actually use.
</h1>
<p className="text-muted-foreground max-w-xl text-lg">
One workspace for everything your team needs. Built on unbundled UI primitives — fast, accessible, easy to
customise.
</p>
<div className="flex flex-wrap items-center gap-3">
<Button size="lg">
Start free trial
<ArrowRight className="ml-2 size-4" />
</Button>
<Button size="lg" variant="outline">
<PlayCircle className="mr-2 size-4" />
Watch demo (2 min)
</Button>
</div>
<div className="text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
<span>★★★★★ 4.9 on G2</span>
<span>14-day free trial</span>
<span>No credit card required</span>
</div>
</div>
<div className="relative">
<Card className="absolute -top-4 right-0 w-56 rotate-2 shadow-lg">
<CardContent className="space-y-1 p-4">
<p className="text-muted-foreground text-xs uppercase">Active users</p>
<p className="text-2xl font-semibold">1,284</p>
<p className="text-success text-xs">+8.2% MoM</p>
</CardContent>
</Card>
<Card className="absolute top-32 -left-2 w-52 -rotate-3 shadow-lg">
<CardContent className="space-y-1 p-4">
<p className="text-muted-foreground text-xs uppercase">Uptime</p>
<p className="text-2xl font-semibold">100%</p>
<p className="text-muted-foreground text-xs">12 cycles, 0 misses</p>
</CardContent>
</Card>
<Card className="ml-auto w-72 shadow-xl">
<CardHeader>
<CardTitle className="text-base">Onboarding queue</CardTitle>
<CardDescription>3 starting Monday</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center gap-3">
<Avatar className="size-8">
<AvatarFallback>LW</AvatarFallback>
</Avatar>
<div className="flex-1">
<p className="text-sm font-medium">Lena Wei</p>
<p className="text-muted-foreground text-xs">Engineering</p>
</div>
<Badge variant="secondary">Pending</Badge>
</div>
<div className="flex items-center gap-3">
<Avatar className="size-8">
<AvatarFallback>JR</AvatarFallback>
</Avatar>
<div className="flex-1">
<p className="text-sm font-medium">Joaquín Reyes</p>
<p className="text-muted-foreground text-xs">Engineering</p>
</div>
<Badge variant="secondary">Pending</Badge>
</div>
<div className="flex items-center gap-3">
<Avatar className="size-8">
<AvatarFallback>PS</AvatarFallback>
</Avatar>
<div className="flex-1">
<p className="text-sm font-medium">Priya Shah</p>
<p className="text-muted-foreground text-xs">Engineering</p>
</div>
<Badge variant="secondary">Pending</Badge>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
</section>
)
}
'use client'
import * as React from 'react'
import { ArrowRight, Code2, Cpu, Layers, MousePointerClick, Zap } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
export interface Hero3dTiltInteractiveCanvasProps {
title?: string
description?: string
primaryActionLabel?: string
secondaryActionLabel?: string
className?: string
}
export function Hero3dTiltInteractiveCanvas({
title = 'Fluid 3D Spatial Architecture rendered in pure CSS.',
description = 'Experience zero-latency hardware-accelerated 3D perspective transforms with dynamic specular reflections and layered z-depth primitives.',
primaryActionLabel = 'Explore 3D Primitives',
secondaryActionLabel = 'Copy CSS Matrix Code',
className,
}: Hero3dTiltInteractiveCanvasProps) {
const cardRef = React.useRef<HTMLDivElement | null>(null)
const [rotateX, setRotateX] = React.useState(0)
const [rotateY, setRotateY] = React.useState(0)
const [glareX, setGlareX] = React.useState(50)
const [glareY, setGlareY] = React.useState(50)
const [isHovering, setIsHovering] = React.useState(false)
function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
if (!cardRef.current) return
const rect = cardRef.current.getBoundingClientRect()
const x = e.clientX - rect.left
const y = e.clientY - rect.top
const centerX = rect.width / 2
const centerY = rect.height / 2
// Limit max rotation to +/- 14 degrees
setRotateY(Number(((x - centerX) / (centerX / 14)).toFixed(2)))
setRotateX(Number((-(y - centerY) / (centerY / 14)).toFixed(2)))
setGlareX(Number(((x / rect.width) * 100).toFixed(1)))
setGlareY(Number(((y / rect.height) * 100).toFixed(1)))
}
function handleMouseEnter() {
setIsHovering(true)
}
function handleMouseLeave() {
setIsHovering(false)
setRotateX(0)
setRotateY(0)
}
return (
<section
data-slot="hero-3d-tilt-interactive-canvas"
className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}
>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Section Header */}
<div className="mx-auto max-w-3xl space-y-4 text-center">
<a
href="#3d-spatial"
className="group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors"
>
<Layers className="text-primary size-3.5" />
<span>Spatial 3D Design Engineering</span>
<ArrowRight className="text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5" />
</a>
<h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">{title}</h1>
<p className="text-muted-foreground text-base sm:text-lg">{description}</p>
<div className="flex flex-wrap items-center justify-center gap-3 pt-2">
<Button size="lg" className="gap-2 shadow-xs">
<span>{primaryActionLabel}</span>
<ArrowRight className="size-4" />
</Button>
<Button variant="outline" size="lg" className="gap-2">
<Code2 className="size-4" />
<span>{secondaryActionLabel}</span>
</Button>
</div>
</div>
{/* 3D Perspective Stage Container */}
<div className="mt-14 flex flex-col items-center justify-center [perspective:1200px]">
<div
ref={cardRef}
style={{
transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
transition: isHovering ? 'transform 100ms ease-out' : 'transform 500ms cubic-bezier(0.16, 1, 0.3, 1)',
}}
className="border-border bg-card relative w-full max-w-2xl cursor-crosshair overflow-hidden rounded-2xl border p-8 shadow-xl select-none [transform-style:preserve-3d]"
onMouseMove={handleMouseMove}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{/* Dynamic Specular Reflection / Glare Gradient */}
<div
style={{
background: `radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.12) 0%, transparent 60%)`,
}}
className={cn(
'pointer-events-none absolute inset-0 transition-opacity duration-300',
isHovering ? 'opacity-100' : 'opacity-0',
)}
/>
{/* Layer 1: Base Grid Info */}
<div className="border-border flex items-center justify-between border-b pb-4">
<div className="flex items-center gap-2">
<Layers className="text-primary size-4" />
<span className="text-foreground text-sm font-bold">Spatial Component Viewport</span>
</div>
<Badge variant="outline" className="border-border text-muted-foreground font-mono text-xs">
Pitch: {rotateX}° • Yaw: {rotateY}°
</Badge>
</div>
{/* Layer 2: Floating 3D Cards & Primitives (Preserve-3d + translateZ) */}
<div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2">
{/* Floating Badge Card 1 */}
<div
style={{ transform: 'translateZ(35px)' }}
className="border-border/90 bg-muted/40 space-y-2 rounded-xl border p-4 shadow-md transition-transform"
>
<div className="flex items-center gap-2">
<Cpu className="text-primary size-4" />
<span className="text-foreground text-xs font-bold">GPU Accelerated Matrix</span>
</div>
<p className="text-muted-foreground text-xs leading-relaxed">
Zero JavaScript bundle runtime. Calculated via pure CSS 3D matrix transforms.
</p>
</div>
{/* Floating Badge Card 2 */}
<div
style={{ transform: 'translateZ(50px)' }}
className="border-primary/30 bg-primary/5 space-y-2 rounded-xl border p-4 shadow-lg transition-transform"
>
<div className="flex items-center gap-2">
<Zap className="text-success size-4" />
<span className="text-foreground text-xs font-bold">Specular Ray Diffusion</span>
</div>
<p className="text-muted-foreground text-xs leading-relaxed">
Dynamic light reflection calculates azimuth angles relative to mouse coordinates.
</p>
</div>
</div>
{/* Bottom Telemetry Bar */}
<div
style={{ transform: 'translateZ(25px)' }}
className="border-border/80 bg-background/90 mt-6 flex items-center justify-between rounded-lg border p-3 text-xs"
>
<div className="text-muted-foreground flex items-center gap-2">
<MousePointerClick className="text-primary size-3.5" />
<span>Hover and move cursor to orient viewport</span>
</div>
<span className="text-foreground font-mono text-xs font-bold">
{isHovering ? 'Tracking Live' : 'Hover to Orbit'}
</span>
</div>
</div>
</div>
</div>
</section>
)
}
import * as React from 'react'
import { ArrowRight, Terminal } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { cn } from '@/lib/utils'
export interface HeroAsciiTerminalStreamProps {
title?: string
description?: string
className?: string
}
const ASCII_BANNER = `
_ _ ___ ____ _ ______ _____
| | | |_ _| _ \\| |/ / ___| ____|
| | | || || |_) | ' / | _| _|
| |_| || || __/| . \\ |_| | |___
\\___/|___|_| |_|\\_\\____|_____|
================================
DUAL-FRAMEWORK UNBUNDLED REGISTRY
`
export function HeroAsciiTerminalStream({
title = 'Deterministic UI engineering stream for technical operators.',
description = 'Inspect build outputs, verify zero-dependency bundle telemetry, and stream component ASTs in real time with hardware precision.',
className,
}: HeroAsciiTerminalStreamProps) {
const [terminalLogs, setTerminalLogs] = React.useState<string[]>([
'INIT: Initializing UIPKGE dual-framework AST registry...',
'RESOLVE: Synchronizing @uipkge/button -> Vue 3.5 & React 19',
'OKLCH: Loaded 48 semantic color variables from packages/shared',
'BENCHMARK: Cold compilation completed in 1.42ms (zero dead code)',
'READY: Terminal listening on edge:8080',
])
const [inputCommand, setInputCommand] = React.useState('')
const [isRunning, setIsRunning] = React.useState(false)
function runCommand(cmd: string) {
const cleanCmd = cmd.trim().toLowerCase()
if (!cleanCmd) return
setTerminalLogs((prev) => [...prev, `$ ${cleanCmd}`])
setIsRunning(true)
setTimeout(() => {
if (cleanCmd === 'clear') {
setTerminalLogs(['TERMINAL: Buffer cleared.'])
} else if (cleanCmd === 'bench') {
setTerminalLogs((prev) => [
...prev,
'BENCHMARK: Button (1.1kb) | Modal (2.8kb) | DataGrid (4.2kb)',
'RESULT: 100% Tree-shaken bundle efficiency.',
])
} else if (cleanCmd === 'parity') {
setTerminalLogs((prev) => [
...prev,
'PARITY: 31 variant tokens evaluated across Vue & React.',
'STATUS: [PASS] Zero framework divergence detected.',
])
} else if (cleanCmd === 'tree') {
setTerminalLogs((prev) => [...prev, 'TREE: packages/registry-vue (471) <-> packages/registry-react (471)'])
} else {
setTerminalLogs((prev) => [...prev, `EXEC: Command '${cleanCmd}' executed with exit code 0.`])
}
setIsRunning(false)
}, 400)
setInputCommand('')
}
function handleSubmit(e: React.FormEvent) {
e.preventDefault()
runCommand(inputCommand)
}
return (
<section
data-slot="hero-ascii-terminal-stream"
className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}
>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Section Header */}
<div className="mx-auto max-w-3xl space-y-4 text-center">
<a
href="#ascii-terminal"
className="group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors"
>
<Terminal className="text-primary size-3.5" />
<span>Real-time ASCII Telemetry Stream</span>
<ArrowRight className="text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5" />
</a>
<h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">{title}</h1>
<p className="text-muted-foreground text-base sm:text-lg">{description}</p>
{/* Command Chips */}
<div className="flex flex-wrap items-center justify-center gap-2 pt-2">
<span className="text-muted-foreground text-xs">Quick commands:</span>
{['bench', 'parity', 'tree', 'clear'].map((chip) => (
<button
key={chip}
type="button"
className="border-border bg-muted/40 hover:bg-muted text-foreground rounded border px-2 py-0.5 font-mono text-xs transition-colors"
onClick={() => runCommand(chip)}
>
${chip}
</button>
))}
</div>
</div>
{/* Main ASCII Terminal Card */}
<div className="mx-auto mt-12 max-w-4xl">
<Card className="border-border bg-card overflow-hidden font-mono text-xs shadow-lg">
{/* Terminal Title Bar */}
<div className="border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5">
<div className="flex items-center gap-2">
<div className="flex gap-1.5">
<span className="bg-destructive/80 size-2.5 rounded-full" />
<span className="bg-warning/80 size-2.5 rounded-full" />
<span className="bg-success/80 size-2.5 rounded-full" />
</div>
<span className="text-foreground pl-2 text-xs font-bold">uipkge-telemetry-cli • zsh</span>
</div>
<div className="text-muted-foreground flex items-center gap-3 text-xs">
<span className="flex items-center gap-1">
<span className="bg-success size-1.5 rounded-full" />
<span>60 FPS</span>
</span>
<span>1.2MB RSS</span>
</div>
</div>
{/* Terminal Content Viewport */}
<CardContent className="bg-background/95 space-y-4 p-6">
{/* ASCII Art Banner */}
<pre className="text-primary overflow-x-auto text-xs leading-tight font-bold select-none">
<code>{ASCII_BANNER}</code>
</pre>
{/* Logs Stream Output */}
<div className="border-border/80 max-h-56 space-y-1.5 overflow-y-auto border-t pt-2 text-xs">
{terminalLogs.map((log, idx) => (
<div
key={idx}
className={cn(
'leading-relaxed',
log.startsWith('$')
? 'text-primary font-bold'
: log.includes('PASS') || log.includes('OKLCH')
? 'text-success'
: 'text-muted-foreground',
)}
>
{log}
</div>
))}
</div>
{/* Terminal Interactive Input Prompt */}
<form className="border-border flex items-center gap-2 border-t pt-3" onSubmit={handleSubmit}>
<span className="text-primary font-bold">></span>
<input
type="text"
placeholder="Type command (e.g. bench, parity, clear)..."
value={inputCommand}
onChange={(e) => setInputCommand(e.target.value)}
className="text-foreground placeholder:text-muted-foreground flex-1 bg-transparent text-xs focus-visible:outline-none"
/>
<Button size="sm" type="submit" className="h-7 gap-1 px-2.5 text-xs">
<span>Run</span>
<ArrowRight className="size-3" />
</Button>
</form>
</CardContent>
</Card>
</div>
</div>
</section>
)
}
'use client'
import * as React from 'react'
import { Activity, ArrowRight, CheckCircle2, Code2, Cpu, Layers, Moon, Palette, Play, Sun, Zap } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { cn } from '@/lib/utils'
// Tile 1: OKLCH Palette preview state
const colorThemes = [
{ name: 'Emerald', hue: 'oklch(0.65 0.22 145)', hex: '#10b981' },
{ name: 'Indigo', hue: 'oklch(0.60 0.24 275)', hex: '#6366f1' },
{ name: 'Amber', hue: 'oklch(0.75 0.18 70)', hex: '#f59e0b' },
{ name: 'Rose', hue: 'oklch(0.65 0.24 15)', hex: '#f43f5e' },
]
export interface HeroBentoPreviewGridProps {
className?: string
}
export function HeroBentoPreviewGrid({ className }: HeroBentoPreviewGridProps) {
const [activeColorIndex, setActiveColorIndex] = React.useState(0)
const [isDarkPreview, setIsDarkPreview] = React.useState(true)
const [activeFramework, setActiveFramework] = React.useState<'vue' | 'react'>('vue')
const [componentCount, setComponentCount] = React.useState(12)
const [isRunningQuery, setIsRunningQuery] = React.useState(false)
const [queryLatency, setQueryLatency] = React.useState('12ms')
const estimatedSavings = (componentCount * 42).toFixed(0)
const triggerQuery = () => {
setIsRunningQuery(true)
setTimeout(() => {
setQueryLatency(`${Math.floor(Math.random() * 8) + 8}ms`)
setIsRunningQuery(false)
}, 400)
}
return (
<section
data-slot="hero-bento-preview-grid"
className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}
>
{/* Center Ambient Glow */}
<div className="bg-primary/10 pointer-events-none absolute top-1/4 left-1/2 -z-10 h-96 w-full max-w-5xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl" />
<div className="mx-auto max-w-7xl space-y-12 text-center">
{/* Headline & Subtitle */}
<div className="mx-auto max-w-3xl space-y-5">
<Badge variant="secondary" className="gap-1.5 px-3 py-1 font-mono text-xs shadow-xs">
<Layers className="text-primary size-3.5" />
The Unbundled Design Engineering Platform
</Badge>
<h1 className="text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl">
Everything design engineers need to build at lightspeed.
</h1>
<p className="text-muted-foreground text-base leading-relaxed sm:text-lg">
Tactile workbenches, OKLCH fluid color palettes, and guaranteed cross-framework parity—composed right in
your hero.
</p>
{/* CTA Buttons */}
<div className="flex flex-wrap items-center justify-center gap-3 pt-2">
<Button asChild size="lg" className="gap-2 font-semibold shadow-xs">
<a href="#explore">
<span>Explore 300+ Workbenches</span>
<ArrowRight className="size-4" />
</a>
</Button>
<Button asChild variant="outline" size="lg" className="gap-2 font-medium">
<a href="#docs">
<Code2 className="text-muted-foreground size-4" />
<span>View Architecture</span>
</a>
</Button>
</div>
</div>
{/* 3-Column Asymmetric Bento Hero Grid */}
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 pt-4 text-left sm:gap-6 md:grid-cols-3">
{/* Tile 1: OKLCH Theme Customizer (2 Cols) */}
<Card className="border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 shadow-lg backdrop-blur-md md:col-span-2">
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-primary inline-flex items-center gap-1.5 font-mono text-xs font-semibold">
<Palette className="size-3.5" /> OKLCH Dynamic Theme Engine
</span>
<Badge variant="outline" className="font-mono text-xs">
Zero Runtime CSS
</Badge>
</div>
<h3 className="text-foreground text-lg font-bold">Interactive Palette & Contrast Synthesizer</h3>
<p className="text-muted-foreground text-xs">
Select a brand accent and watch UI components dynamically adjust perceptual contrast.
</p>
</div>
{/* Color Buttons & Live Preview */}
<div className="border-border bg-background/60 space-y-4 rounded-xl border p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{colorThemes.map((c, idx) => (
<button
key={c.name}
type="button"
className={cn(
'size-6 rounded-full border-2 transition-transform',
activeColorIndex === idx
? 'border-foreground scale-125 shadow-xs'
: 'border-transparent opacity-70 hover:opacity-100',
)}
style={{ backgroundColor: c.hex }}
onClick={() => setActiveColorIndex(idx)}
/>
))}
</div>
<div className="text-muted-foreground flex items-center gap-1 font-mono text-xs">
<span>Mode:</span>
<button
type="button"
className="border-border hover:bg-muted rounded border p-1 transition-colors"
onClick={() => setIsDarkPreview(!isDarkPreview)}
>
{!isDarkPreview ? (
<Sun className="text-warning size-3.5" />
) : (
<Moon className="text-muted-foreground size-3.5" />
)}
</button>
</div>
</div>
{/* Live Button Demo with Active Hue */}
<div className="flex flex-wrap items-center gap-3 pt-2">
<button
type="button"
className="rounded-lg px-4 py-2 text-xs font-semibold text-white shadow-xs transition-transform active:scale-95"
style={{ backgroundColor: colorThemes[activeColorIndex].hex }}
>
Synthesized Action Button
</button>
<button
type="button"
className="border-border bg-background text-foreground hover:bg-muted rounded-lg border px-4 py-2 text-xs font-medium transition-colors"
>
Secondary Token
</button>
</div>
</div>
</Card>
{/* Tile 2: Dual Framework Parity (1 Col) */}
<Card className="border-border bg-card/95 flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-lg backdrop-blur-md">
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-success inline-flex items-center gap-1.5 font-mono text-xs font-semibold">
<CheckCircle2 className="size-3.5" /> 100% Mirror Parity
</span>
</div>
<h3 className="text-foreground text-lg font-bold">Vue 3.5 & React 19</h3>
<p className="text-muted-foreground text-xs">
Identical CVA variant matrix and AST output across both frameworks.
</p>
</div>
{/* Framework Toggle */}
<div className="space-y-3">
<div className="bg-muted/40 border-border grid grid-cols-2 gap-1 rounded-lg border p-1">
<button
type="button"
className={cn(
'rounded-md py-1.5 font-mono text-xs font-semibold transition-colors',
activeFramework === 'vue' ? 'bg-background text-success shadow-xs' : 'text-muted-foreground',
)}
onClick={() => setActiveFramework('vue')}
>
Vue 3.5 SFC
</button>
<button
type="button"
className={cn(
'rounded-md py-1.5 font-mono text-xs font-semibold transition-colors',
activeFramework === 'react' ? 'bg-background text-info shadow-xs' : 'text-muted-foreground',
)}
onClick={() => setActiveFramework('react')}
>
React 19 TSX
</button>
</div>
{/* Code snippet snippet */}
<div className="bg-muted/30 border-border/80 text-muted-foreground rounded-lg border p-3 font-mono text-xs">
<span className="text-primary font-bold">></span>
<span> <Button variant="primary"></span>
<div className="text-success mt-0.5 font-medium">✓ CVA Type Contract Validated</div>
</div>
</div>
</Card>
{/* Tile 3: Zero Bundle Bloat Calculator (1 Col) */}
<Card className="border-border bg-card/95 flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-lg backdrop-blur-md">
<div className="space-y-2">
<span className="text-warning inline-flex items-center gap-1.5 font-mono text-xs font-semibold">
<Cpu className="size-3.5" /> Zero NPM Overhead
</span>
<h3 className="text-foreground text-lg font-bold">Own Your Source Code</h3>
<p className="text-muted-foreground text-xs">
Slide to calculate bundle weight saved compared to monolithic packages.
</p>
</div>
{/* Slider Widget */}
<div className="border-border bg-background/60 space-y-3 rounded-xl border p-4">
<div className="flex items-center justify-between font-mono text-xs">
<span className="text-muted-foreground">Installed Blocks:</span>
<span className="text-foreground font-bold">{componentCount}</span>
</div>
<input
value={componentCount}
onChange={(e) => setComponentCount(Number(e.target.value))}
type="range"
min="1"
max="50"
className="accent-primary w-full cursor-pointer"
/>
<div className="border-border/60 flex items-center justify-between border-t pt-1 font-mono text-xs">
<span className="text-muted-foreground">Bundle Saved:</span>
<span className="text-success font-mono font-bold">~{estimatedSavings} kB</span>
</div>
</div>
</Card>
{/* Tile 4: Sub-millisecond Execution Speed (2 Cols) */}
<Card className="border-border bg-card/95 flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-lg backdrop-blur-md md:col-span-2">
<div className="flex items-center justify-between">
<div className="space-y-1">
<span className="text-primary inline-flex items-center gap-1.5 font-mono text-xs font-semibold">
<Zap className="size-3.5" /> Instant Hydration & Zero Latency
</span>
<h3 className="text-foreground text-lg font-bold">Edge Optimized Architecture</h3>
</div>
<Button size="sm" variant="outline" className="gap-1.5 font-mono text-xs" onClick={triggerQuery}>
{!isRunningQuery ? (
<Play className="size-3 fill-current" />
) : (
<Activity className="size-3 animate-spin" />
)}
<span>Ping Edge</span>
</Button>
</div>
{/* Latency Telemetry Row */}
<div className="grid grid-cols-3 gap-3">
<div className="border-border bg-background/50 space-y-0.5 rounded-xl border p-3">
<p className="text-muted-foreground font-mono text-xs">Round-Trip Latency</p>
<p className="text-success font-mono text-xl font-bold">{queryLatency}</p>
</div>
<div className="border-border bg-background/50 space-y-0.5 rounded-xl border p-3">
<p className="text-muted-foreground font-mono text-xs">DOM Mutation Time</p>
<p className="text-foreground font-mono text-xl font-bold">< 1.2ms</p>
</div>
<div className="border-border bg-background/50 space-y-0.5 rounded-xl border p-3">
<p className="text-muted-foreground font-mono text-xs">Accessibility Score</p>
<p className="text-primary font-mono text-xl font-bold">100 / 100</p>
</div>
</div>
</Card>
</div>
</div>
</section>
)
}
export default HeroBentoPreviewGrid
'use client'
import * as React from 'react'
import { ArrowRight, Check, Code2, Copy, RotateCcw } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { cn } from '@/lib/utils'
interface CommandPreset {
id: string
label: string
command: string
output: string[]
}
const presets: CommandPreset[] = [
{
id: 'init',
label: '1. Init Theme',
command: 'npx shadcn@latest add https://uipkge.dev/r/react/init.json',
output: [
'✔ Resolving registry dependencies...',
'✔ Downloaded packages/shared/styles/tailwind.css (OKLCH @theme inline)',
'✔ Configured cn() utility in src/lib/utils.ts',
'✔ Injected useTheme hook with system preference sync',
'✔ UIPKGE bootstrap complete in 124ms.',
],
},
{
id: 'component',
label: '2. Add KPI Grid',
command: 'npx shadcn@latest add https://uipkge.dev/r/react/kpi-grid.json',
output: [
'✔ Fetched manifest for kpi-grid (registry:ui)',
'✔ Added components/ui/kpi-grid/KpiGrid.tsx',
'✔ Verified CVA variants in kpi-grid.variants.ts',
'✔ Installed transitive primitives: Card, Badge, Sparkline',
'✔ Zero npm bundle overhead added to node_modules.',
],
},
{
id: 'verify',
label: '3. Parity Check',
command: 'npm run check:parity',
output: [
'✔ Checking 31 shared CVA variant definitions...',
'✔ Validating Vue 3.5 SFC and React 19 TSX type contracts...',
'✔ Token synchronization: styles/tailwind.css (100% match)',
'✔ PASS: Full cross-framework parity confirmed across all 300+ items.',
],
},
]
export interface HeroDeveloperTerminalProps {
className?: string
}
export function HeroDeveloperTerminal({ className }: HeroDeveloperTerminalProps) {
const [activePresetIndex, setActivePresetIndex] = React.useState(0)
const [displayedLines, setDisplayedLines] = React.useState<string[]>([])
const [isExecuting, setIsExecuting] = React.useState(false)
const [copied, setCopied] = React.useState(false)
const [executionSpeed, setExecutionSpeed] = React.useState<1 | 2>(1)
const executionTimeoutRef = React.useRef<NodeJS.Timeout[]>([])
const clearTimeouts = () => {
executionTimeoutRef.current.forEach((t) => clearTimeout(t))
executionTimeoutRef.current = []
}
const runPreset = React.useCallback(
(index: number) => {
setActivePresetIndex(index)
setDisplayedLines([])
setIsExecuting(true)
clearTimeouts()
const currentPreset = presets[index]
const lines = currentPreset.output
const delay = executionSpeed === 1 ? 160 : 70
lines.forEach((line, i) => {
const timeout = setTimeout(
() => {
setDisplayedLines((prev) => [...prev, line])
if (i === lines.length - 1) {
setIsExecuting(false)
}
},
(i + 1) * delay,
)
executionTimeoutRef.current.push(timeout)
})
},
[executionSpeed],
)
React.useEffect(() => {
runPreset(0)
return () => clearTimeouts()
}, [runPreset])
const copyCommand = () => {
const current = presets[activePresetIndex]
navigator.clipboard.writeText(current.command)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
const currentPreset = presets[activePresetIndex]
return (
<section
data-slot="hero-developer-terminal"
className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}
>
<div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-8">
{/* Left Column: Value Proposition & CTAs (6 Cols) */}
<div className="space-y-6 text-left lg:col-span-6">
{/* Parity Badge */}
<div className="border-border bg-muted/40 inline-flex items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs shadow-xs">
<span className="bg-success size-2 rounded-full" />
<span className="text-foreground font-medium">Dual-Framework UI Registry</span>
<span className="text-muted-foreground">•</span>
<span className="text-muted-foreground">Vue 3.5 & React 19</span>
</div>
{/* Main Headline */}
<h1 className="text-foreground text-4xl leading-[1.1] font-bold tracking-tight sm:text-5xl lg:text-6xl">
The unbundled UI registry for design engineers.
</h1>
{/* Subtitle */}
<p className="text-muted-foreground max-w-xl text-base leading-relaxed sm:text-lg">
Own your source code. Copy production-grade components and dense workbenches directly into your project with
zero npm runtime lock-in.
</p>
{/* CTA Buttons */}
<div className="flex flex-wrap items-center gap-3 pt-2">
<Button asChild size="lg" className="gap-2 font-semibold shadow-xs">
<a href="#components">
<span>Explore 300+ Blocks</span>
<ArrowRight className="size-4" />
</a>
</Button>
<Button asChild variant="outline" size="lg" className="gap-2 font-medium">
<a href="#spec">
<Code2 className="text-muted-foreground size-4" />
<span>Registry Spec</span>
</a>
</Button>
</div>
{/* Telemetry Metrics Strip */}
<div className="border-border/80 grid grid-cols-3 gap-4 border-t pt-6 text-left">
<div>
<p className="text-foreground font-mono text-2xl font-bold">300+</p>
<p className="text-muted-foreground mt-0.5 text-xs">Workbenches & Primitives</p>
</div>
<div>
<p className="text-foreground font-mono text-2xl font-bold">0 kB</p>
<p className="text-muted-foreground mt-0.5 text-xs">Runtime Package Bloat</p>
</div>
<div>
<p className="text-foreground font-mono text-2xl font-bold">100%</p>
<p className="text-muted-foreground mt-0.5 text-xs">Cross-Framework Parity</p>
</div>
</div>
</div>
{/* Right Column: Interactive Developer Terminal Workbench (6 Cols) */}
<div className="lg:col-span-6">
<Card className="border-border bg-card overflow-hidden rounded-xl shadow-sm">
{/* Terminal Header */}
<div className="border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5">
{/* Window Controls & File Path */}
<div className="flex items-center gap-2">
<div className="flex gap-1.5">
<div className="bg-destructive/80 size-3 rounded-full" />
<div className="bg-warning/80 size-3 rounded-full" />
<div className="bg-success/80 size-3 rounded-full" />
</div>
<span className="text-muted-foreground ml-2 font-mono text-xs">uipkge-cli — bash</span>
</div>
{/* Action Controls */}
<div className="flex items-center gap-1.5">
{/* Speed Selector */}
<button
type="button"
className="border-border bg-background text-muted-foreground hover:text-foreground rounded border px-2 py-0.5 font-mono text-xs transition-colors"
onClick={() => setExecutionSpeed((s) => (s === 1 ? 2 : 1))}
>
{executionSpeed}x speed
</button>
{/* Copy Button */}
<button
type="button"
className="border-border bg-background text-muted-foreground hover:text-foreground flex items-center gap-1 rounded border px-2 py-0.5 font-mono text-xs transition-colors"
onClick={copyCommand}
>
{copied ? <Check className="text-success size-3" /> : <Copy className="size-3" />}
<span>{copied ? 'Copied' : 'Copy'}</span>
</button>
</div>
</div>
{/* Preset Navigation Tabs */}
<div className="border-border/80 bg-muted/20 flex items-center overflow-x-auto border-b px-2">
{presets.map((preset, idx) => (
<button
key={preset.id}
type="button"
className={cn(
'border-b-2 px-3 py-2 font-mono text-xs whitespace-nowrap transition-colors',
activePresetIndex === idx
? 'border-primary text-foreground bg-background/50 font-semibold'
: 'text-muted-foreground hover:text-foreground border-transparent',
)}
onClick={() => runPreset(idx)}
>
{preset.label}
</button>
))}
</div>
{/* Terminal Content Viewport */}
<div className="bg-card min-h-[220px] space-y-3 p-4 font-mono text-xs sm:p-5">
{/* Command Input Line */}
<div className="text-foreground flex items-start gap-2">
<span className="text-primary font-bold select-none">></span>
<span className="text-foreground font-medium break-all">{currentPreset.command}</span>
</div>
{/* Output Lines */}
<div className="space-y-1.5 pt-1">
{displayedLines.map((line, idx) => (
<div
key={idx}
className="text-muted-foreground flex items-center gap-2 transition-colors duration-150"
>
<span className="text-success shrink-0 font-bold select-none">✓</span>
<span className="text-xs">{line.replace(/^✔\s*/, '')}</span>
</div>
))}
{/* Typing / Loading Cursor */}
{isExecuting && (
<div className="text-muted-foreground flex items-center gap-2 pt-1">
<span className="bg-primary size-1.5 rounded-full" />
<span className="text-muted-foreground text-xs italic">Streaming AST payload...</span>
</div>
)}
</div>
</div>
{/* Terminal Footer Status Bar */}
<div className="border-border bg-muted/30 text-muted-foreground flex items-center justify-between border-t px-4 py-2 font-mono text-xs">
<div className="flex items-center gap-2">
<span className="bg-success size-2 rounded-full" />
<span>Registry v2.4.0 (OKLCH)</span>
</div>
<button
type="button"
className="text-primary inline-flex items-center gap-1 hover:underline"
onClick={() => runPreset(activePresetIndex)}
>
<RotateCcw className="size-3" />
<span>Re-run</span>
</button>
</div>
</Card>
</div>
</div>
</section>
)
}
export default HeroDeveloperTerminal
'use client'
import * as React from 'react'
import { Activity, ArrowRight, Check, Copy, Globe, Radio, Server, ShieldCheck, Terminal, Zap } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { cn } from '@/lib/utils'
export interface EdgeNode {
id: string
name: string
region: string
country: string
city: string
latencyMs: number
p99LatencyMs: number
cacheHitRatio: number
qps: number
status: 'optimal' | 'operational' | 'degraded'
coordinates: { x: number; y: number }
}
export interface HeroGlobeInteractiveNodesProps {
title?: string
description?: string
cliCommand?: string
nodes?: EdgeNode[]
className?: string
}
const DEFAULT_NODES: EdgeNode[] = [
{
id: 'node-iad',
name: 'iad-1',
region: 'us-east-1',
country: 'United States',
city: 'Washington, D.C.',
latencyMs: 8,
p99LatencyMs: 14,
cacheHitRatio: 99.4,
qps: 18450,
status: 'optimal',
coordinates: { x: 28, y: 38 },
},
{
id: 'node-sfo',
name: 'sfo-1',
region: 'us-west-1',
country: 'United States',
city: 'San Francisco',
latencyMs: 12,
p99LatencyMs: 22,
cacheHitRatio: 99.1,
qps: 14200,
status: 'optimal',
coordinates: { x: 18, y: 40 },
},
{
id: 'node-fra',
name: 'fra-1',
region: 'eu-central-1',
country: 'Germany',
city: 'Frankfurt',
latencyMs: 15,
p99LatencyMs: 27,
cacheHitRatio: 98.9,
qps: 21300,
status: 'optimal',
coordinates: { x: 52, y: 32 },
},
{
id: 'node-sin',
name: 'sin-1',
region: 'ap-southeast-1',
country: 'Singapore',
city: 'Singapore',
latencyMs: 24,
p99LatencyMs: 41,
cacheHitRatio: 98.6,
qps: 16800,
status: 'optimal',
coordinates: { x: 76, y: 58 },
},
{
id: 'node-nrt',
name: 'nrt-1',
region: 'ap-northeast-1',
country: 'Japan',
city: 'Tokyo',
latencyMs: 19,
p99LatencyMs: 34,
cacheHitRatio: 99.2,
qps: 19400,
status: 'optimal',
coordinates: { x: 84, y: 42 },
},
{
id: 'node-syd',
name: 'syd-1',
region: 'ap-southeast-2',
country: 'Australia',
city: 'Sydney',
latencyMs: 32,
p99LatencyMs: 52,
cacheHitRatio: 98.2,
qps: 9800,
status: 'optimal',
coordinates: { x: 88, y: 78 },
},
{
id: 'node-gru',
name: 'gru-1',
region: 'sa-east-1',
country: 'Brazil',
city: 'São Paulo',
latencyMs: 44,
p99LatencyMs: 68,
cacheHitRatio: 97.9,
qps: 7600,
status: 'optimal',
coordinates: { x: 36, y: 74 },
},
{
id: 'node-lhr',
name: 'lhr-1',
region: 'eu-west-2',
country: 'United Kingdom',
city: 'London',
latencyMs: 11,
p99LatencyMs: 20,
cacheHitRatio: 99.5,
qps: 24600,
status: 'optimal',
coordinates: { x: 48, y: 30 },
},
]
export function HeroGlobeInteractiveNodes({
title = 'Sub-millisecond UI edge delivery across 310+ PoPs globally.',
description = 'Compile unbundled Vue 3.5 and React 19 components with instant edge caching. Zero cold starts, deterministic tree-shaking, and hardware-accelerated telemetry.',
cliCommand = 'npx shadcn add @uipkge/init',
nodes = DEFAULT_NODES,
className,
}: HeroGlobeInteractiveNodesProps) {
const [selectedNodeId, setSelectedNodeId] = React.useState<string>('node-iad')
const [copied, setCopied] = React.useState(false)
const selectedNode = React.useMemo(() => {
return nodes.find((n) => n.id === selectedNodeId) || nodes[0]
}, [nodes, selectedNodeId])
const avgGlobalLatency = React.useMemo(() => {
if (!nodes.length) return 0
const sum = nodes.reduce((acc, curr) => acc + curr.latencyMs, 0)
return Math.round(sum / nodes.length)
}, [nodes])
const totalGlobalQps = React.useMemo(() => {
return nodes.reduce((acc, curr) => acc + curr.qps, 0).toLocaleString()
}, [nodes])
async function copyCommand() {
try {
await navigator.clipboard.writeText(cliCommand)
setCopied(true)
setTimeout(() => {
setCopied(false)
}, 2000)
} catch {
// fallback
}
}
return (
<section
data-slot="hero-globe-interactive-nodes"
className={cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', className)}
>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:items-center">
{/* Left: Copy & Actions (6 Cols) */}
<div className="space-y-6 lg:col-span-6">
<div className="border-primary/20 bg-primary/10 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium shadow-2xs">
<Radio className="text-primary size-3.5 animate-pulse" />
<span>Global Edge CDN Mesh Active • 310+ PoPs</span>
</div>
<h1 className="text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">{title}</h1>
<p className="text-muted-foreground text-base sm:text-lg">{description}</p>
{/* CLI Command Sandbox */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<div className="border-border bg-muted/60 text-foreground flex items-center justify-between rounded-lg border px-3 py-2 font-mono text-xs shadow-2xs sm:w-80">
<div className="flex items-center gap-2 truncate">
<Terminal className="text-muted-foreground size-3.5 shrink-0" />
<span className="truncate">{cliCommand}</span>
</div>
<Button
variant="ghost"
size="icon"
className="text-muted-foreground hover:text-foreground size-7 shrink-0"
onClick={copyCommand}
>
{copied ? <Check className="text-primary size-3.5" /> : <Copy className="size-3.5" />}
</Button>
</div>
<Button size="default" className="gap-1.5 shadow-xs">
<span>Explore Registry</span>
<ArrowRight className="size-4" />
</Button>
</div>
{/* Quick Telemetry Strip */}
<div className="border-border grid grid-cols-3 gap-4 border-t pt-6">
<div className="space-y-1">
<div className="text-muted-foreground text-xs font-medium">Global Avg Ping</div>
<div className="text-foreground text-xl font-bold tracking-tight">{avgGlobalLatency}ms</div>
<div className="text-success text-xs font-medium">−42% vs origin</div>
</div>
<div className="space-y-1">
<div className="text-muted-foreground text-xs font-medium">Network Throughput</div>
<div className="text-foreground text-xl font-bold tracking-tight">{totalGlobalQps}</div>
<div className="text-muted-foreground text-xs">req/sec live</div>
</div>
<div className="space-y-1">
<div className="text-muted-foreground text-xs font-medium">Edge Availability</div>
<div className="text-foreground text-xl font-bold tracking-tight">99.95%</div>
<div className="text-success text-xs font-medium">Enterprise SLA</div>
</div>
</div>
</div>
{/* Right: Interactive SVG Node Map & Telemetry Workbench (6 Cols) */}
<div className="space-y-4 lg:col-span-6">
<Card className="border-border bg-card/80 shadow-sm backdrop-blur-xs">
<CardContent className="space-y-4 p-4 sm:p-6">
{/* Top bar: active node switch */}
<div className="border-border flex items-center justify-between border-b pb-3">
<div className="flex items-center gap-2">
<Globe className="text-primary size-4" />
<span className="text-foreground text-xs font-semibold">Active Edge Inspection</span>
</div>
<Badge variant="outline" className="border-border text-muted-foreground font-mono text-xs">
{selectedNode.city} ({selectedNode.name})
</Badge>
</div>
{/* Interactive Node Grid / Map Canvas */}
<div className="border-border/80 bg-muted/30 relative h-60 w-full overflow-hidden rounded-lg border p-3">
{/* SVG Connections Network Layer */}
<svg className="stroke-border/70 absolute inset-0 size-full" xmlns="http://www.w3.org/2000/svg">
{nodes.slice(1).map((n, idx) => (
<line
key={idx}
x1={`${nodes[0].coordinates.x}%`}
y1={`${nodes[0].coordinates.y}%`}
x2={`${n.coordinates.x}%`}
y2={`${n.coordinates.y}%`}
strokeDasharray="3 3"
strokeWidth="1"
/>
))}
</svg>
{/* Interactive Region Nodes */}
{nodes.map((node) => (
<button
key={node.id}
type="button"
style={{ left: `${node.coordinates.x}%`, top: `${node.coordinates.y}%` }}
className={cn(
'focus-visible:ring-ring absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',
selectedNodeId === node.id
? 'bg-primary text-primary-foreground ring-primary/20 z-10 size-7 scale-110 shadow-sm ring-4'
: 'bg-card hover:bg-accent border-border text-foreground size-5 border hover:scale-105',
)}
onClick={() => setSelectedNodeId(node.id)}
>
<span className="font-mono text-xs leading-none font-bold">
{selectedNodeId === node.id ? node.name.slice(0, 3).toUpperCase() : ''}
</span>
{selectedNodeId !== node.id ? <span className="bg-success size-2 rounded-full" /> : null}
</button>
))}
</div>
{/* Edge Node Telemetry Card */}
<div className="border-border bg-background grid grid-cols-2 gap-2.5 rounded-lg border p-3 sm:grid-cols-4">
<div className="space-y-0.5">
<div className="text-muted-foreground flex items-center gap-1 text-xs">
<Zap className="text-primary size-3" />
<span>Ping (p50)</span>
</div>
<div className="text-foreground font-mono text-sm font-bold">{selectedNode.latencyMs}ms</div>
</div>
<div className="space-y-0.5">
<div className="text-muted-foreground flex items-center gap-1 text-xs">
<Activity className="text-success size-3" />
<span>Ping (p99)</span>
</div>
<div className="text-foreground font-mono text-sm font-bold">{selectedNode.p99LatencyMs}ms</div>
</div>
<div className="space-y-0.5">
<div className="text-muted-foreground flex items-center gap-1 text-xs">
<Server className="text-info size-3" />
<span>Cache Hit</span>
</div>
<div className="text-foreground font-mono text-sm font-bold">{selectedNode.cacheHitRatio}%</div>
</div>
<div className="space-y-0.5">
<div className="text-muted-foreground flex items-center gap-1 text-xs">
<ShieldCheck className="text-primary size-3" />
<span>Throughput</span>
</div>
<div className="text-foreground font-mono text-sm font-bold">
{selectedNode.qps.toLocaleString()} qps
</div>
</div>
</div>
{/* Quick Node Pill Selector */}
<div className="flex flex-wrap gap-1.5 pt-1">
{nodes.map((node) => (
<button
key={node.id}
type="button"
className={cn(
'rounded-md border px-2 py-1 font-mono text-xs font-medium transition-colors',
selectedNodeId === node.id
? 'border-primary bg-primary/10 text-primary'
: 'border-border bg-card text-muted-foreground hover:text-foreground hover:bg-accent/50',
)}
onClick={() => setSelectedNodeId(node.id)}
>
{node.name} • {node.city}
</button>
))}
</div>
</CardContent>
</Card>
</div>
</div>
</div>
</section>
)
}
'use client'
import * as React from 'react'
import { ArrowRight, CheckCircle2, Play, ShieldCheck, TrendingUp } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { cn } from '@/lib/utils'
type Timeframe = 'live' | '24h' | '7d' | '30d'
interface MetricData {
mrr: string
growth: string
activeUsers: string
requests: string
chartPoints: number[]
}
const metricsByTimeframe: Record<Timeframe, MetricData> = {
live: {
mrr: '$148,920',
growth: '+24.6%',
activeUsers: '14,280',
requests: '1.42M/min',
chartPoints: [28, 42, 36, 54, 48, 62, 78, 70, 85, 92, 88, 98],
},
'24h': {
mrr: '$146,800',
growth: '+18.2%',
activeUsers: '42,100',
requests: '84.6M',
chartPoints: [35, 38, 45, 52, 50, 68, 64, 75, 82, 80, 89, 94],
},
'7d': {
mrr: '$139,400',
growth: '+31.4%',
activeUsers: '185,400',
requests: '592M',
chartPoints: [20, 28, 35, 42, 55, 60, 72, 68, 80, 85, 90, 100],
},
'30d': {
mrr: '$124,100',
growth: '+44.1%',
activeUsers: '490,000',
requests: '2.4B',
chartPoints: [15, 22, 30, 38, 48, 58, 65, 74, 82, 88, 94, 105],
},
}
export interface HeroSaasMetricsDashboardProps {
className?: string
}
export function HeroSaasMetricsDashboard({ className }: HeroSaasMetricsDashboardProps) {
const [activeTimeframe, setActiveTimeframe] = React.useState<Timeframe>('live')
const activeMetric = metricsByTimeframe[activeTimeframe]
const chartSvgPath = React.useMemo(() => {
const points = activeMetric.chartPoints
const width = 500
const height = 120
const max = Math.max(...points)
const min = Math.min(...points)
const range = max - min || 1
return points
.map((val, idx) => {
const x = (idx / (points.length - 1)) * width
const y = height - ((val - min) / range) * (height - 20) - 10
return `${idx === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`
})
.join(' ')
}, [activeMetric.chartPoints])
const chartAreaPath = React.useMemo(() => {
return `${chartSvgPath} L 500 120 L 0 120 Z`
}, [chartSvgPath])
return (
<section
data-slot="hero-saas-metrics-dashboard"
className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}
>
{/* Radial Glow Background */}
<div className="bg-primary/10 pointer-events-none absolute top-0 left-1/2 -z-10 h-80 w-full max-w-6xl -translate-x-1/2 rounded-full blur-xl" />
<div className="mx-auto max-w-6xl space-y-12 text-center">
{/* Header Copy */}
<div className="mx-auto max-w-3xl space-y-5">
<Badge variant="secondary" className="gap-1.5 px-3 py-1 font-mono text-xs shadow-xs">
<TrendingUp className="text-primary size-3.5" />
Enterprise Revenue & Event Intelligence
</Badge>
<h1 className="text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl">
Real-time telemetry for modern engineering teams.
</h1>
<p className="text-muted-foreground text-base leading-relaxed sm:text-lg">
Monitor revenue acceleration, API transaction throughput, and compute workloads with sub-millisecond
precision.
</p>
{/* CTA Action Buttons */}
<div className="flex flex-wrap items-center justify-center gap-3 pt-2">
<Button asChild size="lg" className="gap-2 font-semibold shadow-xs">
<a href="#start">
<span>Start Free Sandbox</span>
<ArrowRight className="size-4" />
</a>
</Button>
<Button asChild variant="outline" size="lg" className="gap-2 font-medium">
<a href="#demo">
<Play className="size-3.5 fill-current" />
<span>Interactive Demo</span>
</a>
</Button>
</div>
<div className="text-muted-foreground flex items-center justify-center gap-6 pt-2 font-mono text-xs">
<span className="inline-flex items-center gap-1.5">
<ShieldCheck className="text-success size-4" /> SOC2 Type II Certified
</span>
<span className="inline-flex items-center gap-1.5">
<CheckCircle2 className="text-primary size-4" /> 99.95% SLA Uptime
</span>
</div>
</div>
{/* Interactive SaaS Dashboard Preview Card */}
<div className="relative mx-auto max-w-5xl">
<Card className="border-border bg-card/95 overflow-hidden rounded-2xl text-left shadow-sm backdrop-blur-md">
{/* Mock Window Top Bar */}
<div className="border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3">
<div className="flex items-center gap-3">
<div className="flex gap-1.5">
<div className="bg-destructive/80 size-3 rounded-full" />
<div className="bg-warning/80 size-3 rounded-full" />
<div className="bg-success/80 size-3 rounded-full" />
</div>
<span className="text-foreground font-mono text-xs font-medium">console.uipkge.dev/production</span>
</div>
{/* Timeframe Filter Tabs */}
<div className="bg-background border-border flex items-center gap-1 rounded-lg border p-0.5">
{(['live', '24h', '7d', '30d'] as Timeframe[]).map((tf) => (
<button
key={tf}
type="button"
className={cn(
'rounded-md px-2.5 py-1 font-mono text-xs uppercase transition-colors',
activeTimeframe === tf
? 'bg-primary text-primary-foreground font-semibold shadow-xs'
: 'text-muted-foreground hover:text-foreground',
)}
onClick={() => setActiveTimeframe(tf)}
>
{tf}
</button>
))}
</div>
</div>
{/* Dashboard Metric Cards Grid */}
<div className="space-y-6 p-6 sm:p-8">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
{/* MRR Card */}
<div className="border-border bg-background/50 space-y-1 rounded-xl border p-4">
<div className="text-muted-foreground flex items-center justify-between text-xs">
<span className="font-mono">Recurring Revenue</span>
<Badge variant="outline" className="border-success/20 bg-success/10 text-success font-mono text-xs">
{activeMetric.growth}
</Badge>
</div>
<p className="text-foreground font-mono text-2xl font-bold">{activeMetric.mrr}</p>
<p className="text-muted-foreground text-xs">Calculated across active subscriptions</p>
</div>
{/* Active Workloads Card */}
<div className="border-border bg-background/50 space-y-1 rounded-xl border p-4">
<div className="text-muted-foreground flex items-center justify-between text-xs">
<span className="font-mono">Active Nodes & Pods</span>
<span className="bg-success size-2 rounded-full" />
</div>
<p className="text-foreground font-mono text-2xl font-bold">{activeMetric.activeUsers}</p>
<p className="text-muted-foreground text-xs">Distributed across 8 global regions</p>
</div>
{/* Request Throughput Card */}
<div className="border-border bg-background/50 space-y-1 rounded-xl border p-4">
<div className="text-muted-foreground flex items-center justify-between text-xs">
<span className="font-mono">Throughput</span>
<TrendingUp className="text-primary size-3.5" />
</div>
<p className="text-foreground font-mono text-2xl font-bold">{activeMetric.requests}</p>
<p className="text-muted-foreground text-xs">Edge cached queries & websocket streams</p>
</div>
</div>
{/* Interactive Area Trend Chart */}
<div className="border-border bg-background/30 space-y-3 rounded-xl border p-5">
<div className="flex items-center justify-between">
<div>
<p className="text-muted-foreground font-mono text-xs uppercase">
Transaction Velocity & Event Stream
</p>
<p className="text-foreground text-sm font-semibold">Global Ingestion Rate</p>
</div>
<span className="text-success font-mono text-xs font-medium">99.998% Success</span>
</div>
{/* SVG Area Chart */}
<div className="relative h-28 w-full overflow-hidden">
<svg className="h-full w-full" viewBox="0 0 500 120" preserveAspectRatio="none">
<defs>
<linearGradient id="chartGlowReact" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="var(--primary)" stopOpacity="0.35" />
<stop offset="100%" stopColor="var(--primary)" stopOpacity="0.0" />
</linearGradient>
</defs>
{/* Gradient Area */}
<path d={chartAreaPath} fill="url(#chartGlowReact)" />
{/* Stroke Line */}
<path
d={chartSvgPath}
fill="none"
stroke="var(--primary)"
strokeWidth="2.5"
strokeLinecap="round"
/>
</svg>
</div>
</div>
</div>
</Card>
</div>
</div>
</section>
)
}
export default HeroSaasMetricsDashboard
'use client'
import * as React from 'react'
import { ArrowRight, Monitor, Moon, Smartphone, Sun, Tablet } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { cn } from '@/lib/utils'
export interface HeroSplitDeviceMockupProps {
title?: string
description?: string
className?: string
}
type DeviceMode = 'desktop' | 'tablet' | 'mobile'
const MOCK_KPIS = [
{ label: 'Active Sessions', value: '24,892', change: '+14.2%', status: 'up' },
{ label: 'Conversion Rate', value: '4.82%', change: '+0.6%', status: 'up' },
{ label: 'Avg TTFB', value: '18ms', change: '-4ms', status: 'optimal' },
]
export function HeroSplitDeviceMockup({
title = 'Responsive components with identical fidelity on every device.',
description = 'Every primitive and block is engineered with fluid container queries and zero layout shift across desktop, tablet, and mobile displays.',
className,
}: HeroSplitDeviceMockupProps) {
const [activeMode, setActiveMode] = React.useState<DeviceMode>('desktop')
const [isDarkMode, setIsDarkMode] = React.useState(true)
const [activeTab, setActiveTab] = React.useState<'overview' | 'analytics' | 'activity'>('overview')
const viewportWidthClass = React.useMemo(() => {
if (activeMode === 'desktop') return 'w-full max-w-2xl'
if (activeMode === 'tablet') return 'w-full max-w-md'
return 'w-full max-w-[320px]'
}, [activeMode])
return (
<section
data-slot="hero-split-device-mockup"
className={cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', className)}
>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Top Title & Badge Area */}
<div className="mx-auto max-w-3xl space-y-4 text-center">
<a
href="#device-preview"
className="group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors"
>
<Smartphone className="text-primary size-3.5" />
<span>Fluid Container Queries • Tailwind v4 Ready</span>
<ArrowRight className="text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5" />
</a>
<h1 className="text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">{title}</h1>
<p className="text-muted-foreground text-base sm:text-lg">{description}</p>
{/* Viewport Controls & Interactive Triggers */}
<div className="flex flex-wrap items-center justify-center gap-2 pt-2">
<div className="border-border bg-muted/50 inline-flex rounded-lg border p-1 shadow-2xs">
<button
type="button"
className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
activeMode === 'desktop'
? 'bg-background text-foreground shadow-2xs'
: 'text-muted-foreground hover:text-foreground',
)}
onClick={() => setActiveMode('desktop')}
>
<Monitor className="size-3.5" />
<span>Desktop (1440px)</span>
</button>
<button
type="button"
className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
activeMode === 'tablet'
? 'bg-background text-foreground shadow-2xs'
: 'text-muted-foreground hover:text-foreground',
)}
onClick={() => setActiveMode('tablet')}
>
<Tablet className="size-3.5" />
<span>Tablet (768px)</span>
</button>
<button
type="button"
className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
activeMode === 'mobile'
? 'bg-background text-foreground shadow-2xs'
: 'text-muted-foreground hover:text-foreground',
)}
onClick={() => setActiveMode('mobile')}
>
<Smartphone className="size-3.5" />
<span>Mobile (375px)</span>
</button>
</div>
<Button
variant="outline"
size="sm"
className="border-border gap-1.5 text-xs"
onClick={() => setIsDarkMode((prev) => !prev)}
>
{isDarkMode ? <Sun className="size-3.5" /> : <Moon className="size-3.5" />}
<span>{isDarkMode ? 'Dark Frame' : 'Light Frame'}</span>
</Button>
</div>
</div>
{/* Split Device Mockup Canvas */}
<div className="mt-12 flex justify-center">
<div
className={cn(
'border-border bg-card rounded-xl border p-2 shadow-md transition-colors duration-300 ease-out sm:p-3',
viewportWidthClass,
isDarkMode ? 'dark' : '',
)}
>
{/* Browser / Device Chrome Header */}
<div className="border-border/80 flex items-center justify-between border-b px-2 pt-1 pb-2.5">
<div className="flex items-center gap-1.5">
<span className="bg-destructive/80 size-2.5 rounded-full" />
<span className="bg-warning/80 size-2.5 rounded-full" />
<span className="bg-success/80 size-2.5 rounded-full" />
</div>
{/* URL Bar */}
<div className="border-border/60 bg-muted/60 text-muted-foreground mx-auto flex h-6 w-1/2 items-center justify-center truncate rounded-md border px-2 font-mono text-xs">
https://uipkge.dev/demo/dashboard-kpis
</div>
<div className="text-muted-foreground flex items-center gap-1">
<span className="bg-success size-2 rounded-full" />
<span className="font-mono text-xs">LIVE</span>
</div>
</div>
{/* Inside Interactive Device Application */}
<div className="bg-background space-y-4 rounded-lg p-4 pt-4">
{/* App Header Inside Frame */}
<div className="border-border flex items-center justify-between border-b pb-3">
<div className="flex items-center gap-2">
<div className="bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md text-xs font-bold">
UI
</div>
<div>
<div className="text-foreground text-xs font-semibold">Platform Metrics</div>
<div className="text-muted-foreground text-xs">Production Cluster (us-east-1)</div>
</div>
</div>
{/* Inner App Tabs */}
<div className="border-border bg-muted/40 flex gap-1 rounded-md border p-0.5">
<button
type="button"
className={cn(
'rounded px-2 py-0.5 text-xs font-medium transition-colors',
activeTab === 'overview'
? 'bg-background text-foreground shadow-2xs'
: 'text-muted-foreground hover:text-foreground',
)}
onClick={() => setActiveTab('overview')}
>
Overview
</button>
<button
type="button"
className={cn(
'rounded px-2 py-0.5 text-xs font-medium transition-colors',
activeTab === 'analytics'
? 'bg-background text-foreground shadow-2xs'
: 'text-muted-foreground hover:text-foreground',
)}
onClick={() => setActiveTab('analytics')}
>
Analytics
</button>
</div>
</div>
{/* KPI Metric Grid in Frame */}
<div className={cn('grid gap-2.5', activeMode === 'mobile' ? 'grid-cols-1' : 'grid-cols-3')}>
{MOCK_KPIS.map((kpi, idx) => (
<Card key={idx} className="border-border bg-card/60 shadow-2xs">
<CardContent className="space-y-1 p-3">
<div className="text-muted-foreground text-xs font-medium">{kpi.label}</div>
<div className="text-foreground text-lg font-bold tracking-tight">{kpi.value}</div>
<div className="text-success flex items-center gap-1 text-xs font-medium">
<span>{kpi.change}</span>
<span className="text-muted-foreground">• vs last week</span>
</div>
</CardContent>
</Card>
))}
</div>
{/* Interactive Wave / Chart Preview */}
<div className="border-border/80 bg-muted/20 space-y-2 rounded-lg border p-3">
<div className="flex items-center justify-between text-xs">
<span className="text-foreground font-medium">Real-time Telemetry Stream</span>
<Badge variant="outline" className="border-border text-success font-mono text-xs">
Synced: 0.2ms
</Badge>
</div>
{/* SVG Mock Sparkline Chart */}
<svg
className="stroke-primary fill-primary/10 h-16 w-full"
viewBox="0 0 300 60"
preserveAspectRatio="none"
>
<path d="M0 45 Q 25 20, 50 35 T 100 25 T 150 15 T 200 30 T 250 10 T 300 20 L 300 60 L 0 60 Z" />
<path
d="M0 45 Q 25 20, 50 35 T 100 25 T 150 15 T 200 30 T 250 10 T 300 20"
fill="none"
strokeWidth="2"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
'use client'
import * as React from 'react'
import { Check, Command, CornerDownLeft, FileCode, FolderGit2, Layers, Palette, Search, Zap } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import { cn } from '@/lib/utils'
export interface CommandAction {
id: string
title: string
category: 'Components' | 'Themes' | 'Git' | 'Workflows'
shortcut: string[]
icon: React.ComponentType<{ className?: string }>
description: string
status: string
}
export interface HeroTypingCommandCenterProps {
title?: string
description?: string
className?: string
}
const actions: CommandAction[] = [
{
id: 'add-pdp',
title: 'Insert Product Detail Page',
category: 'Components',
shortcut: ['⌘', 'I', 'P'],
icon: Layers,
description: 'Adds flagship unbundled PDP with gallery, reviews & buy box',
status: 'Ready to inject',
},
{
id: 'toggle-dark',
title: 'Toggle High-Contrast Dark Theme',
category: 'Themes',
shortcut: ['⌘', 'T'],
icon: Palette,
description: 'Switches active OKLCH tokens to studio obsidian mode',
status: 'Instant update',
},
{
id: 'git-branch',
title: 'Checkout Release Branch: v2.4.0',
category: 'Git',
shortcut: ['⌘', 'G', 'B'],
icon: FolderGit2,
description: 'Switches workspace to staging pipeline branch',
status: 'Clean working tree',
},
{
id: 'sync-registry',
title: 'Synchronize Dual-Framework ASTs',
category: 'Workflows',
shortcut: ['⌘', 'S', 'Y'],
icon: FileCode,
description: 'Generates parity manifests between Vue 3.5 and React 19',
status: 'Verified 100% parity',
},
{
id: 'run-audit',
title: 'Trigger Automated Craft Audit',
category: 'Workflows',
shortcut: ['⌘', 'A', 'U'],
icon: Zap,
description: 'Validates semantic scales, AA contrast and eliminates design slop',
status: 'Zero regressions',
},
]
export function HeroTypingCommandCenter({
title = 'Execute workflows at the speed of thought with keyboard command palette.',
description = 'Instant component insertion, theme switching, git branches, and automated deployment pipelines driven by zero-latency hotkeys.',
className,
}: HeroTypingCommandCenterProps) {
const [searchQuery, setSearchQuery] = React.useState('')
const [selectedIndex, setSelectedIndex] = React.useState(0)
const [executedAction, setExecutedAction] = React.useState<CommandAction | null>(null)
const filteredActions = React.useMemo(() => {
if (!searchQuery.trim()) return actions
const q = searchQuery.toLowerCase()
return actions.filter(
(a) =>
a.title.toLowerCase().includes(q) ||
a.category.toLowerCase().includes(q) ||
a.description.toLowerCase().includes(q),
)
}, [searchQuery])
function execute(action: CommandAction) {
setExecutedAction(action)
setTimeout(() => {
setExecutedAction(null)
}, 2500)
}
return (
<section
data-slot="hero-typing-command-center"
className={cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', className)}
>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:items-center">
{/* Left: Headline & Key Advantages (5 Cols) */}
<div className="space-y-6 lg:col-span-5">
<div className="border-border/80 bg-secondary/60 text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs">
<Command className="text-primary size-3.5" />
<span>Keyboard Ergonomics • Zero Latency</span>
</div>
<h1 className="text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">{title}</h1>
<p className="text-muted-foreground text-base sm:text-lg">{description}</p>
{/* Hotkey Highlights Grid */}
<div className="border-border bg-muted/20 grid grid-cols-2 gap-3 rounded-xl border p-4 text-xs">
<div className="space-y-1">
<div className="text-muted-foreground font-medium">Global Trigger</div>
<div className="flex items-center gap-1 font-mono">
<kbd className="border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs">⌘</kbd>
<kbd className="border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs">K</kbd>
</div>
</div>
<div className="space-y-1">
<div className="text-muted-foreground font-medium">Quick Insert</div>
<div className="flex items-center gap-1 font-mono">
<kbd className="border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs">⌘</kbd>
<kbd className="border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs">I</kbd>
</div>
</div>
</div>
</div>
{/* Right: Interactive Command Palette Hub (7 Cols) */}
<div className="lg:col-span-7">
<Card className="border-border bg-card shadow-lg">
{/* Search Header */}
<div className="border-border flex items-center gap-3 border-b px-4 py-3">
<Search className="text-muted-foreground size-4 shrink-0" />
<input
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
type="text"
placeholder="Type a command or search actions (e.g., 'insert', 'git', 'theme')..."
className="placeholder:text-muted-foreground text-foreground flex-1 bg-transparent text-sm outline-none"
/>
<div className="text-muted-foreground flex items-center gap-1 font-mono text-xs">
<kbd className="border-border bg-muted rounded border px-1.5 py-0.5 text-xs">ESC</kbd>
</div>
</div>
{/* Command List */}
<CardContent className="space-y-1 p-2">
{filteredActions.map((action, idx) => {
const Icon = action.icon
return (
<button
key={action.id}
type="button"
className={cn(
'group flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left transition-colors',
selectedIndex === idx
? 'border-primary/30 bg-accent text-accent-foreground border'
: 'hover:bg-muted/50 text-foreground border border-transparent',
)}
onMouseEnter={() => setSelectedIndex(idx)}
onClick={() => execute(action)}
>
<div className="flex min-w-0 items-center gap-3">
<div className="border-border bg-background flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs">
<Icon className="text-primary size-4" />
</div>
<div className="min-w-0 space-y-0.5">
<div className="flex items-center gap-2">
<span className="truncate text-xs font-semibold">{action.title}</span>
<Badge variant="outline" className="h-4.5 px-1.5 text-xs">
{action.category}
</Badge>
</div>
<p className="text-muted-foreground truncate text-xs">{action.description}</p>
</div>
</div>
{/* Shortcut Badge Group */}
<div className="ml-3 flex shrink-0 items-center gap-1 font-mono text-xs">
{action.shortcut.map((key, kIdx) => (
<kbd
key={kIdx}
className="border-border bg-background rounded border px-1.5 py-0.5 text-xs shadow-2xs"
>
{key}
</kbd>
))}
</div>
</button>
)
})}
</CardContent>
{/* Status Footer */}
<div className="border-border bg-muted/30 flex items-center justify-between border-t px-4 py-2.5 text-xs">
<div className="text-muted-foreground flex items-center gap-2">
<CornerDownLeft className="size-3.5" />
<span>
Press <strong>Enter</strong> to run
</span>
</div>
{executedAction ? (
<div className="text-success flex items-center gap-1.5 font-semibold">
<Check className="size-3.5" />
<span>Executed: {executedAction.title}</span>
</div>
) : (
<div className="text-muted-foreground font-mono text-xs">
{filteredActions.length} actions available
</div>
)}
</div>
</Card>
</div>
</div>
</div>
</section>
)
}
'use client'
import * as React from 'react'
import { BookOpen, Maximize2, Pause, Play, Star, Volume2, VolumeX, X } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { cn } from '@/lib/utils'
interface VideoChapter {
id: string
title: string
timestamp: string
description: string
}
const chapters: VideoChapter[] = [
{
id: 'intro',
title: '1. Architecture & Registry Engine',
timestamp: '0:45',
description: 'Learn how unbundled components provide 100% source ownership without npm dependencies.',
},
{
id: 'tokens',
title: '2. OKLCH Theme & Token System',
timestamp: '1:30',
description: 'Explore the fluid color space engine and dynamic contrast balancing in Tailwind v4.',
},
{
id: 'parity',
title: '3. Dual-Framework Parity Model',
timestamp: '2:15',
description: 'Deep dive into mirror synchronization between Vue 3.5 SFC and React 19 TSX.',
},
]
export interface HeroVideoModalWalkthroughProps {
className?: string
}
export function HeroVideoModalWalkthrough({ className }: HeroVideoModalWalkthroughProps) {
const [isModalOpen, setIsModalOpen] = React.useState(false)
const [isPlaying, setIsPlaying] = React.useState(true)
const [isMuted, setIsMuted] = React.useState(false)
const [playbackSpeed, setPlaybackSpeed] = React.useState<1 | 1.5 | 2>(1)
const [activeChapterIndex, setActiveChapterIndex] = React.useState(0)
const [progressPercent] = React.useState(38)
const currentChapter = chapters[activeChapterIndex]
const openModal = (index = 0) => {
setActiveChapterIndex(index)
setIsModalOpen(true)
setIsPlaying(true)
}
const closeModal = () => {
setIsModalOpen(false)
setIsPlaying(false)
}
return (
<section
data-slot="hero-video-modal-walkthrough"
className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}
>
{/* Ambient Glow Background */}
<div className="bg-primary/10 pointer-events-none absolute top-12 left-1/2 -z-10 h-72 w-full max-w-5xl -translate-x-1/2 rounded-full blur-xl" />
<div className="mx-auto max-w-6xl space-y-12 text-center">
{/* Headline & Subtitle */}
<div className="mx-auto max-w-3xl space-y-5">
<Badge variant="secondary" className="gap-1.5 px-3 py-1 font-mono text-xs shadow-xs">
<Play className="text-primary fill-primary/20 size-3.5" />
Interactive 3-Minute Architecture Walkthrough
</Badge>
<h1 className="text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl">
See how top engineering teams build with UIPKGE.
</h1>
<p className="text-muted-foreground text-base leading-relaxed sm:text-lg">
Watch a full walkthrough of our design engineering principles, OKLCH token engine, and dual-framework
component architecture.
</p>
{/* CTA Action Buttons */}
<div className="flex flex-wrap items-center justify-center gap-3 pt-2">
<Button size="lg" className="gap-2 font-semibold shadow-xs" onClick={() => openModal(0)}>
<Play className="size-4 fill-current" />
<span>Watch Product Tour (3:30)</span>
</Button>
<Button asChild variant="outline" size="lg" className="gap-2 font-medium">
<a href="#docs">
<BookOpen className="text-muted-foreground size-4" />
<span>Read Architecture RFC</span>
</a>
</Button>
</div>
{/* Social Proof Avatars & Stars */}
<div className="text-muted-foreground flex flex-wrap items-center justify-center gap-6 pt-3 text-xs">
<div className="flex -space-x-2 overflow-hidden">
<div className="ring-background bg-primary/20 text-primary flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2">
RF
</div>
<div className="ring-background bg-success/20 text-success flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2">
PC
</div>
<div className="ring-background bg-info/20 text-info flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2">
EK
</div>
<div className="ring-background bg-warning/20 text-warning flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2">
SH
</div>
</div>
<div className="text-warning flex items-center gap-1">
{[1, 2, 3, 4, 5].map((i) => (
<Star key={i} className="size-3.5 fill-current" />
))}
<span className="text-foreground ml-1 font-mono text-xs font-medium">
4.9/5 by 1,400+ Design Engineers
</span>
</div>
</div>
</div>
{/* Video Preview Card & Chapter Trigger Grid */}
<div className="mx-auto max-w-4xl">
<Card
className="border-border bg-card/95 group cursor-pointer overflow-hidden rounded-2xl p-2 shadow-sm backdrop-blur-md"
onClick={() => openModal(0)}
>
{/* Video Thumbnail Frame */}
<div className="bg-muted/60 border-border/80 relative flex aspect-video flex-col justify-between overflow-hidden rounded-xl border p-6 text-left">
{/* Overlay Backdrop Texture */}
<div className="from-background/95 via-background/40 absolute inset-0 z-0 bg-gradient-to-t to-transparent" />
{/* Top Row: Badge & Length */}
<div className="relative z-10 flex items-center justify-between">
<span className="bg-background/80 border-border text-foreground inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs font-medium backdrop-blur-md">
<span className="bg-success size-2 animate-pulse rounded-full" />
<span>Full HD • 60 FPS</span>
</span>
<span className="bg-background/80 border-border text-muted-foreground rounded-md border px-2.5 py-1 font-mono text-xs backdrop-blur-md">
Total runtime: 3m 30s
</span>
</div>
{/* Center: Play Button Beacon */}
<div className="relative z-10 flex flex-col items-center justify-center py-8">
<div className="bg-primary text-primary-foreground shadow-primary/25 flex size-16 items-center justify-center rounded-full shadow-lg transition-transform duration-300 group-hover:scale-110 sm:size-20">
<Play className="ml-1 size-7 fill-current sm:size-8" />
</div>
<p className="text-foreground mt-4 text-sm font-semibold tracking-tight">
Click to Launch Interactive Player
</p>
</div>
{/* Bottom: Chapter Navigation Strip */}
<div className="border-border/60 relative z-10 grid grid-cols-1 gap-2 border-t pt-2 sm:grid-cols-3">
{chapters.map((chapter, idx) => (
<div
key={chapter.id}
className="bg-background/60 border-border/50 hover:bg-background/90 rounded-lg border p-2 text-left backdrop-blur-sm transition-colors"
onClick={(e) => {
e.stopPropagation()
openModal(idx)
}}
>
<div className="text-muted-foreground flex items-center justify-between font-mono text-xs">
<span className="truncate">{chapter.title.split('.')[1]}</span>
<span className="text-primary font-bold">{chapter.timestamp}</span>
</div>
</div>
))}
</div>
</div>
</Card>
</div>
</div>
{/* Interactive Video Dialog Modal */}
{isModalOpen && (
<div className="bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md sm:p-6">
<div className="bg-card border-border relative w-full max-w-4xl overflow-hidden rounded-2xl border text-left shadow-sm">
{/* Modal Top Bar */}
<div className="border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3">
<div className="flex items-center gap-2">
<span className="bg-primary size-2.5 rounded-full" />
<span className="text-foreground font-mono text-xs font-semibold">{currentChapter.title}</span>
</div>
<button
type="button"
className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1 transition-colors"
onClick={closeModal}
>
<X className="size-4" />
</button>
</div>
{/* Simulated Video Playback Viewport */}
<div className="relative flex aspect-video flex-col justify-between bg-neutral-950 p-6 text-white select-none">
<div className="flex items-center justify-between font-mono text-xs opacity-80">
<span>UIPKGE Architecture Masterclass</span>
<span>OKLCH Engine v2.4</span>
</div>
{/* Video Mock Graphic */}
<div className="flex flex-col items-center justify-center space-y-3">
<div className="flex size-16 items-center justify-center rounded-full border border-white/20 bg-white/10 backdrop-blur-md">
{!isPlaying ? <Play className="ml-1 size-7 fill-current" /> : <Pause className="size-7" />}
</div>
<p className="max-w-md text-center font-mono text-xs text-neutral-400">{currentChapter.description}</p>
</div>
{/* Timeline Scrubber & Controls */}
<div className="space-y-2">
{/* Progress Bar */}
<div className="h-1.5 w-full cursor-pointer overflow-hidden rounded-full bg-white/20">
<div
className="bg-primary h-full transition-[width] duration-200"
style={{ width: `${progressPercent}%` }}
/>
</div>
{/* Controls Row */}
<div className="flex items-center justify-between font-mono text-xs">
<div className="flex items-center gap-3">
<button
type="button"
className="hover:text-primary transition-colors"
onClick={() => setIsPlaying(!isPlaying)}
>
{isPlaying ? <Pause className="size-4" /> : <Play className="size-4 fill-current" />}
</button>
<button
type="button"
className="hover:text-primary transition-colors"
onClick={() => setIsMuted(!isMuted)}
>
{isMuted ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
</button>
<span className="text-neutral-400">{currentChapter.timestamp} / 3:30</span>
</div>
<div className="flex items-center gap-2">
<button
type="button"
className="rounded bg-white/10 px-2 py-0.5 transition-colors hover:bg-white/20"
onClick={() => setPlaybackSpeed((s) => (s === 1 ? 1.5 : s === 1.5 ? 2 : 1))}
>
{playbackSpeed}x
</button>
<button type="button" className="hover:text-primary p-1 transition-colors">
<Maximize2 className="size-3.5" />
</button>
</div>
</div>
</div>
</div>
{/* Modal Chapter Selector Footer */}
<div className="border-border bg-muted/20 grid grid-cols-3 border-t">
{chapters.map((ch, idx) => (
<button
key={ch.id}
type="button"
className={cn(
'border-border border-r p-3 text-left font-mono text-xs transition-colors last:border-r-0',
activeChapterIndex === idx
? 'bg-background text-foreground font-semibold'
: 'text-muted-foreground hover:text-foreground',
)}
onClick={() => setActiveChapterIndex(idx)}
>
<div className="truncate">{ch.title}</div>
<div className="text-muted-foreground mt-0.5 text-xs">{ch.timestamp}</div>
</button>
))}
</div>
</div>
</div>
)}
</section>
)
}
export default HeroVideoModalWalkthrough
'use client'
import * as React from 'react'
import { ArrowRight, Check, CheckCircle2, Copy, Shield } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { cn } from '@/lib/utils'
type Role = 'frontend' | 'architect' | 'founder'
interface RoleOption {
id: Role
label: string
perk: string
}
const roleOptions: RoleOption[] = [
{ id: 'frontend', label: 'Frontend / UI Engineer', perk: 'Direct access to raw SFC / TSX templates & Figma tokens' },
{ id: 'architect', label: 'Solutions Architect', perk: 'Full unbundled AST registry spec & self-hosting blueprints' },
{ id: 'founder', label: 'Founder / CTO', perk: 'Zero runtime dependency compliance & white-label enterprise SLA' },
]
export interface HeroWaitlistGlowProps {
className?: string
}
export function HeroWaitlistGlow({ className }: HeroWaitlistGlowProps) {
const [selectedRole, setSelectedRole] = React.useState<Role>('frontend')
const [email, setEmail] = React.useState('')
const [isSubmitted, setIsSubmitted] = React.useState(false)
const [queueNumber, setQueueNumber] = React.useState<number | null>(null)
const [referralCopied, setReferralCopied] = React.useState(false)
// Countdown timer state
const [timeLeft, setTimeLeft] = React.useState({
days: 14,
hours: 8,
minutes: 42,
seconds: 19,
})
React.useEffect(() => {
const timer = setInterval(() => {
setTimeLeft((prev) => {
if (prev.seconds > 0) {
return { ...prev, seconds: prev.seconds - 1 }
}
if (prev.minutes > 0) {
return { ...prev, minutes: prev.minutes - 1, seconds: 59 }
}
if (prev.hours > 0) {
return { ...prev, hours: prev.hours - 1, minutes: 59, seconds: 59 }
}
return prev
})
}, 1000)
return () => clearInterval(timer)
}, [])
const submitWaitlist = (e: React.FormEvent) => {
e.preventDefault()
if (!email || !email.includes('@')) return
setQueueNumber(Math.floor(Math.random() * 80) + 120)
setIsSubmitted(true)
}
const copyReferral = () => {
navigator.clipboard.writeText(`https://uipkge.dev/join?ref=${queueNumber || 142}`)
setReferralCopied(true)
setTimeout(() => setReferralCopied(false), 2000)
}
const activeRoleObj = roleOptions.find((r) => r.id === selectedRole)!
return (
<section
data-slot="hero-waitlist-glow"
className={cn(
'bg-background relative overflow-hidden px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8',
className,
)}
>
{/* Center Radial Glow */}
<div className="bg-primary/15 pointer-events-none absolute top-1/4 left-1/2 -z-10 h-96 w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl" />
<div className="mx-auto max-w-4xl space-y-10">
{/* Top Pill */}
<div className="border-border bg-muted/40 inline-flex items-center gap-2 rounded-full border px-3.5 py-1 font-mono text-xs shadow-xs">
<span className="bg-success size-2 rounded-full" />
<span className="text-foreground font-medium">Public Registry Release</span>
<span className="text-muted-foreground">•</span>
<span className="text-primary font-semibold">96% Claimed</span>
</div>
{/* Main Headline */}
<div className="mx-auto max-w-3xl space-y-4">
<h1 className="text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl">
Unbundled UI components and composable application blocks.
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-base leading-relaxed sm:text-lg">
Join over thousands of developers building high-velocity web applications with unbundled Vue 3.5 & React 19
components.
</p>
</div>
{/* Live Countdown Bar */}
<div className="mx-auto grid max-w-md grid-cols-4 gap-3">
<div className="border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm">
<p className="text-foreground font-mono text-2xl font-bold">{String(timeLeft.days).padStart(2, '0')}</p>
<p className="text-muted-foreground mt-0.5 font-mono text-xs uppercase">Days</p>
</div>
<div className="border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm">
<p className="text-foreground font-mono text-2xl font-bold">{String(timeLeft.hours).padStart(2, '0')}</p>
<p className="text-muted-foreground mt-0.5 font-mono text-xs uppercase">Hours</p>
</div>
<div className="border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm">
<p className="text-foreground font-mono text-2xl font-bold">{String(timeLeft.minutes).padStart(2, '0')}</p>
<p className="text-muted-foreground mt-0.5 font-mono text-xs uppercase">Mins</p>
</div>
<div className="border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm">
<p className="text-foreground font-mono text-2xl font-bold">{String(timeLeft.seconds).padStart(2, '0')}</p>
<p className="text-muted-foreground mt-0.5 font-mono text-xs uppercase">Secs</p>
</div>
</div>
{/* Interactive Waitlist Workbench Card */}
<Card className="border-border bg-card/95 mx-auto max-w-2xl overflow-hidden rounded-2xl p-6 text-left shadow-sm backdrop-blur-md sm:p-8">
{!isSubmitted ? (
<div className="space-y-6">
{/* Role Selection Tabs */}
<div className="space-y-2">
<label className="text-muted-foreground font-mono text-xs tracking-wider uppercase">
Select Your Track
</label>
<div className="grid grid-cols-3 gap-2">
{roleOptions.map((opt) => (
<button
key={opt.id}
type="button"
className={cn(
'rounded-lg border p-2.5 text-center text-xs font-medium transition-colors',
selectedRole === opt.id
? 'border-primary bg-primary/10 text-foreground font-semibold shadow-xs'
: 'border-border bg-background/50 text-muted-foreground hover:text-foreground',
)}
onClick={() => setSelectedRole(opt.id)}
>
{opt.label.split(' ')[0]}
</button>
))}
</div>
<p className="text-muted-foreground pt-1 text-xs italic">→ {activeRoleObj.perk}</p>
</div>
{/* Email Input & Submit */}
<form className="space-y-3" onSubmit={submitWaitlist}>
<div className="flex flex-col items-center gap-2 sm:flex-row">
<Input
value={email}
onChange={(e) => setEmail(e.target.value)}
type="email"
placeholder="[email protected]"
required
className="bg-background h-11 font-mono text-sm"
/>
<Button type="submit" size="lg" className="h-11 w-full shrink-0 gap-2 px-6 font-semibold sm:w-auto">
<span>Get Started</span>
<ArrowRight className="size-4" />
</Button>
</div>
<p className="text-muted-foreground flex items-center gap-1.5 text-xs">
<Shield className="text-success size-3.5" />
<span>Zero spam. Instant private registry token delivered upon verification.</span>
</p>
</form>
</div>
) : (
<div className="space-y-5 py-4 text-center">
<div className="border-success/20 bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full border">
<CheckCircle2 className="size-6" />
</div>
<div className="space-y-1">
<h3 className="text-foreground text-xl font-bold">You're on the list!</h3>
<p className="text-primary font-mono text-xs font-semibold">Priority Spot: #{queueNumber} in line</p>
<p className="text-muted-foreground mx-auto max-w-sm text-xs">
We dispatched an invitation link to <span className="text-foreground font-mono">{email}</span>.
</p>
</div>
{/* Referral Link Box */}
<div className="border-border bg-muted/30 mx-auto max-w-md space-y-2 rounded-xl border p-3">
<div className="text-muted-foreground flex items-center justify-between font-mono text-xs">
<span>Jump 5 spots per referral</span>
<span className="text-success font-bold">+5 boost</span>
</div>
<div className="flex items-center gap-2">
<Input
readOnly
value={`https://uipkge.dev/join?ref=${queueNumber}`}
className="bg-background h-9 font-mono text-xs"
/>
<Button type="button" size="sm" variant="outline" className="h-9 gap-1.5 px-3" onClick={copyReferral}>
{referralCopied ? <Check className="text-success size-3" /> : <Copy className="size-3" />}
<span>{referralCopied ? 'Copied' : 'Copy'}</span>
</Button>
</div>
</div>
</div>
)}
</Card>
</div>
</section>
)
}
export default HeroWaitlistGlow
Raw manifest:https://uipkge.dev/r/react/hero.json
