Footer cleanup, newsletter box, risk ticker fix, more newsletter items

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
alireza 2026-06-01 08:40:29 +03:30
parent 97da68f50c
commit fe3b5b0f67
3 changed files with 61 additions and 40 deletions

View File

@ -4,9 +4,7 @@ function SocialIcon({ label }: { label: string }) {
const [hovered, setHovered] = useState(false) const [hovered, setHovered] = useState(false)
return ( return (
<div <div
role="button" role="button" tabIndex={0} aria-label={label}
tabIndex={0}
aria-label={label}
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
style={{ style={{
@ -15,67 +13,84 @@ function SocialIcon({ label }: { label: string }) {
display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
fontSize: 10, fontWeight: 700, fontSize: 10, fontWeight: 700,
color: hovered ? '#fff' : 'rgba(255,255,255,0.4)', color: hovered ? '#fff' : 'rgba(255,255,255,0.4)',
cursor: 'pointer', cursor: 'pointer', transition: 'border-color 150ms, color 150ms', flexShrink: 0,
transition: 'border-color 150ms, color 150ms',
flexShrink: 0,
}} }}
> >{label}</div>
{label}
</div>
) )
} }
function FooterLink({ href, label }: { href: string; label: string }) { function FooterLink({ href, label }: { href: string; label: string }) {
const [hovered, setHovered] = useState(false) const [hovered, setHovered] = useState(false)
return ( return (
<a <a href={href}
href={href}
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
style={{ style={{
fontSize: 13, fontSize: 13, color: hovered ? '#fff' : 'rgba(255,255,255,0.55)',
color: hovered ? '#fff' : 'rgba(255,255,255,0.55)', textDecoration: 'none', cursor: 'pointer', transition: 'color 150ms',
textDecoration: 'none', display: 'inline-block', lineHeight: 1.4, whiteSpace: 'nowrap',
cursor: 'pointer',
transition: 'color 150ms',
display: 'inline-block',
lineHeight: 1.4,
whiteSpace: 'nowrap',
}} }}
> >{label}</a>
{label}
</a>
) )
} }
const FOOTER_LINKS = [ const FOOTER_LINKS = [
{ label: 'توضیح اندیشکده', href: '#' }, { label: 'درباره ما', href: '#' },
{ label: 'درباره ما', href: '#' }, { label: 'همکاری با ما', href: '#' },
{ label: 'همکاری با ما', href: '#' }, { label: 'تماس با ما', href: '#' },
{ label: 'تماس با ما', href: '#' },
] ]
function NewsletterBox() {
const [email, setEmail] = useState('')
const [done, setDone] = useState(false)
return (
<div style={{ marginTop: 20 }}>
<div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.45)', letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 10 }}>
خبرنامه فولاد
</div>
<div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.18)', maxWidth: 320 }}>
<input
type="email" value={email}
onChange={e => setEmail(e.target.value)}
placeholder="ایمیل خود را وارد کنید..."
disabled={done}
style={{
flex: 1, border: 'none', padding: '9px 12px', fontSize: 12,
fontFamily: 'inherit', background: 'rgba(255,255,255,0.07)',
color: '#fff', outline: 'none', direction: 'rtl',
}}
/>
<button
onClick={() => { if (email) setDone(true) }}
disabled={done}
style={{
background: done ? 'rgba(255,255,255,0.15)' : '#00AEEF',
color: '#fff', border: 'none', padding: '9px 14px',
fontSize: 11, fontWeight: 700, fontFamily: 'inherit',
cursor: done ? 'default' : 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
}}
>
{done ? '✓ ثبت شد' : 'عضویت'}
</button>
</div>
</div>
)
}
export function Footer() { export function Footer() {
return ( return (
<footer <footer dir="rtl" style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}>
dir="rtl"
style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}
>
{/* TOP SECTION */}
<div style={{ padding: '56px 0 48px' }} className="max-w-7xl mx-auto w-full px-12 max-md:px-5"> <div style={{ padding: '56px 0 48px' }} className="max-w-7xl mx-auto w-full px-12 max-md:px-5">
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 40 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 40 }}>
{/* Brand + description */} {/* Brand — no description paragraph */}
<div style={{ maxWidth: 360 }}> <div style={{ maxWidth: 300 }}>
<div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.2, marginBottom: 4 }}> <div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.2, marginBottom: 4 }}>
اندیشکده فولاد آینده اندیشکده فولاد آینده
</div> </div>
<div style={{ fontSize: 10, letterSpacing: 3, color: 'rgba(255,255,255,0.3)', textTransform: 'uppercase', marginBottom: 20, direction: 'ltr', textAlign: 'right' }}> <div style={{ fontSize: 10, letterSpacing: 3, color: 'rgba(255,255,255,0.3)', textTransform: 'uppercase', marginBottom: 20, direction: 'ltr', textAlign: 'right' }}>
FUTURE STEEL POLICY INSTITUTE FUTURE STEEL POLICY INSTITUTE
</div> </div>
<p style={{ fontSize: 13, lineHeight: 1.8, color: 'rgba(255,255,255,0.5)', marginBottom: 24 }}>
مرکز مستقل تحلیل راهبردی و سیاستگذاری صنعت فولاد و فلزات کشور زیر نظر شرکت فولاد مبارکه
</p>
<div style={{ display: 'flex', gap: 6 }}> <div style={{ display: 'flex', gap: 6 }}>
<SocialIcon label="in" /> <SocialIcon label="in" />
<SocialIcon label="tg" /> <SocialIcon label="tg" />
@ -84,16 +99,16 @@ export function Footer() {
</div> </div>
</div> </div>
{/* 4 links */} {/* Links + newsletter under تماس با ما */}
<nav aria-label="پیوندهای پایین" style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center' }}> <nav aria-label="پیوندهای پایین" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
{FOOTER_LINKS.map(link => ( {FOOTER_LINKS.map(link => (
<FooterLink key={link.label} href={link.href} label={link.label} /> <FooterLink key={link.label} href={link.href} label={link.label} />
))} ))}
<NewsletterBox />
</nav> </nav>
</div> </div>
</div> </div>
{/* BOTTOM ROW */}
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}> <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
<div <div
style={{ padding: '22px 0', fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.8, textAlign: 'center', fontWeight: 500 }} style={{ padding: '22px 0', fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.8, textAlign: 'center', fontWeight: 500 }}

