Godopu
f3972cac27
- Enhance Reveal component with HTMLAttributes passthrough and inline style merging - Integrate Reveal into Home, Members, Publications, Lectures, and Standardization sections - Apply lightweight stagger delay (max 360ms cap) without breaking grid stretch (h-full) - Preserve ProjectPageView CSS Scroll Snap direct-child contract via as='article' in-place replacement - Integrate Counter component for metrics and category badges - Support prefers-reduced-motion media query and noscript fallback - All 12 quality gates passed clean with unanimous PASS from all reviewers
219 lines
9.1 KiB
TypeScript
219 lines
9.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import Reveal from "@/components/Reveal";
|
|
import Counter from "@/components/Counter";
|
|
import HeroComposition from "./_components/HeroComposition";
|
|
import { ProjectPageView } from "./_components/ProjectPageView";
|
|
import { getStatsSummary, getResearchAreaNames, getResearchProjects } from "../lib/api";
|
|
import type { ResearchProject } from "../content/types";
|
|
|
|
const INTERNATIONAL_SDOS = [
|
|
"IEC TC100: Multimedia Systems and Equipment",
|
|
"ISO/IEC JTC1/SC41: Internet-of-Things (IoT) Applications",
|
|
"ITU-T SG20: IoT Services",
|
|
"ITU-T SG13: Mobility Management",
|
|
"ISO/IEC JTC1/SC6: Reliable Multicasting",
|
|
];
|
|
|
|
export default function HomePage() {
|
|
const [stats, setStats] = useState({
|
|
intlPubsCount: 0,
|
|
patentCount: 0,
|
|
stdDocsCount: 0,
|
|
});
|
|
const [researchAreas, setResearchAreas] = useState<string[]>([]);
|
|
const [researchProjects, setResearchProjects] = useState<ResearchProject[]>([]);
|
|
|
|
useEffect(() => {
|
|
getStatsSummary().then((s) => {
|
|
if (s) setStats(s);
|
|
});
|
|
getResearchAreaNames().then((areas) => {
|
|
if (areas) setResearchAreas(areas);
|
|
});
|
|
getResearchProjects().then((projs) => {
|
|
if (projs) setResearchProjects(projs);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="container-content space-y-16 md:space-y-24 pt-10 md:pt-16 pb-16 md:pb-24">
|
|
{/* Hero Section */}
|
|
<section className="relative">
|
|
<Reveal variant="up">
|
|
<div className="mb-4">
|
|
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
|
|
Kyungpook National University · AI Agent Networking Lab (ANL)
|
|
</span>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:items-center">
|
|
<div className="lg:col-span-7 space-y-6 lg:pt-4">
|
|
<Reveal variant="up">
|
|
<h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-normal text-ink leading-tight">
|
|
Multi-Agent <br />
|
|
<span className="italic font-serif text-cobalt-dark">Orchestration</span>
|
|
</h1>
|
|
<p className="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl mt-4">
|
|
The AI Agent Networking Laboratory (ANL) studies agent networking technologies and standard frameworks that enable AI agents to communicate and collaborate with one another for multi-agent orchestration.
|
|
</p>
|
|
</Reveal>
|
|
|
|
{/* Metrics Row (Derived from real content data) */}
|
|
<div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
|
|
<Reveal variant="up" delay={80}>
|
|
<div>
|
|
<div className="font-serif text-3xl text-cobalt-dark font-normal">
|
|
<Counter value={stats.intlPubsCount} />
|
|
</div>
|
|
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
|
|
International Journals & Conference
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
<Reveal variant="up" delay={160}>
|
|
<div>
|
|
<div className="font-serif text-3xl text-cobalt-dark font-normal">
|
|
<Counter value={stats.stdDocsCount} />
|
|
</div>
|
|
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
|
|
Standardization Contributions
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
<Reveal variant="up" delay={240}>
|
|
<div>
|
|
<div className="font-serif text-3xl text-cobalt-dark font-normal">
|
|
<Counter value={stats.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">
|
|
(IoT Architecture & Protocols)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</div>
|
|
|
|
<Reveal variant="scale" delay={120} className="w-full max-w-[500px] mx-auto my-[30px] lg:my-0 lg:max-w-none lg:mx-0 lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
|
|
<HeroComposition />
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Research Project PageView Component */}
|
|
<ProjectPageView projects={researchProjects} />
|
|
|
|
{/* 14 Research Areas Grid */}
|
|
<section className="space-y-8 pt-16 md:pt-20 border-t border-line">
|
|
<Reveal variant="up">
|
|
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<span className="h-px w-8 bg-cobalt-dark"></span>
|
|
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
|
|
Core Domains
|
|
</span>
|
|
</div>
|
|
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
|
|
Research Areas
|
|
</h2>
|
|
</div>
|
|
<p className="text-xs text-ink-mute font-mono">
|
|
{researchAreas.length} fundamental networking protocols and AI system domains
|
|
</p>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{researchAreas.map((area, idx) => {
|
|
const no = String(idx + 1).padStart(2, "0");
|
|
const isOdd = (idx + 1) % 2 !== 0;
|
|
|
|
return (
|
|
<Reveal
|
|
key={no}
|
|
variant="up"
|
|
delay={Math.min(idx, 6) * 60}
|
|
className="h-full"
|
|
>
|
|
<div
|
|
className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200 h-full"
|
|
>
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span
|
|
className={`font-mono text-xs font-bold ${
|
|
isOdd ? "text-vermillion-dark" : "text-cobalt-dark"
|
|
}`}
|
|
>
|
|
{no}
|
|
</span>
|
|
<span className="font-mono text-[0.68rem] text-ink-mute uppercase tracking-wider">
|
|
Topic #{no}
|
|
</span>
|
|
</div>
|
|
<h3 className="font-serif text-base font-normal text-ink leading-snug">
|
|
{area}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
{/* International Standardizations Section */}
|
|
<section className="space-y-6 pt-16 md:pt-20 border-t border-line">
|
|
<Reveal variant="up">
|
|
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<span className="h-px w-8 bg-cobalt-dark"></span>
|
|
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
|
|
Global Engagement
|
|
</span>
|
|
</div>
|
|
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
|
|
International Standardizations
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<Reveal variant="up">
|
|
<div className="bg-paper p-6 sm:p-8 rounded-lg border border-line space-y-6">
|
|
<p className="text-ink/80 text-sm sm:text-base leading-relaxed max-w-3xl">
|
|
Along with the research activities, we are also in pursuit of the International Standardization, from the market deployment perspective, in the following SDOs (Standard-Defining Organizations):
|
|
</p>
|
|
|
|
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3 pt-2">
|
|
{INTERNATIONAL_SDOS.map((sdo, idx) => (
|
|
<li key={idx} className="flex items-start gap-2.5 text-sm text-ink font-sans">
|
|
<span className="inline-block w-1.5 h-1.5 rounded-full bg-cobalt-dark mt-2 shrink-0"></span>
|
|
<span>{sdo}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="pt-4 border-t border-line/60">
|
|
<Link
|
|
href="/standardization"
|
|
className="inline-flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wider text-cobalt-dark hover:text-ink transition-colors draw-underline"
|
|
>
|
|
<span>Please refer to here for details →</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|