From 78e691e1583ef52a4b28acf117e1230a930a44d0 Mon Sep 17 00:00:00 2001
From: jadeddelta <101148768+jadeddelta@users.noreply.github.com>
Date: Wed, 1 Feb 2023 21:46:36 -0500
Subject: [PATCH 1/2] added basic description of the project on home page

---
 pages/index.js | 114 +++++++++++++++++++++++++++++++++++--------------
 1 file changed, 82 insertions(+), 32 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 7d4338c..c729171 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -9,44 +9,94 @@ import {
   Text,
   Button,
   Image,
+  HStack,
 } from "@chakra-ui/react";
+import { AddIcon, EditIcon, RepeatClockIcon } from "@chakra-ui/icons";
 
 export default function Home() {
   const { user } = useContext(UserContext);
 
-  return (
-    <Stack
-      direction={["column", "row"]}
-      px={[2, 12]}
-      maxW={["95%", "1400px"]}
-      flexDirection={["column-reverse", "row"]}
-      align="center"
-    >
-      <VStack spacing={4} align="start" flexBasis="66%">
-        <Text fontSize={["2xl", "4xl"]} fontWeight="semibold">
-          Send data from your behavioral experiments to the Open Science
-          Framework, for free.
+  const Feature = ({ title, text, icon }) => {
+    return (
+      <VStack flexBasis={"33%"}>
+        {icon}
+        <Text fontSize={["xl", "2xl"]} fontWeight="semibold">
+          {title}
         </Text>
-        {user ? (
-          <Link href="/admin">
-            <Button variant={"outline"} colorScheme={"brandOrange"} size={"lg"}>
-              Go to Dashboard
-            </Button>
-          </Link>
-        ) : (
-          <Link href="/signup">
-            <Button variant={"outline"} colorScheme={"brandOrange"} size={"lg"}>
-              Create an account
-            </Button>
-          </Link>
-        )}
+        <Text>{text}</Text>
       </VStack>
-      <Image
-        src="/homepipe.png"
-        alt="Decorative illustration of a pipe with data flowing through it"
-        boxSize={["100%", "768px"]}
-        quality={100}
-      />
-    </Stack>
+    );
+  };
+
+  return (
+    <VStack maxW={["95%", "1400px"]} px={[2, 12]} spacing={["1rem", "2rem"]}>
+      <Stack
+        direction={["column", "row"]}
+        flexDirection={["column-reverse", "row"]}
+        align="center"
+      >
+        <VStack spacing={4} align="start" flexBasis="66%">
+          <Text fontSize={["2xl", "4xl"]} fontWeight="semibold">
+            Send data from your behavioral experiments to the Open Science
+            Framework, for free.
+          </Text>
+          {user ? (
+            <Link href="/admin">
+              <Button
+                variant={"outline"}
+                colorScheme={"brandOrange"}
+                size={"lg"}
+              >
+                Go to Dashboard
+              </Button>
+            </Link>
+          ) : (
+            <Link href="/signup">
+              <Button
+                variant={"outline"}
+                colorScheme={"brandOrange"}
+                size={"lg"}
+              >
+                Create an account
+              </Button>
+            </Link>
+          )}
+        </VStack>
+        <Image
+          src="/homepipe.png"
+          alt="Decorative illustration of a pipe with data flowing through it"
+          boxSize={["100%", "768px"]}
+          quality={100}
+        />
+      </Stack>
+      <Stack
+        direction={["column", "row"]}
+        w={"100%"}
+        flexDirection={["column-reverse", "row"]}
+        align="center"
+      >
+        <Feature
+          icon={<AddIcon w={8} h={8} color={"brandOrange.500"} />}
+          title={"Link your OSF Account"}
+          text={
+            "Simply create an OSF project or use an existing one, along with generating an OSF token to send files directly to it."
+          }
+        />
+        <Feature
+          icon={<EditIcon w={8} h={8} color={"brandOrange.500"} />}
+          title={"Add DataPipe Code"}
+          text={
+            "Configure your experiment parameters and add our pre-generated code snippets into your web-based experiment."
+          }
+        />
+        <Feature
+          icon={<RepeatClockIcon w={8} h={8} color={"brandOrange.500"} />}
+          title={"Publish your Experiment"}
+          text={
+            "Host your experiment on a static hosting website like Github Pages or Netlify, activate data collection, and sit back as data will be automatically sent to OSF."
+          }
+        />
+      </Stack>
+    </VStack>
   );
 }

From da5338899b3454ff8adee39fe230869f92fa0fe7 Mon Sep 17 00:00:00 2001
From: jadeddelta <101148768+jadeddelta@users.noreply.github.com>
Date: Wed, 8 Feb 2023 00:19:02 -0500
Subject: [PATCH 2/2] fix homepipe resize bug, flexbasis to Feature and free
 feature display

---
 pages/index.js | 54 +++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index c729171..5e2f3bc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,24 +1,20 @@
 import Link from "next/link";
 import { useContext } from "react";
 import { UserContext } from "../lib/context";
+import { Stack, VStack, Text, Button, Image } from "@chakra-ui/react";
 import {
-  Stack,
-  VStack,
-  Container,
-  Heading,
-  Text,
-  Button,
-  Image,
-  HStack,
-} from "@chakra-ui/react";
-import { AddIcon, EditIcon, RepeatClockIcon } from "@chakra-ui/icons";
+  AddIcon,
+  EditIcon,
+  RepeatClockIcon,
+  RepeatIcon,
+} from "@chakra-ui/icons";
 
 export default function Home() {
   const { user } = useContext(UserContext);
 
-  const Feature = ({ title, text, icon }) => {
+  const Feature = ({ title, text, icon, flexBasis }) => {
     return (
-      <VStack flexBasis={"33%"}>
+      <VStack flexBasis={flexBasis} textAlign={"center"}>
         {icon}
         <Text fontSize={["xl", "2xl"]} fontWeight="semibold">
           {title}
@@ -29,7 +25,7 @@ export default function Home() {
   };
 
   return (
-    <VStack maxW={["95%", "1400px"]} px={[2, 12]} spacing={["1rem", "2rem"]}>
+    <VStack maxW={["95%", "1400px"]} px={[2, 12]} spacing={["1.5rem", "3rem"]}>
       <Stack
         direction={["column", "row"]}
         flexDirection={["column-reverse", "row"]}
@@ -67,6 +63,7 @@ export default function Home() {
           alt="Decorative illustration of a pipe with data flowing through it"
           boxSize={["100%", "768px"]}
           quality={100}
+          objectFit={"contain"}
         />
       </Stack>
       <Stack
@@ -74,13 +71,15 @@ export default function Home() {
         w={"100%"}
         flexDirection={["column-reverse", "row"]}
         align="center"
+        spacing={["1rem", "4rem"]}
       >
         <Feature
           icon={<AddIcon w={8} h={8} color={"brandOrange.500"} />}
           title={"Link your OSF Account"}
           text={
-            "Simply create an OSF project or use an existing one, along with generating an OSF token to send files directly to it."
+            "Simply create an OSF project or use an existing one, along with generating an OSF token to allow DataPipe to send data to it."
           }
+          flexBasis={"33%"}
         />
         <Feature
           icon={<EditIcon w={8} h={8} color={"brandOrange.500"} />}
@@ -88,6 +87,7 @@ export default function Home() {
           text={
             "Configure your experiment parameters and add our pre-generated code snippets into your web-based experiment."
           }
+          flexBasis={"33%"}
         />
         <Feature
           icon={<RepeatClockIcon w={8} h={8} color={"brandOrange.500"} />}
@@ -95,6 +95,32 @@ export default function Home() {
           text={
             "Host your experiment on a static hosting website like Github Pages or Netlify, activate data collection, and sit back as data will be automatically sent to OSF."
           }
+          flexBasis={"33%"}
+        />
+      </Stack>
+      <Stack
+        direction={["column", "row"]}
+        w={"100%"}
+        flexDirection={["column-reverse", "row"]}
+        align="center"
+        spacing={["1rem", "2rem"]}
+      >
+        <Feature
+          icon={<RepeatIcon w={8} h={8} color={"brandOrange.500"} />}
+          title={"100% Free"}
+          text={
+            "With the Open Science Foundation as a methods to store data for free, " +
+            "placed upon traditionally free web page hosting, means less worrying about " +
+            "development and pricing, and more time spent on your experiments."
+          }
+          flexBasis={"50%"}
+        />
+        <Image
+          src={"/xxxx.png"} //placeholder
+          alt={"Picture of code with arrows pointing to many screens"}
+          boxSize={["100%", "384px"]}
+          quality={100}
+          objectFit={"contain"}
         />
       </Stack>
     </VStack>