Skip to content

Commit 7a83782

Browse files
jim-juniorjim-junior
committed
ft: add initial UI mockup
1 parent 1f0b048 commit 7a83782

8 files changed

Lines changed: 1096 additions & 0 deletions

File tree

‎app/labs/ai/page.tsx‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
import Link from "next/link";
2+
import { FiArrowRight, FiCode, FiCpu, FiShield, FiPlus } from "react-icons/fi";
3+
4+
export default function AiLabDetail() {
5+
const projects = [
6+
{
7+
id: "PRJ_OPT-01",
8+
title: "Sparse Matrix Optimization for Edge TPU",
9+
description:
10+
"Optimization of convolutional kernels for low-precision tensor processing units.",
11+
icon: FiCode,
12+
link: "#",
13+
linkText: "View Technical Specs",
14+
theme: "light", // Hovers to dark
15+
},
16+
{
17+
id: "PRJ_NAS-04",
18+
title: "Neural Architecture Search via Evolutionary Gradients",
19+
description:
20+
"Automating the discovery of high-performance topologies using non-differentiable genetic search protocols.",
21+
icon: FiCpu,
22+
link: "#",
23+
linkText: "Review Methodology",
24+
theme: "dark", // Always dark
25+
},
26+
{
27+
id: "PRJ_PRV-09",
28+
title: "Privacy-Preserving Federated Learning Models",
29+
description:
30+
"Multi-party computation techniques for training large models on decentralized, sensitive datasets.",
31+
icon: FiShield,
32+
link: "#",
33+
linkText: "Security Audit",
34+
theme: "light", // Hovers to dark
35+
},
36+
];
37+
38+
const researchers = [
39+
{
40+
id: "01",
41+
name: "Dr. Sarah Chen",
42+
role: "Head of AI Research",
43+
},
44+
{
45+
id: "02",
46+
name: "Marcus Thorne",
47+
role: "Senior Research Engineer",
48+
},
49+
{
50+
id: "03",
51+
name: "Elena Rostova",
52+
role: "Machine Learning Specialist",
53+
},
54+
];
55+
56+
return (
57+
<main className="min-h-screen bg-background-light dark:bg-background-dark">
58+
{/* Hero Section */}
59+
<section className="relative h-[716px] flex flex-col justify-end px-6 md:px-8 pb-16 overflow-hidden border-b border-slate-200 dark:border-slate-800">
60+
{/* Micro Grid Background */}
61+
<div className="absolute inset-0 z-0 micro-grid opacity-20 dark:opacity-10 pointer-events-none"></div>
62+
63+
{/* Background Image with Blend */}
64+
<div className="absolute inset-0 z-0 bg-slate-900 dark:bg-black">
65+
<img
66+
alt="Neural Architecture abstract visualization"
67+
className="w-full h-full object-cover opacity-50 mix-blend-luminosity"
68+
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7qYitqcyo-WJHi6WCZ9guPyoI5zYnMFhFeytJirS6OxBuWm2sQVSxA-ftQ6fJBbJPyNeiAc4tsm6uI1h_1OuW4IhfgUtkomqLcuuBh1szkAFgJFWhNSHC3V1MAdDawN6XsWUHim0mBPFdmuEz5oRV7eUFqibGC1pxoVMoL5N9eQTLR8a_f_kCI_YhGv3iB2pWYRscUeEOTRV9V3Az_THfteYEbY5GErmByu252DB2lZSESH9xQqur6qd9iFm_flVrYeIUex0FbwE"
69+
/>
70+
</div>
71+
72+
<div className="relative z-10 max-w-7xl mx-auto w-full">
73+
<div className="mb-4">
74+
<span className="text-primary text-xs font-bold uppercase tracking-[0.3em] bg-slate-900/50 backdrop-blur-sm px-3 py-1">
75+
Institutional Node // 04
76+
</span>
77+
</div>
78+
<h1 className="font-black uppercase tracking-[-0.05em] text-7xl md:text-9xl text-white leading-[0.85]">
79+
AI LAB<span className="text-primary">.</span>
80+
</h1>
81+
<div className="mt-8 flex gap-4 items-center">
82+
<span className="w-12 h-[1px] bg-primary"></span>
83+
<span className="text-xs font-bold uppercase tracking-[0.3em] text-slate-300">
84+
Advanced Neural Computing Division
85+
</span>
86+
</div>
87+
</div>
88+
</section>
89+
90+
{/* Lab Description & Context */}
91+
<section className="px-6 md:px-8 py-24 max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-16 border-b border-slate-200 dark:border-slate-800">
92+
<div className="md:col-span-4">
93+
<h3 className="text-[10px] font-bold uppercase tracking-[0.3em] text-primary mb-8">
94+
Executive Summary
95+
</h3>
96+
<p className="text-3xl font-black leading-tight tracking-tight text-slate-900 dark:text-slate-100">
97+
PIONEERING THE NEXT GENERATION OF{" "}
98+
<span className="italic font-serif normal-case text-slate-500 dark:text-slate-400">
99+
algorithmic precision
100+
</span>{" "}
101+
AND COMPUTATIONAL EFFICIENCY.
102+
</p>
103+
</div>
104+
<div className="md:col-span-8 flex flex-col gap-12">
105+
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
106+
<div>
107+
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 dark:text-slate-500 block mb-4">
108+
Focus 01 // Efficiency
109+
</span>
110+
<p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed text-justify-custom">
111+
The AI Lab focuses on next-gen algorithms designed for extreme
112+
hardware constraints. Our research explores the boundaries of
113+
neural architectures where latency and power consumption are
114+
minimized without sacrificing inferential accuracy.
115+
</p>
116+
</div>
117+
<div>
118+
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 dark:text-slate-500 block mb-4">
119+
Focus 02 // Inference
120+
</span>
121+
<p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed text-justify-custom">
122+
Specializing in real-time inference frameworks, we develop
123+
proprietary quantization techniques and sparse matrix engines
124+
that allow massive models to operate on edge devices at
125+
local-native speeds.
126+
</p>
127+
</div>
128+
</div>
129+
<div className="bg-slate-100 dark:bg-slate-900/50 p-8 border-l-4 border-primary">
130+
<p className="font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight italic text-lg">
131+
&quot;The goal is not just faster computation, but the structural
132+
reorganization of how intelligence is mapped to silicon.&quot;
133+
</p>
134+
</div>
135+
</div>
136+
</section>
137+
138+
{/* Current Projects - Bento Grid Layout */}
139+
<section className="px-6 md:px-8 py-24 max-w-7xl mx-auto border-b border-slate-200 dark:border-slate-800">
140+
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 gap-6">
141+
<div>
142+
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 dark:text-slate-500 block mb-2">
143+
Inventory
144+
</span>
145+
<h2 className="text-4xl font-black uppercase tracking-tighter text-slate-900 dark:text-slate-100">
146+
Active Research Initiatives
147+
</h2>
148+
</div>
149+
<div className="text-left md:text-right">
150+
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-primary">
151+
Status: Operational
152+
</span>
153+
</div>
154+
</div>
155+
156+
<div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-slate-200 dark:bg-slate-800 border border-slate-200 dark:border-slate-800">
157+
{projects.map((project, index) => (
158+
<div
159+
key={index}
160+
className={`p-10 flex flex-col justify-between aspect-square transition-colors duration-300 group
161+
${
162+
project.theme === "dark"
163+
? "bg-slate-900 dark:bg-black text-white"
164+
: "bg-white dark:bg-slate-900/50 hover:bg-slate-900 dark:hover:bg-primary/5 hover:text-white dark:hover:text-white cursor-pointer"
165+
}
166+
`}
167+
>
168+
<div>
169+
<div className="flex justify-between items-start mb-12">
170+
<span
171+
className={`text-[10px] font-bold uppercase tracking-[0.3em] transition-colors
172+
${project.theme === "dark" ? "text-primary" : "text-slate-400 dark:text-slate-500 group-hover:text-primary"}
173+
`}
174+
>
175+
{project.id}
176+
</span>
177+
<project.icon className="text-primary text-2xl" />
178+
</div>
179+
<h3
180+
className={`text-2xl font-black uppercase tracking-tight leading-tight transition-colors
181+
${project.theme === "dark" ? "text-white" : "text-slate-900 dark:text-slate-100 group-hover:text-white dark:group-hover:text-primary"}
182+
`}
183+
>
184+
{project.title}
185+
</h3>
186+
</div>
187+
<div className="flex flex-col gap-6">
188+
<div
189+
className={`h-px w-full transition-colors
190+
${project.theme === "dark" ? "bg-slate-700" : "bg-slate-200 dark:bg-slate-800 group-hover:bg-slate-700 dark:group-hover:bg-primary/20"}
191+
`}
192+
></div>
193+
<p
194+
className={`text-sm leading-relaxed transition-colors
195+
${project.theme === "dark" ? "text-slate-400" : "text-slate-500 dark:text-slate-400 group-hover:text-slate-400 dark:group-hover:text-slate-300"}
196+
`}
197+
>
198+
{project.description}
199+
</p>
200+
<Link
201+
href={project.link}
202+
className="text-[10px] font-bold uppercase tracking-[0.3em] text-primary flex items-center justify-between w-full mt-2"
203+
>
204+
{project.linkText} <FiArrowRight className="text-lg" />
205+
</Link>
206+
</div>
207+
</div>
208+
))}
209+
</div>
210+
</section>
211+
212+
{/* Core Researchers */}
213+
<section className="bg-slate-50 dark:bg-slate-900/20 px-6 md:px-8 py-24">
214+
<div className="max-w-7xl mx-auto">
215+
<div className="grid grid-cols-1 md:grid-cols-12 gap-16 items-start">
216+
<div className="md:col-span-4">
217+
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 dark:text-slate-500 block mb-4">
218+
The Collective
219+
</span>
220+
<h2 className="text-4xl font-black uppercase tracking-tighter leading-none mb-6 text-slate-900 dark:text-slate-100">
221+
Core Researchers
222+
</h2>
223+
<p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed max-w-sm">
224+
A multidisciplinary group of engineers and theorists pushing the
225+
boundaries of autonomous computation.
226+
</p>
227+
</div>
228+
229+
<div className="md:col-span-8">
230+
<div className="flex flex-col gap-2">
231+
{researchers.map((researcher, index) => (
232+
<div
233+
key={index}
234+
className="flex items-center justify-between p-8 bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 hover:border-primary dark:hover:border-primary transition-colors cursor-pointer group"
235+
>
236+
<div className="flex items-center gap-6 md:gap-12">
237+
<span className="text-[10px] font-bold text-slate-400 dark:text-slate-600 tracking-[0.3em]">
238+
{researcher.id}
239+
</span>
240+
<div>
241+
<h4 className="text-xl font-bold uppercase tracking-tight text-slate-900 dark:text-slate-100 group-hover:text-primary dark:group-hover:text-primary transition-colors mb-1">
242+
{researcher.name}
243+
</h4>
244+
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">
245+
{researcher.role}
246+
</span>
247+
</div>
248+
</div>
249+
<FiPlus className="text-2xl text-slate-300 dark:text-slate-600 group-hover:text-primary dark:group-hover:text-primary transition-colors" />
250+
</div>
251+
))}
252+
</div>
253+
</div>
254+
</div>
255+
</div>
256+
</section>
257+
</main>
258+
);
259+
}

0 commit comments

Comments
 (0)