Mr.Gay100
/
steelforesight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Footer: proper padding and spacing throughout

This commit is contained in:
alireza 2026-06-01 10:58:58 +03:30
parent d4c0b2fc51
commit c95d922ce1
1 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/app/layout/Footer.tsx
View File

@ -8,11 +8,11 @@ function SocialIcon({ label }: { label: string }) {
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
style={{ style={{
width: 28, height: 28, width: 32, height: 32,
border: `1px solid ${hovered ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.12)'}`, border: `1px solid ${hovered ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.15)'}`,
display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
fontSize: 10, fontWeight: 700, fontSize: 11, fontWeight: 700,
color: hovered ? '#fff' : 'rgba(255,255,255,0.4)', color: hovered ? '#fff' : 'rgba(255,255,255,0.45)',
cursor: 'pointer', transition: 'border-color 150ms, color 150ms', flexShrink: 0, cursor: 'pointer', transition: 'border-color 150ms, color 150ms', flexShrink: 0,
}} }}
>{label}</div> >{label}</div>
@ -26,9 +26,13 @@ function FooterLink({ href, label }: { href: string; label: string }) {
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
style={{ style={{
fontSize: 13, color: hovered ? '#fff' : 'rgba(255,255,255,0.55)', fontSize: 14,
textDecoration: 'none', cursor: 'pointer', transition: 'color 150ms', color: hovered ? '#fff' : 'rgba(255,255,255,0.6)',
display: 'inline-block', lineHeight: 1.4, whiteSpace: 'nowrap', textDecoration: 'none',
cursor: 'pointer',
transition: 'color 150ms',
display: 'block',
padding: '4px 0',
}} }}
>{label}</a> >{label}</a>
) )
@ -44,20 +48,25 @@ function NewsletterBox() {
const [email, setEmail] = useState('') const [email, setEmail] = useState('')
const [done, setDone] = useState(false) const [done, setDone] = useState(false)
return ( return (
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 8 }}>
<div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.45)', letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 10 }}> <div style={{
fontSize: 11, fontWeight: 700,
color: 'rgba(255,255,255,0.4)',
letterSpacing: '2px', textTransform: 'uppercase',
marginBottom: 12,
}}>
خبرنامه فولاد خبرنامه فولاد
</div> </div>
<div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.18)', maxWidth: '100%' }}> <div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.18)' }}>
<input <input
type="email" value={email} type="email" value={email}
onChange={e => setEmail(e.target.value)} onChange={e => setEmail(e.target.value)}
placeholder="ایمیل خود را وارد کنید..." placeholder="ایمیل خود را وارد کنید..."
disabled={done} disabled={done}
style={{ style={{
flex: 1, border: 'none', padding: '9px 12px', fontSize: 12, flex: 1, border: 'none', padding: '10px 14px', fontSize: 13,
fontFamily: 'inherit', background: 'rgba(255,255,255,0.07)', fontFamily: 'inherit', background: 'rgba(255,255,255,0.07)',
color: '#fff', outline: 'none', direction: 'rtl', color: '#fff', outline: 'none', direction: 'rtl', minWidth: 0,
}} }}
/> />
<button <button
@ -65,8 +74,8 @@ function NewsletterBox() {
disabled={done} disabled={done}
style={{ style={{
background: done ? 'rgba(255,255,255,0.15)' : '#00AEEF', background: done ? 'rgba(255,255,255,0.15)' : '#00AEEF',
color: '#fff', border: 'none', padding: '9px 14px', color: '#fff', border: 'none', padding: '10px 16px',
fontSize: 11, fontWeight: 700, fontFamily: 'inherit', fontSize: 12, fontWeight: 700, fontFamily: 'inherit',
cursor: done ? 'default' : 'pointer', whiteSpace: 'nowrap', flexShrink: 0, cursor: done ? 'default' : 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
}} }}
> >
@ -80,15 +89,23 @@ function NewsletterBox() {
export function Footer() { export function Footer() {
return ( return (
<footer dir="rtl" style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}> <footer dir="rtl" style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}>
<div className="max-w-7xl mx-auto w-full px-8 max-md:px-6" style={{ paddingTop: 56, paddingBottom: 48 }}> <div style={{ maxWidth: 1280, margin: '0 auto', padding: '60px 48px 52px' }}
<div className="grid grid-cols-2 max-md:grid-cols-1 gap-10"> className="max-md:!px-6 max-md:!py-10">
<div className="grid grid-cols-2 max-md:grid-cols-1 gap-12 max-md:gap-8">
{/* Brand */} {/* Brand */}
<div> <div>
<div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.3, marginBottom: 6 }}> <div style={{ fontSize: 24, fontWeight: 900, color: '#fff', lineHeight: 1.3, marginBottom: 8 }}>
اندیشکده فولاد آینده اندیشکده فولاد آینده
</div> </div>
<div style={{ fontSize: 10, letterSpacing: 2, color: 'rgba(255,255,255,0.3)', textTransform: 'uppercase', marginBottom: 20 }}> <div style={{
fontSize: 10, letterSpacing: 2,
color: 'rgba(255,255,255,0.3)',
textTransform: 'uppercase',
marginBottom: 24,
lineHeight: 1.6,
}}>
FUTURE STEEL POLICY INSTITUTE FUTURE STEEL POLICY INSTITUTE
</div> </div>
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
@ -100,22 +117,22 @@ export function Footer() {
</div> </div>
{/* Links + newsletter */} {/* Links + newsletter */}
<nav aria-label="پیوندهای پایین" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}> <nav aria-label="پیوندهای پایین" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
{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 /> <div style={{ marginTop: 16 }}>
<NewsletterBox />
</div>
</nav> </nav>
</div> </div>
</div> </div>
<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={{ maxWidth: 1280, margin: '0 auto', padding: '20px 48px', textAlign: 'center', fontSize: 13, color: 'rgba(255,255,255,0.7)', lineHeight: 1.8 }}
style={{ padding: '22px 0', fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.8, textAlign: 'center', fontWeight: 500 }} className="max-md:!px-6">
className="max-w-7xl mx-auto w-full px-6 max-md:px-5"
>
<div>تمامی حقوق این وب سایت محفوظ و متعلق به شرکت فولاد مبارکه است.</div> <div>تمامی حقوق این وب سایت محفوظ و متعلق به شرکت فولاد مبارکه است.</div>
<div style={{ color: 'rgba(255,255,255,0.55)', marginTop: 6, fontSize: 12 }}> <div style={{ color: 'rgba(255,255,255,0.4)', marginTop: 4, fontSize: 12 }}>
با افتخار قدرت گرفته از دیدوان؛ چشم همیشه باز مدیران با افتخار قدرت گرفته از دیدوان؛ چشم همیشه باز مدیران
</div> </div>
</div> </div>