Add research and team data (#20)

frontend/src/components/Footer.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { Sprout } from 'lucide-react';
+import { mailto } from '../types';
 
 export default function Footer() {
   const handleClick = (to: string) => {
@@ -18,28 +19,35 @@ export default function Footer() {
               <Sprout className="h-6 w-6 text-green-500" />
               <span className="ml-2 text-lg font-semibold text-white">The <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent">Good</span> AI Lab</span>
             </div>
-            <p className="text-sm">
-              Building a better future through ethical AI development and community engagement.
+            <p className="text-xs">
+              We are an independent AI lab working on foundational{' '}
+                <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
+                  AI research
+                </span>{' '}
+                and innovation projects for{' '}
+                <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
+                  social good
+                </span>.
             </p>
           </div>
           {[
             {
               title: 'About',
               links: [
-                { name: 'Organization', to: '/manifesto' },
+                { name: 'Manifesto', to: '/manifesto' },
                 { name: 'Team', to: '/team' },
               ],
             },
             {
               title: 'Resources',
               links: [
                 { name: 'Research', to: '/research' },
-                // { name: 'Community Papers', to: '/research#community' },
+                { name: 'Community Papers', to: '/research#community' },
               ],
             },
             {
               title: 'Get Involved',
-              links: [{ name: 'Join us on Discord', to: 'https://discord.gg/54MS3tPXEQ' }],
+              links: [{ name: 'Contact us', to: mailto }],
             },
           ].map((section, index) => (
             <div key={index} className="mx-10">

frontend/src/components/Navbar.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Sprout, Menu, X } from 'lucide-react';
 import ThemeToggle from './ThemeToggle';
+import { mailto } from '../types';
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
@@ -38,7 +39,7 @@ export default function Navbar() {
             </Link>
             <ThemeToggle />
             <Link
-              to="https://discord.gg/54MS3tPXEQ"
+              to={mailto}
               className="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition-colors"
             >
               Get Involved
@@ -75,7 +76,7 @@ export default function Navbar() {
                 <ThemeToggle />
               </div>
               <Link
-                to="https://discord.gg/54MS3tPXEQ"
+                to={mailto}
                 className="block bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition-colors"
               >
                 Get Involved

frontend/src/components/home/CallToAction.tsx

@@ -1,18 +1,26 @@
+import { mailto } from "../../types";
+
 export default function CallToAction() {
   return (
     <div className="py-16 bg-gradient-to-br from-green-50 to-white dark:from-gray-800 dark:to-gray-900" id="cta">
       <div className="max-w-xl mx-auto px-4">
         <div className="bg-green-500 dark:bg-green-600 rounded-2xl p-12 shadow-lg text-center">
-          <h2 className="text-3xl font-bold text-white mb-6">Join Us</h2>
+          <h2 className="text-3xl font-bold text-white mb-6">Contact Us</h2>
           <p className="text-green-50 mb-8 text-xl">
             Whether you're a researcher, developer, or simply passionate about ethical AI, there's a
             place for you in our community.
           </p>
-          <a
+          {/* <a
             href="https://discord.gg/54MS3tPXEQ"
             className="bg-white text-green-500 dark:bg-gray-800 dark:text-green-400 px-8 py-3 rounded-md hover:bg-green-50 dark:hover:bg-gray-700 transition-colors"
           >
             Join Us
+          </a> */}
+          <a
+            href={mailto}
+            className="text-3xl text-green-900 dark:text-green-100"
+          >
+            [email protected]
           </a>
         </div>
       </div>

frontend/src/components/home/Intro.tsx

@@ -3,63 +3,62 @@ import { Link } from 'react-router-dom';
 
 export default function Intro() {
   return (
-    <div className="h-screen flex items-center bg-gradient-to-br from-green-50 to-white dark:from-gray-900 dark:to-gray-800">
-      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="lg:flex lg:items-center lg:gap-12">
-          <div className="flex-1 space-y-8 lg:space-y-16">
-            <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-4 lg:mb-8 flex items-center gap-3 lg:gap-6">
-              <Sprout className="h-10 w-10 lg:h-16 lg:w-16 text-green-500" />
-              <span>The <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent">Good</span> AI Lab</span>
+    <div className="min-h-screen flex items-center bg-gradient-to-br from-green-50 to-white dark:from-gray-900 dark:to-gray-800 py-8 sm:py-12 lg:py-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 sm:mt-0">
+        <div className="flex flex-col lg:flex-row lg:items-center lg:gap-12">
+          <div className="flex-1 space-y-6 lg:space-y-16">
+            <h1 className="text-3xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-4 lg:mb-8 flex flex-wrap items-center justify-center lg:justify-start gap-3 lg:gap-6">
+              <Sprout className="h-8 w-8 lg:h-16 lg:w-16 text-green-500 shrink-0" />
+              <span className="text-center lg:text-left">The <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent">Good</span> AI Lab</span>
             </h1>
-              <div className="prose dark:prose-invert space-y-6 lg:space-y-12">
-                <p className="text-2xl sm:text-xl lg:text-3xl text-gray-600 dark:text-gray-300 leading-relaxed sm:leading-normal text-center lg:text-left">
-                  We're a{' '}
-                  <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
-                    research collective
-                  </span>{' '}
-                  ensuring AI benefits{' '}
-                  <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
-                    everyone
-                  </span>.
-                </p>
-                <p className="text-2xl sm:text-xl lg:text-3xl text-gray-600 dark:text-gray-300 leading-relaxed sm:leading-normal text-center lg:text-left">
-                  Building{' '}
-                  <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
-                    responsible AI
-                  </span>{' '}
-                  at the intersection of{' '}
-                  <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
-                    innovation
-                  </span>{' '}
-                  and{' '}
-                  <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
-                    social good
-                  </span>.
-                </p>
+            <div className="prose dark:prose-invert space-y-4 lg:space-y-12">
+              <p className="text-xl lg:text-3xl text-gray-600 dark:text-gray-300 leading-relaxed text-center lg:text-left">
+                We are an independent AI lab working on foundational{' '}
+                <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
+                  AI research
+                </span>{' '}
+                and innovation projects for{' '}
+                <span className="bg-gradient-to-r from-green-400 to-green-600 bg-clip-text text-transparent font-bold">
+                  social good
+                </span>.
+              </p>
+            </div>
+
+            <div className="block lg:hidden w-full my-6">
+              <div className="relative max-w-sm mx-auto">
+                <div className="absolute -inset-4 rounded-[20%] bg-green-500/20 blur-xl"></div>
+                <img
+                  src="/images/intro.webp"
+                  alt="AI Research"
+                  className="relative rounded-[20%] shadow-2xl"
+                />
               </div>
-            <div className="flex flex-col sm:flex-row items-center gap-4 lg:gap-8 mt-8 lg:mt-16">
+            </div>
+
+            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 lg:gap-8 mt-6 lg:mt-16">
               <Link
                 to="/manifesto"
-                className="w-auto bg-green-500 text-white px-8 lg:px-10 py-3 lg:py-4 rounded-full hover:bg-green-600 transition-colors flex items-center justify-center text-lg lg:text-xl"
+                className="w-full sm:w-auto bg-green-500 text-white px-6 lg:px-10 py-2.5 lg:py-4 rounded-full hover:bg-green-600 transition-colors flex items-center justify-center text-base lg:text-xl"
               >
                 Learn More
                 <ArrowRight className="ml-2 lg:ml-3 h-5 w-5 lg:h-6 lg:w-6" />
               </Link>
               <Link
                 to="/team"
-                className="w-auto border-2 border-green-500 text-green-500 px-8 lg:px-10 py-3 lg:py-4 rounded-full hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors text-center text-lg lg:text-xl"
+                className="w-full sm:w-auto border-2 border-green-500 text-green-500 px-6 lg:px-10 py-2.5 lg:py-4 rounded-full hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors text-center text-base lg:text-xl"
               >
                 Meet the Team
               </Link>
             </div>
           </div>
-          <div className="hidden lg:block w-1/3 my-30 lg:mt-8">
+
+          <div className="hidden lg:block lg:w-2/5">
             <div className="relative">
-              <div className="absolute -inset-4 rounded-[20%] bg-green-500/20 blur-xl"></div>
+              <div className="absolute -inset-4 rounded-[5%] bg-green-500/20 blur-xl"></div>
               <img
-                src="/images/seedling.png"
+                src="/images/intro.webp"
                 alt="AI Research"
-                className="relative rounded-[20%] shadow-2xl"
+                className="relative rounded-[5%] shadow-2xl"
               />
             </div>
           </div>

frontend/src/components/research/CommunityPapers.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { Users, ExternalLink } from 'lucide-react';
 import { useLocation } from 'react-router-dom';
-import { CommunityPaper, validateCommunityPaper } from '../../types';
+import { Paper, validatePaper } from '../../types';
 import communityPapersData from '../../data/community-papers.yaml';
 
-const papers = communityPapersData.papers.filter(validateCommunityPaper);
+const papers = communityPapersData.papers.filter(validatePaper);
 
 export default function CommunityPapers() {
   const location = useLocation();
@@ -28,15 +28,15 @@ export default function CommunityPapers() {
           </h2>
         </div>
         <div className="grid md:grid-cols-2 gap-8">
-          {papers.map((paper: CommunityPaper, index: number) => (
+          {papers.map((paper: Paper, index: number) => (
             <div
               key={index}
               className="bg-gray-50 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden"
             >
               <img className="w-full h-48 object-cover" src={paper.image} alt={paper.title} />
               <div className="p-6">
                 <p className="text-sm text-green-600 dark:text-green-400 mb-2">
-                  {paper.institution} • {paper.year}
+                  {paper.conference} • {paper.year}
                 </p>
                 <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
                   {paper.title}

frontend/src/components/research/OurResearch.tsx

@@ -0,0 +1,60 @@
+import { FlaskConical } from 'lucide-react';
+import researchData from '../../data/research.yaml';
+import { Research, validateResearch } from '../../types';
+
+const rawPapers = researchData.research;
+const researches = rawPapers.filter(validateResearch);
+
+if (researches.length !== rawPapers.length) {
+  console.warn(`Filtered out ${rawPapers.length - researches.length} invalid papers`);
+}
+
+export default function OurResearch() {
+  return (
+    <div className="py-16 bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-7xl mx-auto px-4">
+      <div className="flex items-center justify-center gap-3 mb-8">
+        <FlaskConical className="h-8 w-8 text-green-500" />
+        <h2 className="text-3xl font-bold text-gray-900 dark:text-white">
+          Our Research
+        </h2>
+      </div>
+
+        <div className="grid gap-8 mx-4">
+          {researches.map((research: Research, index: number) => (
+            <div
+              key={index}
+              className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
+            >
+              <div className="relative md:flex">
+                <div className="md:absolute md:inset-y-0 md:w-64 h-64 md:h-full">
+                  <img
+                    className="w-full h-full object-cover"
+                    src={research.image}
+                    alt={research.title}
+                  />
+                </div>
+                <div className="p-8 md:ml-64">
+                  <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
+                    {research.title}
+                  </h3>
+                  <p className="text-gray-600 dark:text-gray-300 mb-4">{research.abstract}</p>
+                  <div className="flex flex-wrap gap-2 mb-4">
+                    {research.tags.map((tag: string, idx: number) => (
+                      <span
+                        key={idx}
+                        className="bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 px-3 py-1 rounded-full text-sm"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}