refactor: reorganize people directory structure and update profile content

src/components/AboutTeam.tsx

@@ -3,11 +3,11 @@ import { Gallery } from './Gallery'
 
 export function AboutTeam() {
   return (
-    <div className="relative my-16 mx-6">
+    <div className="relative my-12 lg:mt-12 lg:mb-24 mx-6">
       <Gallery />
       <div className="mx-auto grid max-w-7xl lg:grid-cols-2">
-        <div className="px-6 pt-16 pb-24 sm:pt-20 sm:pb-32 lg:col-start-2 lg:px-8 lg:pt-32">
-          <div className="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
+        <div className="pt-16 pb-24 lg:pt-24 lg:col-start-2">
+          <div className="mx-auto max-w-2xl lg:max-w-lg">
             <h1 className="mt-2 text-3xl font-medium tracking-tight text-pretty text-white lg:text-4xl">
               Founded by Internet Pioneers and Powered by the Community
             </h1>

src/components/Gallery.tsx

@@ -1,41 +1,95 @@
+'use client'
 import Image from 'next/image'
+import { useEffect, useState } from 'react'
 
 const images = [
-  '/images/people/abdulrahman_elawady.jpg',
-  '/images/people/adnan_fatayerji.jpg',
-  '/images/people/ahmed_hanafy.jpg',
-  '/images/people/ahmed_thabet.jpg',
-  '/images/people/alaa_mahmoud.jpg',
-  '/images/people/alexandre_hannelas.jpeg',
-  '/images/people/amira_abouhadid.jpg',
-  '/images/people/ashraf_fouda.jpeg',
-  '/images/people/atef_nazmy.jpg',
-  '/images/people/bernadette_amanda_caster.jpg',
-  '/images/people/cameron_ramraichan_labeyrie.jpg',
-  '/images/people/ehab_hassan.jpg',
-  '/images/people/eslam_nawara.jpg',
-  '/images/people/evon_yacoub.jpg',
-  '/images/people/florian_fournier.jpeg',
-  '/images/people/gregory_flipo.jpg',
-  '/images/people/jan_de_landtsheer.jpeg',
-  '/images/people/karoline_zizka.jpeg',
-  '/images/people/khaled.jpg',
-  '/images/people/kristof_de_spiegeleer.jpeg',
-].sort(() => Math.random() - 0.5) // Shuffle the array
+  '/images/people/abdulrahman_elawady/abdulrahman_elawady.jpg',
+  '/images/people/adnan_fatayerji/adnan_fatayerji.jpg',
+  '/images/people/ahmed_hanafy/ahmed_hanafy.jpg',
+  '/images/people/ahmed_harby/ahmed_harby.jpg',
+  '/images/people/ahmed_thabet/ahmed_thabet.jpg',
+  '/images/people/alaa_mahmoud/alaa_mahmoud.jpg',
+  '/images/people/alexandre_hannelas/alexandre_hannelas.jpeg',
+  '/images/people/ashraf_fouda/ashraf_fouda.jpg',
+  '/images/people/atef_nazmy/atef_nazmy.jpg',
+  '/images/people/ehab_hassan/ehab_hassan.jpg',
+  '/images/people/eslam_nawara/eslam_nawara.jpg',
+  '/images/people/evon_yacoub/evon_yacoub.jpg',
+  '/images/people/gregory_flipo/gregory_flipo.jpg',
+  '/images/people/jan_de_landtsheer/jan_de_landtsheer.jpeg',
+  '/images/people/karoline_zizka/karoline_zizka.jpeg',
+  '/images/people/khaled_youssef/khaled.jpg',
+  '/images/people/kristof_de_spiegeleer/kristof_de_spiegeleer.jpeg',
+  '/images/people/mahendra_varma/mahendra_varma.jpg',
+  '/images/people/mahmoud_emad/mahmoud_emad.jpg',
+  '/images/people/marion_ravarino/marion_ravarino.jpeg',
+  '/images/people/mik_perreault/mik_perreault.jpg',
+  '/images/people/peter_nashaat/peter_nashaat.jpg',
+  '/images/people/sacha_obeegadoo/sacha_obeegadoo.jpg',
+  '/images/people/sabrina_sadik/sabrina_sadik.jpg',
+  '/images/people/sam_taggart/sam_taggart.jpg',
+  '/images/people/samar_adel/samar_adel.jpg',
+  '/images/people/sameh_abouelsaad/sameh_abouelsaad.jpg',
+  '/images/people/samir_hosny/samir_hosny.jpg',
+  '/images/people/scott_yeager/scott_yeager.jpg',
+  '/images/people/timur_gordon/timur_gordon.jpg',
+]
 
 export function Gallery() {
+  const [shuffledImages, setShuffledImages] = useState(images)
+  const [activeIndex, setActiveIndex] = useState<number | null>(null)
+
+  useEffect(() => {
+    setShuffledImages([...images].sort(() => Math.random() - 0.5))
+  }, [])
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout
+
+    const loop = () => {
+      // choose a random image index
+      const randomIndex = Math.floor(Math.random() * shuffledImages.length)
+      setActiveIndex(randomIndex)
+
+      // wait a bit, then trigger next one
+      timeout = setTimeout(loop, 1000 + Math.random() * 2000) // every 1–3s
+    }
+
+    loop()
+    return () => clearTimeout(timeout)
+  }, [shuffledImages])
+
   return (
-    <div className="hidden lg:absolute lg:inset-y-0 lg:left-0 lg:block lg:w-1/2">
-      <div className="grid h-full grid-cols-5 grid-rows-4">
-        {images.map((src, index) => (
-          <Image
+    <div className="relative w-full lg:absolute lg:inset-y-0 lg:left-0 lg:w-1/2">
+      <div
+        className="
+          grid grid-cols-6
+          lg:gap-x-[4px]
+          lg:gap-y-[4px]
+          gap-x-[1px]
+          gap-y-[1px]
+          p-2 lg:p-6
+        "
+      >
+        {shuffledImages.map((src, index) => (
+          <div
             key={index}
-            src={src}
-            alt={`Team member ${index + 1}`}
-            width={129}
-            height={129}
-            className="object-cover"
-          />
+            className={`
+              relative aspect-square
+              w-[50px] h-[50px]
+              lg:w-auto lg:h-auto
+              transition duration-20 ease-in-out
+              ${activeIndex === index ? 'grayscale-0' : 'grayscale'}
+            `}
+          >
+            <Image
+              src={src}
+              alt={`Team member ${index + 1}`}
+              fill
+              className="object-cover"
+              sizes="(max-width: 400px) 50px, (max-width: 1024px) 80px, 20vw"
+            />
+          </div>
         ))}
       </div>
     </div>