Skip to content

✨ Refactor Header Component & Improve Mobile Navigation Experience#5

Open
anelkabag wants to merge 2 commits into
congodevelopersclub:mainfrom
anelkabag:redesign/header-navigation
Open

✨ Refactor Header Component & Improve Mobile Navigation Experience#5
anelkabag wants to merge 2 commits into
congodevelopersclub:mainfrom
anelkabag:redesign/header-navigation

Conversation

@anelkabag
Copy link
Copy Markdown

✨ Refactor Header Component & Improve Mobile Navigation Experience

Overview

This PR introduces a complete redesign and refactor of the Header component to modernize the navigation experience, improve responsiveness, and create a cleaner UI architecture.

The old navbar structure has been replaced with a more modular and animated layout inspired by modern creative/developer websites.


🚀 What's Changed

✅ Component Refactor

  • Split the header into reusable internal components:

    • Logo
    • NavLinks
    • Actions

This improves readability, maintainability, and scalability of the navbar architecture.


✅ Modern Desktop Navigation

  • Redesigned desktop navigation spacing and typography
  • Added animated active link underline
  • Improved hover interactions
  • Better visual hierarchy for CTA actions

✅ Improved CTA Section

  • Added animated Join button with Framer Motion
  • Added Calendar icon integration
  • Refined profile button styling
  • Improved spacing and alignment

✅ Mobile Navigation Redesign

The old dropdown mobile menu was replaced with a full-screen animated navigation experience.

New features:

  • Fullscreen overlay menu
  • Staggered navigation animations
  • Large typography for better accessibility
  • Smooth open/close transitions
  • Improved language switch UX
  • Persistent join CTA at the bottom

✅ Visual Improvements

  • Cleaner sticky header layout
  • Better responsive sizing
  • Improved typography consistency
  • Enhanced spacing system
  • Added subtle motion transitions across the navbar

🛠 Technical Improvements

  • Removed unnecessary AnimatePresence
  • Simplified component structure
  • Cleaner Tailwind utility organization
  • Improved responsive behavior
  • Better separation of concerns

📱 Result

The new header now feels:

  • more modern
  • more interactive
  • more premium
  • and significantly better optimized for mobile users

while keeping full compatibility with:

  • next-intl
  • Framer Motion
  • TailwindCSS
  • existing routing structure.

anelkabag added 2 commits May 14, 2026 17:28
- add LenisProvider client component with raf loop
- wrap layout content with LenisProvider
- config: duration 1.2s, expo-out easing, smoothWheel"
@netlify
Copy link
Copy Markdown

netlify Bot commented May 14, 2026

Deploy Preview for congodevelopersclub ready!

Name Link
🔨 Latest commit 94c37f9
🔍 Latest deploy log https://app.netlify.com/projects/congodevelopersclub/deploys/6a05fa72993e8100081a700c
😎 Deploy Preview https://deploy-preview-5--congodevelopersclub.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants