Feat: Dynamic banners for the sections

src/components/Mentors.jsx

@@ -1,20 +1,47 @@
+import { useState, useEffect } from 'react'
 import { mentors, avatarStyles } from '../data/mentors'
 
+const VISIBLE = 4
+
 export default function Mentors() {
+  const [startIndex, setStartIndex] = useState(0)
+  const [fade, setFade] = useState(true)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFade(false)
+      setTimeout(() => {
+        setStartIndex((prev) => (prev + VISIBLE) % mentors.length)
+        setFade(true)
+      }, 400)
+    }, 10000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const visibleMentors = Array.from({ length: VISIBLE }, (_, i) =>
+    mentors[(startIndex + i) % mentors.length]
+  )
+
+  const totalDots = Math.ceil(mentors.length / VISIBLE)
+  const activeDot = Math.floor(startIndex / VISIBLE) % totalDots
+
   return (
     <section id="mentors" className="py-16 lg:py-24 px-5 sm:px-8 lg:px-16" style={{ background: 'white' }}>
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-4 mb-10 sm:mb-12">
         <div>
           <div className="section-label">Role Models</div>
-          <h2 className="section-title">Women who've walked<br />this path before you</h2>
+          <h2 className="section-title">Women who have walked this path before you</h2>
         </div>
-        <a href="#" className="btn-secondary hidden md:inline-flex">See all mentors →</a>
+        <a href="#" className="btn-secondary hidden md:inline-flex">See all mentors</a>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
-        {mentors.map((mentor) => (
+      <div
+        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5"
+        style={{ opacity: fade ? 1 : 0, transition: 'opacity 0.4s ease' }}
+      >
+        {visibleMentors.map((mentor, i) => (
           <div
-            key={mentor.id}
+            key={mentor.id + '-' + i}
             className="rounded-2xl p-6 transition-all duration-200 cursor-default"
             style={{ border: '1px solid var(--border)', background: 'var(--cream)' }}
             onMouseEnter={e => {
@@ -29,7 +56,7 @@ export default function Mentors() {
             }}
           >
             <div
-              className="w-13 h-13 rounded-full flex items-center justify-center font-display font-bold text-lg text-white mb-4"
+              className="rounded-full flex items-center justify-center font-display font-bold text-lg text-white mb-4"
               style={{ ...avatarStyles[mentor.avatarColor], width: 52, height: 52 }}
             >
               {mentor.initials}
@@ -50,15 +77,65 @@ export default function Mentors() {
               className="inline-flex items-center gap-1.5 text-xs font-semibold no-underline transition-all duration-200"
               style={{ color: 'var(--purple)' }}
             >
-              Connect on LinkedIn →
+              Connect on LinkedIn
             </a>
           </div>
         ))}
       </div>
 
+      <div className="mt-8 flex flex-col items-center gap-3">
+        <div className="flex gap-2">
+          {Array.from({ length: totalDots }).map((_, i) => (
+            <button
+              key={i}
+              onClick={() => {
+                setFade(false)
+                setTimeout(() => {
+                  setStartIndex(i * VISIBLE)
+                  setFade(true)
+                }, 400)
+              }}
+              style={{
+                width: i === activeDot ? 24 : 8,
+                height: 8,
+                borderRadius: 4,
+                background: i === activeDot ? 'var(--purple)' : 'rgba(0,0,0,0.15)',
+                border: 'none',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                padding: 0,
+              }}
+              aria-label={'Go to group ' + (i + 1)}
+            />
+          ))}
+        </div>
+        <ProgressBar key={startIndex} />
+      </div>
+
       <div className="text-center mt-8">
-        <a href="#" className="btn-secondary">Are you a woman in AI? Join as a mentor →</a>
+        <a href="#" className="btn-secondary">Are you a woman in AI? Join as a mentor</a>
       </div>
     </section>
   )
 }
+
+function ProgressBar() {
+  return (
+    <div style={{ width: 120, height: 2, background: 'rgba(0,0,0,0.1)', borderRadius: 2, overflow: 'hidden' }}>
+      <div
+        style={{
+          height: '100%',
+          background: 'var(--purple)',
+          borderRadius: 2,
+          animation: 'progress10s 10s linear forwards',
+        }}
+      />
+      <style>{`
+        @keyframes progress10s {
+          from { width: 0% }
+          to { width: 100% }
+        }
+      `}</style>
+    </div>
+  )
+}

src/components/Storyboards.jsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { storyboards } from '../data/storyboards'
 import { HighlightedText } from './Tooltip'
@@ -9,6 +10,29 @@ const difficultyColors = {
 }
 
 export default function Storyboards() {
+  const [startIndex, setStartIndex] = useState(0)
+  const [fade, setFade] = useState(true)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFade(false)
+      setTimeout(() => {
+        setStartIndex((prev) => (prev + 3) % storyboards.length)
+        setFade(true)
+      }, 400)
+    }, 10000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const visibleConcepts = [
+    storyboards[startIndex % storyboards.length],
+    storyboards[(startIndex + 1) % storyboards.length],
+    storyboards[(startIndex + 2) % storyboards.length],
+  ]
+
+  const totalDots = Math.ceil(storyboards.length / 3)
+  const activeDot = Math.floor(startIndex / 3) % totalDots
+
   return (
     <section id="concepts" className="py-16 lg:py-24 px-5 sm:px-8 lg:px-16" style={{ background: 'var(--ink)' }}>
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-4 mb-10 sm:mb-12">
@@ -28,10 +52,13 @@ export default function Storyboards() {
         </Link>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
-        {storyboards.slice(0, 3).map((s) => (
+      <div
+        className="grid grid-cols-1 md:grid-cols-3 gap-5"
+        style={{ opacity: fade ? 1 : 0, transition: 'opacity 0.4s ease' }}
+      >
+        {visibleConcepts.map((s, i) => (
           <div
-            key={s.id}
+            key={`${s.id}-${i}`}
             className="rounded-2xl cursor-pointer transition-all duration-200"
             style={{ border: '1px solid rgba(255,255,255,0.08)' }}
             onMouseEnter={e => {
@@ -72,6 +99,58 @@ export default function Storyboards() {
           </div>
         ))}
       </div>
+
+      {/* Dot indicators + progress bar */}
+      <div className="mt-8 flex flex-col items-center gap-3">
+        <div className="flex gap-2">
+          {Array.from({ length: totalDots }).map((_, i) => (
+            <button
+              key={i}
+              onClick={() => { setFade(false); setTimeout(() => { setStartIndex(i * 3); setFade(true) }, 400) }}
+              style={{
+                width: i === activeDot ? 24 : 8,
+                height: 8,
+                borderRadius: 4,
+                background: i === activeDot ? 'white' : 'rgba(255,255,255,0.25)',
+                border: 'none',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                padding: 0,
+              }}
+              aria-label={`Go to group ${i + 1}`}
+            />
+          ))}
+        </div>
+        {/* 10s progress bar */}
+        <ProgressBar key={startIndex} />
+      </div>
+
+      <div className="text-center mt-6 md:hidden">
+        <Link to="/concepts" className="btn-secondary inline-flex text-white/60 border-white/15">
+          View all concepts →
+        </Link>
+      </div>
     </section>
   )
 }
+
+function ProgressBar() {
+  return (
+    <div style={{ width: 120, height: 2, background: 'rgba(255,255,255,0.15)', borderRadius: 2, overflow: 'hidden' }}>
+      <div
+        style={{
+          height: '100%',
+          background: 'white',
+          borderRadius: 2,
+          animation: 'progress10s 10s linear forwards',
+        }}
+      />
+      <style>{`
+        @keyframes progress10s {
+          from { width: 0% }
+          to   { width: 100% }
+        }
+      `}</style>
+    </div>
+  )
+}