Forced merge: merge ai-dev into master

frontend/package.json

@@ -51,7 +51,9 @@
     "react-select-async-paginate": "^0.7.9",
     "react-switch": "^7.0.0",
     "react-toastify": "^11.0.2",
+    "react-tsparticles": "^2.12.2",
     "swr": "^1.3.0",
+    "tsparticles": "^2.12.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

frontend/src/components/InteractiveBackground.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import Particles from 'react-tsparticles';
+import type { Engine } from 'tsparticles-engine';
+import { loadFull } from 'tsparticles';
+
+const InteractiveBackground = () => {
+  const particlesInit = useCallback(async (engine: Engine) => {
+    await loadFull(engine);
+  }, []);
+
+  const particlesOptions = {
+    fpsLimit: 60,
+    interactivity: {
+      events: {
+        onHover: {
+          enable: true,
+          mode: 'repulse',
+        },
+        resize: true,
+      },
+      modes: {
+        repulse: {
+          distance: 100,
+          duration: 0.4,
+        },
+      },
+    },
+    particles: {
+      color: {
+        value: '#aaaaaa',
+      },
+      links: {
+        color: '#bbbbbb',
+        distance: 150,
+        enable: true,
+        opacity: 0.5,
+        width: 1,
+      },
+      collisions: {
+        enable: true,
+      },
+      move: {
+        direction: 'none',
+        enable: true,
+        outModes: {
+          default: 'bounce',
+        },
+        random: false,
+        speed: 2,
+        straight: false,
+      },
+      number: {
+        density: {
+          enable: true,
+          area: 800,
+        },
+        value: 80,
+      },
+      opacity: {
+        value: 0.5,
+      },
+      shape: {
+        type: 'circle',
+      },
+      size: {
+        value: { min: 1, max: 5 },
+      },
+    },
+    detectRetina: true,
+  };
+
+  return (
+    <Particles
+      id="tsparticles"
+      init={particlesInit}
+      options={particlesOptions}
+      style={{
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        zIndex: -1,
+      }}
+    />
+  );
+};
+
+export default InteractiveBackground;

frontend/src/layouts/Authenticated.tsx

@@ -15,6 +15,7 @@ import { useRouter } from 'next/router'
 import {findMe, logoutUser} from "../stores/authSlice";
 
 import {hasPermission} from "../helpers/userPermissions";
+import InteractiveBackground from "../components/InteractiveBackground";
 
 
 type Props = {
@@ -90,10 +91,12 @@ export default function LayoutAuthenticated({
 
   return (
     <div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
+<InteractiveBackground />
       <div
         className={`${layoutAsidePadding} ${
           isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''
-        } pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor}  dark:bg-dark-800 dark:text-slate-100`}
+        } pt-14 min-h-screen w-screen transition-position lg:w-auto dark:bg-dark-800 dark:text-slate-100`}
+ style={{ position: 'relative', zIndex: 1 }}
       >
         <NavBar
           menu={menuNavBar}

frontend/src/layouts/Guest.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react'
 import { useAppSelector } from '../stores/hooks'
+import InteractiveBackground from '../components/InteractiveBackground'
 
 type Props = {
   children: ReactNode
@@ -11,7 +12,8 @@ export default function LayoutGuest({ children }: Props) {
 
   return (
     <div className={darkMode ? 'dark' : ''}>
-      <div className={`${bgColor} dark:bg-slate-800 dark:text-slate-100`}>{children}</div>
+      <InteractiveBackground />
+      <div style={{ position: 'relative', zIndex: 1 }} className={`dark:bg-slate-800 dark:text-slate-100`}>{children}</div>
     </div>
   )
 }

frontend/src/pages/index.tsx

@@ -9,7 +9,7 @@ import { getPageTitle } from '../config';
 import SectionTitle from '../components/SectionTitle';
 
 const Feature = ({ icon, title, text }) => (
-  <div className="p-6 text-center bg-white rounded-lg shadow-lg">
+  <div className="p-6 text-center bg-white rounded-lg shadow-lg border border-gray-200">
     <div className="text-5xl text-blue-500 mb-4">{icon}</div>
     <h3 className="text-xl font-semibold mb-2">{title}</h3>
     <p className="text-gray-600">{text}</p>
@@ -20,20 +20,20 @@ export default function LandingPage() {
   const title = 'EventCoord Hub'
 
   return (
-    <div className="bg-gray-50 text-gray-800">
+    <div className="text-gray-800">
       <Head>
         <title>{getPageTitle('Welcome')}</title>
       </Head>
 
       {/* Hero Section */}
-      <header className="bg-blue-600 text-white text-center py-20">
+      <header className="text-center py-20 text-black">
         <div className="container mx-auto px-6">
           <h1 className="text-5xl font-bold mb-4">EventCoord Hub</h1>
           <p className="text-xl mb-8">Event planning with venues, vendors, schedules, guests, and budgets. Built for fast coordination and status tracking.</p>
           <BaseButton
             href='/login'
             label='Get Started'
-            color='light'
+            color='info'
             roundedFull
             className='px-8 py-3 text-lg'
           />
@@ -43,7 +43,7 @@ export default function LandingPage() {
       {/* Features Section */}
       <section className="py-20">
         <div className="container mx-auto px-6">
-          <SectionTitle>Features</SectionTitle>
+          <h2 className="text-4xl font-bold text-center mb-12">Features</h2>
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
             <Feature 
               icon="📍" 
@@ -80,7 +80,7 @@ export default function LandingPage() {
       </section>
 
       {/* Footer */}
-      <footer className='bg-gray-800 text-white'>
+      <footer className='text-black'>
         <div className='container mx-auto px-6 py-8 flex flex-col md:flex-row justify-between items-center'>
           <p className='text-sm mb-4 md:mb-0'>© {new Date().getFullYear()} <span>{title}</span>. All rights reserved</p>
           <Link className='text-sm hover:text-blue-400' href='/privacy-policy/'>