mirror of
https://github.com/phranck/TUIkit.git
synced 2026-06-20 09:54:37 +00:00
phranck
620c62c2e8
- Add full-screen canvas rain overlay (RainOverlay) with theme-colored drops - Add random-position pulsing spinner lights (SpinnerLights) with drift effect - Add anamorphic lens flares to HeroTerminal CRT screen - Rewrite all ~65 terminal interactions for AT&T UNIX System V accuracy (1984) - Add human-like variable typing speed for David (Joshua sequence) - Fix AudioContext leak with shared lazy instance - Fix SpinnerLights timer leak with Set-based cleanup - Fix stale lineRefsRef in clearScreen, canvas lineWidth jitter - Fix uncontrolled HeroTerminal timeout refs - Remove redundant mounted state, WIND_DRIFT constant, opacity no-op - Replace getComputedStyle polling with MutationObserver for theme changes - Fix unstable React key causing DOM remounts - Fix pickInteraction off-by-two for full exhaustion - Add frosted glass effect to FeatureCards, CodePreview, and Built right box - Add glowing text to PackageBadge, simplify ThemeSwitcher logic - Layer content above atmosphere effects with z-index stacking
30 lines
960 B
TypeScript
30 lines
960 B
TypeScript
import { ReactNode } from "react";
|
|
|
|
interface FeatureCardProps {
|
|
icon: ReactNode;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
/** A feature highlight card with icon, title, and description. */
|
|
export default function FeatureCard({
|
|
icon,
|
|
title,
|
|
description,
|
|
}: FeatureCardProps) {
|
|
return (
|
|
<div
|
|
className="group rounded-xl border border-border p-6 backdrop-blur-xl transition-all duration-300 hover:border-accent/30"
|
|
style={{ backgroundColor: "color-mix(in srgb, var(--container-body) 50%, transparent)" }}
|
|
>
|
|
<div className="mb-3 flex items-center gap-3">
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent transition-colors group-hover:bg-accent/15">
|
|
{icon}
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-foreground">{title}</h3>
|
|
</div>
|
|
<p className="text-xl leading-relaxed text-muted">{description}</p>
|
|
</div>
|
|
);
|
|
}
|