Update PFPs & Staff Member list

src/components/team.jsx

@@ -7,19 +7,25 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 
 const adminTeam = [
-  { name: 'Chris Chrome', ext: '1000', image: '/chris.webp', discord: '@chrischrome', role: 'Head Admin' },
   { name: 'ashton', ext: '1007', image: '/ashton.webp', discord: '@ashtoncarlson', role: 'Head Admin' },
   { name: 'Cayden', ext: '1001', image: '/cayden.webp', discord: '@freepbx', role: 'Admin' },
+  { name: 'Saso', ext: '1003', image: '/ramsaso.webp', discord: '@ramsaso', role: 'Admin' },
   { name: 'Faux Lemons', ext: '1011', image: '/faux_lemons.webp', discord: '@faux_lemons', role: 'Admin' },
   { name: 'rocord', ext: '1010', image: '/rocord.webp', discord: '@rocord', role: 'Admin' },
-  { name: 'Maddix', ext: '1005', image: '/maddix.webp', discord: '@maddix6859', role: 'Admin' },
   { name: 'Theliftoperator', ext: '1134', image: '/theliftoperator.webp', discord: '@theliftoperator', role: 'Admin' },
+  { name: 'Vince', ext: '4001', image: '/vince.webp', discord: '@maybvince', role: 'Admin' },
+  { name: 'NotTimWakefield', ext: '1008', image: '/nottimwakefield.webp', discord: '@nottimwakefield', role: 'Admin' },
+  { name: 'Ryan', ext: '1135', image: '/ryan.webp', discord: '@ryann_207', role: 'Admin' },
+  { name: 'Chris Chrome', ext: '1000', image: '/chris.webp', discord: '@chrischrome', role: 'IT Officer' }
 ]
 
 const modTeam = [
-  { name: 'Vince', ext: '4001', image: '/vince.webp', discord: '@maybvince', role: 'Moderator' },
-  { name: 'Nik', ext: '1008', image: '/nottimwakefield.webp', discord: '@nottimwakefield', role: 'Moderator' },
-  { name: 'Ryan', ext: '1135', image: '/ryan.webp', discord: '@ryann_207', role: 'Moderator' },
+  { name: 'Oliver', ext: '1259', image: '/oliver.webp', discord: '@oolivero45', role: 'Moderator' },
+]
+
+const operatorTeam = [
+  { name: 'Nick', ext: '1036', image: '/nick.webp', discord: '@gamewell', role: 'Operator' },
+  { name: 'Luca', ext: '1043', image: '/luca.webp', discord: '@theonetruedimwit', role: 'Operator' }
 ]
 
 function TeamMember({ name, ext, image, discord, role }) {
@@ -102,7 +108,7 @@ export default function Team() {
         </div>
 
         <div className="space-y-16">
-          {/* Administration Team */}
+          {adminTeam.length > 0 && (
             <div>
               <div className="flex items-center justify-center mb-8">
                 <div className="flex items-center gap-4">
@@ -125,8 +131,9 @@ export default function Team() {
                 ))}
               </div>
             </div>
+          )}
 
-          {/* Moderation Team */}
+          {modTeam.length > 0 && (
             <div>
               <div className="flex items-center justify-center mb-8">
                 <div className="flex items-center gap-4">
@@ -149,6 +156,32 @@ export default function Team() {
                 ))}
               </div>
             </div>
+          )}
+
+          {operatorTeam.length > 0 && (
+            <div>
+              <div className="flex items-center justify-center mb-8">
+                <div className="flex items-center gap-4">
+                  <h3 className="text-xl sm:text-2xl font-semibold text-center text-gray-200 bg-gradient-to-r from-green-400 to-green-300 bg-clip-text text-transparent pb-2">
+                    Operators
+                  </h3>
+                </div>
+              </div>
+              <div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                {operatorTeam.map((member, index) => (
+                  <div 
+                    key={member.ext}
+                    style={{
+                      animationDelay: `${(index + adminTeam.length + modTeam.length) * 100}ms`,
+                      animation: 'fadeInUp 0.8s ease-out forwards'
+                    }}
+                  >
+                    <TeamMember {...member} />
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>