384 lines
11 KiB
TypeScript
384 lines
11 KiB
TypeScript
import { Link } from 'react-router-dom';
|
||
import { reports } from '@/data/reports';
|
||
import type { Report } from '@/data/reports';
|
||
|
||
const typeLabel: Record<string, string> = {
|
||
special: 'ویژه',
|
||
quarterly: 'فصلی',
|
||
flash: 'فوری',
|
||
risk: 'ریسک',
|
||
free: 'رایگان',
|
||
};
|
||
|
||
function formatPrice(price: number): string {
|
||
if (price === 0) return 'رایگان';
|
||
return price.toLocaleString('fa-IR') + ' تومان';
|
||
}
|
||
|
||
function SpecialCard({ report }: { report: Report }) {
|
||
return (
|
||
<Link
|
||
to={`/reports/${report.id}`}
|
||
style={{
|
||
display: 'block',
|
||
textDecoration: 'none',
|
||
color: 'inherit',
|
||
border: '2px solid var(--ink)',
|
||
padding: '28px',
|
||
background: 'var(--paper)',
|
||
transition: 'background 0.15s',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', gap: '10px', alignItems: 'center', marginBottom: '14px' }}>
|
||
<span
|
||
style={{
|
||
fontSize: '11px',
|
||
fontWeight: 700,
|
||
letterSpacing: '0.08em',
|
||
color: 'var(--paper)',
|
||
background: 'var(--red)',
|
||
padding: '2px 8px',
|
||
textTransform: 'uppercase',
|
||
}}
|
||
>
|
||
{typeLabel[report.type] ?? report.type}
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: '12px',
|
||
color: 'var(--ink-4)',
|
||
borderRight: '1px solid var(--rule-thin)',
|
||
paddingRight: '10px',
|
||
}}
|
||
>
|
||
{report.category}
|
||
</span>
|
||
</div>
|
||
|
||
<h2
|
||
style={{
|
||
fontSize: '22px',
|
||
fontWeight: 700,
|
||
lineHeight: 1.5,
|
||
color: 'var(--ink)',
|
||
margin: '0 0 14px',
|
||
}}
|
||
>
|
||
{report.title}
|
||
</h2>
|
||
|
||
<p
|
||
style={{
|
||
fontSize: '14px',
|
||
lineHeight: 1.9,
|
||
color: 'var(--ink-3)',
|
||
margin: '0 0 20px',
|
||
display: '-webkit-box',
|
||
WebkitLineClamp: 3,
|
||
WebkitBoxOrient: 'vertical',
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{report.summary}
|
||
</p>
|
||
|
||
<div
|
||
style={{
|
||
borderTop: '1px solid var(--rule-thin)',
|
||
paddingTop: '16px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
gap: '12px',
|
||
flexWrap: 'wrap',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<div
|
||
style={{
|
||
width: '34px',
|
||
height: '34px',
|
||
background: 'var(--ink)',
|
||
color: 'var(--paper)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontWeight: 700,
|
||
fontSize: '15px',
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{report.authorInitial}
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: '13px', fontWeight: 600, color: 'var(--ink)' }}>{report.author}</div>
|
||
<div style={{ fontSize: '11px', color: 'var(--ink-5)' }}>{report.authorRole}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||
<span style={{ fontSize: '13px', color: 'var(--ink-4)' }}>{report.pages} صفحه</span>
|
||
<span style={{ fontSize: '13px', color: 'var(--ink-4)' }}>{report.publishDate}</span>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '10px',
|
||
borderRight: '1px solid var(--rule-thin)',
|
||
paddingRight: '12px',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: '15px', fontWeight: 700, color: report.isFree ? 'var(--green-ink)' : 'var(--ink)' }}>
|
||
{formatPrice(report.price)}
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: '13px',
|
||
fontWeight: 600,
|
||
padding: '4px 14px',
|
||
background: 'var(--ink)',
|
||
color: 'var(--paper)',
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
{report.isFree ? 'دریافت رایگان' : 'خرید گزارش'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
function CompactCard({ report }: { report: Report }) {
|
||
return (
|
||
<Link
|
||
to={`/reports/${report.id}`}
|
||
style={{
|
||
display: 'block',
|
||
textDecoration: 'none',
|
||
color: 'inherit',
|
||
border: '1px solid var(--rule-thin)',
|
||
borderTop: '3px solid var(--ink-3)',
|
||
padding: '18px',
|
||
background: 'var(--paper)',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '10px' }}>
|
||
<span
|
||
style={{
|
||
fontSize: '10px',
|
||
fontWeight: 700,
|
||
color: 'var(--ink-4)',
|
||
background: 'var(--paper-2)',
|
||
padding: '2px 7px',
|
||
letterSpacing: '0.06em',
|
||
}}
|
||
>
|
||
{typeLabel[report.type] ?? report.type}
|
||
</span>
|
||
<span style={{ fontSize: '11px', color: 'var(--ink-5)' }}>{report.category}</span>
|
||
</div>
|
||
|
||
<h3
|
||
style={{
|
||
fontSize: '15px',
|
||
fontWeight: 700,
|
||
lineHeight: 1.6,
|
||
color: 'var(--ink)',
|
||
margin: '0 0 10px',
|
||
display: '-webkit-box',
|
||
WebkitLineClamp: 2,
|
||
WebkitBoxOrient: 'vertical',
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{report.title}
|
||
</h3>
|
||
|
||
<p
|
||
style={{
|
||
fontSize: '13px',
|
||
lineHeight: 1.8,
|
||
color: 'var(--ink-4)',
|
||
margin: '0 0 14px',
|
||
display: '-webkit-box',
|
||
WebkitLineClamp: 2,
|
||
WebkitBoxOrient: 'vertical',
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{report.summary}
|
||
</p>
|
||
|
||
<div
|
||
style={{
|
||
borderTop: '1px solid var(--rule-thin)',
|
||
paddingTop: '12px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: '12px', color: 'var(--ink-5)' }}>{report.publishDate}</span>
|
||
<span style={{ fontSize: '13px', fontWeight: 700, color: report.isFree ? 'var(--green-ink)' : 'var(--red)' }}>
|
||
{formatPrice(report.price)}
|
||
</span>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
export default function Special() {
|
||
const specialReports = reports.filter((r) => r.type === 'special');
|
||
const otherReports = reports.filter((r) => r.type !== 'special');
|
||
|
||
return (
|
||
<div
|
||
dir="rtl"
|
||
style={{
|
||
fontFamily: 'Vazir, sans-serif',
|
||
background: 'var(--paper)',
|
||
color: 'var(--ink)',
|
||
minHeight: '100vh',
|
||
}}
|
||
>
|
||
{/* Hero Banner */}
|
||
<div
|
||
style={{
|
||
background: 'var(--ink)',
|
||
padding: '60px 48px',
|
||
borderBottom: '4px solid var(--red)',
|
||
}}
|
||
>
|
||
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||
<div
|
||
style={{
|
||
fontSize: '11px',
|
||
letterSpacing: '0.12em',
|
||
color: 'rgba(255,255,255,0.5)',
|
||
marginBottom: '16px',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
اندیشکده فولاد ایران — پژوهشهای تخصصی
|
||
</div>
|
||
<h1
|
||
style={{
|
||
fontSize: '48px',
|
||
fontWeight: 900,
|
||
color: 'var(--paper)',
|
||
margin: '0 0 16px',
|
||
lineHeight: 1.3,
|
||
}}
|
||
>
|
||
گزارشهای ویژه
|
||
</h1>
|
||
<p
|
||
style={{
|
||
fontSize: '17px',
|
||
color: 'rgba(255,255,255,0.7)',
|
||
margin: 0,
|
||
maxWidth: '680px',
|
||
lineHeight: 1.8,
|
||
}}
|
||
>
|
||
تحلیلهای عمیق و سناریوپردازیهای راهبردی برای تصمیمگیرندگان صنعت فولاد
|
||
</p>
|
||
<div
|
||
style={{
|
||
marginTop: '28px',
|
||
display: 'flex',
|
||
gap: '32px',
|
||
fontSize: '13px',
|
||
color: 'rgba(255,255,255,0.5)',
|
||
}}
|
||
>
|
||
<span>{specialReports.length} گزارش ویژه</span>
|
||
<span style={{ borderRight: '1px solid rgba(255,255,255,0.2)', paddingRight: '32px' }}>
|
||
{reports.length} گزارش در مجموع
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 24px' }}>
|
||
{/* Section A — Special Reports */}
|
||
<div style={{ padding: '48px 0 40px' }}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'baseline',
|
||
gap: '16px',
|
||
marginBottom: '32px',
|
||
}}
|
||
>
|
||
<div style={{ width: '4px', height: '28px', background: 'var(--red)', flexShrink: 0 }} />
|
||
<h2 style={{ fontSize: '24px', fontWeight: 800, margin: 0, color: 'var(--ink)' }}>
|
||
گزارشهای ویژه
|
||
</h2>
|
||
<span
|
||
style={{
|
||
fontSize: '13px',
|
||
color: 'var(--ink-5)',
|
||
borderRight: '1px solid var(--rule-thin)',
|
||
paddingRight: '16px',
|
||
}}
|
||
>
|
||
تحلیلهای سناریومحور و راهبردی
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
className="max-md:grid-cols-1"
|
||
style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '24px' }}
|
||
>
|
||
{specialReports.map((report) => (
|
||
<SpecialCard key={report.id} report={report} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Thick Rule Separator */}
|
||
<div style={{ borderTop: '4px double var(--ink)', margin: '0 0 48px' }} />
|
||
|
||
{/* Section B — Other Reports */}
|
||
<div style={{ paddingBottom: '64px' }}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'baseline',
|
||
gap: '16px',
|
||
marginBottom: '32px',
|
||
}}
|
||
>
|
||
<div style={{ width: '4px', height: '28px', background: 'var(--ink-4)', flexShrink: 0 }} />
|
||
<h2 style={{ fontSize: '22px', fontWeight: 800, margin: 0, color: 'var(--ink)' }}>
|
||
سایر گزارشهای تحلیلی
|
||
</h2>
|
||
<span
|
||
style={{
|
||
fontSize: '13px',
|
||
color: 'var(--ink-5)',
|
||
borderRight: '1px solid var(--rule-thin)',
|
||
paddingRight: '16px',
|
||
}}
|
||
>
|
||
گزارشهای فصلی، فوری و تحلیل ریسک
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
className="max-md:grid-cols-1"
|
||
style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}
|
||
>
|
||
{otherReports.map((report) => (
|
||
<CompactCard key={report.id} report={report} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|