From 1f096cb1a76d4f53f94f47a85c4ef0dcc8d6769d Mon Sep 17 00:00:00 2001
From: Alec Dilanchian <alec.dilanchian@gmail.com>
Date: Thu, 17 Nov 2022 15:20:58 -0500
Subject: [PATCH] tweking design

---
 assets/buildspace-logo.png | Bin 0 -> 1898 bytes
 pages/index.js             |  97 ++++++++++++++++++++++++-------------
 2 files changed, 64 insertions(+), 33 deletions(-)
 create mode 100644 assets/buildspace-logo.png

diff --git a/assets/buildspace-logo.png b/assets/buildspace-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..030570a867567ea4491dc40216fbedecab974a69
GIT binary patch
literal 1898
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

literal 0
HcmV?d00001

diff --git a/pages/index.js b/pages/index.js
index fab7dbc..8365435 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import Image from 'next/image';
 import {
   Box,
   Text,
@@ -8,7 +9,9 @@ import {
   Link,
   Kbd,
   Spinner,
+  HStack,
 } from '@chakra-ui/react';
+import buildspaceLogo from '../assets/buildspace-logo.png';
 
 const Home = () => {
   const [input, setInput] = useState('');
@@ -46,7 +49,6 @@ const Home = () => {
   }, [input]);
 
   useEffect(() => {
-    console.log('checking local storage...');
     const scratchPadText = localStorage.getItem('scratchpad');
     setInput(scratchPadText);
   }, []);
@@ -68,20 +70,29 @@ const Home = () => {
   }, [input, generateAction]);
 
   return (
-    <Flex minHeight="100vh" bg="black">
-      <Flex w="100%" alignItems="center" justifyContent="center">
-        <VStack w="100%" color="white" spacing={5}>
-          <VStack maxW={{ base: '80%', md: '60%', lg: '50%' }}>
-            <Text fontWeight="bold" fontSize="4xl">
-              ScratchPad
+    <Flex position="relative" minHeight="100vh">
+      <Flex
+        position="absolute"
+        h="100%"
+        w="100%"
+        bgColor="black"
+        flexDirection="column"
+        letterSpacing="-0.08em"
+      >
+        <VStack
+          w="100%"
+          height="100%"
+          spacing={5}
+          color="white"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <VStack padding={3}>
+            <Text color="white" fontWeight="bold" fontSize="5xl" pl={3} pt={1}>
+              Scratchpad
             </Text>
-            <Text fontSize="lg">
-              Write your first story, movie script, or song in 2 minutes. Start
-              by typing a few sentences and press{' '}
-              <Kbd color="gray.700">ctrl</Kbd> or{' '}
-              <Kbd color="gray.700">cmd</Kbd> +{' '}
-              <Kbd color="gray.700">enter</Kbd> to have your AI writer to help
-              you generate the rest!
+            <Text color="white" fontSize="2xl" textAlign="center">
+              Write your own song, movie script, or anime in 2 minutes.
             </Text>
           </VStack>
           <Box
@@ -107,38 +118,62 @@ const Home = () => {
                 zIndex="1"
                 bottom={0}
                 right={0}
-                bgColor="blue.400"
+                bgColor="white"
                 padding={2}
                 mb={3}
                 mr={2}
                 borderRadius={5}
               >
-                <Text fontWeight="bold">Keep writing to generate more!</Text>
+                <Text color="black" fontWeight="bold" letterSpacing="-0.01em">
+                  Keep writing to generate more!
+                </Text>
               </Flex>
             )}
             <Textarea
-              h="100%"
               w="100%"
+              h="100%"
               fontSize="18px"
-              bgColor="#2A2C34"
               variant="outline"
               placeholder="type here to get started"
               value={input}
               onChange={onChange}
               isDisabled={isGenerating}
+              bgColor="gray.900"
             />
+            <Flex>
+              <Text
+                pt={2}
+                fontSize="lg"
+                fontWeight="bold"
+                letterSpacing="-0.01em"
+              >
+                Press <Kbd color="gray.700">ctrl</Kbd> or{' '}
+                <Kbd color="gray.700">cmd</Kbd> +{' '}
+                <Kbd color="gray.700">enter</Kbd> to have your AI writer to help
+                you generate the rest!
+              </Text>
+            </Flex>
           </Box>
-          <Text fontSize="xl">
-            built with{' '}
-            <Link
-              fontWeight="bold"
-              color="blue.300"
-              href="https://buildspace.so/builds/ai-writer"
-              isExternal
-            >
-              buildspace
-            </Link>
-          </Text>
+
+          <HStack
+            w="100%"
+            position="absolute"
+            bottom={0}
+            justifyContent="center"
+            pb={5}
+          >
+            <Image src={buildspaceLogo} width={25} alt="buildspace logo" />
+            <Text fontSize="lg">
+              build on{' '}
+              <Link
+                color="blue.300"
+                href="https://buildspace.so/builds/ai-writer"
+                isExternal
+              >
+                buildspace
+              </Link>
+            </Text>
+          </HStack>
         </VStack>
       </Flex>
     </Flex>
@@ -146,7 +181,3 @@ const Home = () => {
 };
 
 export default Home;
-
-// <Flex bgColor="green.300" w="100%" justifyContent="flex-end">
-//   <Button color="black">Save</Button>
-// </Flex>;