rebranding phase 1

pages/index.js

@@ -34,55 +34,52 @@ const Home = () => {
   return (
     <div className="root">
       <div className="container">
-        <div className="content">
-          <div className="header">
-            <p className="header-title">Scratchpad</p>
-            <p className="header-subtitle">
-              Write your first song in the style of your favorite artist.
-            </p>
+        <div className="header">
+          <div className="header-title">
+            <h1>GPT-3</h1>
+            <h1>Writer</h1>
           </div>
-          <div className="text-container">
-            <textarea
-              className="text-area"
-              placeholder="write some lyrics here to get started"
-              value={input}
-              onChange={onChange}
-            />
-            <textarea
-              className="text-area text-area-output"
-              placeholder="your lyrics and song titles will go here"
-              value={output}
-              disabled
-            />
+          <div className="header-subtitle">
+            <h2>Write your first song in the style of your favorite artist.</h2>
           </div>
-          <button
-            className="generate-button"
-            onClick={generateAction}
-            disabled={isGenerating}
-          >
-            {isGenerating ? (
-              <div class="lds-ring">
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
+        </div>
+        <div className="prompt-container">
+          <textarea className="prompt-box" value={input} onChange={onChange} />
+          <div className="prompt-buttons">
+            <div className="key-stroke">
+              <p>cmd/ctrl + enter</p>
+            </div>
+            <div className="or">
+              <p>OR</p>
+            </div>
+            <a className="generate-button" onClick={generateAction}>
+              <div className="generate">
+                {/* {!isGenerating ? (
+                  <div class="lds-ring">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                  </div>
+                ) : ( */}
+                <p>Generate</p>
+                {/* )} */}
               </div>
-            ) : (
-              <p>Generate</p>
-            )}
-          </button>
-        </div>
-        <div className="footer">
-          <Image src={buildspaceLogo} width={25} alt="buildspace logo" />
-          <p>build on</p>
-          <a
-            href="https://buildspace.so/builds/ai-writer"
-            target="_blank"
-            rel="noreferrer"
-          >
-            buildspace
-          </a>
+            </a>
+          </div>
         </div>
+        {output && (
+          <div className="output">
+            <div className="output-header-container">
+              <div className="output-header">
+                <h3>Output</h3>
+              </div>
+            </div>
+            <div className="output-content">
+              <p>{output}</p>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );