Skip to content

Commit 5697ba9

Browse files
jim-juniorjim-junior
committed
feat: Enhance layout and add new sections for metrics, recent papers, and community engagement
- Updated layout.tsx to include global SEO metadata and optimized font loading. - Introduced metrics.tsx to display impact metrics in a visually appealing section. - Added papers.tsx to showcase recent research papers with detailed descriptions. - Created partners.tsx for a roadmap section highlighting strategic partners and project phases. - Refactored Navbar and Footer components for improved navigation and styling. - Updated package.json and package-lock.json to include new Tailwind CSS plugins for enhanced styling capabilities.
1 parent 364fb04 commit 5697ba9

15 files changed

Lines changed: 1184 additions & 500 deletions

‎app/about.tsx‎

Lines changed: 55 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,62 @@
1-
/* eslint-disable @typescript-eslint/no-explicit-any */
2-
"use client";
1+
import { FiBox, FiTerminal, FiLayers } from "react-icons/fi";
2+
3+
export default function Mission() {
4+
const missionPillars = [
5+
{
6+
title: "Foundation Software",
7+
description:
8+
"Developing stable, scalable low-level systems that form the backbone of distributed networks.",
9+
icon: FiBox,
10+
},
11+
{
12+
title: "Optimized Libraries",
13+
description:
14+
"High-performance computation modules optimized for silicon-level throughput and efficiency.",
15+
icon: FiTerminal,
16+
},
17+
{
18+
title: "Core Engines",
19+
description:
20+
"Building the next generation of software execution environments and virtual machines.",
21+
icon: FiLayers,
22+
},
23+
];
324

4-
import { motion } from "framer-motion";
5-
import { FiCpu, FiAperture, FiTrendingUp } from "react-icons/fi";
6-
7-
export default function AboutSection() {
825
return (
9-
<section
10-
id="about"
11-
className="relative py-24 bg-gray-950 text-gray-200 overflow-hidden"
12-
>
13-
{/* Decorative glow */}
14-
<div className="absolute inset-0 pointer-events-none">
15-
<div className="absolute top-20 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-blue-500/10 blur-[160px] rounded-full" />
16-
</div>
17-
18-
<div className="container mx-auto px-6 relative z-10">
19-
<motion.div
20-
initial={{ opacity: 0, y: 40 }}
21-
whileInView={{ opacity: 1, y: 0 }}
22-
viewport={{ once: true }}
23-
transition={{ duration: 0.8 }}
24-
className="max-w-4xl mx-auto text-center"
25-
>
26-
<h2 className="text-4xl md:text-5xl font-bold tracking-tight text-blue-300 mb-6">
27-
About Open UG Labs
28-
</h2>
29-
30-
<p className="text-lg md:text-xl text-gray-300 leading-relaxed">
31-
Open UG Labs is a frontier research collective exploring the edges
32-
of modern computing from cryptography and virtualization
33-
technologies to intelligent systems and cloud-native infrastructure.
34-
<br />
35-
<br />
36-
We push technology forward through open research, engineering
37-
excellence, community collaboration, and long-term scientific
38-
vision.
39-
</p>
40-
</motion.div>
41-
42-
{/* Three Pillars */}
43-
<div className="mt-20 grid md:grid-cols-3 gap-10 max-w-5xl mx-auto">
44-
<FeatureCard
45-
icon={<FiAperture className="w-10 h-10 text-blue-300" />}
46-
title="Deep Research"
47-
description="We investigate advanced technologies including PQC, virtualization, distributed systems, and AI autonomy."
48-
/>
49-
50-
<FeatureCard
51-
icon={<FiCpu className="w-10 h-10 text-blue-300" />}
52-
title="Engineering Impact"
53-
description="Our teams build real technologies like Conveyor CI and experimental TLS protocols for next-gen security."
54-
/>
55-
56-
<FeatureCard
57-
icon={<FiTrendingUp className="w-10 h-10 text-blue-300" />}
58-
title="Future-Focused"
59-
description="We operate with long-term vision preparing Africa for quantum computing, AI infrastructure, and emerging tech fields."
60-
/>
26+
<section className="py-32 border-b border-slate-200 dark:border-slate-800">
27+
<div className="max-w-7xl mx-auto px-6">
28+
<div className="grid grid-cols-12 gap-8 lg:gap-16">
29+
{/* Left Column: Mission Statement */}
30+
<div className="col-span-12 lg:col-span-4">
31+
<h2 className="text-4xl font-black uppercase tracking-tighter mb-6">
32+
Our Mission
33+
</h2>
34+
<p className="text-slate-500 font-medium dark:text-slate-400">
35+
Focused on the critical layers of modern software engineering.
36+
</p>
37+
</div>
38+
39+
{/* Right Column: Mission Grid (Mapped) */}
40+
<div className="col-span-12 lg:col-span-8 grid md:grid-cols-3 gap-1 px-1 py-1 bg-slate-200 dark:bg-slate-800">
41+
{missionPillars.map((pillar, index) => (
42+
<div
43+
key={index}
44+
className="bg-background-light dark:bg-background-dark p-8 flex flex-col gap-12 transition-colors hover:bg-white dark:hover:bg-slate-900/80"
45+
>
46+
<pillar.icon className="text-4xl text-primary stroke-[1.5]" />
47+
<div>
48+
<h3 className="text-xs font-bold uppercase tracking-widest mb-4 text-slate-900 dark:text-slate-100">
49+
{pillar.title}
50+
</h3>
51+
<p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
52+
{pillar.description}
53+
</p>
54+
</div>
55+
</div>
56+
))}
57+
</div>
6158
</div>
6259
</div>
6360
</section>
6461
);
6562
}
66-
67-
function FeatureCard({
68-
icon,
69-
title,
70-
description,
71-
}: {
72-
icon: any;
73-
title: string;
74-
description: string;
75-
}) {
76-
return (
77-
<motion.div
78-
initial={{ opacity: 0, y: 40 }}
79-
whileInView={{ opacity: 1, y: 0 }}
80-
viewport={{ once: true }}
81-
transition={{ duration: 0.6 }}
82-
className="p-8 bg-gray-900/40 backdrop-blur-md border border-gray-800 rounded-2xl hover:bg-gray-900/60 transition-all"
83-
>
84-
<div className="flex justify-center mb-5">{icon}</div>
85-
<h3 className="text-2xl font-semibold mb-3 text-gray-100">{title}</h3>
86-
<p className="text-gray-400 text-base leading-relaxed">{description}</p>
87-
</motion.div>
88-
);
89-
}

‎app/community.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
export default function Community() {
2+
return (
3+
<section className="py-32 border-t border-slate-200 dark:border-slate-800">
4+
<div className="max-w-7xl mx-auto px-6">
5+
<div className="grid grid-cols-12 gap-16 items-center">
6+
{/* Image/Visual Column */}
7+
<div className="col-span-12 lg:col-span-6 relative">
8+
<div className="aspect-square bg-slate-100 dark:bg-slate-900 relative overflow-hidden swiss-border">
9+
{/* Note: Standard img used. Switch to next/image for production if self-hosting assets */}
10+
<img
11+
alt="Mentorship session"
12+
className="w-full h-full object-cover grayscale contrast-125 mix-blend-multiply dark:mix-blend-luminosity dark:opacity-80"
13+
src="https://lh3.googleusercontent.com/aida-public/AB6AXuD8IhZUp8QdHReeKLhrJLC22cZkGux73GV9mW0BR-4fG7Z8buEPt5Wd4awrNMjfs5eMfzMsEolfe_FSZrU0SqHGgjcCHw1uockPpg9Fp4C3HxImgFfMQTngK1b4imUiktHH2vV-3kHnoW57R1j7yXYw3q-p8o2_vk9m3-upxwGL4pYDP9w0sE_HUE0ngcaZ75MGlHUONP_wgvpIZvnQw38RmbwdJNeLMI_esOuyqhRZ8hxJdSfXY17ca_WczwErZMwjO9_JoCu5zD0"
14+
/>
15+
<div className="absolute inset-0 bg-primary/10"></div>
16+
</div>
17+
18+
{/* Stat Accent Box */}
19+
<div className="absolute -bottom-8 -right-8 w-64 h-64 bg-primary p-8 hidden md:flex flex-col justify-end shadow-2xl dark:shadow-none">
20+
<span className="text-3xl font-black text-slate-900 uppercase tracking-tighter">
21+
120+
22+
</span>
23+
<span className="text-[10px] font-bold text-slate-900 uppercase tracking-widest">
24+
Active Mentors
25+
</span>
26+
</div>
27+
</div>
28+
29+
{/* Content Column */}
30+
<div className="col-span-12 lg:col-span-6">
31+
<span className="text-xs font-bold uppercase tracking-[0.3em] text-primary mb-6 block">
32+
Community & Mentorship
33+
</span>
34+
<h2 className="text-5xl font-black uppercase tracking-tighter mb-8 leading-none text-slate-900 dark:text-slate-100">
35+
Investing in the <br /> Human Protocol.
36+
</h2>
37+
<p className="text-lg text-slate-600 dark:text-slate-400 mb-10 text-justify-custom">
38+
We believe the future of software infrastructure is built on open
39+
collaboration. Our lab actively sponsors Open Source Software
40+
(OSS) projects and provides rigorous mentorship for graduate
41+
students and developers pushing the boundaries of what is possible
42+
in core computing.
43+
</p>
44+
45+
<div className="grid grid-cols-2 gap-8 mb-12">
46+
<div>
47+
<h5 className="text-xs font-bold uppercase tracking-widest mb-2 text-slate-900 dark:text-slate-100">
48+
Fellowships
49+
</h5>
50+
<p className="text-sm text-slate-500 dark:text-slate-400">
51+
Fully-funded research positions for PhD candidates and
52+
post-docs.
53+
</p>
54+
</div>
55+
<div>
56+
<h5 className="text-xs font-bold uppercase tracking-widest mb-2 text-slate-900 dark:text-slate-100">
57+
OSS Grants
58+
</h5>
59+
<p className="text-sm text-slate-500 dark:text-slate-400">
60+
Financial and engineering support for critical low-level
61+
libraries.
62+
</p>
63+
</div>
64+
</div>
65+
66+
<button className="bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-primary dark:hover:bg-primary hover:text-slate-900 transition-all cursor-pointer">
67+
Join the Community
68+
</button>
69+
</div>
70+
</div>
71+
</div>
72+
</section>
73+
);
74+
}

0 commit comments

Comments
 (0)