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/MissionValues.js

@@ -7,14 +7,14 @@ const MissionValues = () => {
   const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
 
   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] px-4 sm:px-6 py-8 sm:py-12 md:py-20">
+      <main className="bg-gradient-to-b from-[#f9fafb] to-chart-6 px-4 sm:px-6 py-8 sm:py-12 md:py-20">
         <div className="max-w-[1400px] mx-auto">
           <div className="flex md:flex-row flex-col gap-10 items-stretch">
             {/* Left Card - Mission (Purple Gradient) */}
-            <Card className=" bg-gradient-to-br from-[#664fa3] to-[#48286e] p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
+            <Card className=" bg-gradient-to-br from-muted-foreground to-[#48286e] p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
               <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Mission
@@ -29,7 +29,7 @@ const MissionValues = () => {
             </Card>
 
             {/* Right Card - Values */}
-            <Card className="bg-white p-16 rounded-2xl shadow-lg flex-1  w-full md:w-1/2 ">
+            <Card className="bg-background p-16 rounded-2xl shadow-lg flex-1  w-full md:w-1/2 ">
               <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Values