Update index.md

Author: ayush-gupta07

docs/hooks/index.md

@@ -27,79 +27,73 @@ Welcome to your comprehensive React Hooks learning resource! This guide covers a
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge core">Core</span>
     <span class="difficulty beginner">Beginner</span>
   </div>
-  <h3><a href="/hooks/01_useState">useState</a></h3>
+  <h3><a href="/react-hooks/hooks/01_useState">useState</a></h3>
   <p>Local component state management, functional updates, lazy initialization, and batching.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 5 min read</span>
-    <a href="/hooks/01_useState">Read notes →</a>
+    <a href="/react-hooks/hooks/01_useState">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge core">Core</span>
     <span class="difficulty beginner">Beginner</span>
   </div>
-  <h3><a href="/hooks/02_useEffect">useEffect</a></h3>
+  <h3><a href="/react-hooks/hooks/02_useEffect">useEffect</a></h3>
   <p>Side effects, cleanup functions, dependency arrays, and common pitfalls to avoid.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 8 min read</span>
-    <a href="/hooks/02_useEffect">Read notes →</a>
+    <a href="/react-hooks/hooks/02_useEffect">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge core">Core</span>
     <span class="difficulty intermediate">Intermediate</span>
   </div>
-  <h3><a href="/hooks/03_useLayout">useLayoutEffect</a></h3>
+  <h3><a href="/react-hooks/hooks/03_useLayout">useLayoutEffect</a></h3>
   <p>Synchronous effects after DOM mutations, layout measurements before paint.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 4 min read</span>
-    <a href="/hooks/03_useLayout">Read notes →</a>
+    <a href="/react-hooks/hooks/03_useLayout">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge core">Core</span>
     <span class="difficulty beginner">Beginner</span>
   </div>
-  <h3><a href="/hooks/04_useRef">useRef</a></h3>
+  <h3><a href="/react-hooks/hooks/04_useRef">useRef</a></h3>
   <p>DOM references, mutable values, instance variables without triggering re-renders.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 6 min read</span>
-    <a href="/hooks/04_useRef">Read notes →</a>
+    <a href="/react-hooks/hooks/04_useRef">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge core">Core</span>
     <span class="difficulty intermediate">Intermediate</span>
   </div>
-  <h3><a href="/hooks/05_useContext">useContext</a></h3>
+  <h3><a href="/react-hooks/hooks/05_useContext">useContext</a></h3>
   <p>Share values across components without prop drilling, context optimization patterns.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 7 min read</span>
-    <a href="/hooks/05_useContext">Read notes →</a>
+    <a href="/react-hooks/hooks/05_useContext">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge core">Core</span>
     <span class="difficulty advanced">Advanced</span>
   </div>
-  <h3><a href="/hooks/06_useReducer">useReducer</a></h3>
+  <h3><a href="/react-hooks/hooks/06_useReducer">useReducer</a></h3>
   <p>Complex state management with pure reducers, actions, and immutable updates.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 10 min read</span>
-    <a href="/hooks/06_useReducer">Read notes →</a>
+    <a href="/react-hooks/hooks/06_useReducer">Read notes</a>
   </div>
 </div>
 
@@ -111,40 +105,37 @@ Welcome to your comprehensive React Hooks learning resource! This guide covers a
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge performance">Performance</span>
     <span class="difficulty intermediate">Intermediate</span>
   </div>
-  <h3><a href="/hooks/07_useMemo">useMemo</a></h3>
+  <h3><a href="/react-hooks/hooks/07_useMemo">useMemo</a></h3>
   <p>Memoize expensive computations, referential equality, and optimization strategies.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 6 min read</span>
-    <a href="/hooks/07_useMemo">Read notes →</a>
+    <a href="/react-hooks/hooks/07_useMemo">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge performance">Performance</span>
     <span class="difficulty intermediate">Intermediate</span>
   </div>
-  <h3><a href="/hooks/08_useCallback">useCallback</a></h3>
+  <h3><a href="/react-hooks/hooks/08_useCallback">useCallback</a></h3>
   <p>Stable function references, React.memo optimization, dependency management.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 5 min read</span>
-    <a href="/hooks/08_useCallback">Read notes →</a>
+    <a href="/react-hooks/hooks/08_useCallback">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge utility">Utility</span>
     <span class="difficulty beginner">Beginner</span>
   </div>
-  <h3><a href="/hooks/10_useid">useId</a></h3>
+  <h3><a href="/react-hooks/hooks/10_useid">useId</a></h3>
   <p>Generate stable, unique IDs for accessibility and SSR-safe applications.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 3 min read</span>
