fix: member directory link works and stat card changes

src/pages/members/MembersDirectory.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import api from '../../utils/api';
 import Navbar from '../../components/Navbar';
 import MemberFooter from '../../components/MemberFooter';
+import { Link } from 'react-router-dom';
 import { Card } from '../../components/ui/card';
 import { Input } from '../../components/ui/input';
 import { Badge } from '../../components/ui/badge';
@@ -135,7 +136,7 @@ const MembersDirectory = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
+    <div className="min-h-screen bg-gradient-to-bl from-white to-muted">
       <Navbar />
 
       <div className="max-w-7xl mx-auto py-12">
@@ -154,7 +155,7 @@ const MembersDirectory = () => {
           </div>
 
           {/* Search Bar */}
-          <div className="mb-24 mx-10">
+          <div className="mb-24 w-full">
             <div className="relative w-full  ">
               <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
@@ -221,9 +222,10 @@ const MembersDirectory = () => {
                 </h3>
                 <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
-                  <a href="/members/profile" className="text-[var(--orange-light)] hover:underline font-medium">
+
+                  <Link to="/profile" className="text-[var(--orange-light)] hover:underline font-medium">
                     Edit your profile →
-                  </a>
+                  </Link>
                 </p>
               </div>
             </div>