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:
parent
97da68f50c
commit
fe3b5b0f67
|
|
@ -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 }}
|
||||||
|
|
|
||||||
|
|
@ -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' },
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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)' }}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue