210 lines
20 KiB
TypeScript
210 lines
20 KiB
TypeScript
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، مقررات کربنی جهانی و نقشهراه گذار سبز صنعت فولاد ایران',
|
||
kpiHeading: 'شاخصهای کلیدی پایداری صنعت فولاد ایران',
|
||
sigHeading: 'رویدادها و مقررات ESG',
|
||
initHeading: 'نقشهراه گذار سبز — اقدامات اولویتدار',
|
||
},
|
||
en: {
|
||
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 }}>
|
||
<div style={{ width: 36, height: 2, background: 'var(--red)' }} />
|
||
<span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.overline}</span>
|
||
</div>
|
||
<h1 style={{ fontSize: 'clamp(28px,4vw,52px)', fontWeight: 900, letterSpacing: '-1.5px', color: 'var(--ink)', marginBottom: 12 }}>{t.heading}</h1>
|
||
<p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.7, maxWidth: 560 }}>{t.sub}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── 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>
|
||
)
|
||
}
|