-    <a href="/hooks/10_useid">Read notes →</a>
+    <a href="/react-hooks/hooks/10_useid">Read notes</a>
   </div>
 </div>
 
@@ -156,40 +147,37 @@ Welcome to your comprehensive React Hooks learning resource! This guide covers a
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge advanced">Advanced</span>
     <span class="difficulty advanced">Advanced</span>
   </div>
-  <h3><a href="/hooks/09_useImperativeHandle">useImperativeHandle</a></h3>
+  <h3><a href="/react-hooks/hooks/09_useImperativeHandle">useImperativeHandle</a></h3>
   <p>Expose imperative APIs through refs, controlled component interfaces.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 7 min read</span>
-    <a href="/hooks/09_useImperativeHandle">Read notes →</a>
+    <a href="/react-hooks/hooks/09_useImperativeHandle">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge concurrent">Concurrent</span>
     <span class="difficulty advanced">Advanced</span>
   </div>
-  <h3><a href="/hooks/11_useTransition">useTransition</a></h3>
+  <h3><a href="/react-hooks/hooks/11_useTransition">useTransition</a></h3>
   <p>Mark updates as non-urgent, improve user experience with concurrent rendering.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 8 min read</span>
-    <a href="/hooks/11_useTransition">Read notes →</a>
+    <a href="/react-hooks/hooks/11_useTransition">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge concurrent">Concurrent</span>
     <span class="difficulty advanced">Advanced</span>
   </div>
-  <h3><a href="/hooks/12_useDeferredValue">useDeferredValue</a></h3>
+  <h3><a href="/react-hooks/hooks/12_useDeferredValue">useDeferredValue</a></h3>
   <p>Defer expensive updates, lag behind fast-changing values for smooth UX.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 6 min read</span>
-    <a href="/hooks/12_useDeferredValue">Read notes →</a>
+    <a href="/react-hooks/hooks/12_useDeferredValue">Read notes</a>
   </div>
 </div>
 
@@ -201,40 +189,37 @@ Welcome to your comprehensive React Hooks learning resource! This guide covers a
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge react19">React 19</span>
     <span class="difficulty intermediate">Intermediate</span>
   </div>
-  <h3><a href="/hooks/13_useActionState">useActionState</a></h3>
+  <h3><a href="/react-hooks/hooks/13_useActionState">useActionState</a></h3>
   <p>Wire form actions into component state, handle pending states and errors.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 9 min read</span>
-    <a href="/hooks/13_useActionState">Read notes →</a>
+    <a href="/react-hooks/hooks/13_useActionState">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge react19">React 19</span>
     <span class="difficulty intermediate">Intermediate</span>
   </div>
-  <h3><a href="/hooks/14_useFormStatus">useFormStatus</a></h3>
+  <h3><a href="/react-hooks/hooks/14_useFormStatus">useFormStatus</a></h3>
   <p>Access form submission status, create loading states and submission feedback.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 5 min read</span>
-    <a href="/hooks/14_useFormStatus">Read notes →</a>
+    <a href="/react-hooks/hooks/14_useFormStatus">Read notes</a>
   </div>
 </div>
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge react19">React 19</span>
     <span class="difficulty advanced">Advanced</span>
   </div>
-  <h3><a href="/hooks/15_useOptimistic">useOptimistic</a></h3>
+  <h3><a href="/react-hooks/hooks/15_useOptimistic">useOptimistic</a></h3>
   <p>Optimistic UI updates, rollback on failure, improved perceived performance.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 8 min read</span>
-    <a href="/hooks/15_useOptimistic">Read notes →</a>
+    <a href="/react-hooks/hooks/15_useOptimistic">Read notes</a>
   </div>
 </div>
 
@@ -246,14 +231,13 @@ Welcome to your comprehensive React Hooks learning resource! This guide covers a
 
 <div class="card">
   <div class="card-header">
-    <span class="hook-badge custom">Custom</span>
     <span class="difficulty intermediate">Intermediate</span>
   </div>
-  <h3><a href="/hooks/16_customHooks">Custom Hooks</a></h3>
+  <h3><a href="/react-hooks/hooks/16_customHooks">Custom Hooks</a></h3>
   <p>Build reusable logic: useLocalStorage, useFetch, useDebounce, and more patterns.</p>
   <div class="card-footer">
     <span class="read-time">⏱️ 15 min read</span>
-    <a href="/hooks/16_customHooks">Read notes →</a>
+    <a href="/react-hooks/hooks/16_customHooks">Read notes</a>
   </div>
 </div>