111 lines
4.0 KiB
TypeScript
111 lines
4.0 KiB
TypeScript
import { useState } from 'react'
|
||
|
||
function SocialIcon({ label }: { label: string }) {
|
||
const [hovered, setHovered] = useState(false)
|
||
return (
|
||
<div
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-label={label}
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
style={{
|
||
width: 28, height: 28,
|
||
border: `1px solid ${hovered ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.12)'}`,
|
||
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,
|
||
}}
|
||
>
|
||
{label}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function FooterLink({ href, label }: { href: string; label: string }) {
|
||
const [hovered, setHovered] = useState(false)
|
||
return (
|
||
<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',
|
||
}}
|
||
>
|
||
{label}
|
||
</a>
|
||
)
|
||
}
|
||
|
||
const FOOTER_LINKS = [
|
||
{ label: 'توضیح اندیشکده', href: '#' },
|
||
{ label: 'درباره ما', href: '#' },
|
||
{ label: 'همکاری با ما', href: '#' },
|
||
{ label: 'تماس با ما', href: '#' },
|
||
]
|
||
|
||
export function Footer() {
|
||
return (
|
||
<footer
|
||
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={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 40 }}>
|
||
|
||
{/* Brand + description */}
|
||
<div style={{ maxWidth: 360 }}>
|
||
<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" />
|
||
<SocialIcon label="tw" />
|
||
<SocialIcon label="@" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* 4 links */}
|
||
<nav aria-label="پیوندهای پایین" style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center' }}>
|
||
{FOOTER_LINKS.map(link => (
|
||
<FooterLink key={link.label} href={link.href} label={link.label} />
|
||
))}
|
||
</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 }}
|
||
className="max-w-7xl mx-auto w-full px-12 max-md:px-5"
|
||
>
|
||
<div>تمامی حقوق این وب سایت محفوظ و متعلق به شرکت فولاد مبارکه است.</div>
|
||
<div style={{ color: 'rgba(255,255,255,0.55)', marginTop: 6, fontSize: 12 }}>
|
||
با افتخار قدرت گرفته از دیدوان؛ چشم همیشه باز مدیران
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
)
|
||
}
|