feat: add Experts page component and avatar placeholder icon
This commit is contained in:
alireza
parent
12326898b3
commit
3ba233ee0b
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 592 B |
|
|
@ -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<number | null>(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) => (
|
||||
<div style={{ display: 'flex', gap: 10, marginTop: 14, justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', gap: 12, marginTop: 16, justifyContent: 'center' }}>
|
||||
{expert.telegram && (
|
||||
<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' }}
|
||||
className="hover:!bg-[#CD9E53] hover:!color-[#032340] hover:!text-[#032340]"
|
||||
style={{
|
||||
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 />
|
||||
</a>
|
||||
)}
|
||||
{expert.linkedin && (
|
||||
<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' }}
|
||||
className="hover:!bg-[#CD9E53] hover:!color-[#032340] hover:!text-[#032340]"
|
||||
style={{
|
||||
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 />
|
||||
</a>
|
||||
)}
|
||||
{expert.twitter && (
|
||||
<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' }}
|
||||
className="hover:!bg-[#CD9E53] hover:!color-[#032340] hover:!text-[#032340]"
|
||||
style={{
|
||||
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 />
|
||||
</a>
|
||||
)}
|
||||
{expert.website && (
|
||||
<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' }}
|
||||
className="hover:!bg-[#CD9E53] hover:!color-[#032340] hover:!text-[#032340]"
|
||||
style={{
|
||||
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 />
|
||||
</a>
|
||||
|
|
@ -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 */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: isFa ? 'row' : 'row-reverse',
|
||||
flexDirection: isFa ? 'row-reverse' : 'row',
|
||||
alignItems: 'center',
|
||||
gap: 36,
|
||||
gap: 48,
|
||||
}} 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={{ 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">
|
||||
<motion.img
|
||||
key={activeIndex}
|
||||
|
|
@ -303,10 +348,31 @@ export default function Experts() {
|
|||
{renderSocialIcon(activeExpert)}
|
||||
</div>
|
||||
|
||||
{/* Right/Left Text Details */}
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative' }}>
|
||||
<div style={{ position: 'absolute', top: -32, [isFa ? 'left' : 'right']: 0, opacity: 0.1, pointerEvents: 'none' }} className="max-md:hidden">
|
||||
<Quote size={64} fill="#CD9E53" color="none" />
|
||||
{/* Right Text Details Bubble */}
|
||||
<div style={{
|
||||
flex: 1,
|
||||
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>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
|
|
@ -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' }}
|
||||
>
|
||||
<h2 style={{ fontSize: 24, fontWeight: 900, color: '#032340', margin: 0 }}>
|
||||
{isFa ? activeExpert.nameFa : activeExpert.nameEn}
|
||||
{/* Name section with both Farsi and English names */}
|
||||
<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>
|
||||
<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}
|
||||
</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}
|
||||
</p>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Avatars Row at the bottom */}
|
||||
<div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap', alignItems: 'center', justifyContent: isFa ? 'flex-end' : 'flex-start' }} className="max-md:justify-center">
|
||||
{/* Overlapping Stacked Avatars at the bottom right */}
|
||||
<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) => {
|
||||
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 (
|
||||
<button
|
||||
key={exp.id}
|
||||
onClick={() => {
|
||||
setActiveIndex(idx)
|
||||
setIsPaused(true) // pause autoplay when user manually interacts
|
||||
setIsPaused(true)
|
||||
}}
|
||||
onMouseEnter={() => setHoveredAvatarIndex(idx)}
|
||||
onMouseLeave={() => setHoveredAvatarIndex(null)}
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
...overlapStyle,
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '50%',
|
||||
overflow: 'hidden',
|
||||
padding: 0,
|
||||
border: isActive ? '3px solid #CD9E53' : '2px solid transparent',
|
||||
border: isActive ? '3px solid #CD9E53' : '2px solid #fff',
|
||||
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)',
|
||||
boxShadow: isActive ? '0 4px 12px rgba(205,158,83,0.3)' : 'none',
|
||||
boxShadow: '0 4px 10px rgba(0,0,0,0.12)',
|
||||
outline: 'none',
|
||||
background: 'none'
|
||||
background: '#eae7e2'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
|
|
@ -362,7 +463,8 @@ export default function Experts() {
|
|||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
filter: isActive ? 'none' : 'grayscale(30%)'
|
||||
filter: (isActive || isHovered) ? 'none' : 'grayscale(100%)',
|
||||
transition: 'filter 0.3s ease'
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue