Updated manifesto

frontend/src/app/page.tsx

@@ -3,65 +3,92 @@ import Footer from "@/components/layout/Footer";
 import Section from "@/components/Section";
 import { SectionRowProps } from "@/components/SectionRow";
 
-function WhatWeDo() {
+function WhoWeAre() {
   const sections: SectionRowProps[] = [
     {
-      suptitle: "AI Lab",
-      title: "Collaborative AI Research",
       paragraph: [
-        "We bridge industry experience and academia to work on foundational AI research.",
-        "We keep our research open and independent.",
-        "Our work is published in top-tier venues.",
+        "We are a non-profit AI research collective — scientists, professors, engineers, researchers, and developers — coming together from top universities, labs, and companies.",
+        "We're here because we're curious about what AI can be and should be, and we feel a responsibility to make it count for everyone.",
       ],
-      delay: 200,
     },
+  ];
+  return <Section id="who-we-are" title="WHO WE ARE" sections={sections} />;
+}
+
+function WhatWeBelieve() {
+  const sections: SectionRowProps[] = [
     {
-      suptitle: "Good AI",
-      title: "Advocating for Responsible AI",
       paragraph: [
-        "We promote ethical AI advancements.",
-        "We address issues like bias, misuse, and inequity in AI systems.",
-        "Our goal is to foster an AI community that values responsibility, inclusivity, and transparency.",
+        "AI is shaping the future. It's changing every aspect of our society, including how we think about ourselves and our potential.",
+        "The question is not just what AI can do, but what it should do. We believe that innovation without a guiding purpose is hollow.",
+        "Real progress means more than building better tools; it means building them for everyone, especially those too often overlooked or forgotten.",
+        "We want AI that doesn't just float at the top, serving the privileged, but flows downward and outward, reaching people and places long left behind.",
       ],
-      delay: 400,
+    },
+  ];
+  return (
+    <Section id="what-we-believe" title="WHAT WE BELIEVE" sections={sections} />
+  );
+}
+
+function WhatWeDo() {
+  const sections: SectionRowProps[] = [
+    {
+      subtitle: "AI Lab",
+      paragraph:
+        "We focus on foundational academic AI research. We publish in open venues, share our code, and push the field forward.",
+    },
+    {
+      subtitle: "Good AI",
+      paragraph:
+        "We call out biases, support frameworks that keep AI honest, and build fairness, transparency, and accountability into every model we touch. We fight for meaningful, responsible applications that truly matter.",
     },
   ];
   return <Section id="what-we-do" title="WHAT WE DO" sections={sections} />;
 }
 
-function HowWeOperate() {
+function HowWeWork() {
   const sections: SectionRowProps[] = [
     {
-      suptitle: "Collaborations",
+      subtitle: "Collaborations",
       paragraph:
-        "We collaborate with universities, research institutes, and R&D labs to co-supervise impactful research projects.",
-      delay: 0,
+        "We team up with universities, research institutes, and R&D labs to tackle projects that have real impact.",
     },
     {
-      suptitle: "Dissemination",
+      subtitle: "Openness and Community",
       paragraph:
-        "We openly share our findings through open-source code, publications, conferences, workshops, and public events.",
-      delay: 200,
+        "We share what we find, learn, and create at conferences, workshops, and public events, aiming to spark honest conversation and inspire both research and action.",
     },
     {
-      suptitle: "Ethics",
+      subtitle: "Partnerships",
       paragraph:
-        "We advocate and promote the ethical use of AI in critical fields like healthcare, sustainability, education, and social impact, while also highlighting the risks and harms of irresponsible AI applications.",
-      delay: 400,
+        "Hand-in-hand with charitable non-profit organisations, we promote and develop AI applications that drive tangible improvements—education, healthcare, humanitarian aid, environmental protection, and more.",
     },
   ];
+  return <Section id="how-we-work" title="HOW WE WORK" sections={sections} />;
+}
 
-  return (
-    <Section id="how-we-operate" title="HOW WE OPERATE" sections={sections} />
-  );
+function OurVision() {
+  const sections: SectionRowProps[] = [
+    {
+      paragraph: [
+        "We see AI as a force that reveals new paths, includes more voices, and helps reshape society for the better.",
+        "If we are to contribute with a verse to this powerful play, let it be driven by curiosity and guided by responsibility.",
+      ],
+    },
+  ];
+  return <Section id="our-vision" title="OUR VISION" sections={sections} />;
 }
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col">
       <Intro />
+      <WhoWeAre />
+      <WhatWeBelieve />
       <WhatWeDo />
-      <HowWeOperate />
+      <HowWeWork />
+      <OurVision />
       <Footer />
     </main>
   );

frontend/src/components/Section.tsx

@@ -3,24 +3,26 @@ import SectionRow, { SectionRowProps } from "./SectionRow";
 
 interface SectionProps {
   id: string;
-  title: string;
+  title?: string;
   sections: SectionRowProps[];
 }
 
 export default function Section({ id, title, sections }: SectionProps) {
   return (
     <section
       id={id}
-      className="relative min-h-screen flex items-center justify-center bg-gradient-to-b from-white to-gray-50"
+      className="relative min-h-[50vh] flex items-center justify-center bg-gradient-to-b from-white to-gray-50 pt-24 pb-12"
     >
-      <div className="container mx-auto px-4 py-24">
-        <div className="text-center mb-32 opacity-0 animate-fade-in">
-          <h2 className="text-5xl font-light text-gray-800 font-playfair">
-            {title}
-          </h2>
-        </div>
+      <div className="container mx-auto px-4">
+        {title && (
+          <div className="text-center pb-16 opacity-0 animate-fade-in">
+            <h2 className="text-5xl font-light text-gray-600 font-playfair">
+              {title}
+            </h2>
+          </div>
+        )}
 
-        <div className="max-w-6xl mx-auto space-y-40">
+        <div className="max-w-6xl mx-auto space-y-20">
           {sections.map((section, index) => (
             <SectionRow key={index} {...section} />
           ))}

frontend/src/components/SectionRow.tsx

@@ -1,44 +1,44 @@
 import React from "react";
 
 export interface SectionRowProps {
-  suptitle?: string; // Optional subtitle displayed as a <span>
+  subtitle?: string; // Optional subtitle displayed as a <span>
   title?: string; // Optional main title displayed as a <h3>
   paragraph: string | string[]; // Paragraph(s), either a single string or an array of strings
   delay?: number; // Optional animation delay in milliseconds
 }
 
 export default function SectionRow({
-  suptitle,
+  subtitle: subtitle,
   title,
   paragraph,
-  delay = 0,
+  delay = 100,
 }: SectionRowProps) {
   return (
     <div
       className={`opacity-0 animate-fade-slide-up [animation-delay:${delay}ms] text-center max-w-3xl mx-auto`}
     >
-      {suptitle && (
-        <span className="text-4xl font-light text-indigo-600 tracking-[.25em] uppercase block mb-4 font-sans">
-          {suptitle}
-        </span>
-      )}
       {title && (
-        <h3 className="text-5xl font-normal text-gray-800 leading-tight font-playfair mb-8">
+        <h3 className="text-5xl font-normal text-gray-600 leading-tight font-playfair mb-8">
           {title}
         </h3>
       )}
-      <div className="space-y-1">
+      {subtitle && (
+        <span className="text-4xl font-light text-indigo-600 tracking-[.25em] uppercase block mb-4 font-sans">
+          {subtitle}
+        </span>
+      )}
+      <div className="space-y-2 max-w-4xl mx-auto">
         {Array.isArray(paragraph)
           ? paragraph.map((point, index) => (
               <p
                 key={index}
-                className="text-xl text-gray-600 leading-relaxed font-inter"
+                className="text-xl text-gray-500 leading-relaxed font-inter text-justify py-2"
               >
                 {point}
               </p>
             ))
           : typeof paragraph === "string" && (
-              <p className="text-xl text-gray-600 leading-relaxed font-inter">
+              <p className="text-xl text-gray-500 leading-relaxed font-inter text-justify">
                 {paragraph}
               </p>
             )}