Skip to content

Commit 211aeeb

Browse files
vadim-vozmitsel-cascaideclaude
vadim-vozmitsel-cascaide
and
claude
committed
Redesign navbar with modern shadcn styling and unified design system
- Replace broken logo images with clean text-based logo design - Unify all buttons with shadcn surface styling (gray backgrounds) - Add consistent brand red hover states with 300ms transitions and shadow lift - Make GitHub button smaller to match other button sizes - Center navigation links perfectly between left and right button groups - Remove all gradient colors for clean, modern appearance - Add proper dark mode support for all buttons - Fix mobile menu button styling consistency - Remove unused Image import All buttons now have consistent sizing, spacing, and hover behavior. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent f9b90ca commit 211aeeb

File tree

2 files changed

+24
-45
lines changed

2 files changed

+24
-45
lines changed

‎src/components/GitHubButton.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,20 +54,18 @@ export function GitHubButton() {
5454
initial={{ opacity: 0, x: -20 }}
5555
animate={{ opacity: 1, x: 0 }}
5656
className={cn(
57-
"inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200",
58-
"bg-gray-900 hover:bg-gray-800 text-white",
59-
"dark:bg-gray-100 dark:hover:bg-gray-200 dark:text-gray-900",
60-
"border border-gray-700 dark:border-gray-300",
61-
"shadow-md hover:shadow-lg hover:scale-105"
57+
"inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300",
58+
"bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white hover:shadow-md",
59+
"dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
6260
)}
6361
aria-label="Star on GitHub"
6462
>
6563
<Star className="h-4 w-4" />
6664
<span className="hidden sm:inline">Fork This Repository</span>
6765
<span className={cn(
68-
"px-2 py-0.5 rounded-full text-xs font-semibold min-w-[2rem] text-center",
69-
"bg-gray-700 text-gray-100",
70-
"dark:bg-gray-200 dark:text-gray-800"
66+
"px-2 py-0.5 rounded-full text-xs font-semibold min-w-[1.5rem] text-center",
67+
"bg-gray-200 text-gray-700",
68+
"dark:bg-gray-700 dark:text-gray-300"
7169
)}>
7270
{isLoading ? '...' : stats.stars}
7371
</span>

‎src/components/Navigation.tsx‎

Lines changed: 18 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { cn } from '@/lib/utils';
77
import { useTheme } from './ThemeProvider';
88
import { StarBorder } from './ui/star-border';
99
import { GitHubButton } from './GitHubButton';
10-
import Image from 'next/image';
1110
import Link from 'next/link';
1211

1312
export function Navigation() {
@@ -63,28 +62,14 @@ export function Navigation() {
6362
className="flex items-center"
6463
>
6564
<Link href="/" aria-label="Your Company homepage">
66-
{/* Desktop: Show full logo */}
67-
<div className="hidden xl:block">
68-
<Image
69-
src={theme === 'dark' ? '/assets/logos/logo-dark.svg' : '/assets/logos/logo-light.svg'}
70-
alt="Your Brand"
71-
width={180}
72-
height={45}
73-
priority
74-
className="h-10 w-auto"
75-
/>
76-
</div>
77-
78-
{/* Mobile & Tablet: Show icon only */}
79-
<div className="xl:hidden">
80-
<Image
81-
src={theme === 'dark' ? '/assets/logos/icon-dark.svg' : '/assets/logos/icon-light.svg'}
82-
alt="Your Brand"
83-
width={40}
84-
height={40}
85-
priority
86-
className="h-10 w-10"
87-
/>
65+
{/* Logo Text */}
66+
<div className="flex items-center">
67+
<div className="h-10 w-10 rounded-lg bg-gradient-to-r from-brand-primary to-brand-accent flex items-center justify-center mr-3">
68+
<span className="text-white font-bold text-lg">T</span>
69+
</div>
70+
<span className="hidden sm:block text-xl font-bold text-gray-900 dark:text-gray-100">
71+
Your Brand
72+
</span>
8873
</div>
8974
</Link>
9075
</motion.div>
@@ -93,13 +78,13 @@ export function Navigation() {
9378
<button
9479
type="button"
9580
onClick={toggleTheme}
96-
className="rounded-lg p-2.5 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
81+
className="inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-300 bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white hover:shadow-md dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
9782
aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
9883
>
9984
{theme === 'dark' ? (
100-
<Sun className="h-5 w-5 text-gray-900 dark:text-gray-100" aria-hidden="true" />
85+
<Sun className="h-4 w-4" aria-hidden="true" />
10186
) : (
102-
<Moon className="h-5 w-5 text-gray-900 dark:text-gray-100" aria-hidden="true" />
87+
<Moon className="h-4 w-4" aria-hidden="true" />
10388
)}
10489
</button>
10590

@@ -137,11 +122,9 @@ export function Navigation() {
137122
initial={{ opacity: 0, y: -10 }}
138123
animate={{ opacity: 1, y: 0 }}
139124
className={cn(
140-
"px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 w-24 text-center",
141-
"bg-gradient-to-r from-blue-500 to-purple-600 text-white",
142-
"hover:from-blue-600 hover:to-purple-700 hover:scale-105",
143-
"shadow-md hover:shadow-lg",
144-
"border border-blue-400/50"
125+
"inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-300 w-24",
126+
"bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white hover:shadow-md",
127+
"dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
145128
)}
146129
>
147130
{link.label}
@@ -153,11 +136,9 @@ export function Navigation() {
153136
<a
154137
href="#pricing"
155138
className={cn(
156-
"px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200",
157-
"bg-gradient-to-r from-red-500 to-red-600 text-white",
158-
"hover:from-red-600 hover:to-red-700 hover:scale-105",
159-
"shadow-md hover:shadow-lg",
160-
"border border-red-400/50"
139+
"inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-300",
140+
"bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white hover:shadow-md",
141+
"dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
161142
)}
162143
>
163144
Get Started
@@ -168,7 +149,7 @@ export function Navigation() {
168149
<button
169150
type="button"
170151
onClick={() => setIsOpen(!isOpen)}
171-
className="p-2 md:hidden text-gray-900 dark:text-gray-100"
152+
className="inline-flex items-center justify-center rounded-md p-2 md:hidden transition-all duration-300 bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
172153
aria-label={isOpen ? 'Close navigation menu' : 'Open navigation menu'}
173154
aria-expanded={isOpen}
174155
aria-controls="mobile-menu"

0 commit comments

Comments
 (0)