Merge branch 'main' into discord-credentials

2026-08-01 12:10:19 +08:00 · 2023-01-04 17:40:27 +05:30
parent dda5514bae d83e75dbe4
commit c42dd97462
55 changed files with 2711 additions and 657 deletions
@@ -0,0 +1,28 @@
+import { Button, useDisclosure } from "@chakra-ui/react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from "@chakra-ui/react";
+import React from "react";
+
+export const CollapsableText = ({ text, maxLength = 220 }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  if (typeof text != "string" || text.length <= maxLength) {
+    return text;
+  } else {
+    return (
+      <>
+        {text.substring(0, maxLength - 3)}
+        <Button style={{ display: "contents" }} onClick={onOpen}>
+          ...
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
+          <ModalOverlay style={{ width: "100%", height: "100%" }}>
+            <ModalContent maxH="400">
+              <ModalHeader>Full Text</ModalHeader>
+              <ModalCloseButton />
+              <ModalBody>{text}</ModalBody>
+            </ModalContent>
+          </ModalOverlay>
+        </Modal>
+      </>
+    );
+  }
+};
@@ -1,5 +1,5 @@
 import clsx from "clsx";

 export function Container({ className, ...props }) {
-  return <div className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)} {...props} />;
+  return <div className={clsx("mx-auto max-w-7xl px-4", className)} {...props} />;
 }
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import { Message } from "./Messages";
+
+export const ContextMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <Box className="flex flex-col gap-1">
+      {messages.map((message, i) => {
+        return (
+          <Box key={i}>
+            <span>{message.is_assistant ? "Assistant: " : "User: "}</span>
+            <span>{message.text}</span>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
@@ -0,0 +1,94 @@
+import { Badge, Box, Image, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
+
+export function LeaderboardTable() {
+  const backgroundColor = useColorModeValue("white", "gray.700");
+  const accentColor = useColorModeValue("gray.200", "gray.900");
+
+  //need to add streak info to chart
+
+  const leaderInfo = [
+    {
+      name: "fozziethebeat#6690",
+      image: "/images/temp-avatars/av1.jpg",
+      score: "5,208",
+      arrowDir: "increase",
+      streak: false,
+      streakCount: "5-Day Streak",
+    },
+    {
+      name: "k_nearest_neighbor#8579",
+      image: "/images/temp-avatars/av2.jpg",
+      score: "5,164",
+      arrowDir: "decrease",
+      streak: false,
+      streakCount: "",
+    },
+    {
+      name: "andreaskoepf#2266",
+      image: "/images/temp-avatars/av3.jpg",
+      score: "5,120",
+      arrowDir: "",
+      streak: false,
+      streakCount: "2-Day Streak",
+    },
+    {
+      name: "AbdBarho#1684",
+      image: "/images/temp-avatars/av4.jpg",
+      score: "4,260",
+      arrowDir: "",
+      streak: false,
+      streakCount: "",
+    },
+    {
+      name: "zu#9016",
+      image: "/images/temp-avatars/av5.jpg",
+      score: "3,608",
+      arrowDir: "",
+      streak: false,
+      streakCount: "",
+    },
+  ];
+
+  return (
+    <main className="h-fit col-span-3">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-end justify-between">
+          <Text className="text-2xl font-bold">Top 5 Contributors</Text>
+          <Link href="#" _hover={{ textDecoration: "none" }}>
+            <Text color="blue.400" className="text-sm font-bold">
+              View All -&gt;
+            </Text>
+          </Link>
+        </div>
+        <Box
+          backgroundColor={backgroundColor}
+          boxShadow="base"
+          dropShadow={accentColor}
+          borderRadius="xl"
+          className="p-6 shadow-sm"
+        >
+          <Stack divider={<StackDivider />} spacing="4">
+            <div className="grid grid-cols-4 items-center font-bold">
+              <p>Name</p>
+              <div className="col-start-4 flex justify-center">
+                <p>Score</p>
+              </div>
+            </div>
+            {leaderInfo.map((item, itemIndex) => (
+              <div key={itemIndex} className="grid grid-cols-4 items-center">
+                <div className="flex items-center gap-3">
+                  <Image alt="Profile Picture" src={item.image} boxSize="7" borderRadius="full"></Image>
+                  <p>{item.name}</p>
+                  <Badge colorScheme="purple">{item.streakCount}</Badge>
+                </div>
+                <Box bg={backgroundColor} className="col-start-4 flex justify-center">
+                  <p>{item.score}</p>
+                </Box>
+              </div>
+            ))}
+          </Stack>
+        </Box>
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,83 @@
+import { Box, Button, Link, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { FiLayout, FiSun } from "react-icons/fi";
+import { colors } from "styles/Theme/colors";
+
+export function SideMenu() {
+  const router = useRouter();
+  const { colorMode, toggleColorMode } = useColorMode();
+  const buttonOptions = [
+    {
+      label: "Dashboard",
+      pathname: "/dashboard",
+      desc: "Dashboard Home",
+      icon: FiLayout,
+    },
+    // {
+    //   label: "Leaderboard",
+    //   pathname: "#",
+    //   desc: "Public Leaderboard",
+    //   icon: FiAward,
+    // },
+    // {
+    //   label: "Stats",
+    //   pathname: "#",
+    //   desc: "User Statistics",
+    //   icon: FiBarChart2,
+    // },
+  ];
+
+  return (
+    <main className="sticky top-0 sm:h-full">
+      <Box
+        width={["100%", "100%", "100px", "280px"]}
+        backgroundColor={colorMode === "light" ? colors.light.div : colors.dark.div}
+        boxShadow="base"
+        borderRadius="xl"
+        className="grid grid-cols-4 gap-2 sm:flex sm:flex-col sm:justify-between p-4 h-full"
+      >
+        <nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
+          {buttonOptions.map((item, itemIndex) => (
+            <Tooltip
+              key={itemIndex}
+              fontFamily="inter"
+              label={item.label}
+              placement="right"
+              className="hidden lg:hidden sm:block"
+            >
+              <Link key={`${item.label}-${itemIndex}`} href={item.pathname} style={{ textDecoration: "none" }}>
+                <Button
+                  justifyContent={["center", "center", "center", "left"]}
+                  gap="3"
+                  size="lg"
+                  width="full"
+                  bg={router.pathname === item.pathname ? "blue.500" : null}
+                  _hover={router.pathname === item.pathname ? { bg: "blue.600" } : null}
+                >
+                  <item.icon className={router.pathname === item.pathname ? "text-blue-200" : null} />
+                  <Text
+                    fontWeight="normal"
+                    color={router.pathname === item.pathname ? "white" : null}
+                    className="hidden lg:block"
+                  >
+                    {item.label}
+                  </Text>
+                </Button>
+              </Link>
+            </Tooltip>
+          ))}
+        </nav>
+        <div>
+          <Tooltip fontFamily="inter" label="Toggle Dark Mode" placement="right" className="hidden lg:hidden sm:block">
+            <Button size="lg" width="full" justifyContent="center" onClick={toggleColorMode} gap="2">
+              <FiSun />
+              <Text fontWeight="normal" className="hidden lg:block">
+                {colorMode === "light" ? "Dark Mode" : "Light Mode"}
+              </Text>
+            </Button>
+          </Tooltip>
+        </div>
+      </Box>
+    </main>
+  );
+}
@@ -0,0 +1,120 @@
+import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
+import Link from "next/link";
+
+const crTasks = [
+  {
+    label: "Reply as User",
+    desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
+    type: "create",
+    pathname: "/create/assistant_reply",
+  },
+  {
+    label: "Reply as Assistant",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    type: "create",
+    pathname: "/create/assistant_reply",
+  },
+];
+
+const evTasks = [
+  {
+    label: "Rank User Replies",
+    type: "eval",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    pathname: "/evaluate/rank_user_replies",
+  },
+
+  {
+    label: "Rank Assistant Replies",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    type: "eval",
+    pathname: "/evaluate/rank_assistant_replies",
+  },
+  {
+    label: "Rank Initial Prompts",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    type: "eval;",
+    pathname: "/evaluate/rank_initial_prompts",
+  },
+];
+
+export const TaskOption = () => {
+  const backgroundColor = useColorModeValue("white", "gray.700");
+
+  return (
+    <Box className="flex flex-col gap-14" fontFamily="inter">
+      <div>
+        <Text className="text-2xl font-bold pb-4">Create</Text>
+        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+          {crTasks.map((item, itemIndex) => (
+            <Link key={itemIndex} href={item.pathname}>
+              <GridItem
+                bg={backgroundColor}
+                borderRadius="xl"
+                boxShadow="base"
+                className="flex flex-col justify-between h-full"
+              >
+                <Box className="p-6 pb-10">
+                  <Flex flexDir="column" gap="3">
+                    <Heading size="md" fontFamily="inter">
+                      {item.label}
+                    </Heading>
+                    <Text size="sm" opacity="80%">
+                      {item.desc}
+                    </Text>
+                  </Flex>
+                </Box>
+                <Box
+                  bg="blue.500"
+                  borderBottomRadius="xl"
+                  className="px-6 py-2 transition-colors duration-300"
+                  _hover={{ backgroundColor: "blue.600" }}
+                >
+                  <Text fontWeight="bold" color="white">
+                    Go
+                  </Text>
+                </Box>
+              </GridItem>
+            </Link>
+          ))}
+        </SimpleGrid>
+      </div>
+      <div>
+        <Text className="text-2xl font-bold pb-4">Evaluate</Text>
+        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+          {evTasks.map((item, itemIndex) => (
+            <Link key={itemIndex} href={item.pathname}>
+              <GridItem
+                bg={backgroundColor}
+                borderRadius="xl"
+                boxShadow="base"
+                className="flex flex-col justify-between h-full"
+              >
+                <Box className="p-6 pb-10">
+                  <Flex flexDir="column" gap="3">
+                    <Heading size="md" fontFamily="inter">
+                      {item.label}
+                    </Heading>
+                    <Text size="sm" opacity="80%">
+                      {item.desc}
+                    </Text>
+                  </Flex>
+                </Box>
+                <Box
+                  bg="blue.500"
+                  borderBottomRadius="xl"
+                  className="px-6 py-2 transition-colors duration-300"
+                  _hover={{ backgroundColor: "blue.600" }}
+                >
+                  <Text fontWeight="bold" color="white">
+                    Go
+                  </Text>
+                </Box>
+              </GridItem>
+            </Link>
+          ))}
+        </SimpleGrid>
+      </div>
+    </Box>
+  );
+};
@@ -0,0 +1,3 @@
+export { LeaderboardTable } from "./LeaderboardTable";
+export { SideMenu } from "./SideMenu";
+export { TaskOption } from "./TaskOption";
@@ -1,43 +1,11 @@
-import { Box, Button, useColorMode } from "@chakra-ui/react";
-import { Popover } from "@headlessui/react";
-import { AnimatePresence, motion } from "framer-motion";
+import { Box, Button, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { FaUser } from "react-icons/fa";

-import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
 import { UserMenu } from "./UserMenu";

-function MenuIcon(props) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path d="M5 6h14M5 18h14M5 12h14" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function ChevronUpIcon(props) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path d="M17 14l-5-5-5 5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function MobileNavLink({ children, ...props }) {
-  return (
-    <Popover.Button
-      as={Link}
-      href={props.href}
-      className="block text-base leading-7 tracking-tight text-gray-700"
-      {...props}
-    >
-      {children}
-    </Popover.Button>
-  );
-}
-
 function AccountButton() {
  const { data: session } = useSession();
  if (session) {
@@ -53,70 +21,29 @@ function AccountButton() {
 }

 export function Header(props) {
+  const { data: session } = useSession();
+  const homeURL = session ? "/dashboard" : "/";
+
  const { colorMode } = useColorMode();
  const borderClass = props.transparent
    ? ""
    : colorMode === "light"
    ? "border-b border-gray-400"
    : "border-b border-zinc-800";
-
  return (
    <nav className={`oa-basic-theme ${borderClass}`}>
-      <Box className="flex mx-auto max-w-7xl justify-between py-8 px-10">
-        <div className="relative z-10 flex items-center gap-16">
-          <Link href="/" aria-label="Home" className="flex items-center">
+      <Box className="relative z-10 flex justify-between px-4 py-4">
+        <div className="relative z-10 flex items-center gap-10">
+          <Link href={homeURL} aria-label="Home" className="flex items-center">
            <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
-            <span className="text-2xl font-bold ml-3">Open Assistant</span>
+            <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" className="ml-3">
+              Open Assistant
+            </Text>
          </Link>
        </div>
        <div className="flex items-center gap-4">
-          <Popover className="lg:hidden">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className="relative z-10 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
-                  aria-label="Toggle site navigation"
-                >
-                  {({ open }) => (open ? <ChevronUpIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />)}
-                </Popover.Button>
-                <AnimatePresence initial={false}>
-                  {open && (
-                    <>
-                      <Popover.Overlay
-                        static
-                        as={motion.div}
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        className="fixed inset-0 z-1 bg-gray-300/60 backdrop-blur"
-                      />
-                      <Popover.Panel
-                        static
-                        as={motion.div}
-                        initial={{ opacity: 0, y: -32 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{
-                          opacity: 0,
-                          y: -32,
-                          transition: { duration: 0.2 },
-                        }}
-                        className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
-                      >
-                        <div className="space-y-4">
-                          <MobileNavLink href="/#join-us">Join Us</MobileNavLink>
-                          <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
-                        </div>
-                        <div className="mt-8 flex flex-col gap-4"></div>
-                      </Popover.Panel>
-                    </>
-                  )}
-                </AnimatePresence>
-              </>
-            )}
-          </Popover>
          <AccountButton />
          <UserMenu />
-          <ColorModeIconToggle className="ml-5" />
        </div>
      </Box>
    </nav>
@@ -1,7 +1,8 @@
-import { useColorMode } from "@chakra-ui/react";
+import { Text, useColorMode } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
 import { useState } from "react";
+import { colors } from "styles/Theme/colors";

 export function NavLinks(): JSX.Element {
  const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -14,8 +15,8 @@ export function NavLinks(): JSX.Element {
  return (
    <>
      {[
-        ["Join Us", "/#join-us"],
        ["FAQ", "/#faq"],
+        ["Join Us", "/#join-us"],
      ].map(([label, href], index) => (
        <Link
          key={label}
@@ -38,7 +39,9 @@ export function NavLinks(): JSX.Element {
              />
            )}
          </AnimatePresence>
-          <span className="relative z-10">{label}</span>
+          <Text color={colorMode === "light" ? colors.light.text : colors.dark.text} className="relative z-10">
+            {label}
+          </Text>
        </Link>
      ))}
    </>
@@ -1,25 +1,33 @@
-import { Box, useColorModeValue } from "@chakra-ui/react";
+import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
-import { FaCog, FaSignOutAlt } from "react-icons/fa";
+import { FiLayout, FiLogOut, FiSettings } from "react-icons/fi";

 export function UserMenu() {
  const { data: session } = useSession();
-  const backgroundColor = useColorModeValue("#FFFFFF", "#000000");
+  const backgroundColor = useColorModeValue("white", "gray.700");
+  const accentColor = useColorModeValue("gray.300", "gray.600");

  if (!session) {
    return <></>;
  }
  if (session && session.user) {
    const accountOptions = [
+      {
+        name: "Dashboard",
+        href: "/dashboard",
+        desc: "Dashboard",
+        icon: FiLayout,
+        //For future use
+      },
      {
        name: "Account Settings",
        href: "/account",
        desc: "Account Settings",
-        icon: FaCog,
+        icon: FiSettings,
        //For future use
      },
    ];
@@ -28,18 +36,22 @@ export function UserMenu() {
        {({ open }) => (
          <>
            <Popover.Button aria-label="Toggle Account Options" className="flex">
-              <div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
+              <Box
+                borderWidth="1px"
+                borderColor={accentColor}
+                className="flex items-center gap-4 p-1 lg:pr-6 rounded-full transition-colors duration-300"
+              >
                <Image
                  src={session.user.image || "/images/temp-avatars/av1.jpg"}
                  alt="Profile Picture"
-                  width="40"
-                  height="40"
+                  width="36"
+                  height="36"
                  className="rounded-full"
                ></Image>
                <p data-cy="username" className="hidden lg:flex">
                  {session.user.name || session.user.email}
                </p>
-              </div>
+              </Box>
            </Popover.Button>
            <AnimatePresence initial={false}>
              {open && (
@@ -54,35 +66,45 @@ export function UserMenu() {
                      y: -10,
                      transition: { duration: 0.2 },
                    }}
-                    className="absolute right-0 mt-3 w-screen bg-inherit max-w-xs p-4 rounded-md border border-slate-300/70"
                  >
-                    <Box className="flex flex-col gap-1">
-                      {accountOptions.map((item) => (
-                        <a
-                          key={item.name}
-                          href={item.href}
-                          aria-label={item.desc}
-                          className="flex items-center rounded-md hover:bg-gray-200/50"
+                    <Box
+                      bg={backgroundColor}
+                      borderWidth="1px"
+                      borderColor={accentColor}
+                      borderRadius="xl"
+                      className="absolute right-0 mt-3 w-screen max-w-xs p-4"
+                    >
+                      <Box className="flex flex-col gap-1">
+                        {accountOptions.map((item) => (
+                          <Link
+                            key={item.name}
+                            href={item.href}
+                            aria-label={item.desc}
+                            className="flex items-center"
+                            bg={backgroundColor}
+                            _hover={{ textDecoration: "none" }}
+                          >
+                            <div className="p-4">
+                              <item.icon className="text-blue-500" aria-hidden="true" />
+                            </div>
+                            <div>
+                              <Text fontFamily="inter">{item.name}</Text>
+                            </div>
+                          </Link>
+                        ))}
+                        <Link
+                          className="flex items-center rounded-md cursor-pointer"
+                          _hover={{ textDecoration: "none" }}
+                          onClick={() => signOut({ callbackUrl: "/" })}
                        >
                          <div className="p-4">
-                            <item.icon aria-hidden="true" />
+                            <FiLogOut className="text-blue-500" />
                          </div>
                          <div>
-                            <p>{item.name}</p>
+                            <Text fontFamily="inter">Sign Out</Text>
                          </div>
-                        </a>
-                      ))}
-                      <a
-                        className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
-                        onClick={() => signOut({ callbackUrl: "/" })}
-                      >
-                        <div className="p-4">
-                          <FaSignOutAlt />
-                        </div>
-                        <div>
-                          <p>Sign Out</p>
-                        </div>
-                      </a>
+                        </Link>
+                      </Box>
                    </Box>
                  </Popover.Panel>
                </Box>
@@ -17,4 +17,12 @@ export const getDefaultLayout = (page: React.ReactElement) => (
  </div>
 );

+export const getTransparentHeaderLayout = (page: React.ReactElement) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+    <Footer />
+  </div>
+);
+
 export const noLayout = (page: React.ReactElement) => page;
@@ -0,0 +1,78 @@
+import { Container } from "./Container";
+
+const Roadmap = () => {
+  return (
+    <Container className="">
+      <div className="py-32">
+        <h2 className="text-4xl mb-16">Our Roadmap</h2>
+        <div className="flex flex-col items-center space-y-8 md:space-y-0 md:items-start md:flex-row md:justify-between">
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#a72a1e] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#a72a1e] text-center">ASAP</p>
+            </div>
+            <h4 className="font-bold text-xl text-[#a72a1e] text-center max-w-[10rem]">Minimum Viable Prototype</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#a72a1e] list-disc">
+              <li>Data Collection Pipeline</li>
+              <li>RL on Human Feedback</li>
+              <li>Assistant v1 usable</li>
+              <li>Out January 2023!</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#a72a1e] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#a72a1e] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">
+                Q1
+                <br />
+                2023
+              </p>
+            </div>
+            <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
+              <li>Retrieval Augmentation</li>
+              <li>Rapid Personalization</li>
+              <li>Using External Tools</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#858585] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#858585] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">
+                Q2
+                <br />
+                2023
+              </p>
+            </div>
+            <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
+              <li>Third-Party Extentions</li>
+              <li>Device Control</li>
+              <li>Multi-Modality</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#858585] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#858585] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">...</p>
+            </div>
+            <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
+              <li>What do you need?</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default Roadmap;
@@ -0,0 +1,50 @@
+import { Container } from "./Container";
+
+const Services = () => {
+  return (
+    <div className="bg-white py-32 border-t-[1px] border-gray-150">
+      <Container className="">
+        <div className="grid grid-cols-1 lg:grid-cols-10 lg:grid-rows-2">
+          <div className="grid col-span-3 row-span-2">
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#307bf3] rounded-tl-[45px] lg:rounded-tl-none lg:rounded-bl-[45px] rounded-br-[45px] lg:rounded-br-none lg:rounded-tr-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Your Conversational Assistant</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">State-of-the-Art chat assistant that can be personalized to your needs</p>
+            </div>
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#275ddf] rounded-tl-[45px] rounded-br-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Interface w/ external systems</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">
+                Usage of APIs and third-party applications, described via language & demonstrations.
+              </p>
+            </div>
+          </div>
+          <div className="grid grid-rows-2 col-span-3 row-span-2">
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#307bf3] lg:bg-[#275ddf] rounded-tl-[45px] rounded-br-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Retrieval via Search Engines</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">External, upgradeable knowledge: No need for billions of parameters.</p>
+            </div>
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#275ddf] lg:bg-[#307bf3] rounded-tl-[45px] lg:rounded-tl-none lg:rounded-bl-[45px] rounded-br-[45px] lg:rounded-br-none lg:rounded-tr-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">A building block for developers</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">Integrate OpenAssistant into your application.</p>
+            </div>
+          </div>
+          <div className="px-12 sm:px-16 py-20 lg:p-20 col-span-4 row-span-2 bg-[#1a44a1] lg:flex lg:flex-col lg:justify-center rounded-tl-[45px] rounded-br-[45px] lg:rounded-tr-[80px] lg:rounded-tl-none lg:rounded-br-none">
+            <h4 className="font-bold text-white text-xl mb-4">OpenAssistant unifies all knowledge work in one place</h4>
+            <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+            <ul className="ml-4 sm:ml-12 mt-8 space-y-4 list-disc text-white">
+              <li>Uses modern deep learning</li>
+              <li>Runs on consumer hardware</li>
+              <li>Trains on human feedback</li>
+              <li>Free and open</li>
+            </ul>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Services;
@@ -18,6 +18,7 @@ import {
 } from "@dnd-kit/sortable";
 import { ReactNode, useEffect, useState } from "react";

+import { CollapsableText } from "../CollapsableText";
 import { SortableItem } from "./SortableItem";

 export interface SortableProps {
@@ -64,7 +65,7 @@ export const Sortable = (props: SortableProps) => {
        <Flex direction="column" gap={2} className={extraClasses}>
          {itemsWithIds.map(({ id, item }) => (
            <SortableItem key={id} id={id}>
-              {item}
+              <CollapsableText text={item} />
            </SortableItem>
          ))}
        </Flex>
@@ -30,9 +30,13 @@ export const TaskControls = (props: TaskControlsProps) => {
      <Flex justify="center" ml="auto" gap={2}>
        <SkipButton>Skip</SkipButton>
        {endTask.task.type !== "task_done" ? (
-          <SubmitButton onClick={() => props.onSubmitResponse(props.tasks[0])}>Submit</SubmitButton>
+          <SubmitButton data-cy="submit" onClick={() => props.onSubmitResponse(props.tasks[0])}>
+            Submit
+          </SubmitButton>
        ) : (
-          <SubmitButton onClick={props.onSkip}>Next Task</SubmitButton>
+          <SubmitButton data-cy="next-task" onClick={props.onSkip}>
+            Next Task
+          </SubmitButton>
        )}
      </Flex>
    </section>
@@ -26,6 +26,12 @@ export const TaskSelection = () => {
          title="Summarize stories"
          link="/create/summarize_story"
        /> */}
+        <TaskOption
+          alt="Create Initial Prompt"
+          img="/images/logos/logo.svg"
+          title="Create Initial Prompt"
+          link="/create/initial_prompt"
+        />
        <TaskOption alt="Reply as User" img="/images/logos/logo.svg" title="Reply as User" link="/create/user_reply" />
        <TaskOption
          alt="Reply as Assistant"
@@ -0,0 +1,25 @@
+import { Container } from "./Container";
+import Image from "next/image";
+
+const Vision = () => {
+  return (
+    <div className="bg-gray-900 py-20">
+      <Container className="">
+        <div className="grid gap-16 items-center py-20 md:py-32 lg:grid-cols-2">
+          <div>
+            <h2 className="text-4xl text-white mb-6">Our Vision</h2>
+            <p className="text-2xl text-gray-400">
+              We want OpenAssistant to be the single, unifying platform that all other systems use to interface with
+              humans.
+            </p>
+          </div>
+          <div className="m-auto rounded-tl-[45px] rounded-br-[45px] overflow-hidden">
+            <Image src="/images/temp-avatars/av2.jpg" width={450} height={450} alt="temp-image" />
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Vision;