Mr.Gay100
/
steelforesight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add Experts page component and avatar placeholder icon

This commit is contained in:
alireza 2026-06-11 11:58:29 +03:30
parent 12326898b3
commit 3ba233ee0b
2 changed files with 179 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/avatar-placeholder.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#032340" />
<stop offset="100%" stop-color="#0c3c66" />
</linearGradient>
</defs>
<rect width="200" height="200" fill="url(#grad)" />
<!-- Circle for head -->
<circle cx="100" cy="82" r="32" fill="#CD9E53" />
<!-- Path for shoulders/torso -->
<path d="M40 165 C 40 130, 70 122, 100 122 C 130 122, 160 130, 160 165 C 160 175, 150 180, 100 180 C 50 180, 40 175, 40 165 Z" fill="#CD9E53" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 592 B

230
src/pages/Experts/Experts.tsx
View File

@ -25,11 +25,11 @@ const FEATURED_EXPERTS: Expert[] = [
id: 'saeed-zarandi', id: 'saeed-zarandi',
nameFa: 'دکتر سعید زرندی', nameFa: 'دکتر سعید زرندی',
nameEn: 'Dr. Saeed Zarandi', nameEn: 'Dr. Saeed Zarandi',
roleFa: 'مدیرعامل و عضو هیئت‌مدیره شرکت سرمایه‌گذاری صنایع شیمیایی ایران و مشاور صنایع معدنی', roleFa: 'مدیرعامل و نایب‌رئیس هیئت‌مدیره شرکت فولاد مبارکه اصفهان',
roleEn: 'CEO & Board Member of ICIIC, Senior Mining & Metallurgy Consultant', roleEn: 'CEO & Vice Chairman of Mobarakeh Steel Company',
bioFa: 'سعید زرندی یکی از مدیران ارشد صنعت و اقتصاد ایران است که با تحصیلات در حوزه مهندسی معدن و مدیریت دولتی، در سمت‌های مختلفی از جمله معاون طرح و برنامه وزارت صنعت، معدن و تجارت و مدیرعامل هلدینگ‌های صنعتی و معدنی فعالیت داشته است. وی در بهمن ۱۴۰۳ به‌عنوان عضو هیئت‌مدیره فولاد مبارکه منصوب شد.', bioFa: 'سعید زرندی یکی از مدیران ارشد صنعت و اقتصاد ایران است که با تحصیلات در حوزه مهندسی معدن و مدیریت دولتی، در سمت‌های مختلفی از جمله معاون طرح و برنامه وزارت صمت و مدیرعامل هلدینگ سرمایه‌گذاری صنایع شیمیایی ایران فعالیت داشته است. او در بهمن ۱۴۰۳ به‌عنوان مدیرعامل فولاد مبارکه منصوب شد.',
bioEn: 'Saeed Zarandi is a senior executive in Iran\'s industrial and economic sectors. With a background in mining engineering and public administration, he has served as Deputy Minister of Industry, Mine and Trade, and CEO of major industrial holdings. He was appointed to the board of Mobarakeh Steel in early 2025.', bioEn: 'Saeed Zarandi is a senior executive in Iran\'s industrial and economic sectors. With a background in mining engineering and public administration, he has served as Deputy Minister of Industry, Mine and Trade, and CEO of major industrial holdings. He was appointed as CEO of Mobarakeh Steel in early 2025.',
photo: '/1.jpg', photo: '/avatar-placeholder.svg',
telegram: 'https://t.me', telegram: 'https://t.me',
linkedin: 'https://linkedin.com', linkedin: 'https://linkedin.com',
twitter: 'https://x.com', twitter: 'https://x.com',
@ -43,7 +43,7 @@ const FEATURED_EXPERTS: Expert[] = [
roleEn: 'Geopolitical Risk Director & Member of Sustainable Development Think Tank', roleEn: 'Geopolitical Risk Director & Member of Sustainable Development Think Tank',
bioFa: 'فاطمه احمدی فارغ‌التحصیل دکتری مدیریت ریسک از دانشگاه علم و صنعت ایران با بیش از ۱۵ سال تجربه پژوهشی در حوزه زنجیره تأمین صنایع معدنی و فلزی است. وی مشاور ارشد چندین طرح کربن‌زدایی در صنعت فولاد است.', bioFa: 'فاطمه احمدی فارغ‌التحصیل دکتری مدیریت ریسک از دانشگاه علم و صنعت ایران با بیش از ۱۵ سال تجربه پژوهشی در حوزه زنجیره تأمین صنایع معدنی و فلزی است. وی مشاور ارشد چندین طرح کربن‌زدایی در صنعت فولاد است.',
bioEn: 'Fatemeh Ahmadi holds a Ph.D. in Risk Management from Iran University of Science and Technology. She has over 15 years of research experience in mineral and metal supply chains and is a senior consultant on carbon border regulations.', bioEn: 'Fatemeh Ahmadi holds a Ph.D. in Risk Management from Iran University of Science and Technology. She has over 15 years of research experience in mineral and metal supply chains and is a senior consultant on carbon border regulations.',
photo: '/2.jpg', photo: '/avatar-placeholder.svg',
telegram: 'https://t.me', telegram: 'https://t.me',
linkedin: 'https://linkedin.com', linkedin: 'https://linkedin.com',
twitter: 'https://x.com' twitter: 'https://x.com'
@ -56,7 +56,7 @@ const FEATURED_EXPERTS: Expert[] = [
roleEn: 'Senior Commodity Analyst & Member of Steel Industry Think Tank', roleEn: 'Senior Commodity Analyst & Member of Steel Industry Think Tank',
bioFa: 'حسین کریمی دکتری مهندسی مواد از دانشگاه صنعتی اصفهان دارد. حوزه تخصصی پژوهش‌های وی متالورژی صنعتی و پیش‌بینی تقاضای بازارهای آسیایی است و به‌طور مرتب در رسانه‌های بین‌المللی تحلیل منتشر می‌کند.', bioFa: 'حسین کریمی دکتری مهندسی مواد از دانشگاه صنعتی اصفهان دارد. حوزه تخصصی پژوهش‌های وی متالورژی صنعتی و پیش‌بینی تقاضای بازارهای آسیایی است و به‌طور مرتب در رسانه‌های بین‌المللی تحلیل منتشر می‌کند.',
bioEn: 'Hossein Karimi received his Ph.D. in Materials Engineering from Isfahan University of Technology. His expertise covers industrial metallurgy and demand forecasting for Asian steel markets, frequently writing for global publications.', bioEn: 'Hossein Karimi received his Ph.D. in Materials Engineering from Isfahan University of Technology. His expertise covers industrial metallurgy and demand forecasting for Asian steel markets, frequently writing for global publications.',
photo: '/3.jpg', photo: '/avatar-placeholder.svg',
linkedin: 'https://linkedin.com', linkedin: 'https://linkedin.com',
twitter: 'https://x.com', twitter: 'https://x.com',
website: 'https://google.com' website: 'https://google.com'
@ -69,7 +69,7 @@ const FEATURED_EXPERTS: Expert[] = [
roleEn: 'Senior Energy & Sustainability Researcher & Head of Technology Think Tank', roleEn: 'Senior Energy & Sustainability Researcher & Head of Technology Think Tank',
bioFa: 'سارا رضایی فارغ‌التحصیل کارشناسی ارشد مهندسی انرژی از دانشگاه صنعتی شریف است. پژوهش‌های او در زمینه بهره‌وری کوره قوس الکتریکی و کربن‌زدایی با هیدروژن، از مراجع علمی صنعت فولاد است.', bioFa: 'سارا رضایی فارغ‌التحصیل کارشناسی ارشد مهندسی انرژی از دانشگاه صنعتی شریف است. پژوهش‌های او در زمینه بهره‌وری کوره قوس الکتریکی و کربن‌زدایی با هیدروژن، از مراجع علمی صنعت فولاد است.',
bioEn: 'Sara Rezaei holds an M.Sc. in Energy Engineering from Sharif University of Technology. Her research on EAF efficiency, green hydrogen, and carbon reduction roadmaps serves as a benchmark in local clean steel policymaking.', bioEn: 'Sara Rezaei holds an M.Sc. in Energy Engineering from Sharif University of Technology. Her research on EAF efficiency, green hydrogen, and carbon reduction roadmaps serves as a benchmark in local clean steel policymaking.',
photo: '/4.jpg', photo: '/avatar-placeholder.svg',
telegram: 'https://t.me', telegram: 'https://t.me',
linkedin: 'https://linkedin.com' linkedin: 'https://linkedin.com'
}, },
@ -81,7 +81,7 @@ const FEATURED_EXPERTS: Expert[] = [
roleEn: 'Industrial Economics Director & Scientific Secretary of Economic Think Tank', roleEn: 'Industrial Economics Director & Scientific Secretary of Economic Think Tank',
bioFa: 'علی محمدی دکتری اقتصاد صنعتی از دانشگاه تهران دارد. وی پیش از این مشاور اقتصادی ایمیدرو بوده و بیش از ۵۰ گزارش تحلیلی در بازارهای فولاد و بازارهای مالی داخلی و جهانی منتشر کرده است.', bioFa: 'علی محمدی دکتری اقتصاد صنعتی از دانشگاه تهران دارد. وی پیش از این مشاور اقتصادی ایمیدرو بوده و بیش از ۵۰ گزارش تحلیلی در بازارهای فولاد و بازارهای مالی داخلی و جهانی منتشر کرده است.',
bioEn: 'Ali Mohammadi holds a Ph.D. in Industrial Economics from the University of Tehran. Previously an economic advisor to IMIDRO, he has authored over 50 reports on steel tariffs, macro trends, and financial commodities.', bioEn: 'Ali Mohammadi holds a Ph.D. in Industrial Economics from the University of Tehran. Previously an economic advisor to IMIDRO, he has authored over 50 reports on steel tariffs, macro trends, and financial commodities.',
photo: '/5.jpg', photo: '/avatar-placeholder.svg',
telegram: 'https://t.me', telegram: 'https://t.me',
linkedin: 'https://linkedin.com', linkedin: 'https://linkedin.com',
twitter: 'https://x.com', twitter: 'https://x.com',
@ -91,28 +91,28 @@ const FEATURED_EXPERTS: Expert[] = [
const ROOM_EXPERTS = { const ROOM_EXPERTS = {
sustainability: [ sustainability: [
{ nameFa: 'دکتر فاطمه احمدی', nameEn: 'Dr. Fatemeh Ahmadi', roleFa: 'مدیر ریسک ژئوپلیتیک', roleEn: 'Geopolitical Risk Director', photo: '/2.jpg' }, { nameFa: 'دکتر فاطمه احمدی', nameEn: 'Dr. Fatemeh Ahmadi', roleFa: 'مدیر ریسک ژئوپلیتیک', roleEn: 'Geopolitical Risk Director', photo: '/avatar-placeholder.svg' },
{ nameFa: 'مهندس سارا رضایی', nameEn: 'Ms. Sara Rezaei', roleFa: 'تحلیلگر پایداری و انرژی', roleEn: 'Energy & Sustainability Analyst', photo: '/4.jpg' }, { nameFa: 'مهندس سارا رضایی', nameEn: 'Ms. Sara Rezaei', roleFa: 'تحلیلگر پایداری و انرژی', roleEn: 'Energy & Sustainability Analyst', photo: '/avatar-placeholder.svg' },
{ nameFa: 'دکتر مریم حسینی', nameEn: 'Dr. Maryam Hosseini', roleFa: 'پژوهشگر بازاریابی بین‌الملل', roleEn: 'International Marketing Scholar', photo: '/6.jpg' }, { nameFa: 'دکتر مریم حسینی', nameEn: 'Dr. Maryam Hosseini', roleFa: 'پژوهشگر بازاریابی بین‌الملل', roleEn: 'International Marketing Scholar', photo: '/avatar-placeholder.svg' },
{ nameFa: 'دکتر رضا عباسی', nameEn: 'Dr. Reza Abbasi', roleFa: 'مشاور محیط‌زیست صنعتی', roleEn: 'Industrial Environmental Advisor', photo: '/7.jpg' } { nameFa: 'دکتر رضا عباسی', nameEn: 'Dr. Reza Abbasi', roleFa: 'مشاور محیط‌زیست صنعتی', roleEn: 'Industrial Environmental Advisor', photo: '/avatar-placeholder.svg' }
], ],
steel: [ steel: [
{ nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', roleFa: 'عضو هیئت‌مدیره فولاد مبارکه', roleEn: 'Board Member of MSC', photo: '/1.jpg' }, { nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', roleFa: 'عضو هیئت‌مدیره فولاد مبارکه', roleEn: 'Board Member of MSC', photo: '/avatar-placeholder.svg' },
{ nameFa: 'دکتر حسین کریمی', nameEn: 'Dr. Hossein Karimi', roleFa: 'تحلیلگر متالورژی و بازار', roleEn: 'Metallurgy & Market Analyst', photo: '/3.jpg' }, { nameFa: 'دکتر حسین کریمی', nameEn: 'Dr. Hossein Karimi', roleFa: 'تحلیلگر متالورژی و بازار', roleEn: 'Metallurgy & Market Analyst', photo: '/avatar-placeholder.svg' },
{ nameFa: 'مهندس رضا توکلی', nameEn: 'Ms. Reza Tavakoli', roleFa: 'تحلیلگر بورس کالا و آتی', roleEn: 'Mercantile & Futures Analyst', photo: '/8.jpg' }, { nameFa: 'مهندس رضا توکلی', nameEn: 'Ms. Reza Tavakoli', roleFa: 'تحلیلگر بورس کالا و آتی', roleEn: 'Mercantile & Futures Analyst', photo: '/avatar-placeholder.svg' },
{ nameFa: 'دکتر محمود صادقی', nameEn: 'Dr. Mahmoud Sadeghi', roleFa: 'مشاور فناوری کوره قوس', roleEn: 'EAF Steelmaking Consultant', photo: '/9.jpg' } { nameFa: 'دکتر محمود صادقی', nameEn: 'Dr. Mahmoud Sadeghi', roleFa: 'مشاور فناوری کوره قوس', roleEn: 'EAF Steelmaking Consultant', photo: '/avatar-placeholder.svg' }
], ],
economics: [ economics: [
{ nameFa: 'دکتر علی محمدی', nameEn: 'Dr. Ali Mohammadi', roleFa: 'مدیر ارشد اقتصاد صنعتی', roleEn: 'Industrial Economics Director', photo: '/5.jpg' }, { nameFa: 'دکتر علی محمدی', nameEn: 'Dr. Ali Mohammadi', roleFa: 'مدیر ارشد اقتصاد صنعتی', roleEn: 'Industrial Economics Director', photo: '/avatar-placeholder.svg' },
{ nameFa: 'مهندس رضا توکلی', nameEn: 'Ms. Reza Tavakoli', roleFa: 'تحلیلگر بازار کامودیتی', roleEn: 'Commodity Market Analyst', photo: '/8.jpg' }, { nameFa: 'مهندس رضا توکلی', nameEn: 'Ms. Reza Tavakoli', roleFa: 'تحلیلگر بازار کامودیتی', roleEn: 'Commodity Market Analyst', photo: '/avatar-placeholder.svg' },
{ nameFa: 'دکتر حمید علوی', nameEn: 'Dr. Hamid Alavi', roleFa: 'اقتصاددان زنجیره تأمین', roleEn: 'Supply Chain Economist', photo: '/10.jpg' }, { nameFa: 'دکتر حمید علوی', nameEn: 'Dr. Hamid Alavi', roleFa: 'اقتصاددان زنجیره تأمین', roleEn: 'Supply Chain Economist', photo: '/avatar-placeholder.svg' },
{ nameFa: 'دکتر زهرا راد', nameEn: 'Dr. Zahra Rad', roleFa: 'تحلیلگر مالی سرمایه‌گذاری سبز', roleEn: 'Green Investment Financial Analyst', photo: '/11.jpg' } { nameFa: 'دکتر زهرا راد', nameEn: 'Dr. Zahra Rad', roleFa: 'تحلیلگر مالی سرمایه‌گذاری سبز', roleEn: 'Green Investment Financial Analyst', photo: '/avatar-placeholder.svg' }
], ],
technology: [ technology: [
{ nameFa: 'مهندس سارا رضایی', nameEn: 'Ms. Sara Rezaei', roleFa: 'پژوهشگر فناوری‌های نوین', roleEn: 'Emerging Technologies Researcher', photo: '/4.jpg' }, { nameFa: 'مهندس سارا رضایی', nameEn: 'Ms. Sara Rezaei', roleFa: 'پژوهشگر فناوری‌های نوین', roleEn: 'Emerging Technologies Researcher', photo: '/avatar-placeholder.svg' },
{ nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', roleFa: 'استراتژیست تحول صنعتی', roleEn: 'Industrial Transformation Strategist', photo: '/1.jpg' }, { nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', roleFa: 'استراتژیست تحول صنعتی', roleEn: 'Industrial Transformation Strategist', photo: '/avatar-placeholder.svg' },
{ nameFa: 'دکتر پیمان صالحی', nameEn: 'Dr. Peyman Salehi', roleFa: 'متخصص هوش مصنوعی صنعتی', roleEn: 'Industrial AI Specialist', photo: '/12.jpg' }, { nameFa: 'دکتر پیمان صالحی', nameEn: 'Dr. Peyman Salehi', roleFa: 'متخصص هوش مصنوعی صنعتی', roleEn: 'Industrial AI Specialist', photo: '/avatar-placeholder.svg' },
{ nameFa: 'مهندس نیما راد', nameEn: 'Mr. Nima Rad', roleFa: 'تحلیلگر طرح‌های هیدروژن سبز', roleEn: 'Green Hydrogen Analyst', photo: '/13.jpg' } { nameFa: 'مهندس نیما راد', nameEn: 'Mr. Nima Rad', roleFa: 'تحلیلگر طرح‌های هیدروژن سبز', roleEn: 'Green Hydrogen Analyst', photo: '/avatar-placeholder.svg' }
] ]
} }
@ -172,6 +172,7 @@ export default function Experts() {
// Carousel Autoplay state // Carousel Autoplay state
const [activeIndex, setActiveIndex] = useState(0) const [activeIndex, setActiveIndex] = useState(0)
const [isPaused, setIsPaused] = useState(false) const [isPaused, setIsPaused] = useState(false)
const [hoveredAvatarIndex, setHoveredAvatarIndex] = useState<number | null>(null)
const autoPlayRef = useRef<(() => void) | null>(null) const autoPlayRef = useRef<(() => void) | null>(null)
const activeExpert = FEATURED_EXPERTS[activeIndex] const activeExpert = FEATURED_EXPERTS[activeIndex]
@ -196,35 +197,75 @@ export default function Experts() {
}, [isPaused]) }, [isPaused])
const renderSocialIcon = (expert: Expert) => ( const renderSocialIcon = (expert: Expert) => (
<div style={{ display: 'flex', gap: 10, marginTop: 14, justifyContent: 'center' }}> <div style={{ display: 'flex', gap: 12, marginTop: 16, justifyContent: 'center' }}>
{expert.telegram && ( {expert.telegram && (
<a href={expert.telegram} target="_blank" rel="noreferrer" <a href={expert.telegram} target="_blank" rel="noreferrer"
style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid #CD9E53', color: '#CD9E53', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' }} style={{
className="hover:!bg-[#CD9E53] hover:!color-[#032340] hover:!text-[#032340]" width: 40,
height: 40,
borderRadius: '50%',
backgroundColor: '#CD9E53',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.2s ease-in-out'
}}
className="hover:scale-110 hover:brightness-110 shadow-sm"
> >
<TelegramIcon /> <TelegramIcon />
</a> </a>
)} )}
{expert.linkedin && ( {expert.linkedin && (
<a href={expert.linkedin} target="_blank" rel="noreferrer" <a href={expert.linkedin} target="_blank" rel="noreferrer"
style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid #CD9E53', color: '#CD9E53', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' }} style={{
className="hover:!bg-[#CD9E53] hover:!color-[#032340] hover:!text-[#032340]" width: 40,
height: 40,
borderRadius: '50%',
backgroundColor: '#CD9E53',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.2s ease-in-out'
}}
className="hover:scale-110 hover:brightness-110 shadow-sm"
> >
<LinkedinIcon /> <LinkedinIcon />
</a> </a>
)} )}
{expert.twitter && ( {expert.twitter && (
<a href={expert.twitter} target="_blank" rel="noreferrer" <a href={expert.twitter} target="_blank" rel="noreferrer"
style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid #CD9E53', color: '#CD9E53', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' }} style={{
className="hover:!bg-[#CD9E53] hover:!color-[#032340] hover:!text-[#032340]" width: 40,
height: 40,
borderRadius: '50%',
backgroundColor: '#CD9E53',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.2s ease-in-out'
}}
className="hover:scale-110 hover:brightness-110 shadow-sm"
> >
<TwitterIcon /> <TwitterIcon />
</a> </a>
)} )}
{expert.website && ( {expert.website && (
<a href={expert.website} target="_blank" rel="noreferrer" <a href={expert.website} target="_blank" rel="noreferrer"
style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid #CD9E53', color: '#CD9E53', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' }} style={{
className="hover:!bg-[#CD9E53] hover:!color-[#032340] hover:!text-[#032340]" width: 40,
height: 40,
borderRadius: '50%',
backgroundColor: '#CD9E53',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.2s ease-in-out'
}}
className="hover:scale-110 hover:brightness-110 shadow-sm"
> >
<WebsiteIcon /> <WebsiteIcon />
</a> </a>
@ -263,30 +304,34 @@ export default function Experts() {
onMouseEnter={() => setIsPaused(true)} onMouseEnter={() => setIsPaused(true)}
onMouseLeave={() => setIsPaused(false)} onMouseLeave={() => setIsPaused(false)}
style={{ style={{
background: '#fff', background: 'none',
borderRadius: 20, border: 'none',
border: '1px solid rgba(7, 29, 73, 0.08)', boxShadow: 'none',
boxShadow: '0 12px 40px rgba(7, 29, 73, 0.04)', overflow: 'visible',
overflow: 'hidden', padding: 0,
padding: '36px 40px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: 24,
marginBottom: 64 marginBottom: 64
}} }}
className="max-md:p-5"
> >
{/* Main Slide Split */} {/* Main Slide Split */}
<div style={{ <div style={{
display: 'flex', display: 'flex',
flexDirection: isFa ? 'row' : 'row-reverse', flexDirection: isFa ? 'row-reverse' : 'row',
alignItems: 'center', alignItems: 'center',
gap: 36, gap: 48,
}} className="max-md:flex-col"> }} className="max-md:flex-col">
{/* Left/Right Photo Column */} {/* Left Photo Column */}
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }} className="max-md:w-full"> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }} className="max-md:w-full">
<div style={{ width: 220, height: 220, borderRadius: 16, overflow: 'hidden', boxShadow: '0 8px 24px rgba(7,29,73,0.1)' }}> <div style={{
width: 250,
height: 300,
borderRadius: 20,
overflow: 'hidden',
boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
border: '1px solid rgba(7, 29, 73, 0.08)'
}}>
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.img <motion.img
key={activeIndex} key={activeIndex}
@ -303,10 +348,31 @@ export default function Experts() {
{renderSocialIcon(activeExpert)} {renderSocialIcon(activeExpert)}
</div> </div>
{/* Right/Left Text Details */} {/* Right Text Details Bubble */}
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative' }}> <div style={{
<div style={{ position: 'absolute', top: -32, [isFa ? 'left' : 'right']: 0, opacity: 0.1, pointerEvents: 'none' }} className="max-md:hidden"> flex: 1,
<Quote size={64} fill="#CD9E53" color="none" /> display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
position: 'relative',
background: '#eae6e1', // Elegant warm grey-beige bubble background to match the screenshot
borderRadius: 24,
padding: '32px 48px',
borderRight: isFa ? '4px solid #CD9E53' : 'none',
borderLeft: isFa ? 'none' : '4px solid #CD9E53',
boxShadow: '0 8px 30px rgba(0, 0, 0, 0.03)',
minHeight: 300
}} className="max-md:px-6 max-md:py-8 max-md:mt-8">
{/* Quote Icon at Top-Left */}
<div style={{
position: 'absolute',
top: -28,
[isFa ? 'left' : 'right']: 40,
color: '#CD9E53',
pointerEvents: 'none'
}}>
<Quote size={54} fill="#CD9E53" color="none" />
</div> </div>
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
@ -316,43 +382,78 @@ export default function Experts() {
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: isFa ? -15 : 15 }} exit={{ opacity: 0, x: isFa ? -15 : 15 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
style={{ width: '100%', display: 'flex', flexDirection: 'column' }}
> >
<h2 style={{ fontSize: 24, fontWeight: 900, color: '#032340', margin: 0 }}> {/* Name section with both Farsi and English names */}
{isFa ? activeExpert.nameFa : activeExpert.nameEn} <h2 style={{ fontSize: 26, fontWeight: 900, color: '#032340', margin: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
<span>{isFa ? activeExpert.nameFa : activeExpert.nameEn}</span>
<span style={{ fontSize: 14, fontWeight: 600, color: 'rgba(3, 35, 64, 0.6)', letterSpacing: '0.5px', marginTop: 4 }}>
{isFa ? activeExpert.nameEn : activeExpert.nameFa}
</span>
</h2> </h2>
<div style={{ fontSize: 13, fontWeight: 700, color: '#CD9E53', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
{/* Gold line under names */}
<div style={{ width: 60, height: 3, background: '#CD9E53', marginTop: 10, marginBottom: 12 }} />
<div style={{ fontSize: 14, fontWeight: 700, color: '#b8893d', textTransform: 'uppercase', letterSpacing: '0.5px', lineHeight: 1.4 }}>
{isFa ? activeExpert.roleFa : activeExpert.roleEn} {isFa ? activeExpert.roleFa : activeExpert.roleEn}
</div> </div>
<p style={{ fontSize: 15, fontWeight: 300, color: 'var(--ink-3)', lineHeight: 1.9, marginTop: 18, textAlign: 'justify' }}>
<p style={{ fontSize: 14, fontWeight: 400, color: '#4b5563', lineHeight: 1.8, marginTop: 16, textAlign: 'justify', marginInlineEnd: 12 }}>
{isFa ? activeExpert.bioFa : activeExpert.bioEn} {isFa ? activeExpert.bioFa : activeExpert.bioEn}
</p> </p>
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
{/* Avatars Row at the bottom */} {/* Overlapping Stacked Avatars at the bottom right */}
<div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap', alignItems: 'center', justifyContent: isFa ? 'flex-end' : 'flex-start' }} className="max-md:justify-center"> <div style={{
position: 'absolute',
bottom: -24,
[isFa ? 'right' : 'left']: 40,
display: 'flex',
alignItems: 'center',
flexDirection: isFa ? 'row-reverse' : 'row'
}} className="max-md:static max-md:mt-8 max-md:justify-center">
{FEATURED_EXPERTS.map((exp, idx) => { {FEATURED_EXPERTS.map((exp, idx) => {
const isActive = idx === activeIndex const isActive = idx === activeIndex
const isHovered = idx === hoveredAvatarIndex
// overlap negative margins (marginRight for RTL, marginLeft for LTR)
const overlapStyle = idx > 0 ? { [isFa ? 'marginRight' : 'marginLeft']: -12 } : {}
let transformValue = 'scale(1)'
if (isActive && isHovered) {
transformValue = 'scale(1.22)'
} else if (isActive) {
transformValue = 'scale(1.18)'
} else if (isHovered) {
transformValue = 'scale(1.10)'
}
return ( return (
<button <button
key={exp.id} key={exp.id}
onClick={() => { onClick={() => {
setActiveIndex(idx) setActiveIndex(idx)
setIsPaused(true) // pause autoplay when user manually interacts setIsPaused(true)
}} }}
onMouseEnter={() => setHoveredAvatarIndex(idx)}
onMouseLeave={() => setHoveredAvatarIndex(null)}
style={{ style={{
width: 44, ...overlapStyle,
height: 44, width: 48,
height: 48,
borderRadius: '50%', borderRadius: '50%',
overflow: 'hidden', overflow: 'hidden',
padding: 0, padding: 0,
border: isActive ? '3px solid #CD9E53' : '2px solid transparent', border: isActive ? '3px solid #CD9E53' : '2px solid #fff',
cursor: 'pointer', cursor: 'pointer',
transform: isActive ? 'scale(1.12)' : 'scale(1)', transform: transformValue,
zIndex: isActive ? 10 : 5,
transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)', transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)',
boxShadow: isActive ? '0 4px 12px rgba(205,158,83,0.3)' : 'none', boxShadow: '0 4px 10px rgba(0,0,0,0.12)',
outline: 'none', outline: 'none',
background: 'none' background: '#eae7e2'
}} }}
> >
<img <img
@ -362,7 +463,8 @@ export default function Experts() {
width: '100%', width: '100%',
height: '100%', height: '100%',
objectFit: 'cover', objectFit: 'cover',
filter: isActive ? 'none' : 'grayscale(30%)' filter: (isActive || isHovered) ? 'none' : 'grayscale(100%)',
transition: 'filter 0.3s ease'
}} }}
/> />
</button> </button>