241 lines
13 KiB
TypeScript
241 lines
13 KiB
TypeScript
import type { CSSProperties } from 'react'
|
||
import { motion } from 'framer-motion'
|
||
import { reports } from '@/data/reports'
|
||
|
||
const featured = reports.find(r => r.featured)!
|
||
const flashReport = reports.find(r => r.type === 'flash')!
|
||
|
||
/* ─── Price snapshot ────────────────────────────────────── */
|
||
const PRICES = [
|
||
{ label: 'HRC آسیا', value: '۵۹۰', delta: '+۳.۲٪', up: true },
|
||
{ label: 'میلگرد ایران', value: '۲۱,۸۰۰', delta: '+۰.۸٪', up: true },
|
||
{ label: 'سنگآهن دالیان', value: '۱۰۸', delta: '+۱۸٪', up: true },
|
||
{ label: 'HRC اروپا', value: '۶۲۴', delta: '−۱.۴٪', up: false },
|
||
]
|
||
|
||
/* ─── Shared card style (NO gridColumn here — set via className) */
|
||
const CARD: CSSProperties = {
|
||
background: 'var(--paper)',
|
||
padding: '28px 28px 24px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
direction: 'rtl',
|
||
fontFamily: 'Vazir, sans-serif',
|
||
position: 'relative',
|
||
}
|
||
|
||
function Tag({ text, color = 'var(--red)' }: { text: string; color?: string }) {
|
||
return (
|
||
<div style={{
|
||
fontSize: 9,
|
||
fontWeight: 700,
|
||
letterSpacing: '2.5px',
|
||
textTransform: 'uppercase',
|
||
color,
|
||
marginBottom: 12,
|
||
}}>
|
||
{text}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function Accent({ color = 'var(--red)' }: { color?: string }) {
|
||
return (
|
||
<div style={{
|
||
position: 'absolute', top: 0, right: 0, left: 0,
|
||
height: 3, background: color,
|
||
}} />
|
||
)
|
||
}
|
||
|
||
/* ─── Section ────────────────────────────────────────────── */
|
||
export default function LatestNewsBentoSection() {
|
||
return (
|
||
<section style={{ background: 'var(--paper-2)', borderBottom: '2px solid var(--ink)' }}>
|
||
|
||
{/* ── Header ── */}
|
||
<div className="px-12 pt-16 max-md:px-5 max-md:pt-10">
|
||
<div style={{
|
||
display: 'flex', alignItems: 'center', gap: 16,
|
||
marginBottom: 32, paddingBottom: 20, borderBottom: '2px solid var(--ink)',
|
||
}}>
|
||
<div style={{
|
||
background: 'var(--ink)', color: 'var(--paper)',
|
||
fontSize: 9, fontWeight: 700, letterSpacing: '3px',
|
||
textTransform: 'uppercase', padding: '6px 16px',
|
||
}}>
|
||
آخرین اخبار
|
||
</div>
|
||
<h2 style={{ fontSize: 'clamp(16px,2vw,22px)', fontWeight: 900, letterSpacing: '-0.5px' }}>
|
||
رصد روزانه بازار و صنعت
|
||
</h2>
|
||
<div style={{ flex: 1 }} />
|
||
<span style={{ fontSize: 10, fontWeight: 500, color: 'var(--ink-5)' }}>بهمن ۱۴۰۳</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Bento grid ── */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 16 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5 }}
|
||
className="px-12 pb-14 max-md:px-5 max-md:pb-10"
|
||
>
|
||
{/*
|
||
3-col grid on desktop, 1-col on mobile.
|
||
Items ① and ⑥ use col-span-1 md:col-span-2.
|
||
NO gridColumn in inline style — inline style overrides Tailwind.
|
||
*/}
|
||
<div
|
||
className="grid grid-cols-1 md:grid-cols-3"
|
||
style={{ gap: 1, background: 'var(--rule-thin)' }}
|
||
>
|
||
|
||
{/* ① Featured report — col-span-2 on desktop ─── */}
|
||
<div style={{ ...CARD, minHeight: 260 }} className="col-span-1 md:col-span-2">
|
||
<Accent />
|
||
<Tag text="تازهترین گزارش ویژه" />
|
||
{/* Ghost number */}
|
||
<div style={{
|
||
fontSize: 96, fontWeight: 900, lineHeight: 0.8,
|
||
letterSpacing: '-5px', color: 'rgba(26,23,18,0.05)',
|
||
marginBottom: 12, userSelect: 'none', direction: 'ltr',
|
||
}}>01</div>
|
||
<h3 style={{ fontSize: 'clamp(16px,2vw,20px)', fontWeight: 900, letterSpacing: '-0.5px', lineHeight: 1.35, color: 'var(--ink)', marginBottom: 12, flex: 1 }}>
|
||
{featured.title}
|
||
</h3>
|
||
<p style={{ fontSize: 13, lineHeight: 1.75, fontWeight: 400, color: 'var(--ink-3)', marginBottom: 20,
|
||
display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
|
||
{featured.summary}
|
||
</p>
|
||
{/* Footer */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: '1px solid var(--rule-thin)' }}>
|
||
<div style={{ width: 30, height: 30, background: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 12, fontWeight: 900, flexShrink: 0 }}>
|
||
{featured.authorInitial}
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)' }}>{featured.author}</div>
|
||
<div style={{ fontSize: 10, color: 'var(--ink-5)' }}>{featured.publishDate} · {featured.pages} صفحه</div>
|
||
</div>
|
||
<div style={{ flex: 1 }} />
|
||
<span style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)' }}>خواندن ←</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ② Market prices ─────────────────────────────── */}
|
||
<div style={CARD}>
|
||
<Accent color="var(--green-ink)" />
|
||
<Tag text="قیمتهای لحظهای" color="var(--green-ink)" />
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', marginBottom: 16 }}>
|
||
آخرین نرخهای بازار
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
|
||
{PRICES.map(p => (
|
||
<div key={p.label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 0', borderBottom: '1px solid var(--rule-thin)' }}>
|
||
<span style={{ fontSize: 11, color: 'var(--ink-4)', fontWeight: 500 }}>{p.label}</span>
|
||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||
<span style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', direction: 'ltr' }}>{p.value}</span>
|
||
<span style={{ fontSize: 10, fontWeight: 700, color: p.up ? 'var(--green-ink)' : 'var(--red)', direction: 'ltr' }}>{p.delta}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ③ Flash report ──────────────────────────────── */}
|
||
<div style={CARD}>
|
||
<Accent color="var(--amber)" />
|
||
<Tag text={`فلش · ${flashReport.publishDate}`} color="var(--amber)" />
|
||
<div style={{ fontSize: 38, fontWeight: 900, letterSpacing: '-2px', color: 'var(--amber)', lineHeight: 1, marginBottom: 12, direction: 'ltr' }}>
|
||
+۱۸٪
|
||
</div>
|
||
<h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, marginBottom: 8, flex: 1 }}>
|
||
جهش قیمت سنگآهن در بورس دالیان
|
||
</h3>
|
||
<p style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 400, lineHeight: 1.6 }}>
|
||
برآورد اثر بر هزینه تمامشده تولیدکنندگان DRI ایران
|
||
</p>
|
||
</div>
|
||
|
||
{/* ④ Event ─────────────────────────────────────── */}
|
||
<div style={CARD}>
|
||
<Accent color="var(--ink-3)" />
|
||
<Tag text="رویداد · آینده" color="var(--ink-3)" />
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
|
||
<div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '8px 12px', textAlign: 'center', lineHeight: 1.2, flexShrink: 0, minWidth: 48 }}>
|
||
<div style={{ fontSize: 22, fontWeight: 900 }}>۲۵</div>
|
||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1px', textTransform: 'uppercase' }}>بهمن</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink)' }}>تهران</div>
|
||
<div style={{ fontSize: 10, color: 'var(--ink-5)' }}>هتل اسپیناس پالاس</div>
|
||
</div>
|
||
</div>
|
||
<h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, flex: 1 }}>
|
||
همایش ملی فولاد ایران ۱۴۰۳
|
||
</h3>
|
||
<p style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 400, lineHeight: 1.6, marginTop: 6 }}>
|
||
نشست سالانه تولیدکنندگان، صادرکنندگان و سیاستگذاران
|
||
</p>
|
||
</div>
|
||
|
||
{/* ⑤ Risk alert ────────────────────────────────── */}
|
||
<div style={CARD}>
|
||
<Accent color="#7f1d1d" />
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 12 }}>
|
||
<div style={{ width: 8, height: 8, borderRadius: '50%', background: '#7f1d1d', flexShrink: 0 }} />
|
||
<span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2.5px', textTransform: 'uppercase', color: '#7f1d1d' }}>
|
||
هشدار ریسک · بحرانی
|
||
</span>
|
||
</div>
|
||
<div style={{ display: 'inline-block', background: 'rgba(127,29,29,0.08)', padding: '4px 10px', fontSize: 10, fontWeight: 700, color: '#7f1d1d', marginBottom: 14 }}>
|
||
دی ۱۴۰۳
|
||
</div>
|
||
<h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, flex: 1 }}>
|
||
مسدود شدن ۳ مسیر پرداخت صادراتی
|
||
</h3>
|
||
<p style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 400, lineHeight: 1.6, marginTop: 8 }}>
|
||
بسته تحریمی جدید مسیرهای بانکی صادرات فولاد را محدود کرده است
|
||
</p>
|
||
</div>
|
||
|
||
{/* ⑥ Expert quote — col-span-2 on desktop ────── */}
|
||
<div style={CARD} className="col-span-1 md:col-span-2">
|
||
<Accent color="var(--ink-6)" />
|
||
<Tag text="یادداشت تحلیلگر" color="var(--ink-4)" />
|
||
<div style={{ fontSize: 56, lineHeight: 0.7, color: 'var(--rule-thin)', fontWeight: 900, marginBottom: 10, direction: 'ltr', userSelect: 'none' }}>"</div>
|
||
<p style={{ fontSize: 'clamp(14px,1.2vw,16px)', fontWeight: 700, lineHeight: 1.65, letterSpacing: '-0.2px', color: 'var(--ink)', marginBottom: 20, flex: 1 }}>
|
||
فولاد ایران در آستانه تصمیمی تاریخی است: یا باید بازارهای جایگزین را با
|
||
جدیت دنبال کند، یا شاهد کاهش تدریجی سهم صادراتی خود در خاورمیانه باشد.
|
||
</p>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: '1px solid var(--rule-thin)' }}>
|
||
<div style={{ width: 28, height: 28, background: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 11, fontWeight: 900, flexShrink: 0 }}>م</div>
|
||
<div>
|
||
<div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)' }}>دکتر علی محمدی</div>
|
||
<div style={{ fontSize: 10, color: 'var(--ink-5)' }}>مدیر ارشد پژوهش · اندیشکده فولاد</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ⑦ Key stat ──────────────────────────────────── */}
|
||
<div style={CARD}>
|
||
<Accent color="var(--ink-3)" />
|
||
<Tag text="آمار کلیدی" color="var(--ink-3)" />
|
||
<div style={{ fontSize: 52, fontWeight: 900, letterSpacing: '-3px', lineHeight: 1, color: 'var(--ink)', marginBottom: 6, direction: 'ltr' }}>
|
||
۵۴M
|
||
</div>
|
||
<div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-3)', marginBottom: 8 }}>
|
||
تن — صادرات فولاد چین
|
||
</div>
|
||
<p style={{ fontSize: 12, color: 'var(--ink-5)', fontWeight: 400, lineHeight: 1.65, flex: 1 }}>
|
||
در ۶ ماه اول ۲۰۲۴ — رکوردی که قیمتهای آسیای غربی را ۱۲٪ کاهش داد
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</motion.div>
|
||
</section>
|
||
)
|
||
}
|