diff --git a/public/avatar-placeholder.svg b/public/avatar-placeholder.svg new file mode 100644 index 0000000..d83f241 --- /dev/null +++ b/public/avatar-placeholder.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/pages/Experts/Experts.tsx b/src/pages/Experts/Experts.tsx index 678e6bc..6e49201 100644 --- a/src/pages/Experts/Experts.tsx +++ b/src/pages/Experts/Experts.tsx @@ -25,11 +25,11 @@ const FEATURED_EXPERTS: Expert[] = [ id: 'saeed-zarandi', nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', - roleFa: 'مدیرعامل و عضو هیئت‌مدیره شرکت سرمایه‌گذاری صنایع شیمیایی ایران و مشاور صنایع معدنی', - roleEn: 'CEO & Board Member of ICIIC, Senior Mining & Metallurgy Consultant', - 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.', - photo: '/1.jpg', + roleFa: 'مدیرعامل و نایب‌رئیس هیئت‌مدیره شرکت فولاد مبارکه اصفهان', + roleEn: 'CEO & Vice Chairman of Mobarakeh Steel Company', + 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 as CEO of Mobarakeh Steel in early 2025.', + photo: '/avatar-placeholder.svg', telegram: 'https://t.me', linkedin: 'https://linkedin.com', twitter: 'https://x.com', @@ -43,7 +43,7 @@ const FEATURED_EXPERTS: Expert[] = [ roleEn: 'Geopolitical Risk Director & Member of Sustainable Development Think Tank', 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.', - photo: '/2.jpg', + photo: '/avatar-placeholder.svg', telegram: 'https://t.me', linkedin: 'https://linkedin.com', twitter: 'https://x.com' @@ -56,7 +56,7 @@ const FEATURED_EXPERTS: Expert[] = [ roleEn: 'Senior Commodity Analyst & Member of Steel Industry Think Tank', 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.', - photo: '/3.jpg', + photo: '/avatar-placeholder.svg', linkedin: 'https://linkedin.com', twitter: 'https://x.com', website: 'https://google.com' @@ -69,7 +69,7 @@ const FEATURED_EXPERTS: Expert[] = [ roleEn: 'Senior Energy & Sustainability Researcher & Head of Technology Think Tank', 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.', - photo: '/4.jpg', + photo: '/avatar-placeholder.svg', telegram: 'https://t.me', linkedin: 'https://linkedin.com' }, @@ -81,7 +81,7 @@ const FEATURED_EXPERTS: Expert[] = [ roleEn: 'Industrial Economics Director & Scientific Secretary of Economic Think Tank', 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.', - photo: '/5.jpg', + photo: '/avatar-placeholder.svg', telegram: 'https://t.me', linkedin: 'https://linkedin.com', twitter: 'https://x.com', @@ -91,28 +91,28 @@ const FEATURED_EXPERTS: Expert[] = [ const ROOM_EXPERTS = { sustainability: [ - { nameFa: 'دکتر فاطمه احمدی', nameEn: 'Dr. Fatemeh Ahmadi', roleFa: 'مدیر ریسک ژئوپلیتیک', roleEn: 'Geopolitical Risk Director', photo: '/2.jpg' }, - { nameFa: 'مهندس سارا رضایی', nameEn: 'Ms. Sara Rezaei', roleFa: 'تحلیلگر پایداری و انرژی', roleEn: 'Energy & Sustainability Analyst', photo: '/4.jpg' }, - { nameFa: 'دکتر مریم حسینی', nameEn: 'Dr. Maryam Hosseini', roleFa: 'پژوهشگر بازاریابی بین‌الملل', roleEn: 'International Marketing Scholar', photo: '/6.jpg' }, - { nameFa: 'دکتر رضا عباسی', nameEn: 'Dr. Reza Abbasi', roleFa: 'مشاور محیط‌زیست صنعتی', roleEn: 'Industrial Environmental Advisor', photo: '/7.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: '/avatar-placeholder.svg' }, + { 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: '/avatar-placeholder.svg' } ], steel: [ - { nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', roleFa: 'عضو هیئت‌مدیره فولاد مبارکه', roleEn: 'Board Member of MSC', photo: '/1.jpg' }, - { nameFa: 'دکتر حسین کریمی', nameEn: 'Dr. Hossein Karimi', roleFa: 'تحلیلگر متالورژی و بازار', roleEn: 'Metallurgy & Market Analyst', photo: '/3.jpg' }, - { nameFa: 'مهندس رضا توکلی', nameEn: 'Ms. Reza Tavakoli', roleFa: 'تحلیلگر بورس کالا و آتی', roleEn: 'Mercantile & Futures Analyst', photo: '/8.jpg' }, - { nameFa: 'دکتر محمود صادقی', nameEn: 'Dr. Mahmoud Sadeghi', roleFa: 'مشاور فناوری کوره قوس', roleEn: 'EAF Steelmaking Consultant', photo: '/9.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: '/avatar-placeholder.svg' }, + { 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: '/avatar-placeholder.svg' } ], economics: [ - { nameFa: 'دکتر علی محمدی', nameEn: 'Dr. Ali Mohammadi', roleFa: 'مدیر ارشد اقتصاد صنعتی', roleEn: 'Industrial Economics Director', photo: '/5.jpg' }, - { nameFa: 'مهندس رضا توکلی', nameEn: 'Ms. Reza Tavakoli', roleFa: 'تحلیلگر بازار کامودیتی', roleEn: 'Commodity Market Analyst', photo: '/8.jpg' }, - { nameFa: 'دکتر حمید علوی', nameEn: 'Dr. Hamid Alavi', roleFa: 'اقتصاددان زنجیره تأمین', roleEn: 'Supply Chain Economist', photo: '/10.jpg' }, - { nameFa: 'دکتر زهرا راد', nameEn: 'Dr. Zahra Rad', roleFa: 'تحلیلگر مالی سرمایه‌گذاری سبز', roleEn: 'Green Investment Financial Analyst', photo: '/11.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: '/avatar-placeholder.svg' }, + { 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: '/avatar-placeholder.svg' } ], technology: [ - { nameFa: 'مهندس سارا رضایی', nameEn: 'Ms. Sara Rezaei', roleFa: 'پژوهشگر فناوری‌های نوین', roleEn: 'Emerging Technologies Researcher', photo: '/4.jpg' }, - { nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', roleFa: 'استراتژیست تحول صنعتی', roleEn: 'Industrial Transformation Strategist', photo: '/1.jpg' }, - { nameFa: 'دکتر پیمان صالحی', nameEn: 'Dr. Peyman Salehi', roleFa: 'متخصص هوش مصنوعی صنعتی', roleEn: 'Industrial AI Specialist', photo: '/12.jpg' }, - { nameFa: 'مهندس نیما راد', nameEn: 'Mr. Nima Rad', roleFa: 'تحلیلگر طرح‌های هیدروژن سبز', roleEn: 'Green Hydrogen Analyst', photo: '/13.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: '/avatar-placeholder.svg' }, + { 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: '/avatar-placeholder.svg' } ] } @@ -172,6 +172,7 @@ export default function Experts() { // Carousel Autoplay state const [activeIndex, setActiveIndex] = useState(0) const [isPaused, setIsPaused] = useState(false) + const [hoveredAvatarIndex, setHoveredAvatarIndex] = useState(null) const autoPlayRef = useRef<(() => void) | null>(null) const activeExpert = FEATURED_EXPERTS[activeIndex] @@ -196,35 +197,75 @@ export default function Experts() { }, [isPaused]) const renderSocialIcon = (expert: Expert) => ( -
+
{expert.telegram && ( )} {expert.linkedin && ( )} {expert.twitter && ( )} {expert.website && ( @@ -263,30 +304,34 @@ export default function Experts() { onMouseEnter={() => 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', + background: 'none', + border: 'none', + boxShadow: 'none', + overflow: 'visible', + padding: 0, display: 'flex', flexDirection: 'column', - gap: 24, marginBottom: 64 }} - className="max-md:p-5" > {/* Main Slide Split */}
- {/* Left/Right Photo Column */} + {/* Left Photo Column */}
-
+
- {/* Right/Left Text Details */} -
-
- + {/* Right Text Details Bubble */} +
+ + {/* Quote Icon at Top-Left */} +
+
@@ -316,43 +382,78 @@ export default function Experts() { animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: isFa ? -15 : 15 }} transition={{ duration: 0.3 }} + style={{ width: '100%', display: 'flex', flexDirection: 'column' }} > -

- {isFa ? activeExpert.nameFa : activeExpert.nameEn} + {/* Name section with both Farsi and English names */} +

+ {isFa ? activeExpert.nameFa : activeExpert.nameEn} + + {isFa ? activeExpert.nameEn : activeExpert.nameFa} +

-
+ + {/* Gold line under names */} +
+ +
{isFa ? activeExpert.roleFa : activeExpert.roleEn}
-

+ +

{isFa ? activeExpert.bioFa : activeExpert.bioEn}

- {/* Avatars Row at the bottom */} -
+ {/* Overlapping Stacked Avatars at the bottom right */} +
{FEATURED_EXPERTS.map((exp, idx) => { 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 (