+ {expert.telegram && (
+
+
+
+ )}
+ {expert.linkedin && (
+
+
+
+ )}
+ {expert.twitter && (
+
+
+
+ )}
+ {expert.website && (
+
+
+
+ )}
+
+ {/* ─── Page Header ─── */}
+
+
+
+
+
+ EXPERT NETWORK
+
+
+ {t.title}
+
+
+ {t.subtitle}
+
+
+
+
+
+
+
+
+ {/* ─── Top Featured Carousel ─── */}
+
setIsPaused(true)}
+ onMouseLeave={() => setIsPaused(false)}
+ style={{
+ background: '#fff',
+ borderRadius: 20,
+ border: '1px solid rgba(7, 29, 73, 0.08)',
+ boxShadow: '0 12px 40px rgba(7, 29, 73, 0.04)',
+ overflow: 'hidden',
+ padding: '36px 40px',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 24,
+ marginBottom: 64
+ }}
+ className="max-md:p-5"
+ >
+ {/* Main Slide Split */}
+
+
+ {/* Left/Right Photo Column */}
+
+
+ {renderSocialIcon(activeExpert)}
+
+
+ {/* Right/Left Text Details */}
+
+
+
+
+
+
+
+
+ {isFa ? activeExpert.nameFa : activeExpert.nameEn}
+
+
+ {isFa ? activeExpert.roleFa : activeExpert.roleEn}
+
+
+ {isFa ? activeExpert.bioFa : activeExpert.bioEn}
+
+
+
+
+ {/* Avatars Row at the bottom */}
+
+ {FEATURED_EXPERTS.map((exp, idx) => {
+ const isActive = idx === activeIndex
+ return (
+
+ )
+ })}
+
+
+
+
+
+
+ {/* ─── Grid Rooms Categories ─── */}
+
+ {/* Room 1: Sustainable Development */}
+
+
+
+
{t.roomSustainability}
+
+
+ {ROOM_EXPERTS.sustainability.map((exp, index) => (
+ } />
+ ))}
+
+
+
+ {/* Room 2: Steel Industry */}
+
+
+
+
{t.roomSteel}
+
+
+ {ROOM_EXPERTS.steel.map((exp, index) => (
+ } />
+ ))}
+
+
+
+ {/* Room 3: Economics */}
+
+
+
+
{t.roomEconomics}
+
+
+ {ROOM_EXPERTS.economics.map((exp, index) => (
+ } />
+ ))}
+
+
+
+ {/* Room 4: Technology & Innovation */}
+
+
+
+
{t.roomTechnology}
+
+
+ {ROOM_EXPERTS.technology.map((exp, index) => (
+ } />
+ ))}
+
+
+
+
+
setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ style={{
+ borderRadius: 14,
+ overflow: 'hidden',
+ border: '1px solid rgba(7, 29, 73, 0.07)',
+ background: '#fff',
+ boxShadow: hovered ? '0 12px 30px rgba(7, 29, 73, 0.08)' : '0 4px 12px rgba(7, 29, 73, 0.02)',
+ transition: 'all 0.3s ease',
+ transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
+ display: 'flex',
+ flexDirection: 'column'
+ }}
+ >
+ {/* Image with grayscale hover */}
+
+
+
+
+ {/* Gold details footer */}
+
+
+
+ {name}
+
+
+ {role}
+
+
+
+ {/* Themed Icon in bottom corner */}
+
+ {icon}
+
+
+