many styling changes and updates

src/pages/Dashboard.js

@@ -136,7 +136,7 @@ const Dashboard = () => {
 
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-gradient-to-b from-[var(--neutral-100)] to-[var(--neutral-800)]">
       <Navbar />
 
       <div className="max-w-7xl mx-auto px-6 py-12">
@@ -286,7 +286,7 @@ const Dashboard = () => {
             {loading ? (
               <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
             ) : events.length > 0 ? (
-              <div className="space-y-4">
+              <div className="space-y-4 gap-4">
                 {events.map((event) => (
                   <Link to={`/events/${event.id}`} key={event.id}>
                     <div
@@ -311,7 +311,7 @@ const Dashboard = () => {
                 ))}
               </div>
             ) : (
-              <div className="text-center py-12">
+              <div className="text-center gap-4 py-12">
                 <Calendar className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
                 <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
                 <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>