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
parent
97da68f50c
commit
fe3b5b0f67
|
|
@ -4,9 +4,7 @@ function SocialIcon({ label }: { label: string }) {
|
|||
const [hovered, setHovered] = useState(false)
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={label}
|
||||
role="button" tabIndex={0} aria-label={label}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
style={{
|
||||
|
|
@ -15,67 +13,84 @@ function SocialIcon({ label }: { label: string }) {
|
|||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 10, fontWeight: 700,
|
||||
color: hovered ? '#fff' : 'rgba(255,255,255,0.4)',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 150ms, color 150ms',
|
||||
flexShrink: 0,
|
||||
cursor: 'pointer', transition: 'border-color 150ms, color 150ms', flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
>{label}</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FooterLink({ href, label }: { href: string; label: string }) {
|
||||
const [hovered, setHovered] = useState(false)
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
<a href={href}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: hovered ? '#fff' : 'rgba(255,255,255,0.55)',
|
||||
textDecoration: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: 'color 150ms',
|
||||
display: 'inline-block',
|
||||
lineHeight: 1.4,
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: 13, color: hovered ? '#fff' : 'rgba(255,255,255,0.55)',
|
||||
textDecoration: 'none', cursor: 'pointer', transition: 'color 150ms',
|
||||
display: 'inline-block', lineHeight: 1.4, whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
>{label}</a>
|
||||
)
|
||||
}
|
||||
|
||||
const FOOTER_LINKS = [
|
||||
{ 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() {
|
||||
return (
|
||||
<footer
|
||||
dir="rtl"
|
||||
style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}
|
||||
>
|
||||
{/* TOP SECTION */}
|
||||
<footer dir="rtl" style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}>
|
||||
<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 }}>
|
||||
|
||||
{/* Brand + description */}
|
||||
<div style={{ maxWidth: 360 }}>
|
||||
{/* Brand — no description paragraph */}
|
||||
<div style={{ maxWidth: 300 }}>
|
||||
<div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.2, marginBottom: 4 }}>
|
||||
اندیشکده فولاد آینده
|
||||
</div>
|
||||
<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
|
||||
</div>
|
||||
<p style={{ fontSize: 13, lineHeight: 1.8, color: 'rgba(255,255,255,0.5)', marginBottom: 24 }}>
|
||||
مرکز مستقل تحلیل راهبردی و سیاستگذاری صنعت فولاد و فلزات کشور — زیر نظر شرکت فولاد مبارکه
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<SocialIcon label="in" />
|
||||
<SocialIcon label="tg" />
|
||||
|
|
@ -84,16 +99,16 @@ export function Footer() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4 links */}
|
||||
<nav aria-label="پیوندهای پایین" style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
{/* Links + newsletter under تماس با ما */}
|
||||
<nav aria-label="پیوندهای پایین" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{FOOTER_LINKS.map(link => (
|
||||
<FooterLink key={link.label} href={link.href} label={link.label} />
|
||||
))}
|
||||
<NewsletterBox />
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTTOM ROW */}
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
<div
|
||||
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: 'شهریور ۱۴۰۳' },
|
||||
],
|
||||
en: [
|
||||
{ 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: '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
|
||||
stay immune to StrictMode double-invocation that would otherwise clone twice). */
|
||||
const loopItems = [...riskItems, ...riskItems]
|
||||
const loopItems = [...riskItems, ...riskItems, ...riskItems]
|
||||
|
||||
return (
|
||||
<section style={{ background: 'var(--paper)' }}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue