Red color

client/src/pages/EventsPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import DefaultLayout from "../layouts/default";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
 import instance from "../security/http";
 import config from "../config";
 
@@ -18,11 +18,14 @@ const EventsPage = () => {
     <DefaultLayout>
       <div className="p-8">
         <div className="mb-6">
-          <h2 className="text-3xl font-semibold text-red-600">Events</h2>
+          <h2 className="text-3xl font-semibold text-primary-600">Events</h2>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {events.map((event) => (
-            <div key={event.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
+            <div
+              key={event.id}
+              className="bg-white rounded-lg shadow-lg overflow-hidden"
+            >
               <img
                 src={`${config.serverAddress}${event.imageUrl}`}
                 alt={event.title}
@@ -32,7 +35,7 @@ const EventsPage = () => {
                 <h3 className="text-xl font-semibold mb-2">{event.title}</h3>
                 <p className="text-gray-600 mb-4">{event.description}</p>
                 <button
-                  className="bg-red-600 text-white rounded px-4 py-2 hover:bg-red-700"
+                  className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
                   onClick={() => navigate(`/event/${event.id}`)}
                 >
                   View event details