Refactor Members Directory and Newsletter Archive styles to use new color palette

- Updated color classes in MembersDirectory.js to use new color variables for borders, backgrounds, and text.
- Enhanced visual consistency by replacing hardcoded colors with Tailwind CSS color utilities.
- Modified NewsletterArchive.js to align with the new design system, ensuring a cohesive look across components.
- Added new color variables in tailwind.config.js for better maintainability and scalability.

src/pages/BoardOfDirectors.js

@@ -22,7 +22,7 @@ const BoardOfDirectors = () => {
   const DirectorCards = ({ title, members }) => {
     return (
       <section className=" w-full">
-        <div className="mx-auto bg-white rounded-3xl p-10 shadow-lg h-full">
+        <div className="mx-auto bg-background rounded-3xl p-10 shadow-lg h-full">
           {title && (
             <h2
               className="text-2xl sm:text-4xl font-bold text-[#48286e] text-center mb-8"
@@ -66,10 +66,10 @@ const BoardOfDirectors = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb]  pt-8 sm:pt-10 md:pt-12">
+      <main className="bg-gradient-to-b from-[#f9fafb] to-chart-6  pt-8 sm:pt-10 md:pt-12">
         {/* Hero Section  */}
         <section className=" pt-16 pb-4 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
           <div className="max-w-5xl mx-auto text-center px-8">
@@ -81,7 +81,7 @@ const BoardOfDirectors = () => {
         </section>
         {/* Contact Info */}
         <section className="flex justify-center mt-4 mb-8">
-          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-[#664fa3] to-[#48286e] max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
+          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-muted-foreground to-[#48286e] max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
 
             <p className="text-white text-xl font-bold " style={{ fontFamily: "'Poppins', sans-serif" }}>
               For any questions or inquiries please email us at{' '}
@@ -102,7 +102,7 @@ const BoardOfDirectors = () => {
         </section>
 
         {/* Join the Board Section */}
-        <section className="py-12 bg-white mt-12 ">
+        <section className="py-12 bg-background mt-12 ">
           {/* content containter */}
           <div className="w-full mx-auto flex flex-col px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
             <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
@@ -117,7 +117,7 @@ const BoardOfDirectors = () => {
                 <li>
                   Nominations are due by November 1. Nomination Form:{' '}
                   <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
-                    className="text-[#664fa3] underline hover:text-[#48286e] transition-colors">
+                    className="text-muted-foreground underline hover:text-[#48286e] transition-colors">
                     Click Here
                   </a>
                 </li>