Fix: Codebase font fixed, and other fixes for #2138 PR (#2154)

* fix #2123 * Docs enhancement * Update docs/src/components/CustomFooter.tsx Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com> * Update docs/src/components/CustomFooter.tsx Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com> * Update docs/src/pages/faq.tsx Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com> * update * fix for #2138 pr * Update docs/src/components/CustomFooter.tsx Co-authored-by: Graham Neubig <neubig@gmail.com> * Update docs/src/components/HomepageHeader/HomepageHeader.tsx Co-authored-by: Graham Neubig <neubig@gmail.com> * Update docs/src/components/Welcome/Welcome.tsx Co-authored-by: Graham Neubig <neubig@gmail.com> * Update docs/src/css/custom.css Co-authored-by: Graham Neubig <neubig@gmail.com> --------- Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com> Co-authored-by: Graham Neubig <neubig@gmail.com>
2026-01-08 22:38:05 -05:00 · 2024-06-01 07:52:44 +05:30
parent bf24a0b5c0
commit 6e76f9a02f
26 changed files with 1653 additions and 800 deletions
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -51,7 +51,6 @@ const config: Config = {
      } satisfies Preset.Options,
    ],
  ],
-
  themeConfig: {
    image: "img/docusaurus.png",
    navbar: {
--- a/docs/modules/usage/about.md
+++ b/docs/modules/usage/about.md
@@ -50,4 +50,4 @@ Please note that the selection of these technologies is in progress, and additio

 ## 📜 License

-Distributed under the MIT License. See [our license](https://github.com/OpenDevin/OpenDevin/blob/main/LICENSE) for more information.
+Distributed under the MIT License. See [our license](https://github.com/OpenDevin/OpenDevin/blob/main/LICENSE) for more information.
--- a/docs/modules/usage/agents.md
+++ b/docs/modules/usage/agents.md
@@ -139,4 +139,4 @@ The agent is given its previous action-observation pairs, current task, and hint
 | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `__init__`      | Initializes an agent with `llm`                                                                                                                                                           |
 | `step`          | Checks to see if current step is completed, returns `AgentFinishAction` if True. Otherwise, creates a plan prompt and sends to model for inference, adding the result as the next action. |
-| `search_memory` | Not yet implemented                                                                                                                                                                       |
+| `search_memory` | Not yet implemented                                                                                                                                                                       |
--- a/docs/modules/usage/troubleshooting/troubleshooting.md
+++ b/docs/modules/usage/troubleshooting/troubleshooting.md
@@ -133,4 +133,4 @@ the API you're trying to connect to. Most often this happens for Azure or ollama
  - [Google](/OpenDevin/modules/usage/llms/googleLLMs)
 - Make sure your API key is correct
 - See if you can connect to the LLM using `curl`
- Try [connecting via LiteLLM directly](https://github.com/BerriAI/litellm) to test your setup
+- Try [connecting via LiteLLM directly](https://github.com/BerriAI/litellm) to test your setup
--- a/docs/modules/usage/troubleshooting/windows.md
+++ b/docs/modules/usage/troubleshooting/windows.md
@@ -33,4 +33,4 @@ localhostForwarding=true

 - Save the `.wslconfig` file.
 - Restart WSL2 completely by exiting any running WSL2 instances and executing the command `wsl --shutdown` in your command prompt or terminal.
- After restarting WSL, attempt to execute `make run` again. The networking issue should be resolved.
+- After restarting WSL, attempt to execute `make run` again. The networking issue should be resolved.
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
--- a/docs/package.json
+++ b/docs/package.json
@@ -16,6 +16,7 @@
  },
  "dependencies": {
    "@docusaurus/core": "3.2.1",
+    "@docusaurus/plugin-content-pages": "^3.3.2",
    "@docusaurus/preset-classic": "3.2.1",
    "@mdx-js/react": "^3.0.0",
    "clsx": "^2.0.0",
@@ -29,9 +30,6 @@
    "@docusaurus/module-type-aliases": "3.2.1",
    "@docusaurus/tsconfig": "3.2.1",
    "@docusaurus/types": "3.2.1",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
    "typescript": "~5.2.2"
  },
  "browserslist": {
--- a/docs/plugins/tailwind-config.cjs
+++ b/docs/plugins/tailwind-config.cjs
@@ -0,0 +1,13 @@
+export default function tailwindPlugin(context, options) {
+  return {
+    name: 'tailwind-plugin',
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins = [
+        require('postcss-import'),
+        require('tailwindcss'),
+        require('autoprefixer'),
+      ];
+      return postcssOptions;
+    },
+  };
+}
--- a/docs/postcss.config.js
+++ b/docs/postcss.config.js
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
--- a/docs/src/components/CustomFooter.tsx
+++ b/docs/src/components/CustomFooter.tsx
@@ -1,23 +1,31 @@
+import React from "react";
 import { FaSlack, FaDiscord, FaGithub } from "react-icons/fa";
+import "../css/footer.css"; // Importing the CSS file

 function CustomFooter() {
  return (
-    <footer style={{ backgroundColor: 'dark' }} className="dark:text-white h-[25vh] bg-gradient-to-b from-gray-900 to-gray-900">
-        <div className="flex flex-col justify-between w-full items-center p-2 h-full">
-          <div className="flex gap-2">
-            <div className="font-bold  text-lg md:text-3xl">OpenDevin</div>
-            <div className="text-sm"><a className="hover:text-white transition-all duration-300 cursor-pointer hover:no-underline" href="/modules/usage/intro">Docs</a></div>
+    <footer className="custom-footer">
+      <div className="footer-content">
+        <div className="footer-top">
+          <div className="footer-title">OpenDevin</div>
+          <div className="footer-link">
+            <a href="/modules/usage/intro">Docs</a>
          </div>
-            <div className="uppercase font-light">Community</div>
-          <div className="flex gap-6 text-3xl">
-              <div><a className="hover:text-white trasnition-all duration-300" href="https://join.slack.com/t/opendevin/shared_invite/zt-2ggtwn3k5-PvAA2LUmqGHVZ~XzGq~ILw" target="_blank"><FaSlack /></a></div>
-              <div><a className="hover:text-white trasnition-all duration-300" href="https://discord.gg/ESHStjSjD4" target="_blank"><FaDiscord /></a></div>
-              <div><a className="hover:text-white trasnition-all duration-300" href="https://github.com/OpenDevin/OpenDevin" target="_blank"><FaGithub /></a></div>
-          </div>
-          <div >
-          </div>
-        <div >
-          <p className="uppercase">Copyright &copy; {new Date().getFullYear()} OpenDevin</p>
+        </div>
+        <div className="footer-community">Community</div>
+        <div className="footer-icons">
+          <a href="https://join.slack.com/t/opendevin/shared_invite/zt-2ggtwn3k5-PvAA2LUmqGHVZ~XzGq~ILw" target="_blank" rel="noopener noreferrer">
+            <FaSlack />
+          </a>
+          <a href="https://discord.gg/ESHStjSjD4" target="_blank" rel="noopener noreferrer">
+            <FaDiscord />
+          </a>
+          <a href="https://github.com/OpenDevin/OpenDevin" target="_blank" rel="noopener noreferrer">
+            <FaGithub />
+          </a>
+        </div>
+        <div className="footer-bottom">
+          <p>Copyright &copy; {new Date().getFullYear()} OpenDevin</p>
        </div>
      </div>
    </footer>
--- a/docs/src/components/HomepageHeader/HomepageHeader.tsx
+++ b/docs/src/components/HomepageHeader/HomepageHeader.tsx
@@ -2,23 +2,18 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Heading from "@theme/Heading";
 import { Demo } from "../Demo/Demo";
-import styles from "./index.module.css";
+import "../../css/homepageHeader.css"; // Importing the CSS file

 export function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
  return (
-    <div className="h-screen bg-gradient-to-t from-slate-600 to-black">
-    {/* <div className={styles.headerContainer}> */}
-      <div className={`text-white flex flex-col 
-      items-center p-6 font-light w-full`}>
-        <Heading as="h1" className="
-        text-5xl
-        ">
-          {/* hero__title  */}
+    <div className="homepage-header">
+      <div className="header-content">
+        <Heading as="h1" className="header-title">
          {siteConfig.title}
        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
+        <p className="header-subtitle">{siteConfig.tagline}</p>
+        <div className="header-buttons">
          <Link
            className="button button--secondary button--lg"
            to="/modules/usage/intro"
@@ -26,8 +21,9 @@ export function HomepageHeader() {
            Get Started
          </Link>
        </div>
-      <Demo />
+        <Demo />
      </div>
    </div>
  );
 }
+
--- a/docs/src/components/HomepageHeader/index.module.css
+++ b/docs/src/components/HomepageHeader/index.module.css
@@ -1,37 +0,0 @@
-.headerContainer {
-  background: radial-gradient(circle, var(--secondary), var(--secondary-light));
-  background-size: 200% 200%;
-  animation: gradientAnimation 10s linear infinite;
-  display: flex;
-  justify-content: center;
-}
-
-@media only screen and (max-width: 600px) {
-  .headerContainer {
-    flex-direction: column;
-  }
-}
-
-@keyframes gradientAnimation {
-  0% {
-    background-position: left center;
-  }
-  50% {
-    background-position: right center;
-  }
-  100% {
-    background-position: left center;
-  }
-}
-.header {
-  max-width: 1300px;
-  color: white;
-  display: flex;
-  margin-left: 100px;
-  margin-right: 100px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  padding: 70px 30px 30px;
-}
--- a/docs/src/components/Welcome/Welcome.tsx
+++ b/docs/src/components/Welcome/Welcome.tsx
@@ -1,14 +1,12 @@
-import styles from "./styles.module.css";
-import "../../pages/index.module.css"
+import React from "react";
+import "../../css/welcome.css";  // Importing the CSS file
+
 export function Welcome() {
  return (
    <div className="text-white">
-      <div className="flex justify-center items-center flex-col md:flex-row bg-gradient-to-b from-slate-600 dark:to-gray-900 to-gray-200">
-        <img src="img/logo.png" className="
-        max-sm:h-[40vw] max-sm:w-[40vw]
-        h-[45vh] w-[45vw]
-        md:h-[60vh] md:w-[350px]" />
-        <p className=" px-6 md:p-2 mb-6 font-light text-lg md:text-2xl">
+      <div className="welcome-container">
+        <img src="img/logo.png" className="welcome-logo" />
+        <p className="welcome-text">
          Welcome to OpenDevin, an open-source project aiming to replicate
          Devin, an autonomous AI software engineer who is capable of executing
          complex engineering tasks and collaborating actively with users on
--- a/docs/src/components/Welcome/styles.module.css
+++ b/docs/src/components/Welcome/styles.module.css
@@ -1,27 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  padding-top: 25px;
-  padding-bottom: 25px;
-  width: 100%;
-}
-
-.innerContainer {
-  padding: 50px;
-  width: 100%;
-  max-width: 1300px;
-  padding-top: 30px;
-  margin: auto;
-  display: flex;
-  align-items: center;
-}
-
-.sidebarImage {
-  max-width: 400px;
-  padding-right: 30px;
-}
-
-.welcomeText {
-  text-align: justify;
-  font-size: larger;
-}
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -5,6 +5,7 @@
 */

 /* You can override the default Infima variables here. */
+
 :root {
  --ifm-color-primary: #4465db;
  --ifm-code-font-size: 95%;
@@ -33,4 +34,4 @@

 .a {
  text-decoration: underline;
-}
+}
--- a/docs/src/css/faq.css
+++ b/docs/src/css/faq.css
@@ -0,0 +1,66 @@
+/* faq.css */
+
+.faq-container {
+    margin: auto;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 24px;
+  }
+  
+  .faq-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    padding: 8px;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+  
+  @media (min-width: 1024px) {
+    .faq-title {
+      font-size: 6rem;
+    }
+  }
+  
+  .faq-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    margin-bottom: 24px;
+  }
+  
+  .faq-section-title {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 2rem;
+    letter-spacing: 0.1em;
+  }
+  
+  .highlight {
+    font-weight: 600;
+    color: var(--logo);
+  }
+  
+  .faq-steps ol {
+    padding-left: 24px;
+  }
+  
+  .command-box {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    background-color: #e0e0e0;
+    border-radius: 0.375rem;
+    height: 6vh;
+    text-transform: uppercase;
+    color: #4a5568;
+  }
+  
+  .command-box + .command-box {
+    height: 8vh;
+  }
+  
--- a/docs/src/css/footer.css
+++ b/docs/src/css/footer.css
@@ -0,0 +1,72 @@
+/* customFooter.css */
+
+.custom-footer {
+    background-color: dark;
+    color: white;
+    height: 25vh;
+    /* background: linear-gradient(to bottom, #1a1a1a, #1a1a1a); */
+    background: linear-gradient(to bottom, #1f2937, #000000);
+
+  }
+  
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px;
+    height: 100%;
+  }
+  
+  .footer-top {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+  
+  .footer-title {
+    font-weight: bold;
+    font-size: 1.125rem;
+  }
+  
+  @media (min-width: 768px) {
+    .footer-title {
+      font-size: 1.875rem;
+    }
+  }
+  
+  .footer-link a {
+    font-size: 0.875rem;
+    text-decoration: none;
+    color: gray;
+    transition: color 0.3s ease;
+  }
+  
+  .footer-link a:hover {
+    color: white;
+  }
+  
+  .footer-community {
+    text-transform: uppercase;
+    font-weight: 300;
+  }
+  
+  .footer-icons {
+    display: flex;
+    gap: 24px;
+    font-size: 1.875rem;
+  }
+  
+  .footer-icons a {
+    color:gray;
+    transition: color 0.3s ease;
+  }
+  
+  .footer-icons a:hover {
+    color: white;
+  }
+  
+  .footer-bottom {
+    text-transform: uppercase;
+  }
+  
--- a/docs/src/css/homepageHeader.css
+++ b/docs/src/css/homepageHeader.css
@@ -0,0 +1,36 @@
+/* homepageHeader.css */
+
+.homepage-header {
+    height: 100vh;
+    color: white;
+    background: linear-gradient(to top, #64748b, #000000);
+  }
+  
+  .header-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    padding: 24px;
+    font-weight: 300;
+    width: 100%;
+  }
+  
+  .header-title {
+    font-size: 3rem;
+  }
+  
+  @media (min-width: 768px) {
+    .header-title {
+      font-size: 5rem;
+    }
+  }
+  
+  .header-subtitle {
+    font-size: 1.25rem;
+  }
+  
+  .header-buttons {
+    margin-top: 24px;
+  }
+  
--- a/docs/src/css/main.css
+++ b/docs/src/css/main.css
@@ -1,4 +0,0 @@
-/* src/css/main.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
--- a/docs/src/css/welcome.css
+++ b/docs/src/css/welcome.css
@@ -0,0 +1,54 @@
+/* welcome.css */
+
+.text-white {
+    color: white;
+  }
+  
+  .welcome-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background: linear-gradient(to bottom, #64748b, #1f2937);
+  }
+  
+  @media (min-width: 768px) {
+    .welcome-container {
+      flex-direction: row;
+      background: linear-gradient(to bottom, #64748b, #1f2937);
+    }
+  }
+  
+  .welcome-logo {
+    height: 45vh;
+    width: 45vw;
+  }
+  
+  @media (max-width: 640px) {
+    .welcome-logo {
+      height: 40vw;
+      width: 40vw;
+    }
+  }
+  
+  @media (min-width: 768px) {
+    .welcome-logo {
+      height: 60vh;
+      width: 350px;
+    }
+  }
+  
+  .welcome-text {
+    padding: 24px;
+    margin-bottom: 24px;
+    font-weight: 300;
+    font-size: 1.125rem;
+  }
+  
+  @media (min-width: 768px) {
+    .welcome-text {
+      padding: 8px;
+      font-size: 1.5rem;
+    }
+  }
+  
--- a/docs/src/pages/_footer.tsx
+++ b/docs/src/pages/_footer.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import CustomFooter from '../components/CustomFooter';
+
+export default function Footer() {
+  return <CustomFooter />;
+}
--- a/docs/src/pages/faq.tsx
+++ b/docs/src/pages/faq.tsx
@@ -1,85 +1,78 @@
 import Layout from "@theme/Layout";
 import CustomFooter from "../components/CustomFooter";
+import "../css/faq.css"; 

 export default function FAQ() {
  return (
    <>
-    <Layout title="FAQ" description="Frequently Asked Questions">
-      <div
-        id="faq"
-        className="m-auto p-6 flex flex-col gap-2 mb-6"
-      >
-        <div className="flex items-center justify-center text-2xl lg:text-6xl p-2 uppercase font-bold">Frequently Asked Questions</div>
-        <div className="flex flex-col gap-2 w-full mb-6" >
-        <div className="uppercase font-bold text-4xl tracking-wider">Support</div>
-        <div>How can I report an issue with OpenDevin?</div>
-        <div>
-          Please file a bug on{" "}
-          <a href="https://github.com/OpenDevin/OpenDevin/issues" target="_blank">GitHub</a> if
-          you notice a problem that likely affects others.
-          If you're having trouble installing, or have general questions, reach out on{" "}
-          <a href="https://discord.gg/mBuDGRzzES" target="_blank">Discord</a> or{" "}
-          <a href="https://join.slack.com/t/opendevin/shared_invite/zt-2ggtwn3k5-PvAA2LUmqGHVZ~XzGq~ILw" target="_blank">Slack</a>.
-        </div>
-
-        </div>
-        <div className="flex flex-col gap-2 w-full mb-6">
-        <div className="uppercase font-bold text-4xl tracking-wider" >General</div>
-        <div>What is Devin?</div>
-        <div>
-          <span style={{ fontWeight: "600", color: "var(--logo)" }}>Devin</span>{" "}
-          represents a cutting-edge autonomous agent designed to navigate the
-          complexities of software engineering. It leverages a combination of
-          tools such as a shell, code editor, and web browser, showcasing the
-          untapped potential of LLMs in software development. Our goal is to
-          explore and expand upon Devin's capabilities, identifying both its
-          strengths and areas for improvement, to guide the progress of open
-          code models.
-        </div>
-        </div>
-        <div className="flex flex-col gap-2 w-full mb-6">
-        <div className="uppercase font-bold text-4xl tracking-wider">Why OpenDevin?</div>
-        <p>
-          The{" "}
-          <span style={{ fontWeight: "600", color: "var(--logo)" }}>
-            OpenDevin
-          </span>{" "}
-          project is born out of a desire to replicate, enhance, and innovate
-          beyond the original Devin model. By engaging the{" "}
-          <a href="https://github.com/OpenDevin/OpenDevin">
-            open-source community
-          </a>
-          , we aim to tackle the challenges faced by Code LLMs in practical
-          scenarios, producing works that significantly contribute to the
-          community and pave the way for future advancements.
-        </p>
-
-        </div>
-        <div className="flex flex-col gap-2 w-full mb-6">
-        <div className="uppercase font-bold text-4xl tracking-wider">How to fix an issue on OpenDevin?</div>
-        <div>
-          To fix an issue on GitHub using OpenDevin, send a prompt to OpenDevin asking it to follow these steps:
-          <ol>
-            <li>Read the issue on <a href="https://github.com/OpenDevin/OpenDevin/issues/1611">GitHub</a></li>
-            <li>Clone the repository and check out a new branch</li>
-            <li>Based on the instructions in the issue description, modify files to fix the issue</li>
-            <li>Push the resulting output to GitHub using the GITHUB_TOKEN environment variable</li>
-            <li>Tell me the link that I need to go to to send a pull request</li>
-          </ol>
-          Before you run OpenDevin, you can do:
-          <div className="flex flex-col p-2 bg-gray-300 rounded-md my-2">
-            export SANDBOX_ENV_GITHUB_TOKEN=XXX
+      <Layout title="FAQ" description="Frequently Asked Questions">
+        <div id="faq" className="faq-container">
+          <div className="faq-title">Frequently Asked Questions</div>
+          <div className="faq-section">
+            <div className="faq-section-title">Support</div>
+            <div>How can I report an issue with OpenDevin?</div>
+            <div>
+              Please file a bug on{" "}
+              <a href="https://github.com/OpenDevin/OpenDevin/issues" target="_blank">GitHub</a> if
+              you notice a problem that likely affects others.
+              If you're having trouble installing, or have general questions, reach out on{" "}
+              <a href="https://discord.gg/mBuDGRzzES" target="_blank">Discord</a> or{" "}
+              <a href="https://join.slack.com/t/opendevin/shared_invite/zt-2ggtwn3k5-PvAA2LUmqGHVZ~XzGq~ILw" target="_blank">Slack</a>.
+            </div>
          </div>
-          where XXX is a GitHub token that you created that has permissions to push to the OpenDevin repo. If you don’t have write permission to the OpenDevin repo, you might need to change that to:
-          <div className="flex flex-col p-2 bg-gray-300 rounded-md my-2">
-            4. Push the resulting output to my fork at https://github.com/USERNAME/OpenDevin/ using the GITHUB_TOKEN environment variable
+          <div className="faq-section">
+            <div className="faq-section-title">General</div>
+            <div>What is Devin?</div>
+            <div>
+              <span className="highlight">Devin</span>{" "}
+              represents a cutting-edge autonomous agent designed to navigate the
+              complexities of software engineering. It leverages a combination of
+              tools such as a shell, code editor, and web browser, showcasing the
+              untapped potential of LLMs in software development. Our goal is to
+              explore and expand upon Devin's capabilities, identifying both its
+              strengths and areas for improvement, to guide the progress of open
+              code models.
+            </div>
+          </div>
+          <div className="faq-section">
+            <div className="faq-section-title">Why OpenDevin?</div>
+            <p>
+              The{" "}
+              <span className="highlight">OpenDevin</span>{" "}
+              project is born out of a desire to replicate, enhance, and innovate
+              beyond the original Devin model. By engaging the{" "}
+              <a href="https://github.com/OpenDevin/OpenDevin">
+                open-source community
+              </a>
+              , we aim to tackle the challenges faced by Code LLMs in practical
+              scenarios, producing works that significantly contribute to the
+              community and pave the way for future advancements.
+            </p>
+          </div>
+          <div className="faq-section">
+            <div className="faq-section-title">How to fix an issue on OpenDevin?</div>
+            <div className="faq-steps">
+              To fix an issue on GitHub using OpenDevin, send a prompt to OpenDevin asking it to follow these steps:
+              <ol>
+                <li>Read the issue on <a href="https://github.com/OpenDevin/OpenDevin/issues/1611">GitHub</a></li>
+                <li>Clone the repository and check out a new branch</li>
+                <li>Based on the instructions in the issue description, modify files to fix the issue</li>
+                <li>Push the resulting output to GitHub using the GITHUB_TOKEN environment variable</li>
+                <li>Tell me the link that I need to go to to send a pull request</li>
+              </ol>
+              Before you run OpenDevin, you can do:
+              <div className="command-box">
+                export SANDBOX_ENV_GITHUB_TOKEN=XXX
+              </div>
+              where XXX is a GitHub token that you created that has permissions to push to the OpenDevin repo. If you don’t have write permission to the OpenDevin repo, you might need to change that to:
+              <div className="command-box">
+                Push the resulting output to my fork at https://github.com/USERNAME/OpenDevin/ using the GITHUB_TOKEN environment variable
+              </div>
+              where USERNAME is your GitHub username.
+            </div>
          </div>
-          where USERNAME is your GitHub username.
        </div>
-        </div>
-      </div>
-    </Layout>
-    <CustomFooter/>
+      </Layout>
    </>
  );
 }
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -1,23 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -1,10 +1,8 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
-import '../css/main.css';
-
 import { HomepageHeader } from "../components/HomepageHeader/HomepageHeader";
 import { Welcome } from "../components/Welcome/Welcome";
-import CustomFooter from "../components/CustomFooter";
+
 export function Header({ title, summary, description }): JSX.Element {
  return (
    <div>
@@ -30,7 +28,6 @@ export default function Home(): JSX.Element {
        </div>
      </div>
    </Layout>
-    <CustomFooter />
    </>
  );
 }
--- a/docs/src/theme/Layout/index.tsx
+++ b/docs/src/theme/Layout/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import OriginalLayout from '@theme-original/Layout';
+import Footer from '@site/src/pages/_footer';
+
+export default function Layout(props) {
+  return (
+    <>
+      <OriginalLayout {...props} />
+      <Footer />
+    </>
+  );
+}
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./src/components/**/*.{js,jsx,ts,tsx}",
-    "./src/pages/**/*.{js,jsx,ts,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};