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: 'Oliver', ext: '1259', image: '/oliver.webp', discord: '@oolivero45', 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' },
+
+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,53 +108,80 @@ export default function Team() {
         </div>
 
         <div className="space-y-16">
-          {/* Administration Team */}
+          {adminTeam.length > 0 && (
-          <div>
+            <div>
-            <div className="flex items-center justify-center mb-8">
+              <div className="flex items-center justify-center mb-8">
-              <div className="flex items-center gap-4">
+                <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-blue-400 to-blue-300 bg-clip-text text-transparent pb-2">
+                  <h3 className="text-xl sm:text-2xl font-semibold text-center text-gray-200 bg-gradient-to-r from-blue-400 to-blue-300 bg-clip-text text-transparent pb-2">
-                  Administration Team
+                    Administration Team
-                </h3>
+                  </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">
+                {adminTeam.map((member, index) => (
+                  <div 
+                    key={member.ext}
+                    style={{
+                      animationDelay: `${index * 100}ms`,
+                      animation: 'fadeInUp 0.8s ease-out forwards'
+                    }}
+                  >
+                    <TeamMember {...member} />
+                  </div>
+                ))}
               </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">
+          )}
-              {adminTeam.map((member, index) => (
-                <div 
-                  key={member.ext}
-                  style={{
-                    animationDelay: `${index * 100}ms`,
-                    animation: 'fadeInUp 0.8s ease-out forwards'
-                  }}
-                >
-                  <TeamMember {...member} />
-                </div>
-              ))}
-            </div>
-          </div>
 
-          {/* Moderation Team */}
+          {modTeam.length > 0 && (
-          <div>
+            <div>
-            <div className="flex items-center justify-center mb-8">
+              <div className="flex items-center justify-center mb-8">
-              <div className="flex items-center gap-4">
+                <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-purple-400 to-purple-300 bg-clip-text text-transparent pb-2">
+                  <h3 className="text-xl sm:text-2xl font-semibold text-center text-gray-200 bg-gradient-to-r from-purple-400 to-purple-300 bg-clip-text text-transparent pb-2">
-                  Moderation Team
+                    Moderation Team
-                </h3>
+                  </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">
+                {modTeam.map((member, index) => (
+                  <div 
+                    key={member.ext}
+                    style={{
+                      animationDelay: `${(index + adminTeam.length) * 100}ms`,
+                      animation: 'fadeInUp 0.8s ease-out forwards'
+                    }}
+                  >
+                    <TeamMember {...member} />
+                  </div>
+                ))}
               </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">
+          )}
-              {modTeam.map((member, index) => (
+
-                <div 
+          {operatorTeam.length > 0 && (
-                  key={member.ext}
+            <div>
-                  style={{
+              <div className="flex items-center justify-center mb-8">
-                    animationDelay: `${(index + adminTeam.length) * 100}ms`,
+                <div className="flex items-center gap-4">
-                    animation: 'fadeInUp 0.8s ease-out forwards'
+                  <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>
-                  <TeamMember {...member} />
                 </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>
       </div>