Build a Modern Next.js Navbar with ISR and Tailwind CSS (Step-by-Step Guide)

You are a senior Next.js 15 developer building a production-ready blog UI.

Your task is to create a reusable, fully responsive, SEO-friendly Header/Navbar component for a modern tech blog called "WisemixMedia this is example".

## Tech Stack Requirements:

- Next.js 15 (App Router)

- React Server Components (default)

- Tailwind CSS (latest version)

- TypeScript

- Use best practices for performance and scalability

## Core Feature: Navbar/Header Component

Create a clean, minimal, professional header similar to a modern SaaS/blog UI.

---

## 🔷 Layout Structure

The header should be a horizontal flex container with 3 sections:

### 1. LEFT: Logo Section

- A rounded square dark-blue icon

- Inside it: white letter "W"

- Next to it: text "WisemixMedia"

- Font: semi-bold, modern

- Alignment: center vertically

- Spacing between icon and text

---

### 2. CENTER: Navigation Links

Include these links:

- Home (/)

- Tools (/tools)

- Blog (/blog)

- Next.js Mastery (/nextjs-mastery)

### Behavior:

- Active link should be highlighted

- Use usePathname() from Next.js

- Active styles:

- text-blue-600

- font-semibold

- Default styles:

- text-gray-700

- hover:text-blue-500

- Smooth transition

---

### 3. RIGHT: Search Bar

Include:

- Input field:

- Placeholder: "Search posts..."

- Rounded (full or lg)

- Light border

- Focus ring (blue)

- Button:

- Text: "Search"

- Dark blue background

- White text

- Rounded

- Hover effect (slightly darker)

Optional:

- Handle basic form submit (console.log or router push)

---

## 🔷 Styling Requirements (Tailwind)

Main header:

- bg-white

- border-bottom (border-gray-200)

- px-6 or px-8

- py-3 or py-4

- flex

- items-center

- justify-between

Container:

- max-w-7xl

- mx-auto

Typography:

- Clean and minimal

- No clutter

---

## 🔷 Responsiveness

### Desktop:

- Show full navbar

### Tablet:

- Slight spacing adjustments

### Mobile:

- Hide nav links

- Show hamburger menu

- Toggle dropdown menu

Mobile Menu:

- Slide-down or fade

- Include all nav links

- Proper spacing

---

## 🔷 ISR (Incremental Static Regeneration)

Even though header is mostly static:

- Demonstrate ISR usage in layout or page

- Use:

export const revalidate = 60;

OR:

- Fetch navigation data from mock API

- Revalidate every 60 seconds

---

## 🔷 File Structure

Create clean structure:

/components/Header.tsx

/components/MobileMenu.tsx

/app/layout.tsx

---

## 🔷 Code Requirements

- Use TypeScript types

- Clean readable code

- Proper separation of concerns

- No inline messy logic

- Use functional components

- Use "use client" only where needed (e.g., mobile menu, active link)

---

## 🔷 Accessibility

- Use semantic HTML (nav, header)

- Add aria-labels for search and menu

- Keyboard accessible

---

## 🔷 Extra Enhancements (Important)

- Add subtle shadow on scroll (sticky header)

- Sticky top navbar

- Smooth transitions

- Optimize for performance

---

## 🔷 Expected Output

Generate:

1. Full Header component code

2. Mobile menu component

3. Tailwind classes clearly used

4. Example usage inside layout.tsx

5. Optional: basic search functionality

---

## 🔷 Design Reference (IMPORTANT)

Design should match:

- Clean SaaS dashboard style

- Minimalist blog UI

- Similar to:

- Vercel

- Medium

- Modern developer blogs

---

## 🔷 Final Goal

The result should feel like a premium, production-ready blog navbar used in a real-world Next.js application.