v1

2026-01-14 15:27:22 +00:00 · 2026-01-14 15:27:22 +00:00 · 9fa237ffce
commit 9fa237ffce
parent 3983cfdf23
5 changed files with 8804 additions and 138 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/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": "^3.9.1",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
--- a/frontend/src/components/InteractiveBackground.tsx
+++ b/frontend/src/components/InteractiveBackground.tsx
@ -0,0 +1,93 @@
+
+import React, { useCallback } from 'react';
+import Particles from 'react-tsparticles';
+import { loadFull } from 'tsparticles';
+import { Engine } from 'tsparticles-engine';
+
+const InteractiveBackground = () => {
+  const particlesInit = useCallback(async (engine: Engine) => {
+    await loadFull(engine);
+  }, []);
+
+  const particlesOptions = {
+    background: {
+      color: {
+        value: '#ffffff',
+      },
+    },
+    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;
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@ -9,31 +9,34 @@ 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>
  </div>
 );

+import InteractiveBackground from '../components/InteractiveBackground';
+
 export default function LandingPage() {
  const title = 'EventCoord Hub'

  return (
-    <div className="bg-gray-50 text-gray-800">
+    <div className="text-gray-800">
+      <InteractiveBackground />
      <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 +46,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 +83,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/'>
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock