Skip to content

Update hero tagline and unify card hover styles #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nahiyankhan merged 2 commits into from
Apr 13, 2026
Merged

Update hero tagline and unify card hover styles #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6718f21
Update hero tagline, add stats bar, rename nav label to UI
nahiyankhan Apr 9, 2026
2641e07
Unify card hover style and remove stats bar from hero
nahiyankhan Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions packages/ghost-ui/src/app/foundations/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,14 @@ export default function FoundationsIndex() {
<Link
key={item.href}
to={item.href}
className="foundation-card group rounded-[var(--radius-card-sm)] border border-border-card bg-card p-10 transition-all duration-200 hover:scale-[1.03] hover:shadow-elevated"
className="foundation-card group rounded-[var(--radius-card-sm)] border border-border-card hover:border-foreground/25 bg-card p-10 transition-colors duration-300"
>
<div className="mb-6">{item.visual}</div>
<span className="font-display text-lg font-bold tracking-tight">
{item.name}
<span className="relative inline-block font-display text-lg font-bold tracking-tight">
<span className="relative z-10 transition-colors duration-300 group-hover:text-background">
{item.name}
</span>
<span className="absolute inset-0 bg-foreground origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out" />
</span>
<p className="mt-2 text-sm text-muted-foreground leading-relaxed">
{item.description}
Expand Down
11 changes: 7 additions & 4 deletions packages/ghost-ui/src/app/ui/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export default function DesignLanguageIndex() {
<AnimatedPageHeader
kicker="Design Language"
title="Ghost UI"
description="A shared design language for our tools."
description="The shared design language across Ghost — foundations, primitives, and AI-native components."
/>

<div
Expand All @@ -111,11 +111,14 @@ export default function DesignLanguageIndex() {
<Link
key={item.href}
to={item.href}
className="dl-card group rounded-[var(--radius-card-sm)] border border-border-card bg-card p-10 transition-all duration-200 hover:scale-[1.03] hover:shadow-elevated"
className="dl-card group rounded-[var(--radius-card-sm)] border border-border-card hover:border-foreground/25 bg-card p-10 transition-colors duration-300"
>
<div className="mb-6">{item.visual}</div>
<span className="font-display text-lg font-bold tracking-tight">
{item.name}
<span className="relative inline-block font-display text-lg font-bold tracking-tight">
<span className="relative z-10 transition-colors duration-300 group-hover:text-background">
{item.name}
</span>
<span className="absolute inset-0 bg-foreground origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out" />
</span>
<p className="mt-2 text-sm text-muted-foreground leading-relaxed">
{item.description}
Expand Down
2 changes: 1 addition & 1 deletion packages/ghost-ui/src/components/docs/dock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import { cn } from "@/lib/utils";
const nav: { name: string; path: string; icon: LucideIcon }[] = [
{ name: "Home", path: "/", icon: Home },
{ name: "Tools", path: "/tools", icon: Wrench },
{ name: "Design Language", path: "/ui", icon: Palette },
{ name: "UI", path: "/ui", icon: Palette },
];

export function Dock() {
Expand Down
2 changes: 1 addition & 1 deletion packages/ghost-ui/src/components/docs/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export function Hero() {
className="mt-4 text-center text-muted-foreground leading-relaxed whitespace-nowrap"
style={{ fontSize: "clamp(0.875rem, 1.5vw, 1.125rem)" }}
>
design infrastructure for decentralized systems.
tooling for decentralized design
</p>
</div>
</section>
Expand Down
Loading