Refactor to TaskSelection

website/src/components/TaskSelection/TaskOption.tsx

@@ -0,0 +1,39 @@
+import { Card, CardBody, Flex, Heading } from "@chakra-ui/react";
+import Image from "next/image";
+import Link from "next/link";
+
+export type OptionProps = {
+  img: string;
+  alt: string;
+  title: string;
+  link: string;
+};
+
+export const TaskOption = (props: OptionProps) => {
+  const { alt, img, title, link } = props;
+  return (
+    <Link href={link}>
+      <Card
+        maxW="300"
+        minW="300"
+        minH="300"
+        maxH="300"
+        className="transition ease-in-out duration-500 sm:grayscale hover:grayscale-0"
+      >
+        <CardBody width="full" height="full">
+          <Flex direction="column" alignItems="center" justifyContent="center">
+            <Image src={img} alt={alt} width={200} height={200} />
+            <Heading
+              mt={-10}
+              className="bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text tracking-tight text-transparent"
+              textAlign="center"
+              fontSize="3xl"
+            >
+              {title}
+            </Heading>
+          </Flex>
+        </CardBody>
+      </Card>
+    </Link>
+  );
+};

website/src/components/TaskSelection/TaskOptions.tsx

@@ -0,0 +1,23 @@
+import { Divider, Flex, Heading } from "@chakra-ui/react";
+import React from "react";
+
+export type TaskOptionsProps = {
+  title: string;
+  children: JSX.Element;
+};
+
+export const TaskOptions = (props: TaskOptionsProps) => {
+  const { title, children } = props;
+  return (
+    <Flex gap={10} wrap="wrap" justifyContent="center">
+      <Heading
+        className="bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text tracking-tight text-transparent"
+        fontSize="5xl"
+      >
+        {title}
+      </Heading>
+      <Divider mt={-8} />
+      {children}
+    </Flex>
+  );
+};

website/src/components/TaskSelection/TaskSelection.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { TaskOptions } from "./TaskOptions";
+import { Flex } from "@chakra-ui/react";
+import { TaskOption } from "./TaskOption";
+
+export const TaskSelection = () => {
+  return (
+    <Flex gap={10} wrap="wrap" justifyContent="space-evenly" width="full" height="full" alignItems={"center"}>
+      <TaskOptions key="create" title="Create">
+        <TaskOption
+          alt="Summarize Stories"
+          img="/images/logos/logo.svg"
+          title="Summarize stories"
+          link="/summarize/story"
+        />
+      </TaskOptions>
+      <TaskOptions key="evaluate" title="Evaluate">
+        <TaskOption alt="Rate Summaries" img="/images/logos/logo.svg" title="Rate Summaries" link="/summarize/story" />
+      </TaskOptions>
+    </Flex>
+  );
+};

website/src/components/TaskSelection/index.ts

@@ -0,0 +1,3 @@
+export { TaskSelection } from "./TaskSelection";
+export { TaskOptions } from "./TaskOptions";
+export { TaskOption } from "./TaskOption";

website/src/pages/index.tsx

@@ -5,7 +5,7 @@ import { Faq } from "../components/Faq";
 import { Footer } from "../components/Footer";
 import { Header } from "../components/Header";
 import { Hero } from "../components/Hero";
-import UserChoice from "../components/UserChoice";
+import { TaskSelection } from "../components/TaskSelection";
 
 export default function Home() {
   const { data: session } = useSession();
@@ -41,8 +41,8 @@ export default function Home() {
         />
       </Head>
       <Header />
-      <main className="h-3/4  z-0 bg-white flex flex-col items-center justify-center gap-2">
-        <UserChoice />
+      <main className="h-3/4 m-20 z-0 bg-white flex flex-col items-center justify-center gap-2">
+        <TaskSelection />
       </main>
       <Footer />
     </>