feat(ui): modernize footer layout, reorder metrics, and finalize English localization

- Modernize Footer with animated favicon logo symbol and pill-badge links
- Reorder Footer contact block: Prof. Seok-Joo Koh -> email -> English address
- Reorder home metrics: International Journals -> Standardization -> Patent
- Add (IoT Architecture & Protocols) subtitle to Patent metric
- Translate Header desktop masthead location to Daegu / South Korea
- Clean up redundant flex classes and font colophon text
This commit is contained in:
2026-08-21 14:03:28 +09:00
parent b8f1a000fd
commit 8eabd7a2db
4 changed files with 123 additions and 53 deletions
+9 -2
View File
@@ -1,9 +1,16 @@
`body > header > div.hidden.border-b.border-line.desktop\:block > div > span:nth-child(3)`
- "Daegu / South Korea" 로 수정
`body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-5 > h3``body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-5 > h3` 앞에 favicon logo 넣어서 `body > header > div.container-content.flex.h-\[4\.25rem\].items-center.justify-between.gap-4.my-2.sm\:my-3 > a`와 같이 변경해줘.
`body > footer > div.border-t.border-line > div > p.kicker.text-ink-mute`
- 제거해줘.
`body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-4 > address`
- 교수 정보, 이메일 주소, 주소 순으로 배치해줘.
- 교수 정보, 이메일 주소, 주소 순으로 배치
Footer 레이아웃을 조금 더 구조적이고 모던하게 보이도록 레이아웃을 변경해줘.
Footer 레이아웃을 조금 더 구조적이고 모던하게 보이도록 레이아웃을 변경
`body > main > div > section.relative > div.grid.grid-cols-1.lg\:grid-cols-12.gap-8.lg\:items-center > div.lg\:col-span-7.space-y-6.lg\:pt-4 > div`
- International Journals & Conference, Standardization Contributions, Patent 순으로 배치
- "PATENT" -> "PATENT\n(IoT Architecture \& Protocols) 수정
+13 -10
View File
@@ -68,26 +68,29 @@ export default function HomePage() {
<div className="font-serif text-3xl text-cobalt-dark font-normal">
{intlPubsCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
International Journals &amp; Conference
</div>
</div>
<div>
<div className="font-serif text-3xl text-cobalt-dark font-normal">
{patentCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
Patent
</div>
</div>
<div>
<div className="font-serif text-3xl text-cobalt-dark font-normal">
{stdDocsCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
Standardization Contributions
</div>
</div>
<div>
<div className="font-serif text-3xl text-cobalt-dark font-normal">
{patentCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
Patent<br />
<span className="text-[0.68rem] tracking-normal font-sans normal-case text-ink-mute/80">
(IoT Architecture &amp; Protocols)
</span>
</div>
</div>
</div>
</div>
+100 -40
View File
@@ -25,75 +25,136 @@ export default function Footer() {
className="border-b border-line py-4 font-display text-lg tracking-wide text-ink/90"
/>
<div className="container-content grid gap-12 py-16 lg:grid-cols-12">
{/* Masthead title */}
<div className="lg:col-span-5">
<p className="kicker text-ink-mute">Colophon</p>
<h3 className="font-display mt-3 text-2xl leading-snug text-ink">
ANL
</h3>
<p className="font-display mt-1 text-xl italic text-ink-soft">
AI Agent Networking Lab
<div className="container-content grid gap-10 py-16 lg:grid-cols-12">
{/* Brand Block */}
<div className="lg:col-span-5 space-y-4">
<Link
href="/"
className="group inline-flex items-center gap-3.5 shrink-0"
>
<div className="relative flex items-center justify-center w-10 h-10 rounded-xl overflow-hidden shadow-sm ring-1 ring-ink/10 group-hover:ring-cobalt/40 group-hover:shadow-md group-hover:scale-105 transition-all duration-300 shrink-0">
<svg viewBox="0 0 32 32" className="w-full h-full" aria-hidden="true">
<defs>
<linearGradient id="footerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#4E77FF" />
<stop offset="100%" stopColor="#2B4CDE" />
</linearGradient>
<radialGradient id="footerNodeGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stopColor="#FFD666" stopOpacity="1" />
<stop offset="100%" stopColor="#FF9C1A" stopOpacity="0.8" />
</radialGradient>
</defs>
<rect width="32" height="32" rx="7" fill="url(#footerLogoGrad)" />
{/* Network Graph Edges */}
<path
d="M16 9 L9 22 M16 9 L23 22 M9 22 L23 22 M16 9 L16 17 M9 22 L16 17 M23 22 L16 17"
stroke="#FFFFFF"
strokeWidth="1.2"
strokeOpacity="0.85"
strokeLinecap="round"
/>
{/* Network Agent Outer Nodes */}
<circle cx="16" cy="9" r="2.5" fill="#FFFFFF" />
<circle cx="9" cy="22" r="2.5" fill="#FFFFFF" />
<circle cx="23" cy="22" r="2.5" fill="#FFFFFF" />
{/* Central Coordinating Hub Node */}
<circle cx="16" cy="17" r="2.2" fill="url(#footerNodeGlow)" className="animate-pulse" />
</svg>
</div>
<div className="flex flex-col leading-none">
<span className="headline-ko text-xl font-bold tracking-tight text-ink group-hover:text-cobalt-dark transition-colors">
ANL
</span>
<span className="kicker mt-1 transition-colors group-hover:text-cobalt-dark">
AI Agent Networking LAB
</span>
</div>
</Link>
<p className="text-xs sm:text-sm text-ink-mute leading-relaxed max-w-sm">
Research on agent networking technologies and standard framework technologies for multi-AI agent orchestration.
</p>
<div className="mt-5 flex flex-wrap gap-x-4 gap-y-1 text-xs font-mono text-cobalt-dark">
<div className="pt-2 flex flex-wrap gap-2 text-xs font-mono">
<a
href="https://www.knu.ac.kr/"
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
className="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-ivory border border-line text-ink-soft hover:text-cobalt-dark hover:border-cobalt/40 transition-colors"
>
KNU
<span>KNU</span>
<span className="text-[0.65rem] text-ink-mute"></span>
</a>
<a
href="https://cse.knu.ac.kr/"
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
className="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-ivory border border-line text-ink-soft hover:text-cobalt-dark hover:border-cobalt/40 transition-colors"
>
CSE
<span>CSE</span>
<span className="text-[0.65rem] text-ink-mute"></span>
</a>
<a
href="https://it.knu.ac.kr/"
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
className="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-ivory border border-line text-ink-soft hover:text-cobalt-dark hover:border-cobalt/40 transition-colors"
>
College of IT Engineering
<span>College of IT Engineering</span>
<span className="text-[0.65rem] text-ink-mute"></span>
</a>
</div>
</div>
{/* Contact */}
<div className="lg:col-span-4">
<p className="kicker text-ink-mute">Contact</p>
<address className="mt-3 not-italic text-sm leading-relaxed text-ink-soft">
Prof. Seok-Joo Koh<br />
Room 527, Bldg. 415 (IT-5), College of IT Engineering<br />
Kyungpook National University<br />
80 Daehak-ro, Buk-gu, Daegu 41566, Republic of Korea<br />
<a
href="mailto:sjkoh@knu.ac.kr"
className="draw-underline mt-2 inline-block text-ink hover:text-vermillion-dark font-medium"
>
sjkoh@knu.ac.kr
</a>
<div className="lg:col-span-4 space-y-3">
<div className="flex items-center gap-2">
<span className="h-px w-6 bg-cobalt-dark"></span>
<p className="font-mono text-xs font-bold uppercase tracking-wider text-cobalt-dark">
Contact
</p>
</div>
<address className="not-italic text-sm leading-relaxed text-ink-soft space-y-2">
<div>
<div className="font-semibold text-ink">Prof. Seok-Joo Koh</div>
<a
href="mailto:sjkoh@knu.ac.kr"
className="inline-block text-xs font-mono text-cobalt-dark hover:underline mt-0.5"
>
sjkoh@knu.ac.kr
</a>
</div>
<div className="text-xs text-ink-mute leading-normal pt-1.5 border-t border-line/50">
Room 527, Bldg. 415 (IT-5), College of IT Engineering<br />
Kyungpook National University<br />
80 Daehak-ro, Buk-gu, Daegu 41566, Republic of Korea
</div>
</address>
</div>
{/* Index */}
<div className="lg:col-span-3">
<p className="kicker text-ink-mute">Index</p>
<ul className="mt-3 space-y-2">
{/* Navigation Index */}
<div className="lg:col-span-3 space-y-3">
<div className="flex items-center gap-2">
<span className="h-px w-6 bg-cobalt-dark"></span>
<p className="font-mono text-xs font-bold uppercase tracking-wider text-cobalt-dark">
Index
</p>
</div>
<ul className="space-y-1.5">
{links.map((l, i) => (
<li key={l.href} className="flex items-baseline gap-3">
<span className="font-display text-xs text-ink-mute">
{String(i + 1).padStart(2, "0")}
</span>
<li key={l.href}>
<Link
href={l.href}
className="text-sm text-ink-soft transition hover:text-vermillion-dark"
className="group flex items-center justify-between text-xs font-mono text-ink-soft hover:text-cobalt-dark transition-colors py-1 border-b border-line/40 hover:border-cobalt/40"
>
{l.en}
<span className="font-sans text-sm text-ink-soft group-hover:text-cobalt-dark">
{l.en}
</span>
<span className="text-[0.7rem] text-ink-mute group-hover:text-cobalt-dark">
{String(i + 1).padStart(2, "0")}
</span>
</Link>
</li>
))}
@@ -106,7 +167,6 @@ export default function Footer() {
<p className="text-xs text-ink-mute">
© {new Date().getFullYear()} AI Agent Networking Lab (ANL) · School of Computer Science and Engineering, KNU. All rights reserved.
</p>
<p className="kicker text-ink-mute">Set in Fraunces · Noto Serif KR · Pretendard</p>
</div>
</div>
</footer>
+1 -1
View File
@@ -122,7 +122,7 @@ export default function Header() {
<span className="kicker text-ink-mute">
Kyungpook National University · School of Computer Science &amp; Engineering
</span>
<span className="kicker"> · Daegu</span>
<span className="kicker">Daegu / South Korea</span>
</div>
</div>