83 lines
5.1 KiB
TypeScript
83 lines
5.1 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
import { useLang } from '@/context/LangContext'
|
|
|
|
const SIGNALS = {
|
|
fa: [
|
|
{ tag: 'چین', title: 'صادرات فولاد چین به بالاترین رکورد ۸ ساله رسید', date: 'بهمن ۱۴۰۳', level: 'critical' },
|
|
{ tag: 'اروپا', title: 'CBAM اروپا از فروردین ۱۴۰۴ اجرایی میشود', date: 'دی ۱۴۰۳', level: 'high' },
|
|
{ tag: 'هند', title: 'هند ظرفیت تولید فولاد خود را تا ۲۰۳۰ دو برابر میکند', date: 'آذر ۱۴۰۳', level: 'medium' },
|
|
{ tag: 'سنگآهن', title: 'قیمت سنگآهن دالیان ۱۸٪ جهش کرد', date: 'بهمن ۱۴۰۳', level: 'high' },
|
|
{ tag: 'انرژی', title: 'هزینه برق صنایع فولاد ۳۲٪ افزایش یافت', date: 'دی ۱۴۰۳', level: 'high' },
|
|
{ tag: 'فناوری', title: 'اولین کارخانه فولاد هیدروژنی اروپا وارد مرحله تولید شد', date: 'آذر ۱۴۰۳', level: 'medium' },
|
|
],
|
|
en: [
|
|
{ tag: 'China', title: "China's Steel Exports Hit an 8-Year Record High", date: 'Feb 2025', level: 'critical' },
|
|
{ tag: 'Europe', title: "Europe's CBAM Mechanism Takes Effect from Spring 2025", date: 'Jan 2025', level: 'high' },
|
|
{ tag: 'India', title: 'India to Double Steel Production Capacity by 2030', date: 'Dec 2024', level: 'medium' },
|
|
{ tag: 'Iron Ore', title: 'Dalian Iron Ore Price Surges 18%', date: 'Feb 2025', level: 'high' },
|
|
{ tag: 'Energy', title: 'Steel Industry Electricity Costs Rise 32%', date: 'Jan 2025', level: 'high' },
|
|
{ tag: 'Technology', title: "Europe's First Hydrogen Steel Plant Enters Production", date: 'Dec 2024', level: 'medium' },
|
|
],
|
|
}
|
|
|
|
const LEVEL_COLOR: Record<string, string> = {
|
|
critical: '#7f1d1d',
|
|
high: 'var(--red)',
|
|
medium: '#b45309',
|
|
}
|
|
|
|
const LEVEL_LABEL = {
|
|
fa: { critical: 'بحرانی', high: 'بالا', medium: 'متوسط' },
|
|
en: { critical: 'Critical', high: 'High', medium: 'Medium' },
|
|
}
|
|
|
|
const T = {
|
|
fa: { overline: 'FUTURE RADAR', heading: 'رادار آینده', sub: 'رصد سیگنالهای جهانی و منطقهای با اثر مستقیم بر صنعت فولاد ایران' },
|
|
en: { overline: 'FUTURE RADAR', heading: 'Future Radar', sub: 'Monitoring global and regional signals with direct impact on Iran\'s steel industry' },
|
|
}
|
|
|
|
export default function Radar() {
|
|
const { lang } = useLang()
|
|
const t = T[lang]
|
|
const signals = SIGNALS[lang]
|
|
const levelLabel = LEVEL_LABEL[lang]
|
|
|
|
return (
|
|
<div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
|
|
<div style={{ borderBottom: '3px solid var(--ink)' }}>
|
|
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 40 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
|
|
<div style={{ width: 36, height: 2, background: 'var(--red)' }} />
|
|
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.overline}</span>
|
|
</div>
|
|
<h1 style={{ fontSize: 'clamp(28px,4vw,52px)', fontWeight: 900, letterSpacing: '-1.5px', color: 'var(--ink)', marginBottom: 12 }}>{t.heading}</h1>
|
|
<p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.7, maxWidth: 560 }}>{t.sub}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
|
|
{signals.map((s, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 12 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.4, delay: i * 0.06 }}
|
|
style={{ background: 'var(--paper)', padding: '28px 24px', position: 'relative' }}
|
|
>
|
|
<div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 3, background: LEVEL_COLOR[s.level] }} />
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
|
|
<span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', background: 'var(--ink)', color: 'var(--paper)', padding: '3px 8px' }}>{s.tag}</span>
|
|
<span style={{ fontSize: 9, fontWeight: 700, color: LEVEL_COLOR[s.level], letterSpacing: '1px' }}>{levelLabel[s.level as keyof typeof levelLabel]}</span>
|
|
</div>
|
|
<h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.55, marginBottom: 16 }}>{s.title}</h3>
|
|
<div style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 600 }}>{s.date}</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|