View File

@ -61,11 +61,17 @@ const ISSUES = {
{ num: '۱۲', title: 'فولاد و تحریم‌های جدید: راهکارهای صادراتی ۱۴۰۴', date: 'بهمن ۱۴۰۳' }, { num: '۱۲', title: 'فولاد و تحریم‌های جدید: راهکارهای صادراتی ۱۴۰۴', date: 'بهمن ۱۴۰۳' },
{ num: '۱۱', title: 'قیمت‌گذاری فولاد در بازار داخلی: چالش‌ها و فرصت‌ها', date: 'دی ۱۴۰۳' }, { num: '۱۱', title: 'قیمت‌گذاری فولاد در بازار داخلی: چالش‌ها و فرصت‌ها', date: 'دی ۱۴۰۳' },
{ num: '۱۰', title: 'آمار تولید فولاد ایران در ۹ ماهه ۱۴۰۳', date: 'آذر ۱۴۰۳' }, { num: '۱۰', title: 'آمار تولید فولاد ایران در ۹ ماهه ۱۴۰۳', date: 'آذر ۱۴۰۳' },
{ num: '۰۹', title: 'فولاد سبز؛ چشم‌انداز ایران در برابر رقبای منطقه‌ای', date: 'آبان ۱۴۰۳' },
{ num: '۰۸', title: 'تحلیل بازار عراق: فرصت‌ها و تهدیدها برای صادرکنندگان ایرانی', date: 'مهر ۱۴۰۳' },
{ num: '۰۷', title: 'هوش مصنوعی در کنترل کیفیت فولاد: کاربردها و چالش‌ها', date: 'شهریور ۱۴۰۳' },
], ],
en: [ en: [
{ num: '12', title: 'Steel & New Sanctions: Export Strategies for 1404', date: 'Feb 2025' }, { num: '12', title: 'Steel & New Sanctions: Export Strategies for 1404', date: 'Feb 2025' },
{ num: '11', title: 'Steel Pricing in the Domestic Market: Challenges & Opportunities', date: 'Jan 2025' }, { num: '11', title: 'Steel Pricing in the Domestic Market: Challenges & Opportunities', date: 'Jan 2025' },
{ num: '10', title: 'Iran Steel Production Stats — First 9 Months of 1403', date: 'Dec 2024' }, { num: '10', title: 'Iran Steel Production Stats — First 9 Months of 1403', date: 'Dec 2024' },
{ num: '09', title: "Green Steel: Iran's Outlook vs Regional Competitors", date: 'Nov 2024' },
{ num: '08', title: 'Iraq Market Analysis: Opportunities & Threats for Iranian Exporters', date: 'Oct 2024' },
{ num: '07', title: 'AI in Steel Quality Control: Applications & Challenges', date: 'Sep 2024' },
], ],
} }

View File

@ -182,7 +182,7 @@ export default function RiskSection() {
/* Duplicate items for seamless infinite loop (handled in JSX, not effect, to /* Duplicate items for seamless infinite loop (handled in JSX, not effect, to
stay immune to StrictMode double-invocation that would otherwise clone twice). */ stay immune to StrictMode double-invocation that would otherwise clone twice). */
const loopItems = [...riskItems, ...riskItems] const loopItems = [...riskItems, ...riskItems, ...riskItems]
return ( return (
<section style={{ background: 'var(--paper)' }}> <section style={{ background: 'var(--paper)' }}>