Look fixes (#18)

* Fix footer

* Titles and intro image

* Revert changes to pr-preview

* Attempt to fix pr-preview

* references for pr-preview

* Remove the pr-preview

* Better intro for mobile

* Much better manifesto on mobile

frontend/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { ThemeProvider } from './contexts/ThemeContext';
 import Navbar from './components/Navbar';

frontend/src/components/Footer.tsx

@@ -16,7 +16,7 @@ export default function Footer() {
           <div>
             <div className="flex items-center mb-4">
               <Sprout className="h-6 w-6 text-green-500" />
-              <span className="ml-2 text-lg font-semibold text-white">AI for Good</span>
+              <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.
@@ -61,7 +61,7 @@ export default function Footer() {
           ))}
         </div>
         <div className="border-t border-gray-800 mt-12 pt-8 text-sm text-center">
-          © {new Date().getFullYear()} AI for Good. All rights reserved.
+          © {new Date().getFullYear()} The Good AI Lab. All rights reserved.
         </div>
       </div>
     </footer>

frontend/src/components/Navbar.tsx

@@ -12,7 +12,7 @@ export default function Navbar() {
         <div className="flex justify-between h-16">
           <Link to="/" className="flex items-center">
             <Sprout className="h-8 w-8 text-green-500" />
-            <span className="ml-2 text-xl font-semibold dark:text-white">The Good AI Lab</span>
+            <span className="ml-2 text-xl font-semibold dark: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>
           </Link>
 
           {/* Mobile menu button */}

frontend/src/components/home/CallToAction.tsx

@@ -1,5 +1,3 @@
-import { FaDiscord } from 'react-icons/fa';
-
 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">
@@ -14,9 +12,7 @@ export default function CallToAction() {
             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 Our Discord Server <span className="ml-2">
-              <FaDiscord className="h-5 w-5 inline" />
-            </span>
+            Join Us
           </a>
         </div>
       </div>

frontend/src/components/home/Intro.tsx

@@ -3,49 +3,63 @@ import { Link } from 'react-router-dom';
 
 export default function Intro() {
   return (
-    <div className="pt-24 pb-16 bg-gradient-to-br from-green-50 to-white dark:from-gray-900 dark:to-gray-800">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <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="lg:w-1/2 mx-10">
-            <h1 className="text-5xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
-              <Sprout className="h-14 w-14 text-green-500" />
+          <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>
             </h1>
-              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div className="max-w-3xl mx-auto">
-                  <div className="prose dark:prose-invert">
-                    <p className="text-2xl text-gray-600 dark:text-gray-300">
-                      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 text-gray-600 dark:text-gray-300 mt-8">
-                      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>
-                </div>
+              <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>
-            <div className="flex gap-4 mt-8 mx-6">
+            <div className="flex flex-col sm:flex-row items-center gap-4 lg:gap-8 mt-8 lg:mt-16">
               <Link
                 to="/manifesto"
-                className="bg-green-500 text-white px-6 py-3 rounded-md hover:bg-green-600 transition-colors flex items-center"
+                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"
               >
                 Learn More
-                <ArrowRight className="ml-2 h-5 w-5" />
+                <ArrowRight className="ml-2 lg:ml-3 h-5 w-5 lg:h-6 lg:w-6" />
               </Link>
               <Link
                 to="/team"
-                className="border-2 border-green-500 text-green-500 px-6 py-3 rounded-md hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors"
+                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"
               >
                 Meet the Team
               </Link>
             </div>
           </div>
-          <div className="hidden lg:block lg:w-1/3 mt-10 lg:mt-0">
+          <div className="hidden lg:block w-1/3 my-30 lg:mt-8">
             <div className="relative">
-              <div className="absolute -inset-4 bg-green-500/20 rounded-lg blur-xl"></div>
+              <div className="absolute -inset-4 rounded-[20%] bg-green-500/20 blur-xl"></div>
               <img
                 src="/images/seedling.png"
                 alt="AI Research"
-                className="relative rounded-lg shadow-2xl"
+                className="relative rounded-[20%] shadow-2xl"
               />
             </div>
           </div>

frontend/src/pages/Manifesto.tsx

@@ -2,24 +2,24 @@ import { Scroll } from 'lucide-react';
 
 export default function Manifesto() {
   return (
-    <div className="pt-24 bg-white dark:bg-gray-900">
+    <div className="pt-28 lg:pt-24 bg-white dark:bg-gray-900">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center mb-12">
-          <Scroll className="h-12 w-12 mx-auto text-green-600 dark:text-green-500 mb-4" />
-          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">Our Manifesto</h1>
+        <div className="text-center mb-8 lg:mb-12">
+          <Scroll className="h-10 w-10 lg:h-12 lg:w-12 mx-auto text-green-600 dark:text-green-500 mb-4" />
+          <h1 className="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">Our Manifesto</h1>
         </div>
       </div>
-      <div className="prose prose-lg mx-auto mb-20 dark:prose-invert prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-h3:text-green-600 dark:prose-h3:text-green-500 max-w-8xl">
-        <h3>Who We Are</h3>
-        <p>
+      <div className="prose prose-base lg:prose-lg mx-auto px-4 lg:px-0 mb-16 lg:mb-20 dark:prose-invert prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-h3:text-green-600 dark:prose-h3:text-green-500 max-w-4xl lg:max-w-8xl">
+        <h3 className="text-xl lg:text-2xl mt-8 first:mt-0">Who We Are</h3>
+        <p className="text-base lg:text-lg">
           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.
         </p>
 
-        <h3>What We Believe</h3>
-        <p>
+        <h3 className="text-xl lg:text-2xl mt-8">What We Believe</h3>
+        <p className="text-base lg:text-lg">
           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
@@ -29,8 +29,8 @@ export default function Manifesto() {
           places long left behind.
         </p>
 
-        <h3>What We Do</h3>
-        <ul>
+        <h3 className="text-xl lg:text-2xl mt-8">What We Do</h3>
+        <ul className="text-base lg:text-lg space-y-4">
           <li>
             <strong>AI Lab:</strong> We focus on foundational academic AI research. We publish in
             open venues, share our code, and push the field forward.
@@ -42,8 +42,8 @@ export default function Manifesto() {
           </li>
         </ul>
 
-        <h3>How We Work</h3>
-        <ul>
+        <h3 className="text-xl lg:text-2xl mt-8">How We Work</h3>
+        <ul className="text-base lg:text-lg space-y-4">
           <li>
             <strong>Collaborations:</strong> We team up with universities, research institutes, and
             R&D labs to tackle projects that have real impact.
@@ -60,8 +60,8 @@ export default function Manifesto() {
           </li>
         </ul>
 
-        <h3>Our Vision</h3>
-        <p>
+        <h3 className="text-xl lg:text-2xl mt-8">Our Vision</h3>
+        <p className="text-base lg:text-lg">
           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.

frontend/vite.config.ts

@@ -4,10 +4,8 @@ import ViteYaml from '@modyfi/vite-plugin-yaml';
 
 // https://vitejs.dev/config/
 export default defineConfig(() => {
-  const baseUrl = process.env.VITE_BASE_URL || '/';
-
   return {
-    base: baseUrl,
+    base: './',
     plugins: [
       react(),
       ViteYaml(),