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

@ 

Footer: curve to left side, bigger centered brand logo

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@
This commit is contained in:
alireza 2026-06-10 15:25:34 +03:30
parent ee49868077
commit d67c0a1d7d
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,18 +10,18 @@ function FooterCurve() {
return ( return (
<div style={{ position: 'relative', height: 64, lineHeight: 0, background: 'var(--paper)' }}> <div style={{ position: 'relative', height: 64, lineHeight: 0, background: 'var(--paper)' }}>
<svg viewBox="0 0 1440 64" preserveAspectRatio="none" width="100%" height="64" style={{ display: 'block' }}> <svg viewBox="0 0 1440 64" preserveAspectRatio="none" width="100%" height="64" style={{ display: 'block' }}>
{/* white (page) above, navy below, with a smooth central dip */} {/* white (page) above, navy below, with a smooth dip on the LEFT side */}
<path <path
d="M0,0 L612,0 C672,0 686,52 720,52 C754,52 768,0 828,0 L1440,0 L1440,64 L0,64 Z" d="M0,0 L132,0 C192,0 206,52 240,52 C274,52 288,0 348,0 L1440,0 L1440,64 L0,64 Z"
fill="#071d49" fill="#071d49"
/> />
</svg> </svg>
{/* scroll-to-top button sitting in the dip */} {/* scroll-to-top button sitting in the dip (left side) */}
<button <button
onClick={scrollToTop} onClick={scrollToTop}
aria-label="بازگشت به بالا" aria-label="بازگشت به بالا"
style={{ style={{
position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', position: 'absolute', top: 8, left: '16.7%', transform: 'translateX(-50%)',
width: 40, height: 40, borderRadius: '50%', cursor: 'pointer', width: 40, height: 40, borderRadius: '50%', cursor: 'pointer',
background: '#071d49', border: '2px solid rgba(255,255,255,0.25)', background: '#071d49', border: '2px solid rgba(255,255,255,0.25)',
display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
@ -138,8 +138,8 @@ export function Footer() {
<div className="grid grid-cols-[1.3fr_0.8fr_1.2fr] max-lg:grid-cols-2 max-md:grid-cols-1 gap-12 max-md:gap-10"> <div className="grid grid-cols-[1.3fr_0.8fr_1.2fr] max-lg:grid-cols-2 max-md:grid-cols-1 gap-12 max-md:gap-10">
{/* ── BRAND (right side in RTL) ── */} {/* ── BRAND (right side in RTL) ── */}
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'center' }}>
<img src="/logo%20white.png" alt="اندیشکده فولاد آینده" style={{ height: 64, width: 'auto', display: 'inline-block', marginBottom: 12 }} /> <img src="/logo%20white.png" alt="اندیشکده فولاد آینده" style={{ height: 96, width: 'auto', display: 'block', margin: '0 auto 14px' }} />
<div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.3, marginBottom: 4 }}>اندیشکده فولاد آینده</div> <div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.3, marginBottom: 4 }}>اندیشکده فولاد آینده</div>
<div style={{ fontSize: 10, letterSpacing: 2, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', marginBottom: 18 }}>The Steel Futures Institute</div> <div style={{ fontSize: 10, letterSpacing: 2, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', marginBottom: 18 }}>The Steel Futures Institute</div>
@ -151,7 +151,7 @@ export function Footer() {
</p> </p>
<div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 14 }}>ما را در شبکه‌های اجتماعی دنبال کنید.</div> <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 14 }}>ما را در شبکه‌های اجتماعی دنبال کنید.</div>
<div style={{ display: 'flex', gap: 12, justifyContent: 'flex-start' }}> <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
{SOCIALS.map((s) => ( {SOCIALS.map((s) => (
<SocialIcon key={s.name} Icon={s.Icon} name={s.name} href={s.href} /> <SocialIcon key={s.name} Icon={s.Icon} name={s.name} href={s.href} />
))} ))}