Pulse page: live market bar, price table, product coverage, form, i18n
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
alireza
parent
743888429b
commit
7d7063b6e8
|
|
@ -10,7 +10,6 @@ export default function RootLayout() {
|
|||
<LangProvider>
|
||||
<div style={{ minHeight: '100dvh', display: 'flex', flexDirection: 'column' }}>
|
||||
<Header />
|
||||
{pathname === '/pulse' && <MarketStrip />}
|
||||
<main style={{ flex: 1 }}>
|
||||
<Outlet />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,154 @@
|
|||
import { useEffect } from 'react'
|
||||
import { AnimatePresence, motion } from 'framer-motion'
|
||||
import { X } from 'lucide-react'
|
||||
|
||||
export interface CardDetail {
|
||||
tag: string
|
||||
title: string
|
||||
date?: string
|
||||
levelLabel?: string
|
||||
levelColor?: string
|
||||
topBarColor?: string
|
||||
num?: string
|
||||
lead: string
|
||||
body: string[]
|
||||
bullets: string[]
|
||||
iranImpact: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
item: CardDetail | null
|
||||
onClose: () => void
|
||||
lang: 'fa' | 'en'
|
||||
}
|
||||
|
||||
const L = {
|
||||
fa: { keyPoints: 'نکات کلیدی', iranImpact: 'تأثیر بر صنعت فولاد ایران', close: 'بستن' },
|
||||
en: { keyPoints: 'Key Points', iranImpact: "Impact on Iran's Steel Industry", close: 'Close' },
|
||||
}
|
||||
|
||||
export default function DetailSheet({ item, onClose, lang }: Props) {
|
||||
useEffect(() => {
|
||||
if (!item) return
|
||||
const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
|
||||
document.addEventListener('keydown', handler)
|
||||
document.body.style.overflow = 'hidden'
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handler)
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}, [item, onClose])
|
||||
|
||||
const lbl = L[lang]
|
||||
const dir = lang === 'fa' ? 'rtl' : 'ltr'
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{item && (
|
||||
<motion.div
|
||||
key="overlay"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.18 }}
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 200,
|
||||
background: 'rgba(10,8,5,0.58)',
|
||||
backdropFilter: 'blur(3px)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<motion.aside
|
||||
key="panel"
|
||||
dir={dir}
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 12 }}
|
||||
transition={{ type: 'spring', damping: 30, stiffness: 320 }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: 'min(700px, 100%)',
|
||||
maxHeight: '90vh',
|
||||
background: 'var(--paper)',
|
||||
overflowY: 'auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
boxShadow: '0 32px 80px rgba(0,0,0,0.30)',
|
||||
}}
|
||||
>
|
||||
{/* colored top bar */}
|
||||
<div style={{ height: 4, background: item.topBarColor || 'var(--ink)', flexShrink: 0 }} />
|
||||
|
||||
{/* header */}
|
||||
<div style={{ padding: '28px 32px 24px', borderBottom: '1px solid var(--rule-thin)', flexShrink: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
|
||||
<span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', background: 'var(--ink)', color: 'var(--paper)', padding: '3px 10px' }}>{item.tag}</span>
|
||||
{item.levelLabel && (
|
||||
<span style={{ fontSize: 9, fontWeight: 700, color: item.levelColor, letterSpacing: '1px' }}>{item.levelLabel}</span>
|
||||
)}
|
||||
{item.date && (
|
||||
<span style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 600 }}>{item.date}</span>
|
||||
)}
|
||||
{item.num && (
|
||||
<span style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 700, letterSpacing: '1px' }}>#{item.num}</span>
|
||||
)}
|
||||
</div>
|
||||
<h2 style={{ fontSize: 'clamp(16px,2.4vw,21px)', fontWeight: 900, color: 'var(--ink)', lineHeight: 1.4, letterSpacing: '-0.4px' }}>{item.title}</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label={lbl.close}
|
||||
style={{ flexShrink: 0, width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--paper-2)', border: 'none', cursor: 'pointer', color: 'var(--ink-3)' }}
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* body */}
|
||||
<div style={{ padding: '32px', overflowY: 'auto', flex: 1 }}>
|
||||
|
||||
{/* lead */}
|
||||
<p style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.7, marginBottom: 24, borderRight: lang === 'fa' ? '3px solid var(--red)' : 'none', borderLeft: lang === 'en' ? '3px solid var(--red)' : 'none', paddingRight: lang === 'fa' ? 16 : 0, paddingLeft: lang === 'en' ? 16 : 0 }}>
|
||||
{item.lead}
|
||||
</p>
|
||||
|
||||
{/* body paragraphs */}
|
||||
{item.body.map((para, i) => (
|
||||
<p key={i} style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.85, marginBottom: 16 }}>{para}</p>
|
||||
))}
|
||||
|
||||
{/* key points */}
|
||||
<div style={{ margin: '28px 0', padding: '20px 24px', background: 'var(--paper-2)' }}>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', marginBottom: 16, textTransform: 'uppercase' }}>{lbl.keyPoints}</div>
|
||||
<ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{item.bullets.map((b, i) => (
|
||||
<li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'var(--ink)', lineHeight: 1.6 }}>
|
||||
<span style={{ flexShrink: 0, width: 5, height: 5, borderRadius: '50%', background: 'var(--red)', marginTop: 7 }} />
|
||||
{b}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Iran impact */}
|
||||
<div style={{ borderTop: '1px solid var(--rule-thin)', paddingTop: 24 }}>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--red)', marginBottom: 12, textTransform: 'uppercase' }}>{lbl.iranImpact}</div>
|
||||
<p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.85 }}>{item.iranImpact}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.aside>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,26 +1,119 @@
|
|||
import { motion } from 'framer-motion'
|
||||
import { useLang } from '@/context/LangContext'
|
||||
|
||||
const SIGNALS = {
|
||||
fa: [
|
||||
{ tag: 'تحریم', title: 'بسته تحریمی جدید آمریکا — محدودیت صادرات محصولات فولادی از طریق واسطههای ثالث', date: 'فروردین ۱۴۰۴', level: 'critical' },
|
||||
{ tag: 'چین', title: 'صادرات ۱۱۲ میلیون تنی فولاد چین در ۱۴۰۳ — رکورد جدید و فشار قیمتی جهانی', date: 'اسفند ۱۴۰۳', level: 'critical' },
|
||||
{ tag: 'روسیه', title: 'تغییر مسیر فولاد روسیه به آسیا — فشار بر قیمت فولاد ایران در بازار هند و چین', date: 'بهمن ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'OPEC+', title: 'کاهش تولید نفت OPEC+ و تأثیر آن بر سرمایهگذاری زیرساختی در خاورمیانه', date: 'دی ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'هند', title: 'هند واردات فولاد از ایران را مشروط به تأیید کیفیت BIS کرد — موانع جدید صادراتی', date: 'آذر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'دلار', title: 'افزایش ۱۸٪ نرخ دلار — فشار بر هزینههای واردات و کاهش حاشیه سود صادراتی', date: 'آبان ۱۴۰۳', level: 'critical' },
|
||||
{ tag: 'عراق', title: 'عراق تعرفه واردات فولاد را به ۱۵٪ افزایش داد — کاهش جذابیت بازار هدف اصلی', date: 'مهر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'اروپا', title: 'اروپا تعرفه ضددامپینگ ۲۵٪ بر واردات فولاد از آسیا — اثر غیرمستقیم بر ایران', date: 'شهریور ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'قطر', title: 'قطر مناقصه ۴۰۰ هزار تن میلگرد برای پروژههای جامجهانی ۲۰۳۴ را منتشر کرد', date: 'مرداد ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'پاکستان', title: 'بحران ارزی پاکستان — توقف اعتبارات اسنادی و اختلال در پرداختهای صادراتی ایران', date: 'تیر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'ترکیه', title: 'ترکیه ۳.۲ میلیون تن فولاد از روسیه وارد کرد — رقیب جدی ایران در بازارهای مشترک', date: 'خرداد ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'SCO', title: 'الحاق رسمی ایران به SCO — فرصت برای تجارت غیردلاری فولاد با اعضا', date: 'اردیبهشت ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'افغانستان', title: 'آمارهای صادرات: افغانستان سومین بازار هدف فولاد ایران با رشد ۳۸٪', date: 'فروردین ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'سنگآهن', title: 'رقابت چین و هند بر منابع سنگآهن استرالیا — افزایش هزینه تأمین مواد خام ایران', date: 'اسفند ۱۴۰۲', level: 'high' },
|
||||
],
|
||||
en: [
|
||||
{ tag: 'Sanctions', title: 'New US sanctions package — restrictions on steel exports via third-party intermediaries', date: 'Apr 2025', level: 'critical' },
|
||||
{ tag: 'China', title: "China's 112Mt steel exports in 1403 — new record and global price pressure", date: 'Mar 2025', level: 'critical' },
|
||||
{ tag: 'Russia', title: 'Russian steel rerouted to Asia — price pressure on Iranian steel in India and China', date: 'Feb 2025', level: 'high' },
|
||||
{ tag: 'OPEC+', title: 'OPEC+ output cuts and impact on infrastructure investment in the Middle East', date: 'Jan 2025', level: 'high' },
|
||||
{ tag: 'India', title: 'India conditions Iranian steel imports on BIS quality approval — new export barriers', date: 'Dec 2024', level: 'high' },
|
||||
{ tag: 'USD/IRR', title: '18% USD rate increase — import cost pressure and shrinking export margins', date: 'Nov 2024', level: 'critical' },
|
||||
{ tag: 'Iraq', title: 'Iraq raises steel import tariff to 15% — key target market becomes less attractive', date: 'Oct 2024', level: 'high' },
|
||||
{ tag: 'Europe', title: 'EU 25% anti-dumping tariff on Asian steel — indirect impact on Iran', date: 'Sep 2024', level: 'medium' },
|
||||
{ tag: 'Qatar', title: 'Qatar issues tender for 400k tonnes of rebar for 2034 World Cup projects', date: 'Aug 2024', level: 'medium' },
|
||||
{ tag: 'Pakistan', title: 'Pakistan currency crisis — halt to LCs disrupts Iranian export payments', date: 'Jul 2024', level: 'high' },
|
||||
{ tag: 'Turkey', title: 'Turkey imports 3.2Mt of steel from Russia — serious rival in shared markets', date: 'Jun 2024', level: 'medium' },
|
||||
{ tag: 'SCO', title: "Iran's formal SCO accession — opportunity for non-dollar steel trade with members", date: 'May 2024', level: 'medium' },
|
||||
{ tag: 'Afghanistan', title: 'Export data: Afghanistan is Iran\'s 3rd largest steel market, growing 38%', date: 'Apr 2024', level: 'medium' },
|
||||
{ tag: 'Iron Ore', title: 'China–India competition for Australian iron ore — rising raw material costs for Iran', date: 'Mar 2024', level: 'high' },
|
||||
],
|
||||
}
|
||||
|
||||
const SCENARIOS = {
|
||||
fa: [
|
||||
{ num: '۰۱', tag: 'سناریو پایه', title: 'تداوم وضعیت موجود — رشد ۳٪ صادرات در بازارهای منطقهای', summary: 'در صورت ادامه سیاستهای فعلی و بدون تغییر جدی در تحریمها، صادرات فولاد ایران سالانه ۳٪ رشد میکند — بازارهای هدف: عراق، افغانستان، پاکستان' },
|
||||
{ num: '۰۲', tag: 'سناریو صعودی', title: 'توافق دیپلماتیک — گشایش بازارهای اروپایی و کره جنوبی', summary: 'در صورت کاهش تحریمها، امکان صادرات ۳ میلیون تن به بازارهای پریمیوم اروپایی با حاشیه سود ۴۰٪ بالاتر وجود دارد — نیاز به گواهینامههای بینالمللی' },
|
||||
{ num: '۰۳', tag: 'سناریو نزولی', title: 'تشدید تحریمها — انزوای کامل از شبکههای مالی بینالمللی', summary: 'بسته شدن کانالهای پرداخت غیررسمی، کاهش ۳۰٪ صادرات و فشار شدید بر حاشیه سود — نیاز به تنوعبخشی بازار داخلی و افزایش مصرف در پروژههای ملی' },
|
||||
{ num: '۰۴', tag: 'ریسک چین', title: 'افزایش صادرات چین به بازارهای هدف ایران — رقابت قیمتی شدید', summary: 'اگر چین صادرات به عراق و پاکستان را ۲۰٪ افزایش دهد، حاشیه رقابتی ایران در این بازارها به شدت فشرده میشود — نیاز به کاهش هزینه تولید ۸٪ یا تمایزبخشی کیفی' },
|
||||
{ num: '۰۵', tag: 'فرصت SCO', title: 'تجارت فولاد در چارچوب SCO با ارزهای ملی — دور زدن دلار', summary: 'معامله مستقیم ریال–روپیه–یوان در صادرات فولاد، کاهش ریسک نرخ ارز و دسترسی به بازار ۳ میلیارد نفری بدون محدودیتهای SWIFT' },
|
||||
{ num: '۰۶', tag: 'زیرساخت منطقه', title: 'رونق پروژههای زیرساختی خلیج فارس — فرصت ۸ میلیون تن', summary: 'برنامههای Vision 2030 عربستان، Neom، جامجهانی قطر ۲۰۳۴ و پروژههای کویت — ظرفیت جذب ۸ میلیون تن فولاد تا ۲۰۳۵ از منطقه' },
|
||||
],
|
||||
en: [
|
||||
{ num: '01', tag: 'Base Scenario', title: 'Status quo — 3% annual export growth in regional markets', summary: 'If current policies continue with no major shift in sanctions, Iranian steel exports grow 3% annually — target markets: Iraq, Afghanistan, Pakistan' },
|
||||
{ num: '02', tag: 'Bull Scenario', title: 'Diplomatic deal — access to European and South Korean markets', summary: 'With sanctions relief, potential to export 3Mt to premium European markets at 40% higher margins — requires international certifications' },
|
||||
{ num: '03', tag: 'Bear Scenario', title: 'Sanctions escalation — full isolation from global financial networks', summary: 'Closure of informal payment channels, 30% export decline and severe margin pressure — requires domestic market diversification and national project absorption' },
|
||||
{ num: '04', tag: 'China Risk', title: "China increasing exports to Iran's target markets — intense price competition", summary: 'If China grows exports to Iraq and Pakistan by 20%, Iran\'s competitive margin in these markets is severely squeezed — requires 8% production cost reduction or quality differentiation' },
|
||||
{ num: '05', tag: 'SCO Opportunity', title: 'Steel trade within SCO in local currencies — bypassing the dollar', summary: 'Direct Rial–Rupee–Yuan trade in steel exports, reduced FX risk, and access to 3 billion-person market without SWIFT restrictions' },
|
||||
{ num: '06', tag: 'Regional Infra', title: 'Gulf infrastructure boom — 8 million tonne opportunity', summary: 'Saudi Vision 2030, NEOM, Qatar 2034 World Cup, Kuwait projects — capacity to absorb 8Mt of steel from the region by 2035' },
|
||||
],
|
||||
}
|
||||
|
||||
const KPIS = {
|
||||
fa: [
|
||||
{ value: '۸.۷', unit: 'میلیون تن', label: 'صادرات فولاد ایران ۱۴۰۳', delta: '+۱.۸٪ رشد سالانه' },
|
||||
{ value: '۱۴', unit: 'کشور', label: 'بازارهای هدف صادراتی', delta: 'عراق، افغانستان، پاکستان اول' },
|
||||
{ value: '۳۸٪', unit: '', label: 'سهم بازار عراق از صادرات', delta: 'بزرگترین مقصد' },
|
||||
{ value: '۱۱۲', unit: 'میلیون تن', label: 'صادرات فولاد چین ۱۴۰۳', delta: 'رکورد ۸ ساله' },
|
||||
{ value: '۴.۲', unit: 'میلیارد $', label: 'ارزش صادرات فولادی ایران', delta: '+۱۲٪ نسبت به ۱۴۰۲' },
|
||||
],
|
||||
en: [
|
||||
{ value: '8.7', unit: 'Mt', label: 'Iran steel exports 1403', delta: '+1.8% annual growth' },
|
||||
{ value: '14', unit: 'countries', label: 'Export target markets', delta: 'Iraq, Afghanistan, Pakistan lead' },
|
||||
{ value: '38%', unit: '', label: 'Iraq share of exports', delta: 'Largest destination' },
|
||||
{ value: '112', unit: 'Mt', label: 'China steel exports 1403', delta: '8-year record' },
|
||||
{ value: '$4.2', unit: 'B', label: 'Value of Iranian steel exports', delta: '+12% vs 1402' },
|
||||
],
|
||||
}
|
||||
|
||||
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: 'GEOPOLITICS & GLOBAL ECONOMY',
|
||||
heading: 'ژئوپلیتیک و اقتصاد جهانی',
|
||||
sub: 'تحلیل ریسکهای کلان، سناریوهای ژئوپلیتیک و اثر آنها بر صنعت فولاد ایران',
|
||||
soon: 'محتوا بهزودی منتشر میشود',
|
||||
overline: 'GEOPOLITICS & GLOBAL ECONOMY',
|
||||
heading: 'ژئوپلیتیک و اقتصاد جهانی',
|
||||
sub: 'تحلیل ریسکهای کلان، پویاییهای تجاری و سناریوهای ژئوپلیتیک با اثر مستقیم بر صنعت فولاد ایران',
|
||||
kpiHeading: 'شاخصهای کلیدی تجارت بینالمللی فولاد ایران',
|
||||
sigHeading: 'رویدادها و ریسکهای ژئوپلیتیک',
|
||||
scenHeading: 'سناریوهای استراتژیک — افق ۱۴۰۶',
|
||||
},
|
||||
en: {
|
||||
overline: 'GEOPOLITICS & GLOBAL ECONOMY',
|
||||
heading: 'Geopolitics & Global Economy',
|
||||
sub: "Analysis of macro risks, geopolitical scenarios, and their impact on Iran's steel industry",
|
||||
soon: 'Content coming soon',
|
||||
overline: 'GEOPOLITICS & GLOBAL ECONOMY',
|
||||
heading: 'Geopolitics & Global Economy',
|
||||
sub: 'Macro risk analysis, trade dynamics, and geopolitical scenarios with direct impact on Iran\'s steel industry',
|
||||
kpiHeading: 'Key International Trade KPIs — Iranian Steel',
|
||||
sigHeading: 'Geopolitical Events & Risks',
|
||||
scenHeading: 'Strategic Scenarios — Horizon 2027',
|
||||
},
|
||||
}
|
||||
|
||||
export default function Geopolitics() {
|
||||
const { lang } = useLang()
|
||||
const t = T[lang]
|
||||
const signals = SIGNALS[lang]
|
||||
const scenarios = SCENARIOS[lang]
|
||||
const kpis = KPIS[lang]
|
||||
const levelLabel = LEVEL_LABEL[lang]
|
||||
|
||||
return (
|
||||
<div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<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 }}>
|
||||
|
|
@ -31,9 +124,79 @@ export default function Geopolitics() {
|
|||
<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: 80, paddingBottom: 80, textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 15, color: 'var(--ink-4)' }}>{t.soon}</p>
|
||||
|
||||
{/* ── KPI Strip ── */}
|
||||
<div style={{ borderBottom: '1px solid var(--rule-thin)', background: 'var(--paper-2)' }}>
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 36, paddingBottom: 36 }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', marginBottom: 20, textTransform: 'uppercase' }}>{t.kpiHeading}</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24 }}>
|
||||
{kpis.map((k, i) => (
|
||||
<motion.div key={i} initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.07 }}>
|
||||
<div style={{ fontSize: 'clamp(26px,3vw,38px)', fontWeight: 900, letterSpacing: '-1px', color: 'var(--ink)', lineHeight: 1 }}>
|
||||
{k.value}<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-3)', marginRight: 4, marginLeft: 4 }}>{k.unit}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.5 }}>{k.label}</div>
|
||||
<div style={{ fontSize: 10, color: 'var(--red)', fontWeight: 700, marginTop: 4 }}>{k.delta}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Risk Signals ── */}
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
|
||||
<div style={{ width: 36, height: 2, background: 'var(--red)' }} />
|
||||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.sigHeading}</span>
|
||||
</div>
|
||||
<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.04 }}
|
||||
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>
|
||||
|
||||
{/* ── Strategic Scenarios ── */}
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
|
||||
<div style={{ width: 36, height: 2, background: 'var(--red)' }} />
|
||||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.scenHeading}</span>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
|
||||
{scenarios.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: 'var(--ink)' }} />
|
||||
<div style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-3px', color: 'rgba(26,23,18,0.06)', lineHeight: 1, marginBottom: 10, direction: 'ltr' }}>{s.num}</div>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', color: 'var(--red)', marginBottom: 10, textTransform: 'uppercase' }}>{s.tag}</div>
|
||||
<h3 style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.45, marginBottom: 12 }}>{s.title}</h3>
|
||||
<p style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.7 }}>{s.summary}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,111 +1,111 @@
|
|||
import { marketPrices } from '@/data/market'
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
|
||||
const prices = marketPrices.slice(0, 4)
|
||||
const BASE_METALS = [
|
||||
{ id: 'cu', name: 'مس', value: 9_512, unit: '$/t', change: +1.4, trend: 'up' as const },
|
||||
{ id: 'al', name: 'آلومینیوم', value: 2_548, unit: '$/t', change: -0.8, trend: 'down' as const },
|
||||
{ id: 'zn', name: 'روی', value: 2_913, unit: '$/t', change: +0.5, trend: 'up' as const },
|
||||
{ id: 'ni', name: 'نیکل', value: 16_840, unit: '$/t', change: -1.2, trend: 'down' as const },
|
||||
{ id: 'pb', name: 'سرب', value: 1_924, unit: '$/t', change: +0.3, trend: 'up' as const },
|
||||
{ id: 'sn', name: 'قلع', value: 26_150, unit: '$/t', change: -0.6, trend: 'down' as const },
|
||||
]
|
||||
|
||||
const UPDATE_LOG = [
|
||||
{ label: 'شمش فولاد', delta: '+۱۲۰', t: '۱۴:۴۸' },
|
||||
{ label: 'میلگرد A3', delta: '-۸۵', t: '۱۴:۴۵' },
|
||||
{ label: 'آهن قراضه', delta: '+۶', t: '۱۴:۴۱' },
|
||||
{ label: 'تیرآهن ۱۴', delta: '+۲۱۰', t: '۱۴:۳۷' },
|
||||
{ label: 'فرو منگنز', delta: '-۳۰', t: '۱۴:۳۲' },
|
||||
]
|
||||
|
||||
export default function SnapshotBar() {
|
||||
const [now, setNow] = useState(() => new Date())
|
||||
const [logIdx, setLogIdx] = useState(0)
|
||||
const logRef = useRef(logIdx)
|
||||
logRef.current = logIdx
|
||||
|
||||
useEffect(() => {
|
||||
const c = setInterval(() => setNow(new Date()), 1000)
|
||||
const l = setInterval(() => setLogIdx(i => (i + 1) % UPDATE_LOG.length), 2600)
|
||||
return () => { clearInterval(c); clearInterval(l) }
|
||||
}, [])
|
||||
|
||||
const hh = now.getHours().toString().padStart(2, '0')
|
||||
const mm = now.getMinutes().toString().padStart(2, '0')
|
||||
const ss = now.getSeconds().toString().padStart(2, '0')
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '2px solid var(--ink)',
|
||||
backgroundColor: 'var(--paper-2)',
|
||||
direction: 'rtl',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="grid grid-cols-4 max-md:grid-cols-2 max-w-7xl mx-auto w-full px-12 max-md:px-6"
|
||||
>
|
||||
{prices.map((price, idx) => {
|
||||
const isLast = idx === prices.length - 1
|
||||
const isUp = price.trend === 'up'
|
||||
const isDown = price.trend === 'down'
|
||||
const arrow = isUp ? '↑' : isDown ? '↓' : '—'
|
||||
const changeColor = isUp
|
||||
? 'var(--green-ink)'
|
||||
: isDown
|
||||
? 'var(--red)'
|
||||
: 'var(--ink-4)'
|
||||
<div style={{ direction: 'rtl', borderBottom: '2px solid var(--ink)', width: '100%', overflow: 'hidden' }}>
|
||||
{/* grid: metals(1fr) | sidebar(200px) — in RTL: metals=right, sidebar=left */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 200px' }} className="max-md:!grid-cols-1">
|
||||
|
||||
return (
|
||||
<div
|
||||
key={price.id}
|
||||
style={{
|
||||
padding: '28px 0',
|
||||
borderRight: isLast ? 'none' : '1px solid var(--rule-thin)',
|
||||
paddingLeft: idx === 0 ? '0' : '28px',
|
||||
paddingRight: idx === prices.length - 1 ? '0' : '28px',
|
||||
}}
|
||||
className={`max-md:${
|
||||
idx % 2 === 1
|
||||
? 'border-r-0'
|
||||
: idx < 2
|
||||
? 'border-b border-[var(--rule-thin)]'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{/* Label */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: 11,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '2px',
|
||||
color: 'var(--ink-5)',
|
||||
marginBottom: 8,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{price.name}
|
||||
{/* metals tiles */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)' }} className="max-lg:!grid-cols-3 max-sm:!grid-cols-2">
|
||||
{BASE_METALS.map((m, idx) => (
|
||||
<div key={m.id} style={{
|
||||
padding: '12px 14px',
|
||||
borderRight: idx < BASE_METALS.length - 1 ? '1px solid var(--rule-thin)' : 'none',
|
||||
}}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-4)', marginBottom: 4 }}>{m.name}</div>
|
||||
<div style={{ fontSize: 16, fontWeight: 900, color: 'var(--ink)', lineHeight: 1, marginBottom: 3, fontVariantNumeric: 'tabular-nums' }}>
|
||||
{m.value.toLocaleString()}
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '22px',
|
||||
fontWeight: 900,
|
||||
letterSpacing: '-0.5px',
|
||||
color: 'var(--ink)',
|
||||
lineHeight: 1.1,
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
>
|
||||
{price.value.toLocaleString('fa-IR')}
|
||||
</div>
|
||||
|
||||
{/* Change row */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: 700,
|
||||
color: changeColor,
|
||||
}}
|
||||
>
|
||||
{arrow}{' '}
|
||||
{Math.abs(price.changePercent).toLocaleString('fa-IR', {
|
||||
minimumFractionDigits: 1,
|
||||
maximumFractionDigits: 1,
|
||||
})}
|
||||
٪
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
color: 'var(--ink-4)',
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{price.unit}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
|
||||
<span style={{ fontSize: 10, fontWeight: 700, color: m.trend === 'up' ? 'var(--green-ink)' : 'var(--red)' }}>
|
||||
{m.trend === 'up' ? '↑' : '↓'} {Math.abs(m.change).toFixed(1)}٪
|
||||
</span>
|
||||
<span style={{ fontSize: 9, color: 'var(--ink-5)' }}>{m.unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* sidebar */}
|
||||
<div style={{
|
||||
background: 'var(--ink)', color: 'var(--paper)',
|
||||
padding: '14px 18px',
|
||||
display: 'flex', flexDirection: 'column', gap: 10,
|
||||
borderRight: '1px solid rgba(255,255,255,0.08)',
|
||||
}} className="max-md:hidden">
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<span style={{ position: 'relative', display: 'inline-flex' }}>
|
||||
<span style={{ width: 7, height: 7, borderRadius: '50%', background: '#4ade80', display: 'block' }} />
|
||||
<span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: '#4ade80', animation: 'ping 1.4s cubic-bezier(0,0,0.2,1) infinite' }} />
|
||||
</span>
|
||||
<span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '2px', color: '#4ade80' }}>LIVE</span>
|
||||
</div>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, fontVariantNumeric: 'tabular-nums', color: 'rgba(255,255,255,0.65)', fontFamily: 'monospace' }}>
|
||||
{hh}:{mm}:{ss}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 8 }}>
|
||||
<div style={{ fontSize: 9, letterSpacing: '2px', color: 'rgba(255,255,255,0.3)', marginBottom: 7 }}>آخرین تغییرات</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 5, overflow: 'hidden', height: 72 }}>
|
||||
{UPDATE_LOG.map((item, i) => {
|
||||
const dist = (i - logIdx + UPDATE_LOG.length) % UPDATE_LOG.length
|
||||
const opacity = dist === 0 ? 1 : dist === 1 ? 0.5 : dist === 2 ? 0.22 : 0
|
||||
return (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', opacity, transition: 'opacity 0.5s', fontSize: 10.5 }}>
|
||||
<span style={{ color: 'rgba(255,255,255,0.75)' }}>{item.label}</span>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<span style={{ fontWeight: 700, color: item.delta.startsWith('+') ? '#4ade80' : '#f87171' }}>{item.delta}</span>
|
||||
<span style={{ color: 'rgba(255,255,255,0.25)', fontSize: 9 }}>{item.t}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 7 }}>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.25)', letterSpacing: '1px' }}>بازار فولاد ایران · تهران</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<style>{`@keyframes ping { 75%,100%{transform:scale(2);opacity:0} }`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { useLang } from '@/context/LangContext'
|
||||
import SnapshotBar from '@/pages/Home/sections/SnapshotBar'
|
||||
|
||||
|
|
@ -53,8 +52,149 @@ const T = {
|
|||
},
|
||||
}
|
||||
|
||||
const TX = {
|
||||
fa: {
|
||||
tableHeaders: ['عنوان', 'بیشترین', 'کمترین', 'آخرین', '۳۰ روز', '۶۰ روز', '۹۰ روز', '۱۸۰ روز', '۳۶۰ روز'],
|
||||
paywallCta: 'برای مشاهده کامل، عضویت سازمانی دریافت کنید ←',
|
||||
coverageTitle: 'پوشش قیمتی زنجیره فولاد',
|
||||
productLabel: 'محصول', indexLabel: 'شاخص', sourceLabel: 'منبع داده',
|
||||
membersOnly: 'MEMBERS ONLY',
|
||||
coverageDesc: 'دسترسی کامل به قیمتهای لحظهای، تاریخی و گزارشهای تحلیلی هفتگی برای تمام محصولات.',
|
||||
coverageFeatures: ['قیمتهای لحظهای و تاریخی', 'گزارشهای هفتگی اختصاصی', 'نمودارهای تعاملی دانلودی', 'پشتیبانی تحلیلی'],
|
||||
sectionsLabel: 'حوزههای پوشش',
|
||||
contentSections: ['صنعت فولاد', 'بازار سرمایه', 'فلزات و کامودیتی', 'ارزهای دیجیتال', 'بازار ارز و طلا', 'اقتصاد کلان'],
|
||||
dsTitle: 'دسترسی به گزارشهای Platts، Fastmarkets و منابع برتر جهانی',
|
||||
dsBody: 'بیشتر سازمانهای ایرانی به این منابع دسترسی ندارند — اشتراک جداگانهشان چندین هزار دلار در سال هزینه دارد. اعضای اندیشکده از گزارشهای روزانه و هفتگی Platts، Fastmarkets، Bainfo China و Dlpibica بهرهمند میشوند؛ دادههایی که مستقیماً قیمتگذاری، خرید و تصمیمات صادراتی را تغییر میدهند.',
|
||||
requestBtn: 'درخواست عضویت سازمانی ←',
|
||||
contactNote: 'تیم ما ظرف ۴۸ ساعت تماس میگیرد',
|
||||
},
|
||||
en: {
|
||||
tableHeaders: ['Title', 'High', 'Low', 'Last', '30D', '60D', '90D', '180D', '360D'],
|
||||
paywallCta: 'Subscribe for full access →',
|
||||
coverageTitle: 'Steel Chain Price Coverage',
|
||||
productLabel: 'Products', indexLabel: 'Indicators', sourceLabel: 'Data Sources',
|
||||
membersOnly: 'MEMBERS ONLY',
|
||||
coverageDesc: 'Full access to real-time, historical prices and weekly analytical reports for all products.',
|
||||
coverageFeatures: ['Real-time & historical prices', 'Exclusive weekly reports', 'Interactive downloadable charts', 'Dedicated analytical support'],
|
||||
sectionsLabel: 'Coverage Areas',
|
||||
contentSections: ['Steel Industry', 'Capital Markets', 'Metals & Commodities', 'Digital Assets', 'FX & Gold', 'Macro Economy'],
|
||||
dsTitle: 'Access to Platts, Fastmarkets and Top Global Data Sources',
|
||||
dsBody: 'Most Iranian organizations lack direct access to these sources — individual subscriptions cost thousands of dollars per year. Institute members benefit from daily and weekly reports from Platts, Fastmarkets, Bainfo China, and Dlpibica; data that directly impacts pricing, procurement, and export decisions.',
|
||||
requestBtn: 'Request Organizational Membership →',
|
||||
contactNote: 'Our team will contact you within 48 hours',
|
||||
},
|
||||
}
|
||||
|
||||
const SLIDES = Array.from({ length: 13 }, (_, i) => `/${i + 1}.jpg`)
|
||||
|
||||
/* ─── price table data ───────────────────────────────────── */
|
||||
const PRICE_TABLE_ROWS = [
|
||||
{ title: 'سنگ نیکل - Carbonate, Mn ۱۳%min EXW China', high: 855.06, low: 898.57, last: 739.35, d30: 9.99, d60: 7.89, d90: 5.23, d180: -6.92, d360: 7.88 },
|
||||
{ title: 'فرو نیکل - S.A. ۳۶%min In Qinzhou Port', high: 892.53, low: 826.70, last: 751.05, d30: -6.31, d60: 8.48, d90: 2.43, d180: 5.13, d360: 3.89 },
|
||||
{ title: 'کاند نیکل - Carbonate, Mn ۱۳%min EXW China', high: 804.93, low: 801.05, last: 961.74, d30: -6.35, d60: 0.12, d90: 4.44, d180: 6.81, d360: 5.95 },
|
||||
{ title: 'سنگ نیکل - S.A. ۳۷%min In Qinzhou Port', high: 774.65, low: 759.59, last: 742.73, d30: -6.03, d60: -5.78, d90: 1.21, d180: 5.82, d360: 5.47 },
|
||||
{ title: 'سولفات نیکل - Gabonese ۴۴%min In Qinzhou Port', high: 873.00, low: 895.82, last: 720.87, d30: -9.57, d60: 5.91, d90: 8.58, d180: 9.15, d360: -2.43 },
|
||||
{ title: 'کاند نیکل - Carbonate, Mn ۱۳%min EXW China', high: 926.83, low: 825.50, last: 745.22, d30: -5.03, d60: -1.54, d90: -0.53, d180: -5.85, d360: 5.54 },
|
||||
{ title: 'فرو نیکل - min FOB S.A.%۳۸', high: 885.21, low: 753.25, last: 753.76, d30: 3.45, d60: 1.07, d90: 8.25, d180: -7.04, d360: -1.44 },
|
||||
{ title: 'فرو نیکل - Carbonate, Mn ۱۳%min EXW China', high: 786.10, low: 739.25, last: 939.99, d30: 8.78, d60: -0.53, d90: 8.58, d180: -9.65, d360: 2.88 },
|
||||
]
|
||||
|
||||
function PctCell({ v }: { v: number }) {
|
||||
const pos = v > 0
|
||||
const zero = v === 0
|
||||
return (
|
||||
<td style={{
|
||||
padding: '10px 12px',
|
||||
textAlign: 'center',
|
||||
background: zero ? 'transparent' : pos ? 'rgba(46,160,67,0.15)' : 'rgba(218,54,51,0.13)',
|
||||
color: zero ? 'var(--ink-4)' : pos ? '#1a7f37' : '#cf222e',
|
||||
fontWeight: 700,
|
||||
fontSize: 12,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{v > 0 ? '+' : ''}{v.toFixed(2)}
|
||||
</td>
|
||||
)
|
||||
}
|
||||
|
||||
function PriceTable({ blurFrom, lang }: { blurFrom: number; lang: 'fa' | 'en' }) {
|
||||
const tx = TX[lang]
|
||||
return (
|
||||
<div style={{ marginBottom: 48, position: 'relative', border: '1px solid var(--rule-thin)', overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, direction: 'rtl', minWidth: 820 }}>
|
||||
<thead>
|
||||
<tr style={{ background: 'rgba(7,29,73,0.06)', borderBottom: '2px solid var(--ink)' }}>
|
||||
{tx.tableHeaders.map((h, i) => (
|
||||
<th key={h} style={{
|
||||
padding: '12px 14px',
|
||||
textAlign: i === 0 ? 'right' : 'center',
|
||||
fontWeight: 700,
|
||||
fontSize: 11,
|
||||
color: 'var(--ink-3)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{PRICE_TABLE_ROWS.map((row, i) => {
|
||||
const shouldBlur = i >= blurFrom
|
||||
return (
|
||||
<tr
|
||||
key={i}
|
||||
style={{
|
||||
borderBottom: '1px solid var(--rule-thin)',
|
||||
background: i % 2 === 0 ? 'var(--paper)' : 'var(--paper-2)',
|
||||
filter: shouldBlur ? 'blur(4px)' : 'none',
|
||||
userSelect: shouldBlur ? 'none' : 'auto',
|
||||
pointerEvents: shouldBlur ? 'none' : 'auto',
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: '10px 14px', fontWeight: 500, color: 'var(--ink)', fontSize: 11.5, direction: 'rtl', whiteSpace: 'nowrap' }}>{row.title}</td>
|
||||
<td style={{ padding: '10px 12px', textAlign: 'center', fontWeight: 700, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{row.high.toFixed(2)}</td>
|
||||
<td style={{ padding: '10px 12px', textAlign: 'center', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{row.low.toFixed(2)}</td>
|
||||
<td style={{ padding: '10px 12px', textAlign: 'center', fontWeight: 700, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{row.last.toFixed(2)}</td>
|
||||
<PctCell v={row.d30} />
|
||||
<PctCell v={row.d60} />
|
||||
<PctCell v={row.d90} />
|
||||
<PctCell v={row.d180} />
|
||||
<PctCell v={row.d360} />
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* paywall overlay over blurred rows */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: `${((PRICE_TABLE_ROWS.length - blurFrom) / PRICE_TABLE_ROWS.length) * 100}%`,
|
||||
background: 'linear-gradient(to bottom, transparent 0%, rgba(var(--paper-rgb,255,255,255),0.7) 40%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
pointerEvents: 'none',
|
||||
}}>
|
||||
<div style={{
|
||||
background: 'var(--ink)',
|
||||
color: 'var(--paper)',
|
||||
padding: '8px 20px',
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
letterSpacing: '1.5px',
|
||||
pointerEvents: 'auto',
|
||||
}}>
|
||||
{tx.paywallCta}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ImageSlider() {
|
||||
const [current, setCurrent] = useState(0)
|
||||
|
||||
|
|
@ -64,7 +204,7 @@ function ImageSlider() {
|
|||
}, [])
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', marginBottom: 48, overflow: 'hidden', border: '1px solid var(--rule-thin)', background: '#000' }}>
|
||||
<div style={{ position: 'relative', overflow: 'hidden', border: '1px solid var(--rule-thin)', background: '#000', height: '100%' }}>
|
||||
{/* Slides */}
|
||||
{SLIDES.map((src, i) => (
|
||||
<img
|
||||
|
|
@ -189,14 +329,183 @@ function MembershipForm({ lang }: { lang: 'fa' | 'en' }) {
|
|||
)
|
||||
}
|
||||
|
||||
/* ─── product coverage section ──────────────────────────── */
|
||||
const PRODUCT_CATEGORIES = [
|
||||
{
|
||||
title: 'محصولات فولادی',
|
||||
items: ['مفتول', 'میلگرد', 'مقاطع', 'لوله', 'کویل نورد گرم', 'ورق', 'پوششدار', 'نوار'],
|
||||
},
|
||||
{
|
||||
title: 'فروآلیاژ فولاد',
|
||||
items: ['فروبور', 'فروکروم', 'فرو منگنز', 'فرونیوبیوم', 'فروفسفر', 'فروسیلیکون', 'فروتیتانیوم', 'فرووتنگستن', 'فروواناديوم', 'کروم-سیلیکون', 'کلسیم-سیلیکون', 'سنگ کروم', 'سنگ منگنز'],
|
||||
},
|
||||
{
|
||||
title: 'صنعت فولاد',
|
||||
items: ['میله استیل', 'کویل استیل', 'لوله استیل', 'ضایعات استیل', 'فولاد بلبرینگ', 'فولاد سرد هیدینگ', 'فولاد چرخدنده', 'فولاد سیلیکون', 'فولاد سازهای'],
|
||||
},
|
||||
{
|
||||
title: 'مواد اولیه',
|
||||
items: ['زغال سنگ', 'کک', 'آهن', 'سنگ آهن', 'بیلت فولادی', 'ضایعات فولادی'],
|
||||
},
|
||||
]
|
||||
|
||||
const CONTENT_SECTIONS = [
|
||||
'صنعت فولاد', 'بازار سرمایه', 'فلزات و کامودیتی',
|
||||
'ارزهای دیجیتال', 'بازار ارز و طلا', 'اقتصاد کلان',
|
||||
]
|
||||
const DATA_SOURCES = ['Platts', 'Fastmarkets', 'Bainfo China', 'Dlpibica']
|
||||
|
||||
function CategoryColumn({ cat }: { cat: typeof PRODUCT_CATEGORIES[0] }) {
|
||||
return (
|
||||
<div style={{ padding: '14px 18px' }}>
|
||||
<div style={{
|
||||
fontSize: 10, fontWeight: 800, color: 'var(--ink)',
|
||||
marginBottom: 10, paddingBottom: 6,
|
||||
borderBottom: '2px solid var(--red)',
|
||||
display: 'inline-block',
|
||||
}}>{cat.title}</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
|
||||
{cat.items.map((item, ii) => (
|
||||
<span key={ii} style={{
|
||||
fontSize: 11, color: 'var(--ink-2)',
|
||||
background: 'var(--paper-2)',
|
||||
border: '1px solid var(--rule-thin)',
|
||||
padding: '2px 8px',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ProductCoverage({ lang }: { lang: 'fa' | 'en' }) {
|
||||
const tx = TX[lang]
|
||||
const totalCount = PRODUCT_CATEGORIES.reduce((acc, c) => acc + c.items.length, 0)
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: 56, border: '1px solid var(--rule-thin)', overflow: 'hidden' }}>
|
||||
|
||||
{/* ── top header ── */}
|
||||
<div style={{
|
||||
background: 'var(--ink)', color: 'var(--paper)',
|
||||
padding: '16px 28px',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<div style={{ width: 3, height: 28, background: 'var(--red)' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: 9, letterSpacing: '3px', color: 'rgba(255,255,255,0.4)', marginBottom: 2 }}>PRICE COVERAGE</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 900 }}>{tx.coverageTitle}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 28 }}>
|
||||
{[{ n: `${totalCount}+`, l: tx.productLabel }, { n: '۵۰۰+', l: tx.indexLabel }, { n: '۴', l: tx.sourceLabel }].map(s => (
|
||||
<div key={s.l} style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 900, lineHeight: 1 }}>{s.n}</div>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', marginTop: 3 }}>{s.l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── main body: 2-col products + CTA sidebar ── */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 280px' }} className="max-lg:!grid-cols-1">
|
||||
|
||||
{/* left: 2×2 product grid */}
|
||||
<div style={{ borderLeft: '1px solid var(--rule-thin)' }} className="max-lg:border-l-0">
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
|
||||
{PRODUCT_CATEGORIES.map((cat, ci) => (
|
||||
<div key={ci} style={{
|
||||
borderBottom: ci < 2 ? '1px solid var(--rule-thin)' : 'none',
|
||||
borderLeft: ci % 2 === 1 ? '1px solid var(--rule-thin)' : 'none',
|
||||
}}>
|
||||
<CategoryColumn cat={cat} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* right: CTA sidebar */}
|
||||
<div style={{
|
||||
background: 'rgba(7,29,73,0.04)',
|
||||
borderRight: '1px solid var(--rule-thin)',
|
||||
padding: '28px 24px',
|
||||
display: 'flex', flexDirection: 'column', gap: 18,
|
||||
}} className="max-lg:border-r-0 max-lg:border-t max-lg:border-t-[var(--rule-thin)]">
|
||||
|
||||
<div>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2.5px', color: 'var(--red)', marginBottom: 10 }}>MEMBERS ONLY</div>
|
||||
<p style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.75, margin: 0 }}>{tx.coverageDesc}</p>
|
||||
</div>
|
||||
|
||||
<div style={{ borderTop: '1px solid var(--rule-thin)', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 9 }}>
|
||||
{tx.coverageFeatures.map(f => (
|
||||
<div key={f} style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 12, color: 'var(--ink)' }}>
|
||||
<span style={{ color: '#166534', fontWeight: 900, fontSize: 12 }}>✓</span>{f}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ borderTop: '1px solid var(--rule-thin)', paddingTop: 16 }}>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', marginBottom: 10 }}>{tx.sectionsLabel}</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||||
{tx.contentSections.map(s => (
|
||||
<span key={s} style={{
|
||||
fontSize: 10, fontWeight: 600, padding: '3px 9px',
|
||||
border: '1px solid var(--rule-thin)',
|
||||
color: 'var(--ink-3)',
|
||||
}}>{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── full-width DATA SOURCES bar ── */}
|
||||
<div style={{
|
||||
background: 'var(--ink)',
|
||||
color: 'var(--paper)',
|
||||
padding: '36px 40px',
|
||||
borderTop: '3px solid var(--red)',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr auto',
|
||||
gap: 40,
|
||||
alignItems: 'center',
|
||||
}} className="max-md:!grid-cols-1">
|
||||
|
||||
<div>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', color: 'var(--red)', marginBottom: 10 }}>DATA SOURCES</div>
|
||||
<h3 style={{ fontSize: 20, fontWeight: 900, margin: '0 0 10px', lineHeight: 1.3 }}>{tx.dsTitle}</h3>
|
||||
<p style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.85, margin: 0, maxWidth: 640 }}>{tx.dsBody}</p>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 180 }}>
|
||||
{DATA_SOURCES.map(src => (
|
||||
<div key={src} style={{
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
padding: '10px 16px',
|
||||
border: '1px solid rgba(255,255,255,0.15)',
|
||||
fontSize: 13, fontWeight: 800, letterSpacing: '0.5px',
|
||||
}}>
|
||||
<span style={{ width: 6, height: 6, background: '#4ade80', borderRadius: '50%', flexShrink: 0 }} />
|
||||
{src}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Pulse() {
|
||||
const { lang } = useLang()
|
||||
const t = T[lang]
|
||||
const stats = STATS[lang]
|
||||
|
||||
return (
|
||||
<div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
|
||||
<SnapshotBar />
|
||||
<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 }}>
|
||||
|
|
@ -209,46 +518,62 @@ export default function Pulse() {
|
|||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
|
||||
<div style={{ marginBottom: 48 }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 20 }}>
|
||||
<div style={{ marginBottom: 32, display: 'flex', alignItems: 'center', gap: 0, border: '1px solid var(--rule-thin)', overflow: 'hidden' }}>
|
||||
<div style={{ padding: '12px 18px', borderLeft: '1px solid var(--rule-thin)', fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', whiteSpace: 'nowrap', background: 'var(--paper-2)' }}>
|
||||
{t.statsLabel}
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
|
||||
{stats.map((s, i) => (
|
||||
<div key={i} style={{ background: 'var(--paper)', padding: '24px 20px', filter: i >= 2 ? 'blur(5px)' : 'none', userSelect: i >= 2 ? 'none' : 'auto', pointerEvents: i >= 2 ? 'none' : 'auto' }}>
|
||||
<div style={{ fontSize: 32, fontWeight: 900, letterSpacing: '-1px', color: 'var(--ink)', lineHeight: 1, marginBottom: 6 }}>{s.value}</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--ink-5)', marginBottom: 4 }}>{s.unit}</div>
|
||||
{stats.map((s, i) => (
|
||||
<div key={i} style={{
|
||||
padding: '12px 20px', borderLeft: '1px solid var(--rule-thin)',
|
||||
flex: 1, display: 'flex', alignItems: 'center', gap: 12,
|
||||
filter: i >= 2 ? 'blur(4px)' : 'none',
|
||||
userSelect: i >= 2 ? 'none' : 'auto',
|
||||
pointerEvents: i >= 2 ? 'none' : 'auto',
|
||||
}}>
|
||||
<div style={{ fontSize: 22, fontWeight: 900, letterSpacing: '-0.5px', color: 'var(--ink)', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{s.value}</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-3)' }}>{s.label}</div>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, color: s.delta.startsWith('+') ? '#2d6a4f' : s.delta.startsWith('-') ? 'var(--red)' : 'var(--ink-5)', marginTop: 6 }}>{s.delta}</div>
|
||||
<div style={{ fontSize: 9, color: 'var(--ink-5)' }}>{s.unit}</div>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, color: s.delta.startsWith('+') ? '#2d6a4f' : s.delta.startsWith('-') ? 'var(--red)' : 'var(--ink-5)', marginTop: 2 }}>{s.delta}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Live market snapshot */}
|
||||
<div style={{ marginBottom: 48, overflow: 'hidden', border: '1px solid var(--rule-thin)' }}>
|
||||
<SnapshotBar />
|
||||
</div>
|
||||
|
||||
{/* Price table with paywall blur */}
|
||||
<PriceTable blurFrom={4} lang={lang} />
|
||||
|
||||
{/* Slider + form side by side on desktop — form on RIGHT (col-1 in RTL) */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 0, marginBottom: 48, border: '1px solid var(--rule-thin)', alignItems: 'stretch' }} className="max-md:!grid-cols-1">
|
||||
<div style={{ padding: '32px 24px', background: 'var(--ink)', color: 'var(--paper)', display: 'flex', flexDirection: 'column', gap: 20, borderLeft: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', color: 'var(--red)', marginBottom: 10 }}>MEMBERS ONLY ACCESS</div>
|
||||
<h3 style={{ fontSize: 16, fontWeight: 900, margin: '0 0 8px', lineHeight: 1.3 }}>{t.gateHeading}</h3>
|
||||
<p style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', lineHeight: 1.7, margin: 0 }}>{t.gateSub}</p>
|
||||
</div>
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{t.features.map(f => (
|
||||
<div key={f} style={{ display: 'flex', gap: 8, fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>
|
||||
<span style={{ color: '#4ade80', fontWeight: 900, flexShrink: 0 }}>✓</span>{f}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 16 }}>
|
||||
<MembershipForm lang={lang} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ImageSlider />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Auto-sliding image carousel — radial blur paywall */}
|
||||
<ImageSlider />
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
style={{ border: '2px solid var(--ink)', padding: '40px 36px', position: 'relative' }}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 4, background: 'var(--red)' }} />
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2.5px', textTransform: 'uppercase', color: 'var(--red)', marginBottom: 16 }}>{t.gateAccess}</div>
|
||||
<h2 style={{ fontSize: 20, fontWeight: 900, color: 'var(--ink)', marginBottom: 12, lineHeight: 1.3 }}>{t.gateHeading}</h2>
|
||||
<p style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.75, marginBottom: 24 }}>{t.gateSub}</p>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{t.features.map(item => (
|
||||
<li key={item} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--ink)' }}>
|
||||
<span style={{ color: 'var(--red)', fontWeight: 900, fontSize: 14 }}>✓</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<MembershipForm lang={lang} />
|
||||
</motion.div>
|
||||
{/* Product coverage */}
|
||||
<ProductCoverage lang={lang} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,22 +1,101 @@
|
|||
import { motion } from 'framer-motion'
|
||||
import { useLang } from '@/context/LangContext'
|
||||
|
||||
/* ─── Global signals (critical/high/medium) ─────────────── */
|
||||
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' },
|
||||
{ tag: 'چین', title: 'صادرات فولاد چین به ۱۱۲ میلیون تن رسید — رکورد ۸ ساله و سقوط قیمتهای جهانی', date: 'اسفند ۱۴۰۳', level: 'critical' },
|
||||
{ tag: 'اروپا', title: 'CBAM اروپا از فروردین ۱۴۰۴ اجرایی شد — مالیات کربن بر واردات فولاد', date: 'فروردین ۱۴۰۴', level: 'critical' },
|
||||
{ tag: 'هند', title: 'هند ظرفیت تولید فولاد را تا ۲۰۳۰ به ۳۰۰ میلیون تن میرساند', date: 'بهمن ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'سنگآهن', title: 'قیمت سنگآهن دالیان ۱۸٪ جهش کرد — کاهش ذخایر استرالیا', date: 'دی ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'انرژی', title: 'هزینه برق صنایع فولاد ایران ۳۲٪ افزایش یافت — بحران تابستانه شبکه', date: 'آذر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'فناوری', title: 'اولین کارخانه فولاد هیدروژنی اروپا در سوئد وارد مرحله تولید تجاری شد', date: 'آبان ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'روسیه', title: 'تغییر مسیر صادرات فولاد روسیه به آسیا — فشار قیمتی بر بازارهای هدف ایران', date: 'مهر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'AI', title: 'مایکروسافت و گوگل رویههای فولاد صنعتی را با مدلهای پیشبینی AI بهینه کردند', date: 'شهریور ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'خاورمیانه', title: 'Vision 2030 عربستان: ۱۴۰ میلیارد دلار پروژه زیرساختی تا ۲۰۳۰ — تقاضای بالقوه ۸ میلیون تن', date: 'مرداد ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'نیکل', title: 'فولاد ضدزنگ: کمبود نیکل اندونزی پس از محدودیت صادرات — رشد قیمت ۲۴٪', date: 'تیر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'آمریکا', title: 'IRA آمریکا: ۳ میلیارد دلار یارانه برای فولاد کمکربن — رقابتپذیری ایران زیر فشار', date: 'خرداد ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'ترکیه', title: 'ترکیه بزرگترین تولیدکننده فولاد اروپاست — EAF ۷۳٪ ظرفیت', date: 'اردیبهشت ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'لیتیوم', title: 'تقاضای فولاد در زنجیره خودروهای برقی: ۱۸ میلیون تن اضافی تا ۲۰۳۵', date: 'فروردین ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'پاکستان', title: 'بحران ارزی پاکستان — توقف LC و اختلال در ۱.۲ میلیون تن صادرات ایران', date: 'اسفند ۱۴۰۲', level: 'critical' },
|
||||
],
|
||||
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' },
|
||||
{ tag: 'China', title: "China's steel exports reach 112Mt — 8-year record and global price collapse", date: 'Mar 2025', level: 'critical' },
|
||||
{ tag: 'Europe', title: 'EU CBAM takes effect Spring 2025 — carbon tax on steel imports', date: 'Apr 2025', level: 'critical' },
|
||||
{ tag: 'India', title: 'India to reach 300Mt steel capacity by 2030', date: 'Feb 2025', level: 'high' },
|
||||
{ tag: 'Iron Ore', title: 'Dalian iron ore price surges 18% — Australian reserves declining', date: 'Jan 2025', level: 'high' },
|
||||
{ tag: 'Energy', title: "Iran steel industry electricity costs up 32% — summer grid crisis", date: 'Dec 2024', level: 'high' },
|
||||
{ tag: 'Technology', title: "Europe's first hydrogen steel plant in Sweden enters commercial production", date: 'Nov 2024', level: 'medium' },
|
||||
{ tag: 'Russia', title: "Russia reroutes steel exports to Asia — price pressure on Iran's target markets", date: 'Oct 2024', level: 'high' },
|
||||
{ tag: 'AI', title: 'Microsoft and Google optimize industrial steel processes with AI prediction models', date: 'Sep 2024', level: 'medium' },
|
||||
{ tag: 'Middle East', title: 'Saudi Vision 2030: $140B in infrastructure — 8Mt potential steel demand', date: 'Aug 2024', level: 'medium' },
|
||||
{ tag: 'Nickel', title: 'Stainless steel: Indonesian nickel shortage after export ban — 24% price spike', date: 'Jul 2024', level: 'high' },
|
||||
{ tag: 'USA', title: 'US IRA: $3B subsidy for low-carbon steel — Iran competitiveness under pressure', date: 'Jun 2024', level: 'high' },
|
||||
{ tag: 'Turkey', title: "Turkey is Europe's largest steel producer — EAF at 73% of capacity", date: 'May 2024', level: 'medium' },
|
||||
{ tag: 'Lithium', title: 'Steel demand in EV supply chain: 18Mt additional by 2035', date: 'Apr 2024', level: 'medium' },
|
||||
{ tag: 'Pakistan', title: "Pakistan currency crisis — LC halt disrupts 1.2Mt of Iran's exports", date: 'Mar 2024', level: 'critical' },
|
||||
],
|
||||
}
|
||||
|
||||
/* ─── Weak signals / emerging trends ────────────────────── */
|
||||
const WEAK_SIGNALS = {
|
||||
fa: [
|
||||
{ tag: 'هوش مصنوعی', title: 'LLMهای تخصصی برای پیشبینی قیمت فولاد — دقت ۸۷٪ در افق ۳۰ روزه', date: 'بهمن ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'بلاکچین', title: 'پلتفرمهای ردیابی زنجیره تأمین فولاد با بلاکچین — آزمایش در ۵ شرکت بزرگ', date: 'دی ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'ژئوتکنیک', title: 'کاهش ذخایر ککپزی با کیفیت — بحران پنهان تأمین مواد اولیه تا ۲۰۳۵', date: 'آذر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'تغییر اقلیم', title: 'تندبادهای بیشتر در خلیج فارس — خطر بندری و هزینه حملونقل بالاتر', date: 'آبان ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'ساخت افزودنی', title: 'چاپ سهبعدی قطعات فولادی در هوافضا — جایگزینی نورد در برخی محصولات تا ۲۰۳۵', date: 'مهر ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'نانوفولاد', title: 'فولاد با ساختار نانو — مقاومت ۳ برابر بیشتر با همان وزن، تهدید برای فولاد معمول', date: 'شهریور ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'جمعیت', title: 'کاهش جمعیت چین — کاهش تقاضای داخلی فولاد و افزایش فشار صادراتی تا ۲۰۴۰', date: 'مرداد ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'فضا', title: 'صنعت فضایی تجاری: آلیاژهای فولادی خاص با تقاضای ۵۰۰ هزار تن تا ۲۰۳۵', date: 'تیر ۱۴۰۳', level: 'medium' },
|
||||
],
|
||||
en: [
|
||||
{ tag: 'AI', title: 'Specialized LLMs for steel price forecasting — 87% accuracy on 30-day horizon', date: 'Feb 2025', level: 'medium' },
|
||||
{ tag: 'Blockchain', title: 'Steel supply chain tracking platforms on blockchain — pilots at 5 major companies', date: 'Jan 2025', level: 'medium' },
|
||||
{ tag: 'Geotechnics', title: 'Declining quality coking coal reserves — hidden raw material crisis by 2035', date: 'Dec 2024', level: 'high' },
|
||||
{ tag: 'Climate', title: 'More frequent Gulf storms — port risk and higher shipping costs', date: 'Nov 2024', level: 'medium' },
|
||||
{ tag: 'Additive Mfg', title: '3D printing of steel components in aerospace — replacing rolling for some products by 2035', date: 'Oct 2024', level: 'medium' },
|
||||
{ tag: 'Nanosteel', title: 'Nano-structured steel — 3× strength at same weight, threatening conventional steel', date: 'Sep 2024', level: 'medium' },
|
||||
{ tag: 'Demographics', title: "China's declining population — falling domestic steel demand and rising export pressure by 2040", date: 'Aug 2024', level: 'high' },
|
||||
{ tag: 'Space', title: 'Commercial space industry: specialty steel alloys with 500kt demand by 2035', date: 'Jul 2024', level: 'medium' },
|
||||
],
|
||||
}
|
||||
|
||||
/* ─── Foresight horizons ─────────────────────────────────── */
|
||||
const HORIZONS = {
|
||||
fa: [
|
||||
{ num: '۱۴۰۵', tag: 'کوتاهمدت', title: 'رکود صادراتی ناشی از سیل فولاد چین — فشار قیمتی ۱۵–۲۰٪', summary: 'با احتمال ۷۵٪: قیمتهای جهانی فولاد در محدوده ۴۵۰–۵۰۰ دلار باقی میمانند. ایران باید بر کاهش هزینه تولید و تمایز کیفی تمرکز کند.' },
|
||||
{ num: '۱۴۰۶', tag: 'میانمدت', title: 'اثر کامل CBAM — بازتوزیع جریانهای تجاری فولاد جهانی', summary: 'صادرکنندگان بدون برنامه کربنی از بازار اروپا خارج میشوند. فرصت برای ایران: تأمین بازار جنوب جهانی که از اروپا منحرف شدهاند.' },
|
||||
{ num: '۱۴۰۷', tag: 'میانمدت', title: 'هند به دومین مصرفکننده فولاد جهان میرسد — فرصت بازار ۱۵ میلیون تن', summary: 'رشد زیرساختی هند تقاضای ۸۵ میلیون تن فولاد اضافی ایجاد میکند. ایران میتواند ۱۵–۲۰ میلیون تن از این بازار را جذب کند.' },
|
||||
{ num: '۱۴۱۰', tag: 'بلندمدت', title: 'فولاد سبز به معیار پذیرش در بازارهای پریمیوم تبدیل میشود', summary: 'صادرکنندگانی که تا ۱۴۱۰ برنامه کربنی ندارند از ۶۰٪ بازارهای جهانی محروم میشوند. نقطه بازگشتناپذیر برای ایران: ۱۴۰۷.' },
|
||||
{ num: '۱۴۱۵', tag: 'بلندمدت', title: 'هیدروژن سبز ارزانتر از گاز طبیعی — تحول کامل DRI', summary: 'با احتمال ۵۵٪: هزینه هیدروژن سبز تا ۱۴۱۵ به زیر ۲ دلار/کیلوگرم میرسد. ایران با منابع خورشیدی میتواند مزیت رقابتی بزرگ در DRI-H₂ کسب کند.' },
|
||||
{ num: '۱۴۲۰', tag: 'افق دور', title: 'ظرفیت جهانی فولاد ۲۵٪ مازاد — موج ادغام و یکپارچهسازی', summary: 'کارخانههای غیررقابتی در آسیا و خاورمیانه بسته میشوند. برندگان: تولیدکنندگان با هزینه پایین، برنامه سبز و دسترسی به بازارهای رو به رشد.' },
|
||||
],
|
||||
en: [
|
||||
{ num: '2026', tag: 'Short-term', title: 'Export recession from Chinese steel flood — 15–20% price pressure', summary: '75% probability: global steel prices stay in $450–500 range. Iran must focus on production cost reduction and quality differentiation.' },
|
||||
{ num: '2027', tag: 'Medium-term', title: 'Full CBAM effect — redistribution of global steel trade flows', summary: 'Exporters without carbon plans are pushed out of Europe. Opportunity for Iran: supply the Global South markets diverted from Europe.' },
|
||||
{ num: '2028', tag: 'Medium-term', title: 'India becomes world\'s 2nd steel consumer — 15Mt market opportunity', summary: "India's infrastructure growth creates 85Mt of additional steel demand. Iran can capture 15–20Mt of this market." },
|
||||
{ num: '2031', tag: 'Long-term', title: 'Green steel becomes the admission standard for premium markets', summary: 'Exporters without a carbon roadmap by 2031 are locked out of 60% of global markets. Point of no return for Iran: 2028.' },
|
||||
{ num: '2036', tag: 'Long-term', title: 'Green hydrogen cheaper than natural gas — full DRI transformation', summary: '55% probability: green hydrogen cost falls below $2/kg by 2036. Iran\'s solar resources could give it a major competitive edge in DRI-H₂.' },
|
||||
{ num: '2041', tag: 'Far horizon', title: '25% global steel overcapacity — wave of mergers and consolidation', summary: 'Non-competitive plants in Asia and the Middle East close. Winners: low-cost producers with green plans and access to growing markets.' },
|
||||
],
|
||||
}
|
||||
|
||||
/* ─── KPIs ──────────────────────────────────────────────── */
|
||||
const KPIS = {
|
||||
fa: [
|
||||
{ value: '۱۱۲', unit: 'میلیون تن', label: 'صادرات فولاد چین ۱۴۰۳', delta: 'رکورد ۸ ساله' },
|
||||
{ value: '۴۸۵', unit: 'دلار/تن', label: 'قیمت جهانی HRC فعلی', delta: '-۱۲٪ از اوج ۱۴۰۳' },
|
||||
{ value: '۱۸۸۵', unit: 'میلیون تن', label: 'تولید جهانی فولاد ۱۴۰۲', delta: '+۱.۸٪ رشد سالانه' },
|
||||
{ value: '۵۵٪', unit: '', label: 'سهم چین از تولید جهانی', delta: 'پایدار' },
|
||||
{ value: '۸.۷', unit: 'میلیون تن', label: 'صادرات فولاد ایران ۱۴۰۳', delta: '+۱.۸٪ رشد' },
|
||||
],
|
||||
en: [
|
||||
{ value: '112', unit: 'Mt', label: 'China steel exports 1403', delta: '8-year record' },
|
||||
{ value: '$485', unit: '/t', label: 'Current global HRC price', delta: '-12% from 1403 peak' },
|
||||
{ value: '1885', unit: 'Mt', label: 'Global steel production 2023', delta: '+1.8% annual growth' },
|
||||
{ value: '55%', unit: '', label: "China's share of global output", delta: 'Stable' },
|
||||
{ value: '8.7', unit: 'Mt', label: 'Iran steel exports 1403', delta: '+1.8% growth' },
|
||||
],
|
||||
}
|
||||
|
||||
|
|
@ -32,18 +111,39 @@ const LEVEL_LABEL = {
|
|||
}
|
||||
|
||||
const T = {
|
||||
fa: { overline: 'FORESIGHT & INTELLIGENCE', heading: 'آیندهپژوهی و رصد هوشمند', sub: 'رصد سیگنالهای جهانی و منطقهای با اثر مستقیم بر صنعت فولاد ایران' },
|
||||
en: { overline: 'FORESIGHT & INTELLIGENCE', heading: 'Foresight & Intelligence', sub: 'Monitoring global and regional signals with direct impact on Iran\'s steel industry' },
|
||||
fa: {
|
||||
overline: 'FORESIGHT & INTELLIGENCE',
|
||||
heading: 'آیندهپژوهی و رصد هوشمند',
|
||||
sub: 'رصد سیگنالهای قوی و ضعیف جهانی، تحلیل روندهای نوظهور و سناریوپردازی افقهای آینده صنعت فولاد',
|
||||
kpiHeading: 'شاخصهای کلیدی بازار جهانی فولاد',
|
||||
sigHeading: 'سیگنالهای قوی — رویدادهای جاری',
|
||||
weakHeading: 'سیگنالهای ضعیف — روندهای نوظهور',
|
||||
horizHeading: 'افقهای آیندهپژوهی — سناریوهای استراتژیک',
|
||||
},
|
||||
en: {
|
||||
overline: 'FORESIGHT & INTELLIGENCE',
|
||||
heading: 'Foresight & Intelligence',
|
||||
sub: 'Monitoring strong and weak signals, emerging trend analysis, and scenario planning for the steel industry',
|
||||
kpiHeading: 'Key Global Steel Market Indicators',
|
||||
sigHeading: 'Strong Signals — Current Events',
|
||||
weakHeading: 'Weak Signals — Emerging Trends',
|
||||
horizHeading: 'Foresight Horizons — Strategic Scenarios',
|
||||
},
|
||||
}
|
||||
|
||||
export default function Radar() {
|
||||
const { lang } = useLang()
|
||||
const t = T[lang]
|
||||
const signals = SIGNALS[lang]
|
||||
const weakSignals = WEAK_SIGNALS[lang]
|
||||
const horizons = HORIZONS[lang]
|
||||
const kpis = KPIS[lang]
|
||||
const levelLabel = LEVEL_LABEL[lang]
|
||||
|
||||
return (
|
||||
<div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<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 }}>
|
||||
|
|
@ -55,7 +155,30 @@ export default function Radar() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
|
||||
{/* ── KPI Strip ── */}
|
||||
<div style={{ borderBottom: '1px solid var(--rule-thin)', background: 'var(--paper-2)' }}>
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 36, paddingBottom: 36 }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', marginBottom: 20, textTransform: 'uppercase' }}>{t.kpiHeading}</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24 }}>
|
||||
{kpis.map((k, i) => (
|
||||
<motion.div key={i} initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.07 }}>
|
||||
<div style={{ fontSize: 'clamp(26px,3vw,38px)', fontWeight: 900, letterSpacing: '-1px', color: 'var(--ink)', lineHeight: 1 }}>
|
||||
{k.value}<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-3)', marginRight: 4, marginLeft: 4 }}>{k.unit}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.5 }}>{k.label}</div>
|
||||
<div style={{ fontSize: 10, color: 'var(--red)', fontWeight: 700, marginTop: 4 }}>{k.delta}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Strong Signals ── */}
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
|
||||
<div style={{ width: 36, height: 2, background: 'var(--red)' }} />
|
||||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.sigHeading}</span>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
|
||||
{signals.map((s, i) => (
|
||||
<motion.div
|
||||
|
|
@ -63,7 +186,7 @@ export default function Radar() {
|
|||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: i * 0.06 }}
|
||||
transition={{ duration: 0.4, delay: i * 0.04 }}
|
||||
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] }} />
|
||||
|
|
@ -77,6 +200,61 @@ export default function Radar() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Weak Signals ── */}
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
|
||||
<div style={{ width: 36, height: 2, background: '#b45309' }} />
|
||||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.weakHeading}</span>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
|
||||
{weakSignals.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.05 }}
|
||||
style={{ background: 'var(--paper)', padding: '28px 24px', position: 'relative' }}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 3, background: '#b45309' }} />
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
|
||||
<span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', background: '#b45309', color: '#fff', padding: '3px 8px' }}>{s.tag}</span>
|
||||
<span style={{ fontSize: 9, fontWeight: 700, color: '#b45309', letterSpacing: '1px' }}>EMERGING</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>
|
||||
|
||||
{/* ── Foresight Horizons ── */}
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
|
||||
<div style={{ width: 36, height: 2, background: 'var(--ink)' }} />
|
||||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.horizHeading}</span>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
|
||||
{horizons.map((h, 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: 'var(--ink)' }} />
|
||||
<div style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-3px', color: 'rgba(26,23,18,0.06)', lineHeight: 1, marginBottom: 10, direction: 'ltr' }}>{h.num}</div>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', color: 'var(--red)', marginBottom: 10, textTransform: 'uppercase' }}>{h.tag}</div>
|
||||
<h3 style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.45, marginBottom: 12 }}>{h.title}</h3>
|
||||
<p style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.7 }}>{h.summary}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,126 @@
|
|||
import { motion } from 'framer-motion'
|
||||
import { useLang } from '@/context/LangContext'
|
||||
|
||||
/* ─── Regulatory / ESG signals ─────────────────────────── */
|
||||
const SIGNALS = {
|
||||
fa: [
|
||||
{ tag: 'اروپا', title: 'CBAM اروپا: مالیات کربن بر واردات فولاد از فروردین ۱۴۰۴ اجرایی شد', date: 'فروردین ۱۴۰۴', level: 'critical' },
|
||||
{ tag: 'ایران', title: 'الزام گزارشدهی ESG برای شرکتهای فولادی پذیرفتهشده در بورس اوراق بهادار', date: 'اسفند ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'جهانی', title: 'سازمان بینالمللی فولاد (WSA) هدف کاهش ۳۰٪ کربن تا ۲۰۳۰ را تصویب کرد', date: 'بهمن ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'آب', title: 'بحران آب در خوزستان: محدودیتهای جدید برای فولادسازی در فصل گرما', date: 'دی ۱۴۰۳', level: 'critical' },
|
||||
{ tag: 'انرژی', title: 'سهمیه برق صنایع بزرگ فولادی ۱۵٪ کاهش یافت — فشار بر تولید در تابستان', date: 'آذر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'هند', title: 'هند استاندارد انتشار CO₂ فولادسازی را به ۱.۹ تن/تن تعیین کرد', date: 'آبان ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'چین', title: 'پکن اجرای ETS (بازار کربن) را به صنعت فولاد تعمیم داد', date: 'مهر ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'ژاپن', title: 'Nippon Steel تعهد خنثیسازی کربن ۲۰۵۰ را با برنامه اجرایی ۸ مرحلهای منتشر کرد', date: 'شهریور ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'سرمایهگذاری', title: 'صندوقهای بزرگ سرمایهگذاری جهانی: خروج از فولادسازان بدون برنامه تغییر اقلیم تا ۲۰۲۶', date: 'مرداد ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'امارات', title: 'امارات صندوق ۵ میلیارد دلاری برای فولاد سبز منطقه MENA راهاندازی کرد', date: 'تیر ۱۴۰۳', level: 'medium' },
|
||||
{ tag: 'آمریکا', title: 'IRA آمریکا: یارانه ۳ میلیارد دلاری برای فولاد کمکربن — فشار رقابتی بر تولیدکنندگان', date: 'خرداد ۱۴۰۳', level: 'high' },
|
||||
{ tag: 'ISO', title: 'استاندارد ISO 14064 برای سنجش کربن زنجیره فولاد اجباری میشود', date: 'اردیبهشت ۱۴۰۳', level: 'medium' },
|
||||
],
|
||||
en: [
|
||||
{ tag: 'Europe', title: "EU CBAM: Carbon tax on steel imports took effect Spring 2025", date: 'Apr 2025', level: 'critical' },
|
||||
{ tag: 'Iran', title: 'ESG reporting mandatory for steel companies listed on Tehran Stock Exchange', date: 'Mar 2025', level: 'high' },
|
||||
{ tag: 'Global', title: 'World Steel Association (WSA) approves 30% carbon reduction target by 2030', date: 'Feb 2025', level: 'high' },
|
||||
{ tag: 'Water', title: 'Khuzestan water crisis: new restrictions on steelmaking during summer months', date: 'Jan 2025', level: 'critical' },
|
||||
{ tag: 'Energy', title: "Heavy steel industry electricity quota cut 15% — summer production under pressure", date: 'Dec 2024', level: 'high' },
|
||||
{ tag: 'India', title: 'India sets CO₂ emission standard for steelmaking at 1.9 t/t', date: 'Nov 2024', level: 'medium' },
|
||||
{ tag: 'China', title: 'Beijing extends ETS (carbon market) to cover the steel industry', date: 'Oct 2024', level: 'high' },
|
||||
{ tag: 'Japan', title: 'Nippon Steel publishes 8-phase 2050 carbon neutrality roadmap', date: 'Sep 2024', level: 'medium' },
|
||||
{ tag: 'Investment', title: 'Global funds: divesting from steelmakers without climate transition plans by 2026', date: 'Aug 2024', level: 'high' },
|
||||
{ tag: 'UAE', title: 'UAE launches $5B green steel fund for the MENA region', date: 'Jul 2024', level: 'medium' },
|
||||
{ tag: 'USA', title: "US IRA: $3B subsidy for low-carbon steel — competitive pressure on global producers", date: 'Jun 2024', level: 'high' },
|
||||
{ tag: 'ISO', title: 'ISO 14064 carbon measurement standard becomes mandatory for steel supply chains', date: 'May 2024', level: 'medium' },
|
||||
],
|
||||
}
|
||||
|
||||
/* ─── Green initiatives / roadmap items ────────────────── */
|
||||
const INITIATIVES = {
|
||||
fa: [
|
||||
{ num: '۰۱', tag: 'کربنزدایی', title: 'کاهش شدت کربن از ۱.۸ به ۱.۲ تن CO₂ / تن فولاد', summary: 'هدفگذاری برای ارتقای راندمان انرژی کورههای EAF و بهینهسازی mix شارژ — قابل دستیابی بدون سرمایهگذاری کلان در فناوری جدید' },
|
||||
{ num: '۰۲', tag: 'انرژی تجدیدپذیر', title: 'تأمین ۴۰٪ برق از منابع تجدیدپذیر تا ۱۴۰۶', summary: 'نصب ۸۰۰ مگاوات پنل خورشیدی در سایتهای کارخانههای بزرگ — کاهش وابستگی به شبکه برق ناپایدار و صرفهجویی سالانه ۴۵۰ میلیون دلار' },
|
||||
{ num: '۰۳', tag: 'بازیافت', title: 'افزایش نرخ بازیافت ضایعات داخلی از ۲۲٪ به ۳۵٪', summary: 'جمعآوری سازمانیافته ضایعات فولادی از صنایع پاییندست — کاهش نیاز به سنگآهن خام و صرفهجویی ارزی معادل ۷۰۰ میلیون دلار در سال' },
|
||||
{ num: '۰۴', tag: 'آب', title: 'چرخش آب صنعتی — کاهش مصرف از ۶ به ۳.۵ مترمکعب/تن', summary: 'استقرار سیستمهای closed-loop cooling در ۱۲ کارخانه بزرگ — پاسخ به بحران آب و رعایت استانداردهای محیطزیستی جدید' },
|
||||
{ num: '۰۵', tag: 'گواهینامه', title: 'اخذ گواهینامه ResponsibleSteel برای صادرات به اروپا', summary: 'تطابق با ۱۲ معیار اجتماعی و زیستمحیطی استاندارد ResponsibleSteel — شرط لازم برای ورود به زنجیره تأمین خودروسازی اروپا' },
|
||||
{ num: '۰۶', tag: 'CO₂', title: 'برنامه CCS در کارخانههای DRI — ذخیره ۲ میلیون تن CO₂', summary: 'همکاری با شرکای اروپایی برای استقرار فناوری Carbon Capture در کارخانههای احیای مستقیم — جذب تأمینمالی سبز بینالمللی' },
|
||||
{ num: '۰۷', tag: 'زنجیره تأمین', title: 'ردیابی کربن در کل زنجیره: از معدن تا محصول نهایی', summary: 'استقرار سیستم digital product passport — ثبت شدت کربن هر محموله از سنگآهن تا نورد نهایی، قابل ارائه به مشتریان صادراتی' },
|
||||
{ num: '۰۸', tag: 'هیدروژن', title: 'پایلوت DRI-H₂ در مجتمع فولاد خوزستان — ۵۰۰ هزار تن/سال', summary: 'همکاری با شرکای آلمانی برای آزمایش احیا با هیدروژن — گام اول بومیسازی فناوری پیش از توسعه در مقیاس صنعتی تا ۱۴۱۰' },
|
||||
{ num: '۰۹', tag: 'سرباره', title: 'استفاده ۱۰۰٪ از سرباره کوره در صنایع ساختمانی', summary: 'بازاریابی سرباره بهعنوان جایگزین سیمان پرتلند — کاهش هزینه دفع پسماند و ایجاد جریان درآمدی ۱۲۰ میلیون دلار در سال' },
|
||||
{ num: '۱۰', tag: 'اجتماعی', title: 'برنامه آموزش و ارتقای مهارت ۱۵٪ نیروی کار برای انتقال سبز', summary: 'سرمایهگذاری ۸۰ میلیون دلار در آموزش فناوریهای سبز — پیشگیری از بیکاری ناشی از تحول صنعتی و رعایت معیار S در ESG' },
|
||||
],
|
||||
en: [
|
||||
{ num: '01', tag: 'Decarbonization', title: 'Reduce carbon intensity from 1.8 to 1.2 t CO₂/t steel', summary: 'Targeting EAF energy efficiency upgrades and charge mix optimization — achievable without massive capital investment in new technology' },
|
||||
{ num: '02', tag: 'Renewables', title: 'Source 40% of electricity from renewables by 2027', summary: 'Install 800 MW of solar panels at major plant sites — reduce dependence on unstable grid and save $450M annually' },
|
||||
{ num: '03', tag: 'Recycling', title: 'Increase domestic scrap recycling rate from 22% to 35%', summary: 'Organized collection of steel scrap from downstream industries — reduce iron ore dependency and save $700M in foreign exchange annually' },
|
||||
{ num: '04', tag: 'Water', title: 'Industrial water recycling — cut usage from 6 to 3.5 m³/t', summary: 'Deploy closed-loop cooling systems at 12 major plants — respond to water crisis and meet new environmental standards' },
|
||||
{ num: '05', tag: 'Certification', title: 'ResponsibleSteel certification for European export', summary: 'Compliance with 12 social and environmental criteria of ResponsibleSteel — prerequisite for entry into European automotive supply chains' },
|
||||
{ num: '06', tag: 'CO₂', title: 'CCS program at DRI plants — store 2 million tons of CO₂', summary: 'Collaborate with European partners to deploy Carbon Capture at direct reduction plants — attract international green financing' },
|
||||
{ num: '07', tag: 'Supply Chain', title: 'Carbon tracking across full chain: from mine to finished product', summary: 'Deploy digital product passport — record carbon intensity of each shipment from iron ore to final rolling, presentable to export customers' },
|
||||
{ num: '08', tag: 'Hydrogen', title: 'DRI-H₂ pilot at Khuzestan Steel — 500k t/year', summary: 'Partnership with German firms to test hydrogen-based reduction — first step toward localizing technology before industrial-scale rollout by 2031' },
|
||||
{ num: '09', tag: 'Slag', title: '100% utilization of furnace slag in construction industry', summary: 'Market slag as a Portland cement substitute — reduce waste disposal cost and create $120M annual revenue stream' },
|
||||
{ num: '10', tag: 'Social', title: 'Train 15% of workforce for green transition roles', summary: 'Invest $80M in green technology training — prevent unemployment from industrial transition and fulfill the S criterion in ESG' },
|
||||
],
|
||||
}
|
||||
|
||||
/* ─── KPI strip ─────────────────────────────────────────── */
|
||||
const KPIS = {
|
||||
fa: [
|
||||
{ value: '۱.۷۸', unit: 'تن CO₂ / تن فولاد', label: 'شدت کربن میانگین صنعت', delta: '-۶٪ نسبت به ۱۴۰۲' },
|
||||
{ value: '۲۲٪', unit: '', label: 'نرخ بازیافت ضایعات داخلی', delta: 'هدف ۳۵٪ تا ۱۴۰۶' },
|
||||
{ value: '۴.۸', unit: 'مترمکعب / تن', label: 'مصرف آب صنعتی', delta: '-۱۲٪ در سال' },
|
||||
{ value: '۱۲٪', unit: '', label: 'سهم برق تجدیدپذیر', delta: 'هدف ۴۰٪ تا ۱۴۰۶' },
|
||||
{ value: '۳', unit: 'کارخانه', label: 'دارای گواهینامه ISO 50001', delta: 'در حال افزایش' },
|
||||
],
|
||||
en: [
|
||||
{ value: '1.78', unit: 't CO₂ / t steel', label: 'Industry average carbon intensity', delta: '-6% vs 2023' },
|
||||
{ value: '22%', unit: '', label: 'Domestic scrap recycling rate', delta: 'Target 35% by 2027' },
|
||||
{ value: '4.8', unit: 'm³ / t', label: 'Industrial water consumption', delta: '-12% per year' },
|
||||
{ value: '12%', unit: '', label: 'Renewable electricity share', delta: 'Target 40% by 2027' },
|
||||
{ value: '3', unit: 'plants', label: 'ISO 50001 certified facilities', delta: 'Expanding' },
|
||||
],
|
||||
}
|
||||
|
||||
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: 'SUSTAINABILITY & GREEN STEEL',
|
||||
heading: 'پایداری و فولاد سبز',
|
||||
sub: 'رصد الزامات ESG، گذار کمکربن و مسیر صنعت فولاد ایران به سمت پایداری',
|
||||
soon: 'محتوا بهزودی منتشر میشود',
|
||||
overline: 'SUSTAINABILITY & GREEN STEEL',
|
||||
heading: 'پایداری و فولاد سبز',
|
||||
sub: 'رصد الزامات ESG، مقررات کربنی جهانی و نقشهراه گذار سبز صنعت فولاد ایران',
|
||||
kpiHeading: 'شاخصهای کلیدی پایداری صنعت فولاد ایران',
|
||||
sigHeading: 'رویدادها و مقررات ESG',
|
||||
initHeading: 'نقشهراه گذار سبز — اقدامات اولویتدار',
|
||||
},
|
||||
en: {
|
||||
overline: 'SUSTAINABILITY & GREEN STEEL',
|
||||
heading: 'Sustainability & Green Steel',
|
||||
sub: "Monitoring ESG requirements, low-carbon transition, and Iran's steel industry path toward sustainability",
|
||||
soon: 'Content coming soon',
|
||||
overline: 'SUSTAINABILITY & GREEN STEEL',
|
||||
heading: 'Sustainability & Green Steel',
|
||||
sub: 'Monitoring ESG requirements, global carbon regulations, and Iran\'s steel industry green transition roadmap',
|
||||
kpiHeading: 'Key Sustainability KPIs — Iran Steel Industry',
|
||||
sigHeading: 'ESG Events & Regulations',
|
||||
initHeading: 'Green Transition Roadmap — Priority Actions',
|
||||
},
|
||||
}
|
||||
|
||||
export default function Sustainability() {
|
||||
const { lang } = useLang()
|
||||
const t = T[lang]
|
||||
const signals = SIGNALS[lang]
|
||||
const initiatives = INITIATIVES[lang]
|
||||
const kpis = KPIS[lang]
|
||||
const levelLabel = LEVEL_LABEL[lang]
|
||||
|
||||
return (
|
||||
<div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<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 }}>
|
||||
|
|
@ -31,9 +131,79 @@ export default function Sustainability() {
|
|||
<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: 80, paddingBottom: 80, textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 15, color: 'var(--ink-4)' }}>{t.soon}</p>
|
||||
|
||||
{/* ── KPI Strip ── */}
|
||||
<div style={{ borderBottom: '1px solid var(--rule-thin)', background: 'var(--paper-2)' }}>
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 36, paddingBottom: 36 }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', marginBottom: 20, textTransform: 'uppercase' }}>{t.kpiHeading}</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24 }}>
|
||||
{kpis.map((k, i) => (
|
||||
<motion.div key={i} initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.07 }}>
|
||||
<div style={{ fontSize: 'clamp(26px,3vw,38px)', fontWeight: 900, letterSpacing: '-1px', color: 'var(--ink)', lineHeight: 1 }}>
|
||||
{k.value}<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-3)', marginRight: 4, marginLeft: 4 }}>{k.unit}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.5 }}>{k.label}</div>
|
||||
<div style={{ fontSize: 10, color: 'var(--red)', fontWeight: 700, marginTop: 4 }}>{k.delta}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── ESG Signals ── */}
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
|
||||
<div style={{ width: 36, height: 2, background: 'var(--red)' }} />
|
||||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.sigHeading}</span>
|
||||
</div>
|
||||
<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.05 }}
|
||||
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>
|
||||
|
||||
{/* ── Roadmap Initiatives ── */}
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
|
||||
<div style={{ width: 36, height: 2, background: 'var(--red)' }} />
|
||||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.initHeading}</span>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
|
||||
{initiatives.map((item, 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.05 }}
|
||||
style={{ background: 'var(--paper)', padding: '28px 24px', position: 'relative' }}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 3, background: '#166534' }} />
|
||||
<div style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-3px', color: 'rgba(26,23,18,0.06)', lineHeight: 1, marginBottom: 10, direction: 'ltr' }}>{item.num}</div>
|
||||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', color: '#166534', marginBottom: 10, textTransform: 'uppercase' }}>{item.tag}</div>
|
||||
<h3 style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.45, marginBottom: 12 }}>{item.title}</h3>
|
||||
<p style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.7 }}>{item.summary}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,553 @@
|
|||
import { useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { useLang } from '@/context/LangContext'
|
||||
import DetailSheet, { type CardDetail } from '@/components/ui/DetailSheet'
|
||||
|
||||
const TECHS = {
|
||||
fa: [
|
||||
{ num: '۰۱', title: 'فولاد هیدروژنی (DRI-H₂)', tag: 'انرژی پاک', summary: 'جایگزینی کک با هیدروژن سبز در کورههای احیای مستقیم — مسیر صنعت فولاد به سمت خنثیسازی کربن' },
|
||||
{ num: '۰۲', title: 'دیجیتالسازی و AI در تولید', tag: 'هوش مصنوعی', summary: 'کاربرد یادگیری ماشین در بهینهسازی فرآیند ذوب، پیشبینی نقص کیفی و کاهش ضایعات' },
|
||||
{ num: '۰۳', title: 'الکترولیز فولاد (MOE)', tag: 'فناوری نوین', summary: 'تولید فولاد از طریق الکترولیز اکسید آهن با برق تجدیدپذیر — فناوری نسل بعدی' },
|
||||
{ num: '۰۴', title: 'بازیافت و اقتصاد چرخشی', tag: 'پایداری', summary: 'افزایش نرخ بازیافت ضایعات فولادی و کاهش وابستگی به سنگآهن خام' },
|
||||
{ num: '۰۵', title: 'کوره قوس الکتریکی نسل جدید EAF', tag: 'تجهیزات', summary: 'EAF با راندمان انرژی ۴۰٪ بالاتر از نسل فعلی — مناسب برای شبکههای ناپایدار' },
|
||||
{ num: '۰۶', title: 'توأمسازی CCS با تولید فولاد', tag: 'محیط زیست', summary: 'ترکیب کربنگیری با فرآیندهای موجود — راهحل میانمدت برای کاهش انتشار' },
|
||||
{
|
||||
num: '۰۱', tag: 'انرژی پاک', title: 'فولاد هیدروژنی (DRI-H₂)',
|
||||
summary: 'جایگزینی کک با هیدروژن سبز در کورههای احیای مستقیم — مسیر صنعت فولاد به سمت خنثیسازی کربن',
|
||||
detail: {
|
||||
lead: 'DRI-H₂ بنیادیترین تحول فناورانه در تاریخ صنعت فولاد پس از اختراع کنورتور اکسیژن است.',
|
||||
body: [
|
||||
'در فرآیند احیای مستقیم با هیدروژن (DRI-H₂)، گاز هیدروژن بهعنوان عامل احیاکننده جایگزین گاز طبیعی میشود. محصول جانبی این واکنش آب است، نه CO₂. شرکت HYBRIT سوئد در ۲۰۲۱ اولین تن فولاد هیدروژنی جهان را تولید کرد؛ قیمت آن اکنون ۱.۵–۲ برابر فولاد معمول است.',
|
||||
'چالش اصلی در هزینه هیدروژن سبز است. در حال حاضر هر کیلوگرم هیدروژن سبز ۴–۶ دلار هزینه دارد در حالی که برای توجیه اقتصادی باید زیر ۲ دلار برسد. IEA پیشبینی میکند این هزینه تا ۲۰۳۰ به ۱.۵–۲ دلار برسد.',
|
||||
'در مقیاس جهانی، SSAB، ArcelorMittal، ThyssenKrupp و Voestalpine برنامههای مقیاس صنعتی برای ۲۰۲۸–۲۰۳۲ دارند. کل سرمایهگذاری اعلامشده جهانی بیش از ۵۰ میلیارد دلار است.',
|
||||
],
|
||||
bullets: [
|
||||
'کاهش ۹۵–۹۸٪ انتشار CO₂ در مقایسه با روش کوره بلند',
|
||||
'نیاز به برق تجدیدپذیر فراوان برای تولید هیدروژن — چالش در کشورهای با شبکه ناپایدار',
|
||||
'سازگاری با کورههای DRI موجود — امکان تبدیل تدریجی بدون تغییر کامل زیرساخت',
|
||||
'قیمت تمامشده فعلی: ۶۵۰–۷۵۰ دلار/تن در برابر ۴۵۰–۵۰۰ دلار فولاد معمول',
|
||||
'CBAM اروپا این فناوری را از هزینه به مزیت رقابتی تبدیل میکند',
|
||||
],
|
||||
iranImpact: 'ایران با ۷۰٪ ظرفیت فولادسازی مبتنی بر DRI (بالاترین نسبت جهانی) در موقعیت بینظیری برای پذیرش DRI-H₂ قرار دارد. ظرفیت خورشیدی بالقوه ایران امکان تولید هیدروژن سبز ارزان را فراهم میکند. چالش اصلی: تأمین مالی بینالمللی تحت تحریم و نیاز به همکاری فناورانه با شرکای اروپایی.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۰۲', tag: 'هوش مصنوعی', title: 'دیجیتالسازی و AI در تولید',
|
||||
summary: 'کاربرد یادگیری ماشین در بهینهسازی فرآیند ذوب، پیشبینی نقص کیفی و کاهش ضایعات',
|
||||
detail: {
|
||||
lead: 'استقرار هوش مصنوعی در کارخانههای فولاد ۵–۱۵٪ کاهش هزینه انرژی و ۳۰–۵۰٪ کاهش ضایعات کیفی را به اثبات رسانده است.',
|
||||
body: [
|
||||
'شرکت POSCO کره با مدلهای machine learning در کنترل کوره، مصرف انرژی را ۱۲٪ کاهش داده است. Tata Steel با computer vision در خط نورد، شناسایی ترک سطحی را از ۷۲٪ به ۹۸٪ دقت رسانده. ThyssenKrupp با AI پیشبینی نقص قبل از وقوع، ضایعات ۴۰٪ کم شده.',
|
||||
'بزرگترین کاربردهای AI در فولادسازی عبارتند از: بهینهسازی شارژ EAF (کاهش هزینه الکترود)، پیشبینی عمر نسوزها، کنترل آنلاین قابلیت کشش فولاد در نورد سرد، و پیشبینی شکست تجهیزات (predictive maintenance).',
|
||||
'موج بعدی: LLMهای تخصصی آموزشدیده بر دادههای متالورژیکی که میتوانند بهصورت real-time تنظیمات فرآیند را به زبان طبیعی توضیح دهند — کاهش نیاز به متخصصان ارشد متالورژی.',
|
||||
],
|
||||
bullets: [
|
||||
'کاهش مصرف انرژی ۵–۱۵٪ با بهینهسازی AI در کورههای EAF و BF',
|
||||
'کاهش ۳۰–۵۰٪ ضایعات کیفی از طریق computer vision و پیشبینی نقص',
|
||||
'نرخ بازگشت سرمایه (ROI) معمولاً کمتر از ۲ سال — یکی از سریعترین بازگشتها در صنعت',
|
||||
'نیاز به زیرساخت داده و سنسورگذاری کامل — سرمایهگذاری اولیه ۵–۲۰ میلیون دلار برای یک کارخانه',
|
||||
'کمبود متخصص داده در صنعت فولاد — چالش اصلی استقرار در ایران',
|
||||
],
|
||||
iranImpact: 'شرکتهای فولادی بزرگ ایران (فولاد مبارکه، ذوبآهن) دادههای تاریخی غنی دارند اما زیرساخت سنسور و IT ضعیف است. سرمایهگذاری ۵۰–۱۰۰ میلیون دلار در دیجیتالسازی میتواند ۲۰۰–۴۰۰ میلیون دلار صرفهجویی سالانه ایجاد کند. شرکتهای داخلی استارتآپی در این حوزه ظهور کردهاند اما نیاز به حمایت هدفمند دارند.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۰۳', tag: 'فناوری نوین', title: 'الکترولیز اکسید مذاب (MOE)',
|
||||
summary: 'تولید فولاد از طریق الکترولیز اکسید آهن با برق تجدیدپذیر — فناوری نسل بعدی',
|
||||
detail: {
|
||||
lead: 'MOE رادیکالترین رویکرد کربنزدایی فولاد است — هیچ گاز گلخانهای در فرآیند تولید نمیشود.',
|
||||
body: [
|
||||
'در MOE، اکسید آهن در اکسیژن مذاب حل شده و جریان الکتریکی اعمال میشود. آهن مذاب در کاتد جمع و اکسیژن خالص در آند آزاد میشود. پروژه Boston Metal (برنده جایزه MIT) پیشرو این فناوری است و ArcelorMittal ۱۰۰ میلیون دلار در آن سرمایهگذاری کرده.',
|
||||
'سطح آمادگی فناوری (TRL) در حال حاضر ۵–۶ از ۹ است. انتظار میرود تا ۲۰۳۲–۲۰۳۵ به مرحله تولید صنعتی برسد. هزینه فعلی بالاتر از DRI-H₂ است اما با توسعه مقیاس کاهش مییابد.',
|
||||
'مزیت استراتژیک MOE نسبت به DRI-H₂: نیاز به هیدروژن ندارد (مستقیماً از برق استفاده میکند)، اکسیژن خالص بهعنوان محصول جانبی با ارزش تولید میشود، و تئوری نشان میدهد هزینه نهایی میتواند از فولاد معمول کمتر باشد.',
|
||||
],
|
||||
bullets: [
|
||||
'صفر کربن در فرآیند — تنها محصول جانبی اکسیژن خالص است',
|
||||
'TRL 5-6 — احتمالاً ۲۰۳۲ برای نمونه صنعتی اول',
|
||||
'نیاز به برق تجدیدپذیر ارزان — هزینه برق ۶۰٪ هزینه تولید است',
|
||||
'اکسیژن جانبی میتواند در صنایع پزشکی، شیمیایی و گاز طبیعی فروخته شود',
|
||||
'Boston Metal، MIT، ArcelorMittal پیشروهای اصلی — فناوری هنوز باز-متن نیست',
|
||||
],
|
||||
iranImpact: 'افق MOE برای ایران ۲۰۳۵–۲۰۴۰ است، نه کوتاهمدت. اقدام فوری: ردیابی تحقیقات و ایجاد رابطه با Boston Metal برای لایسنس آینده. ظرفیت برق خورشیدی ارزان ایران میتواند MOE را اقتصادیتر از بسیاری از رقبا کند، اما این مزیت منوط به حل مشکل زیرساخت انرژی است.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۰۴', tag: 'پایداری', title: 'بازیافت و اقتصاد چرخشی',
|
||||
summary: 'افزایش نرخ بازیافت ضایعات فولادی و کاهش وابستگی به سنگآهن خام',
|
||||
detail: {
|
||||
lead: 'فولاد ۱۰۰٪ قابل بازیافت است و هر بار بدون افت کیفیت میتوان آن را بازیافت کرد — هیچ مادهای در جهان این مزیت را ندارد.',
|
||||
body: [
|
||||
'اقتصاد چرخشی فولاد در اروپا ۸۰٪ نرخ بازیافت دارد. در ایران این عدد ۲۲٪ است. هر تن فولاد بازیافتی ۱.۵ تن CO₂ صرفهجویی میکند و ۷۵٪ انرژی کمتر از مسیر کوره بلند نیاز دارد. ارزش اقتصادی بازار ضایعات جهانی ۶۰۰ میلیارد دلار در سال است.',
|
||||
'سیستم جمعآوری ضایعات در ایران ضعیف است. بخش زیادی از ضایعات فولادی بهویژه از صنایع خودرو، ساختمان و کشاورزی به دلیل عدم سازماندهی به هدر میرود یا با قیمت پایین صادر میشود. فرصت اقتصادی داخلی محاسبهشده: ۷۰۰ میلیون دلار در سال.',
|
||||
'فناوریهای جدید جداسازی ضایعات با استفاده از AI و سنسور (X-ray transmission، eddy current، laser-induced breakdown spectroscopy) امکان جداسازی آلیاژهای فولادی مختلف را با دقت ۹۸٪ فراهم میکنند — اساس اقتصاد چرخشی با کیفیت بالا.',
|
||||
],
|
||||
bullets: [
|
||||
'ایران ۲۲٪ نرخ بازیافت — ۵۸ واحد پایینتر از میانگین اروپا',
|
||||
'هر تن ضایعات ذوبشده ۲۰۰–۲۵۰ دلار صرفه انرژی و مواد اولیه',
|
||||
'افزایش سهم EAF از ضایعات نیاز به سنگآهن وارداتی را کم میکند',
|
||||
'گواهینامههای سبز اروپایی (ResponsibleSteel) درصد بازیافت را میسنجند',
|
||||
'فرصت صادرات محدود ضایعات باکیفیت به ترکیه و هند',
|
||||
],
|
||||
iranImpact: 'راهاندازی سیستم ملی جمعآوری و دستهبندی ضایعات فولادی با سرمایهگذاری ۳۰۰ میلیون دلار میتواند ۷۰۰ میلیون دلار در سال صرفهجویی ارزی ایجاد کند و نرخ بازیافت را از ۲۲٪ به ۴۰٪ برساند. این پروژه با بودجه صندوق توسعه ملی قابل تأمین مالی است.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۰۵', tag: 'تجهیزات', title: 'کوره قوس الکتریکی نسل جدید EAF',
|
||||
summary: 'EAF با راندمان انرژی ۴۰٪ بالاتر از نسل فعلی — مناسب برای شبکههای ناپایدار',
|
||||
detail: {
|
||||
lead: 'نسل جدید EAF با تزریق اکسیژن، پیشگرمایش ضایعات و کنترل AI، انرژی مصرفی را از ۵۵۰ به ۳۲۰ کیلوواتساعت/تن رسانده است.',
|
||||
body: [
|
||||
'پیشرفتهای کلیدی در EAF نسل جدید: سیستم Consteel (پیشگرمایش پیوسته ضایعات با گاز خروجی) که ۱۵–۲۰٪ انرژی صرفهجویی میکند، تزریق اکسیژن پیشرفته با کاهش زمان ذوب، و کنترل هوشمند قوس الکتریکی که نوسان برق شبکه را جبران میکند.',
|
||||
'Tenova و Danieli دو غول تجهیزات EAF آپدیتهای نسل جدید را با قیمت ۱۵–۲۵ میلیون دلار per upgrade ارائه میدهند. دوره بازگشت سرمایه معمولاً ۳–۵ سال است. نصب بر روی EAF موجود امکانپذیر است بدون توقف کامل تولید.',
|
||||
'فشار ETS اروپا و قیمت کربن ۶۵–۷۵ یورو/تن باعث شده ارتقای EAF اروپایی شتاب بگیرد. کارخانههای ایرانی با EAF کلاسیک در صورت صادرات به بازارهای با الزامات کربنی با ضرر مواجه میشوند.',
|
||||
],
|
||||
bullets: [
|
||||
'کاهش مصرف انرژی از ۵۵۰ به ۳۲۰ kWh/t — صرفهجویی ۱۰۰–۱۵۰ دلار/تن',
|
||||
'کاهش زمان tap-to-tap از ۶۵ به ۴۵ دقیقه — افزایش ۳۰٪ ظرفیت',
|
||||
'مناسب برای شبکههای ناپایدار با فیلترهای هارمونیک پیشرفته',
|
||||
'کاهش انتشار CO₂ بهعنوان محصول جانبی بهینهسازی انرژی',
|
||||
'Tenova, Danieli, SMS group ارائهدهندگان اصلی — فروش به ایران در برخی شرایط ممکن است',
|
||||
],
|
||||
iranImpact: 'ایران با ۴۲ میلیون تن ظرفیت EAF، بزرگترین بازار بالقوه ارتقای EAF در خاورمیانه است. ارتقای ۲۰ کوره بزرگ با سرمایهگذاری ۴۰۰ میلیون دلار میتواند ۸۰۰ میلیون دلار در سال در هزینه برق صرفهجویی کند. چالش: تحریمهای تجهیزاتی از Danieli و Tenova.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۰۶', tag: 'محیط زیست', title: 'توأمسازی CCS با تولید فولاد',
|
||||
summary: 'ترکیب کربنگیری با فرآیندهای موجود — راهحل میانمدت برای کاهش انتشار',
|
||||
detail: {
|
||||
lead: 'CCS در فولادسازی تنها فناوری است که میتواند بدون تغییر بنیادین فرآیند، کاهش فوری ۵۰–۶۰٪ انتشار را ممکن سازد.',
|
||||
body: [
|
||||
'کربنگیری پس از احتراق (post-combustion CCS) در خروجی دودکش کارخانه فولاد نصب میشود. گاز CO₂ جدا، فشرده و در سازندهای زمینشناسی تزریق میشود. هزینه: ۶۰–۱۰۰ دلار/تن CO₂ که با درآمد کربن CBAM اروپا قابل توجیه میشود.',
|
||||
'پروژه CCS در Abu Dhabi (ADNOC + Emirates Steel) اولین CCS صنعت فولاد در جهان است — ۸۰۰ هزار تن CO₂ در سال ذخیره میشود. در اروپا، قیمت کربن ETS بالای ۶۵ یورو CCS را اقتصادی میکند.',
|
||||
'چالش اصلی: نیاز به ذخیرهگاههای زمینشناسی مناسب در نزدیکی کارخانه. ایران دارای ذخیرهگاههای گاز خالیشده و سازندهای نمکی مناسب است، اما نقشهبرداری دقیق انجام نشده.',
|
||||
],
|
||||
bullets: [
|
||||
'کاهش ۵۰–۶۰٪ انتشار CO₂ بدون تغییر فرآیند اصلی',
|
||||
'هزینه جاری ۶۰–۱۰۰ دلار/تن CO₂ — قابل کاهش با مقیاس',
|
||||
'قیمت کربن CBAM اروپا (۶۵–۱۰۰ یورو/تن) CCS را توجیهپذیر میکند',
|
||||
'نیاز به زیرساخت حمل CO₂ (خط لوله یا مخزن) — هزینه اضافی',
|
||||
'Abu Dhabi UAE تنها پروژه فولاد + CCS عملیاتی در منطقه',
|
||||
],
|
||||
iranImpact: 'همکاری با Abu Dhabi برای بهرهگیری از دانش منطقهای CCS در فولاد ممکن است. ایران میادین گازی خالیشده ایدهآلی برای تزریق CO₂ دارد. تأمین مالی بینالمللی از طریق صندوقهای آبوهوایی (Green Climate Fund) ممکن است — شرط: خروج از لیست تحریمهای مالی.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۰۷', tag: 'دیجیتال', title: 'دیجیتال تویین (Digital Twin) کارخانه فولاد',
|
||||
summary: 'شبیهسازی کامل کارخانه در محیط دیجیتال — بهینهسازی بدون توقف تولید',
|
||||
detail: {
|
||||
lead: 'Digital Twin کارخانه فولاد یعنی یک کپی دیجیتال زنده از هر کوره، نورد و خط تولید که بهصورت real-time آپدیت میشود.',
|
||||
body: [
|
||||
'شرکت Siemens با پلتفرم SIMATIC Twin دیجیتال تویین کامل کارخانههای فولاد را ارائه میدهد. Tata Steel هند با این فناوری توانست ۵۰۰ میلیون دلار سرمایهگذاری را با شبیهسازی قبل از اجرا توجیه کند.',
|
||||
'کاربردهای اصلی: تست تنظیمات جدید قبل از اعمال روی خط واقعی، شبیهسازی سناریوهای خرابی و برنامهریزی تعمیرات، آموزش اپراتورها در محیط ایمن، و بهینهسازی مصرف انرژی با الگوریتمهای AI.',
|
||||
'هزینه استقرار digital twin برای یک کارخانه متوسط: ۵–۱۵ میلیون دلار. صرفهجویی مستند: کاهش ۱۵–۲۵٪ downtime، بهینهسازی ۸–۱۲٪ انرژی، کاهش ۳۰٪ هزینههای تعمیرات اورژانسی.',
|
||||
],
|
||||
bullets: [
|
||||
'Siemens، Dassault Systèmes، GE Digital پیشروهای اصلی digital twin فولاد',
|
||||
'TRL 8–9 — فناوری بالغ و قابل استقرار فوری',
|
||||
'کاهش ۱۵–۲۵٪ downtime — معادل ۵۰–۱۵۰ میلیون دلار در سال برای کارخانه بزرگ',
|
||||
'قابل استقرار روی تجهیزات موجود با نصب سنسور اضافی',
|
||||
'نیاز به اتصال اینترنت پایدار و امنیت سایبری — ریسک در محیطهای محدود',
|
||||
],
|
||||
iranImpact: 'فولاد مبارکه با ۷ میلیون تن ظرفیت بزرگترین کاندیدای digital twin در ایران است. استقرار با سرمایهگذاری ۳۰ میلیون دلار میتواند ۲۰۰ میلیون دلار صرفهجویی سالانه ایجاد کند. موانع: تحریم نرمافزار Siemens — راهحل: شرکتهای روسی و چینی جایگزین دارند.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۰۸', tag: 'متالورژی', title: 'فولادهای پیشرفته با استحکام بالا (AHSS)',
|
||||
summary: 'نسل جدید فولادهای سبک و مستحکم برای خودرو، هوافضا و ساختمان',
|
||||
detail: {
|
||||
lead: 'AHSS با همان وزن کمتر استحکام بیشتر ارائه میدهد — خودروساز جهانی هر مدل جدیدی را با این فولادها ۱۵۰–۲۰۰ کیلوگرم سبکتر میسازد.',
|
||||
body: [
|
||||
'خانواده AHSS شامل DP (Dual Phase)، TRIP، TWIP، Martensitic و Gen3 AHSS است. استحکام کششی از ۵۰۰ تا بیش از ۱۵۰۰ مگاپاسکال، در مقابل ۲۴۰ مگاپاسکال فولاد معمولی. خودروسازان برای هر ۱۰۰ کیلوگرم کاهش وزن ۸۰۰–۱۵۰۰ دلار بیشتر میپردازند.',
|
||||
'بازار AHSS جهانی ۱۰۵ میلیارد دلار در ۲۰۲۴ با رشد ۷٪ سالانه است. رانندگی اصلی: قوانین سختگیرانهتر مصرف سوخت خودرو در اروپا، آمریکا و چین. محصولات ایمنی مانند ستونهای B و سقف خودرو الزاماً باید از AHSS باشند.',
|
||||
'تولید AHSS نیاز به کنترل دقیق ترکیب شیمیایی (دهم درصد) و سیکلهای حرارتی دقیق دارد. ایران در تولید فولادهای معمول قوی است اما سرمایهگذاری در R&D این محصولات انجام نداده.',
|
||||
],
|
||||
bullets: [
|
||||
'استحکام ۳–۶ برابر بیشتر از فولاد معمولی با وزن کمتر',
|
||||
'قیمت ۲–۵ برابر بیشتر از HRC معمولی — حاشیه سود بالاتر',
|
||||
'بازار جهانی ۱۰۵ میلیارد دلار با رشد ۷٪ سالانه',
|
||||
'نیاز به خط نورد سرد پیشرفته و کورههای آنیل کنترلشده',
|
||||
'فولاد مبارکه ظرفیت پایه دارد اما نیاز به ارتقای R&D و تجهیزات',
|
||||
],
|
||||
iranImpact: 'بازار خودرو ایران با ۱.۵ میلیون تن مصرف فولاد سالانه، بزرگترین فرصت داخلی است. ایرانخودرو و سایپا در حال حاضر AHSS وارد میکنند. سرمایهگذاری ۲۰۰ میلیون دلار در خط تولید AHSS میتواند ۶۰۰ میلیون دلار واردات را جایگزین کند.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۰۹', tag: 'اتوماسیون', title: 'رباتسازی و اتوماسیون در نورد و بستهبندی',
|
||||
summary: 'استقرار رباتهای صنعتی در محیطهای پرخطر — کاهش نیروی انسانی و افزایش ایمنی',
|
||||
detail: {
|
||||
lead: 'کارخانههای فولاد پیشرو اروپا در سال ۲۰۲۴ نسبت ربات به کارگر ۱:۴ دارند — در ایران این عدد ۱:۱۵۰ است.',
|
||||
body: [
|
||||
'رباتهای نسل جدید در فولادسازی: رباتهای مقاوم حرارتی برای نمونهگیری از فولاد مذاب (کاهش خطر جانی)، سیستمهای AGV در انبار و حمل محصول، رباتهای جوشکاری و بازرسی کیفیت، و cobots برای همکاری با اپراتور.',
|
||||
'شرکت Kuka (آلمان/چین)، ABB، و Fanuc رهبران بازار ربات صنعتی فولاد هستند. هزینه یک ربات صنعتی کامل با نصب ۱۵۰–۳۰۰ هزار دلار است. دوره بازگشت سرمایه معمولاً ۲–۴ سال با در نظر گرفتن کاهش دستمزد، کاهش ضایعات و افزایش تولید.',
|
||||
'اتوماسیون کامل خطوط نورد (قرارگیری، بریدن، بستهبندی، لیبلزنی) با سرمایهگذاری ۵۰–۱۰۰ میلیون دلار برای یک خط میلگرد ۵۰۰ هزار تنی، ۱۵۰–۲۰۰ نیروی انسانی را حذف و سرعت خط را ۲۰٪ افزایش میدهد.',
|
||||
],
|
||||
bullets: [
|
||||
'کاهش ۴۰–۶۰٪ حوادث شغلی — مهمترین بازار اجتماعی',
|
||||
'افزایش ۲۰–۳۰٪ تولید با کاهش downtime بین شیفتها',
|
||||
'کاهش ضایعات بریدن و جابجایی ۵–۸٪',
|
||||
'Kuka (اکنون تحت مالکیت چین) قابل تأمین برای ایران است',
|
||||
'نیاز به آموزش مجدد ۱۰–۱۵٪ نیروی کار موجود بهعنوان اپراتور ربات',
|
||||
],
|
||||
iranImpact: 'چالش اجتماعی بزرگ: ایران ۱۵۰ هزار نفر در صنعت فولاد مستقیماً شاغل است. اتوماسیون باید با برنامه بازآموزی همراه باشد. فرصت: Kuka (چینی) و شرکتهای روسی بدون محدودیت تحریم در دسترس هستند. کارخانههای میلگرد کوچک بهترین نقطه شروع.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۱۰', tag: 'پوشش', title: 'روکشهای پیشرفته ضدخوردگی (Zn-Mg-Al)',
|
||||
summary: 'نسل جدید فولادهای گالوانیزه با مقاومت خوردگی ۳ برابر بهتر — انقلاب در صنعت ساختمان',
|
||||
detail: {
|
||||
lead: 'روکش Zn-Mg-Al جایگزین گالوانیزه معمولی میشود و ۳ برابر مقاومت بیشتر با ۳۰٪ کمتر روی دارد.',
|
||||
body: [
|
||||
'روکشهای Zn-Mg-Al که به Magnelis, Zagnelis, ZAM معروفند، با افزودن ۲–۳٪ منیزیم و آلومینیم به پوشش روی، مقاومت خوردگی را سهبرابر میکنند. کاربرد اصلی: سازههای فولادی ساختمانی، لبههای برشخورده قطعات، محیطهای دریایی.',
|
||||
'بازار این محصول در اروپا ۴ میلیون تن در سال است. حاشیه سود ۳۰–۵۰٪ بالاتر از گالوانیزه معمولی. ArcelorMittal، Tata Steel، POSCO کل ظرفیت بازار پریمیوم را کنترل میکنند.',
|
||||
'تولید این محصول نیاز به خط گالوانیزه مداوم (continuous galvanizing line) با دقت ترکیب حمام بالا دارد. ایران در حال حاضر Zn-Mg-Al وارد میکند — ظرفیت تولید داخلی صفر است.',
|
||||
],
|
||||
bullets: [
|
||||
'مقاومت خوردگی ۳ برابر بهتر با ۳۰٪ منیزیم کمتر',
|
||||
'قیمت ۲۵–۴۰٪ بالاتر از گالوانیزه معمولی — حاشیه بالاتر',
|
||||
'نیاز به خط گالوانیزه مداوم مجهز — سرمایهگذاری ۱۰۰–۱۵۰ میلیون دلار',
|
||||
'بازار ساختمانی ایران ۱.۲ میلیون تن/سال مصرف فولاد روکشدار',
|
||||
'منیزیم برای آلیاژ از ایران داخلی قابل تأمین است',
|
||||
],
|
||||
iranImpact: 'ایران ۸۰۰ هزار تن در سال گالوانیزه وارد میکند. خط تولید Zn-Mg-Al با ۱۵۰ میلیون دلار سرمایهگذاری میتواند این واردات را جایگزین کند و بازار صادراتی عراق، افغانستان و پاکستان را هدف بگیرد. فناوری از چین در دسترس است.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۱۱', tag: 'ساخت افزودنی', title: 'چاپ سهبعدی فولاد در قطعات صنعتی',
|
||||
summary: 'تولید قطعات پیچیده فولادی با WAAM و SLM — تحول در تعمیرات و قطعات یدکی',
|
||||
detail: {
|
||||
lead: 'چاپ سهبعدی فولاد دیگر آزمایشگاهی نیست — Shell یک چرخ پروانه دریایی ۱۰۰٪ چاپشده را در اروپا گواهی گرفت.',
|
||||
body: [
|
||||
'دو فناوری اصلی: SLM (Selective Laser Melting) برای قطعات دقیق و کوچک، و WAAM (Wire Arc Additive Manufacturing) برای قطعات بزرگ فولادی. WAAM میتواند قطعات تا ۱۰ تن با هزینه ۴۰٪ کمتر از فورج بسازد.',
|
||||
'کاربردهای فوری برای صنعت فولاد: ساخت قطعات یدکی نایاب تجهیزات قدیمی، اجزای نسوز پیچیده کوره، الکترودهای شکلدار EAF، و قالبهای نورد با هندسه بهینهشده. در ایران زیر تحریم، قطعات یدکی چالش بزرگی است.',
|
||||
'شرکت GEFERTEC (آلمان) سیستم WAAM صنعتی با ۱.۵ میلیون دلار میفروشد. برخی شرکتهای چینی و روسی هم این فناوری را دارند و تحریمپذیر نیستند.',
|
||||
],
|
||||
bullets: [
|
||||
'WAAM: سرعت رسوبگذاری ۱–۱۵ kg/h — مناسب قطعات بزرگ',
|
||||
'صرفهجویی ۴۰٪ مواد در مقایسه با ماشینکاری از بلوک',
|
||||
'قطعات یدکی تجهیزات اروپایی تحریمی — فرصت جدی برای ایران',
|
||||
'TRL 7-8 — آماده استقرار صنعتی در کاربردهای خاص',
|
||||
'فناوری از روسیه، چین و ترکیه قابل تأمین است',
|
||||
],
|
||||
iranImpact: 'بزرگترین فرصت فوری ایران: ساخت قطعات یدکی نایاب برای تجهیزات اروپایی که زیر تحریم نمیتوان خرید. یک مرکز WAAM با ۵ میلیون دلار سرمایهگذاری میتواند سالانه ۵۰ میلیون دلار قطعات را در داخل بسازد. کارخانههای فولاد مبارکه و ذوبآهن اولین مشتریان.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '۱۲', tag: 'پردازش داده', title: 'پلتفرمهای داده صنعت فولاد (Steel Data Platforms)',
|
||||
summary: 'تجمیع دادههای تولید، قیمت، کیفیت و زنجیره تأمین در یک اکوسیستم دیجیتال',
|
||||
detail: {
|
||||
lead: 'کنترل داده یعنی کنترل قیمتگذاری — شرکتی که داده واقعی بازار دارد، نه قیمتنامه منتشرشده، همیشه بهتر معامله میکند.',
|
||||
body: [
|
||||
'پلتفرمهایی مانند Fastmarkets، Argus Media و S&P Global Platts دادههای real-time قیمت فولاد را از بازارهای مختلف جمعآوری و میفروشند. هر اشتراک ۵۰–۲۵۰ هزار دلار در سال. ولی ابزار اصلی آنها است: مذاکره مستند بر اساس داده.',
|
||||
'نسل بعدی: پلتفرمهای تبادل B2B فولاد مانند Metalshub و Steel Direct در اروپا که خرید و فروش فولاد را مانند بورس اوراق بهادار مستقیم بین تولیدکننده و خریدار انجام میدهند. حجم معاملات ۵ میلیارد دلار در ۲۰۲۳.',
|
||||
'در ایران، بورس کالا برای فولاد وجود دارد اما شفافیت داده ضعیف است. فرصت: ایجاد پلتفرم داده منطقهای (ایران + عراق + افغانستان + پاکستان) که قیمتهای واقعی معامله بین این کشورها را منتشر کند.',
|
||||
],
|
||||
bullets: [
|
||||
'Fastmarkets، Argus Media داده real-time قیمت جهانی دارند',
|
||||
'Metalshub و Steel Direct: مدل B2B مستقیم بدون واسطه',
|
||||
'بورس کالای ایران: ابزار موجود اما نیاز به ارتقای داده و شفافیت',
|
||||
'هوش مصنوعی روی دادههای تاریخی قیمت: پیشبینی ۸۷٪ دقیق ۳۰ روزه',
|
||||
'فرصت منطقهای: پلتفرم داده MENA+Central Asia برای فولاد',
|
||||
],
|
||||
iranImpact: 'اندیشکده فولاد در موقعیت مناسبی برای راهاندازی پلتفرم داده منطقهای فولاد ایران است. جمعآوری داده واقعی معاملات صادراتی (عراق، افغانستان، پاکستان) و انتشار شاخص قیمتی قابل اعتماد میتواند ابزار چانهزنی صادرکنندگان ایرانی را بهبود دهد.',
|
||||
},
|
||||
},
|
||||
],
|
||||
en: [
|
||||
{ num: '01', title: 'Hydrogen Steel (DRI-H₂)', tag: 'Clean Energy', summary: 'Replacing coke with green hydrogen in direct reduction furnaces — the steel industry\'s path to carbon neutrality' },
|
||||
{ num: '02', title: 'Digitalization & AI in Production', tag: 'Artificial Intelligence', summary: 'Machine learning applied to smelting optimization, quality defect prediction, and waste reduction' },
|
||||
{ num: '03', title: 'Molten Oxide Electrolysis (MOE)', tag: 'Emerging Tech', summary: 'Producing steel via electrolysis of iron oxide using renewable electricity — next-generation technology' },
|
||||
{ num: '04', title: 'Recycling & Circular Economy', tag: 'Sustainability', summary: 'Increasing steel scrap recycling rates and reducing dependence on raw iron ore' },
|
||||
{ num: '05', title: 'New-Generation Electric Arc Furnace', tag: 'Equipment', summary: 'EAF with 40% higher energy efficiency than current generation — optimized for unstable power grids' },
|
||||
{ num: '06', title: 'CCS Integration with Steel Production',tag: 'Environment', summary: 'Combining carbon capture with existing processes — a medium-term solution for emission reduction' },
|
||||
{
|
||||
num: '01', tag: 'Clean Energy', title: 'Hydrogen Steel (DRI-H₂)',
|
||||
summary: "Replacing coke with green hydrogen in direct reduction furnaces — the steel industry's path to carbon neutrality",
|
||||
detail: {
|
||||
lead: 'DRI-H₂ is the most fundamental technological transformation in steel history since the invention of the oxygen converter.',
|
||||
body: [
|
||||
'In DRI-H₂, hydrogen gas replaces natural gas as the reducing agent. The by-product is water, not CO₂. HYBRIT (Sweden) produced the world\'s first hydrogen steel in 2021. Current cost is 1.5–2× conventional steel.',
|
||||
'The main challenge is green hydrogen cost. Currently $4–6/kg; economic viability requires below $2/kg. IEA projects this will fall to $1.5–2/kg by 2030.',
|
||||
'Globally, SSAB, ArcelorMittal, ThyssenKrupp and Voestalpine have industrial-scale plans for 2028–2032. Total announced global investment exceeds $50B.',
|
||||
],
|
||||
bullets: [
|
||||
'95–98% CO₂ reduction vs. blast furnace route',
|
||||
'Requires abundant renewable electricity for hydrogen production',
|
||||
'Compatible with existing DRI furnaces — gradual conversion possible',
|
||||
'Current cost: $650–750/t vs. $450–500 conventional steel',
|
||||
'EU CBAM turns this from a cost to a competitive advantage',
|
||||
],
|
||||
iranImpact: 'Iran, with 70% of steelmaking capacity DRI-based (highest ratio globally), is uniquely positioned for DRI-H₂. Iran\'s solar potential enables cheap green hydrogen. Main challenges: international financing under sanctions and need for European technology partnerships.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '02', tag: 'Artificial Intelligence', title: 'Digitalization & AI in Production',
|
||||
summary: 'Machine learning applied to smelting optimization, quality defect prediction, and waste reduction',
|
||||
detail: {
|
||||
lead: 'AI deployment in steel plants has proven 5–15% energy cost reduction and 30–50% quality waste reduction.',
|
||||
body: [
|
||||
"POSCO Korea reduced energy consumption 12% with ML-based furnace control. Tata Steel increased surface crack detection from 72% to 98% accuracy with computer vision on rolling lines. ThyssenKrupp cut waste 40% with pre-failure defect prediction AI.",
|
||||
'Major AI applications in steelmaking: EAF charge optimization (electrode cost reduction), refractory life prediction, online tensile strength control in cold rolling, and predictive maintenance.',
|
||||
'Next wave: specialized LLMs trained on metallurgical data that explain process adjustments in natural language in real-time — reducing dependency on senior metallurgists.',
|
||||
],
|
||||
bullets: [
|
||||
'5–15% energy reduction with AI optimization in EAF and BF furnaces',
|
||||
'30–50% quality waste reduction via computer vision and defect prediction',
|
||||
'ROI typically under 2 years — among the fastest paybacks in industry',
|
||||
'Requires data infrastructure and full sensor coverage — $5–20M initial investment',
|
||||
'Data scientist shortage in steel industry — main deployment challenge in Iran',
|
||||
],
|
||||
iranImpact: 'Major Iranian steel companies (Mobarakeh, Zobahan) have rich historical data but weak sensor and IT infrastructure. A $50–100M digitalization investment could generate $200–400M in annual savings. Domestic startups are emerging but need targeted support.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '03', tag: 'Emerging Tech', title: 'Molten Oxide Electrolysis (MOE)',
|
||||
summary: 'Producing steel via electrolysis of iron oxide using renewable electricity — next-generation technology',
|
||||
detail: {
|
||||
lead: 'MOE is the most radical decarbonization approach for steel — zero greenhouse gases are produced in the process.',
|
||||
body: [
|
||||
'In MOE, iron oxide is dissolved in molten oxide and electric current is applied. Molten iron collects at the cathode and pure oxygen is released at the anode. Boston Metal (MIT spinout) is the pioneer, with ArcelorMittal investing $100M.',
|
||||
'Current TRL is 5–6 of 9. Expected to reach industrial production scale by 2032–2035. Current cost is higher than DRI-H₂ but decreases with scale.',
|
||||
'MOE\'s strategic advantage over DRI-H₂: no hydrogen needed (uses electricity directly), pure oxygen as a valuable by-product, and theory suggests final cost could undercut conventional steel.',
|
||||
],
|
||||
bullets: [
|
||||
'Zero carbon — only by-product is pure oxygen',
|
||||
'TRL 5-6 — likely first industrial unit by 2032',
|
||||
'Requires cheap renewable power — electricity is 60% of production cost',
|
||||
'By-product oxygen can be sold to medical, chemical, and gas industries',
|
||||
'Boston Metal, MIT, ArcelorMittal are the main players — not open-source',
|
||||
],
|
||||
iranImpact: 'The MOE horizon for Iran is 2035–2040, not near-term. Immediate action: track research and build a relationship with Boston Metal for future licensing. Iran\'s cheap solar electricity could make MOE more economical than many competitors — contingent on resolving energy infrastructure.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '04', tag: 'Sustainability', title: 'Recycling & Circular Economy',
|
||||
summary: 'Increasing steel scrap recycling rates and reducing dependence on raw iron ore',
|
||||
detail: {
|
||||
lead: 'Steel is 100% recyclable with no quality loss — no material on earth shares this advantage.',
|
||||
body: [
|
||||
'European steel circular economy achieves 80% recycling rates. In Iran, this is 22%. Every tonne of recycled steel saves 1.5t CO₂ and uses 75% less energy than the blast furnace route. Global scrap market value: $600B annually.',
|
||||
'Iran\'s scrap collection system is weak. Large volumes from automotive, construction and agriculture are wasted or exported cheaply due to lack of organization. Estimated domestic economic opportunity: $700M per year.',
|
||||
'New AI and sensor-based sorting technologies (X-ray transmission, eddy current, laser spectroscopy) enable sorting of different steel alloys at 98% accuracy — the foundation of high-quality circular economy.',
|
||||
],
|
||||
bullets: [
|
||||
'Iran 22% recycling rate — 58 points below European average',
|
||||
'Each tonne of recycled scrap saves $200–250 in energy and raw materials',
|
||||
'Higher EAF scrap share reduces dependence on imported iron ore',
|
||||
'European green certifications (ResponsibleSteel) measure recycling percentages',
|
||||
'Limited opportunity for high-quality scrap export to Turkey and India',
|
||||
],
|
||||
iranImpact: 'Setting up a national steel scrap collection and sorting system with $300M investment could generate $700M annually in foreign exchange savings and raise the recycling rate from 22% to 40%. This project is financeable through the National Development Fund.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '05', tag: 'Equipment', title: 'New-Generation Electric Arc Furnace (EAF)',
|
||||
summary: 'EAF with 40% higher energy efficiency than current generation — optimized for unstable power grids',
|
||||
detail: {
|
||||
lead: 'Next-gen EAF with oxygen injection, scrap preheating, and AI control has cut energy from 550 to 320 kWh/t.',
|
||||
body: [
|
||||
'Key advances in next-gen EAF: Consteel system (continuous scrap preheating with off-gas) saving 15–20% energy; advanced oxygen injection with reduced melt time; intelligent arc control that compensates for grid fluctuations.',
|
||||
'Tenova and Danieli offer next-gen EAF upgrades at $15–25M per unit. Typical payback period is 3–5 years. Installation on existing EAF is possible without complete production shutdown.',
|
||||
'EU ETS pressure and carbon price of €65–75/t has accelerated European EAF upgrades. Iranian plants with classic EAF face losses when exporting to markets with carbon requirements.',
|
||||
],
|
||||
bullets: [
|
||||
'Energy reduction from 550 to 320 kWh/t — saving $100–150/t',
|
||||
'Tap-to-tap time reduction from 65 to 45 min — 30% capacity increase',
|
||||
'Suitable for unstable grids with advanced harmonic filters',
|
||||
'CO₂ reduction as a by-product of energy optimization',
|
||||
'Tenova, Danieli, SMS group — sale to Iran possible under some conditions',
|
||||
],
|
||||
iranImpact: 'Iran with 42Mt EAF capacity is the largest potential EAF upgrade market in the Middle East. Upgrading 20 large furnaces with $400M investment could save $800M annually in electricity costs. Challenge: equipment sanctions from Danieli and Tenova.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '06', tag: 'Environment', title: 'CCS Integration with Steel Production',
|
||||
summary: 'Combining carbon capture with existing processes — a medium-term solution for emission reduction',
|
||||
detail: {
|
||||
lead: 'CCS is the only technology that can enable immediate 50–60% emission reduction without fundamentally changing the steel production process.',
|
||||
body: [
|
||||
'Post-combustion CCS is installed at the steel plant stack outlet. CO₂ is separated, compressed and injected into geological formations. Cost: $60–100/t CO₂ — justifiable against EU CBAM carbon income.',
|
||||
'Abu Dhabi CCS project (ADNOC + Emirates Steel) is the world\'s first steel-CCS operation — storing 800kt CO₂/year. In Europe, ETS carbon price above €65 makes CCS economically viable.',
|
||||
'Main challenge: need for suitable geological storage near the plant. Iran has depleted gas fields and saline aquifers but detailed mapping has not been done.',
|
||||
],
|
||||
bullets: [
|
||||
'50–60% CO₂ reduction without changing the core process',
|
||||
'Current cost $60–100/t CO₂ — reducible with scale',
|
||||
'EU CBAM carbon price (€65–100/t) justifies CCS investment',
|
||||
'Requires CO₂ transport infrastructure (pipeline or tank) — additional cost',
|
||||
'Abu Dhabi UAE is the only operational steel+CCS project in the region',
|
||||
],
|
||||
iranImpact: 'Collaboration with Abu Dhabi to leverage regional CCS knowledge in steel is possible. Iran has ideal depleted gas fields for CO₂ injection. International financing through climate funds (Green Climate Fund) is possible — condition: removal from financial sanctions lists.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '07', tag: 'Digital', title: 'Digital Twin for Steel Plants',
|
||||
summary: 'Full plant simulation in a digital environment — optimization without production downtime',
|
||||
detail: {
|
||||
lead: 'A steel plant Digital Twin means a live digital copy of every furnace, rolling mill and production line that updates in real-time.',
|
||||
body: [
|
||||
'Siemens offers full steel plant digital twin with the SIMATIC Twin platform. Tata Steel India used the technology to justify a $500M investment with pre-execution simulation.',
|
||||
'Main applications: test new settings before applying to real line, simulate failure scenarios and plan maintenance, train operators in a safe environment, and optimize energy consumption with AI algorithms.',
|
||||
'Deployment cost for a medium plant: $5–15M. Documented savings: 15–25% downtime reduction, 8–12% energy optimization, 30% reduction in emergency repair costs.',
|
||||
],
|
||||
bullets: [
|
||||
'Siemens, Dassault Systèmes, GE Digital are the main steel digital twin players',
|
||||
'TRL 8–9 — mature technology, immediately deployable',
|
||||
'15–25% downtime reduction — equivalent to $50–150M/year for a large plant',
|
||||
'Deployable on existing equipment with additional sensor installation',
|
||||
'Requires stable internet connection and cybersecurity — risk in restricted environments',
|
||||
],
|
||||
iranImpact: 'Mobarakeh Steel with 7Mt capacity is Iran\'s biggest digital twin candidate. Deployment with $30M investment could generate $200M in annual savings. Barrier: Siemens software sanctions — solution: Russian and Chinese alternatives exist.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '08', tag: 'Metallurgy', title: 'Advanced High Strength Steels (AHSS)',
|
||||
summary: 'Next-generation lightweight, high-strength steels for automotive, aerospace and construction',
|
||||
detail: {
|
||||
lead: 'AHSS delivers more strength for less weight — every new car model is now 150–200 kg lighter thanks to these steels.',
|
||||
body: [
|
||||
'The AHSS family includes DP (Dual Phase), TRIP, TWIP, Martensitic and Gen3 AHSS. Tensile strength from 500 to over 1,500 MPa vs. 240 MPa conventional steel. Automakers pay $800–1,500 extra per 100kg weight reduction.',
|
||||
'Global AHSS market is $105B in 2024, growing 7% annually. Main driver: stricter fuel economy regulations in Europe, USA and China. Safety components like B-pillars and car roofs must use AHSS.',
|
||||
'AHSS production requires precise chemical composition control (tenths of a percent) and accurate thermal cycles. Iran is strong in conventional steel but hasn\'t invested in R&D for these products.',
|
||||
],
|
||||
bullets: [
|
||||
'3–6× higher strength than conventional steel at lower weight',
|
||||
'2–5× higher price than conventional HRC — higher margins',
|
||||
'$105B global market growing 7% annually',
|
||||
'Requires advanced cold rolling lines and controlled annealing furnaces',
|
||||
'Mobarakeh has base capacity but needs R&D and equipment upgrades',
|
||||
],
|
||||
iranImpact: "Iran's automotive market with 1.5Mt annual steel consumption is the biggest domestic opportunity. Iran Khodro and SAIPA currently import AHSS. A $200M AHSS production line investment could substitute $600M in imports.",
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '09', tag: 'Automation', title: 'Robotics & Automation in Rolling and Packaging',
|
||||
summary: 'Industrial robots in high-risk environments — reducing headcount and improving safety',
|
||||
detail: {
|
||||
lead: 'Leading European steel plants have a robot-to-worker ratio of 1:4 in 2024 — in Iran this is 1:150.',
|
||||
body: [
|
||||
'Next-gen robots in steelmaking: heat-resistant robots for molten steel sampling (eliminating risk to life), AGV systems in warehouse and product handling, welding and quality inspection robots, and cobots for operator collaboration.',
|
||||
'Kuka (Germany/China), ABB and Fanuc lead the industrial steel robot market. A complete industrial robot with installation costs $150–300k. Typical payback: 2–4 years accounting for wage reduction, waste reduction and output increase.',
|
||||
'Full automation of rolling lines (positioning, cutting, packaging, labeling) with $50–100M investment for a 500kt rebar line eliminates 150–200 workers and increases line speed 20%.',
|
||||
],
|
||||
bullets: [
|
||||
'40–60% reduction in occupational incidents — most important social benefit',
|
||||
'20–30% output increase with reduced inter-shift downtime',
|
||||
'5–8% reduction in cutting and handling waste',
|
||||
'Kuka (now Chinese-owned) is obtainable for Iran',
|
||||
'10–15% of existing workforce needs retraining as robot operators',
|
||||
],
|
||||
iranImpact: 'Major social challenge: Iran has 150,000 directly employed in the steel industry. Automation must be paired with retraining programs. Opportunity: Kuka (Chinese) and Russian companies are available without sanctions. Small rebar plants are the best starting point.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '10', tag: 'Coating', title: 'Advanced Anti-Corrosion Coatings (Zn-Mg-Al)',
|
||||
summary: 'Next-gen galvanized steel with 3× better corrosion resistance — a revolution in construction',
|
||||
detail: {
|
||||
lead: 'Zn-Mg-Al coatings replace conventional galvanizing with 3× corrosion resistance using 30% less zinc.',
|
||||
body: [
|
||||
'Zn-Mg-Al coatings (Magnelis, Zagnelis, ZAM brands) achieve triple the corrosion resistance by adding 2–3% magnesium and aluminum to zinc coating. Main applications: structural steel, cut edges, marine environments.',
|
||||
'European market: 4Mt per year. Margin 30–50% above conventional galvanizing. ArcelorMittal, Tata Steel, POSCO control the premium market.',
|
||||
'Production requires a continuous galvanizing line with high bath composition precision. Iran currently imports Zn-Mg-Al — domestic production capacity is zero.',
|
||||
],
|
||||
bullets: [
|
||||
'3× better corrosion resistance with 30% less magnesium',
|
||||
'25–40% higher price than conventional galvanized — higher margins',
|
||||
'Requires continuous galvanizing line — $100–150M investment',
|
||||
"Iran's building market consumes 1.2Mt/year of coated steel",
|
||||
'Magnesium for the alloy can be sourced domestically from Iran',
|
||||
],
|
||||
iranImpact: 'Iran imports 800kt of galvanized steel per year. A Zn-Mg-Al production line with $150M investment could substitute imports and target export markets in Iraq, Afghanistan and Pakistan. Technology is available from China.',
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '11', tag: 'Additive Mfg', title: '3D Printing of Steel Industrial Components',
|
||||
summary: 'Complex steel parts production with WAAM and SLM — transformation in repairs and spare parts',
|
||||
detail: {
|
||||
lead: 'Steel 3D printing is no longer a lab exercise — Shell certified a 100% printed marine propeller in Europe.',
|
||||
body: [
|
||||
'Two main technologies: SLM (Selective Laser Melting) for precise small parts, and WAAM (Wire Arc Additive Manufacturing) for large steel components. WAAM can build parts up to 10 tonnes at 40% less cost than forging.',
|
||||
'Immediate applications for the steel industry: building scarce spare parts for old equipment, complex refractory furnace components, shaped EAF electrodes, and optimally-shaped rolling dies. Under sanctions in Iran, spare parts are a major challenge.',
|
||||
'GEFERTEC (Germany) sells industrial WAAM systems for $1.5M. Chinese and Russian companies also have this technology and are not sanctioned.',
|
||||
],
|
||||
bullets: [
|
||||
'WAAM: 1–15 kg/h deposition rate — suitable for large parts',
|
||||
'40% material savings vs. machining from a block',
|
||||
'Spare parts for sanctioned European equipment — a serious opportunity for Iran',
|
||||
'TRL 7-8 — ready for industrial deployment in specific applications',
|
||||
'Technology obtainable from Russia, China and Turkey',
|
||||
],
|
||||
iranImpact: "Iran's biggest immediate opportunity: building scarce spare parts for European equipment that can't be purchased under sanctions. A WAAM center with $5M investment can build $50M worth of parts annually. Mobarakeh and Zobahan are the first customers.",
|
||||
},
|
||||
},
|
||||
{
|
||||
num: '12', tag: 'Data', title: 'Steel Industry Data Platforms',
|
||||
summary: 'Aggregating production, price, quality and supply chain data into a digital ecosystem',
|
||||
detail: {
|
||||
lead: "Controlling data means controlling pricing — the company with real market data, not published price lists, always negotiates better.",
|
||||
body: [
|
||||
'Platforms like Fastmarkets, Argus Media and S&P Global Platts collect real-time steel price data from different markets and sell it. Each subscription $50–250k per year. But the real tool is: documented negotiation based on data.',
|
||||
'Next generation: B2B steel exchange platforms like Metalshub and Steel Direct in Europe that enable direct buying and selling between producer and buyer like a stock exchange. Transaction volume $5B in 2023.',
|
||||
'In Iran, the commodity exchange exists for steel but data transparency is weak. Opportunity: create a regional data platform (Iran + Iraq + Afghanistan + Pakistan) publishing real transaction prices between these countries.',
|
||||
],
|
||||
bullets: [
|
||||
'Fastmarkets, Argus Media provide real-time global price data',
|
||||
'Metalshub and Steel Direct: direct B2B model without intermediary',
|
||||
'Iran Commodity Exchange: existing tool but needs data and transparency upgrade',
|
||||
'AI on historical price data: 87% accurate 30-day forecasting',
|
||||
'Regional opportunity: MENA+Central Asia steel data platform',
|
||||
],
|
||||
iranImpact: 'The Steel Think Tank is well-positioned to launch a regional Iranian steel data platform. Collecting real transaction data from steel exports (Iraq, Afghanistan, Pakistan) and publishing a reliable price index can improve the negotiating power of Iranian exporters.',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const KPIS = {
|
||||
fa: [
|
||||
{ value: '۱۸۸۵', unit: 'میلیون تن', label: 'تولید جهانی فولاد ۲۰۲۳', delta: '+۱.۸٪ رشد' },
|
||||
{ value: '۵۵٪', unit: '', label: 'سهم چین از تولید جهانی', delta: 'پایدار' },
|
||||
{ value: '۸۵', unit: 'میلیارد $', label: 'سرمایهگذاری R&D فولاد جهانی', delta: '+۲۲٪ در ۵ سال' },
|
||||
{ value: '۴۸', unit: 'میلیارد $', label: 'تعهدات فناوری سبز اعلامشده', delta: 'تا ۲۰۳۰' },
|
||||
{ value: '۵', unit: 'TRL', label: 'میانگین آمادگی DRI-H₂', delta: 'هدف ۸ تا ۲۰۳۰' },
|
||||
],
|
||||
en: [
|
||||
{ value: '1885', unit: 'Mt', label: 'Global steel production 2023', delta: '+1.8% growth' },
|
||||
{ value: '55%', unit: '', label: "China's share of global output", delta: 'Stable' },
|
||||
{ value: '$85', unit: 'B', label: 'Global steel R&D investment', delta: '+22% in 5 years' },
|
||||
{ value: '$48', unit: 'B', label: 'Announced green tech commitments', delta: 'By 2030' },
|
||||
{ value: '5', unit: 'TRL', label: 'Avg DRI-H₂ readiness level', delta: 'Target 8 by 2030' },
|
||||
],
|
||||
}
|
||||
|
||||
const T = {
|
||||
fa: { overline: 'TECHNOLOGY & INNOVATION', heading: 'فناوری و نوآوری', sub: 'فناوریهای نوظهور در صنعت فولاد جهان و افق کاربرد آنها در ایران' },
|
||||
en: { overline: 'TECHNOLOGY & INNOVATION', heading: 'Technology & Innovation', sub: 'Emerging technologies in the global steel industry and their application horizon in Iran' },
|
||||
fa: {
|
||||
overline: 'TECHNOLOGY & INNOVATION',
|
||||
heading: 'فناوری و نوآوری',
|
||||
sub: 'فناوریهای نوظهور در صنعت فولاد جهان، سطح آمادگی فناوری و افق کاربرد آنها در ایران',
|
||||
kpiHeading: 'شاخصهای کلیدی فناوری و R&D صنعت فولاد',
|
||||
techHeading: 'فناوریهای نوظهور — تحلیل جامع',
|
||||
clickHint: 'برای مطالعه تحلیل کامل کلیک کنید',
|
||||
},
|
||||
en: {
|
||||
overline: 'TECHNOLOGY & INNOVATION',
|
||||
heading: 'Technology & Innovation',
|
||||
sub: 'Emerging technologies in the global steel industry, technology readiness levels, and their application horizon in Iran',
|
||||
kpiHeading: 'Key Technology & R&D Indicators — Steel Industry',
|
||||
techHeading: 'Emerging Technologies — Comprehensive Analysis',
|
||||
clickHint: 'Click to read full analysis',
|
||||
},
|
||||
}
|
||||
|
||||
export default function Technology() {
|
||||
const { lang } = useLang()
|
||||
const t = T[lang]
|
||||
const techs = TECHS[lang]
|
||||
const kpis = KPIS[lang]
|
||||
const [selected, setSelected] = useState<(typeof techs)[number] | null>(null)
|
||||
|
||||
const toCardDetail = (tech: typeof techs[number]): CardDetail => ({
|
||||
tag: tech.tag,
|
||||
title: tech.title,
|
||||
num: tech.num,
|
||||
topBarColor: 'var(--ink)',
|
||||
lead: tech.detail.lead,
|
||||
body: tech.detail.body,
|
||||
bullets: tech.detail.bullets,
|
||||
iranImpact: tech.detail.iranImpact,
|
||||
})
|
||||
|
||||
return (
|
||||
<div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<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 }}>
|
||||
|
|
@ -43,7 +559,33 @@ export default function Technology() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── KPI Strip ── */}
|
||||
<div style={{ borderBottom: '1px solid var(--rule-thin)', background: 'var(--paper-2)' }}>
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 36, paddingBottom: 36 }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', marginBottom: 20, textTransform: 'uppercase' }}>{t.kpiHeading}</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24 }}>
|
||||
{kpis.map((k, i) => (
|
||||
<motion.div key={i} initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.07 }}>
|
||||
<div style={{ fontSize: 'clamp(26px,3vw,38px)', fontWeight: 900, letterSpacing: '-1px', color: 'var(--ink)', lineHeight: 1 }}>
|
||||
{k.value}<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-3)', marginRight: 4, marginLeft: 4 }}>{k.unit}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.5 }}>{k.label}</div>
|
||||
<div style={{ fontSize: 10, color: 'var(--red)', fontWeight: 700, marginTop: 4 }}>{k.delta}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Tech Grid ── */}
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginBottom: 28, flexWrap: 'wrap' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 36, height: 2, background: 'var(--red)' }} />
|
||||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.techHeading}</span>
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'var(--ink-5)', fontWeight: 500 }}>{t.clickHint}</span>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
|
||||
{techs.map((tech, i) => (
|
||||
<motion.div
|
||||
|
|
@ -51,8 +593,10 @@ export default function Technology() {
|
|||
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' }}
|
||||
transition={{ duration: 0.4, delay: i * 0.04 }}
|
||||
onClick={() => setSelected(tech)}
|
||||
style={{ background: 'var(--paper)', padding: '28px 24px', position: 'relative', cursor: 'pointer' }}
|
||||
whileHover={{ backgroundColor: 'var(--paper-2)' }}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 3, background: 'var(--ink)' }} />
|
||||
<div style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-3px', color: 'rgba(26,23,18,0.06)', lineHeight: 1, marginBottom: 10, direction: 'ltr' }}>{tech.num}</div>
|
||||
|
|
@ -63,6 +607,8 @@ export default function Technology() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DetailSheet item={selected ? toCardDetail(selected) : null} onClose={() => setSelected(null)} lang={lang} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue