From 23020f4af782b7f365c3cf5bc34e4357bb7028ef Mon Sep 17 00:00:00 2001
From: Chris <rolletchris1@gmail.com>
Date: Mon, 13 May 2024 20:53:00 -0700
Subject: [PATCH 1/5] init homepage design

---
 src/app/page.tsx | 60 +++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2fd3fd2..7c6c9da 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,60 @@
-"use client"
+"use client";
+
+import '@styles/editor.css'
+
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+import { useMemo } from 'react';
+import hljs from 'highlight.js';
+
+const SimpleMDE = dynamic(
+  () => import("react-simplemde-editor"),
+  { ssr: false }
+);
 
 export default function Page() {
+
+  const options = useMemo(() => {
+    return {
+      autofocus: true,
+      spellChecker: true,
+      status: false,
+      toolbar: [
+        "bold", "italic", "heading", "|",
+        "quote", "unordered-list", "ordered-list", "|",
+        "link", "image", "|",
+        "preview", "side-by-side", "fullscreen", "|",
+        "guide"
+      ],
+      renderingConfig: {
+        codeSyntaxHighlighting: true,
+        hljs: hljs,
+      },
+    } as SimpleMDE.Options;
+  }, []);
+
   return (
-    <span className="h-screen flex items-center justify-center">
-      <div className="text-center">
-        <p className="text-4xl font-bold">Welcome to Cursif</p>
-        <p className="text-1xl">Taking notes should be <b>quick</b> and <b>simple</b></p>
+    <div className="h-screen flex items-center justify-center relative">
+      <div className="homepage-wave absolute inset-0 z-0"></div>
+
+      <div className="mx-auto relative w-screen z-10">
+        <div className="text-center">
+          <p className="text-6xl font-bold">Welcome to Cursif</p>
+          <p className="text-xl">Taking notes should be <b>quick</b> and <b>simple</b></p>
+          <Link href="/login">
+            <button className="button mt-16 text-xl">Get Started</button>
+          </Link>
+        </div>
+
+        <p className="text-center font-extrabold mt-32 text-3xl bg-clip-text text-transparent bg-gradient-to-r from-gray-200 to-gray-800">Try It Yourself!</p>
+        <div className="mt-8 mx-auto relative border-2 border-gray-200 rounded shadow-lg h-96 w-[55%]">
+          <SimpleMDE
+            className='editor'
+            placeholder='Write your thoughts...'
+            options={options}
+          />
+        </div>
       </div>
-    </span>
+    </div>
   );
 }

From 8729d4500057a950475740e2ccf541361755a5b0 Mon Sep 17 00:00:00 2001
From: Chris <rolletchris1@gmail.com>
Date: Mon, 13 May 2024 20:54:03 -0700
Subject: [PATCH 2/5] Added homepage CSS to include a new wave design

---
 src/styles/globals.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8e5d282..3f4943e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -221,3 +221,20 @@
     transition-duration: 300ms;
   }
 }
+
+.homepage-wave {
+  --size: 100px;
+  --m: 1;
+  --p: calc(var(--m)*var(--size));
+  --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));
+
+  height: 90%;
+  margin: auto;
+  margin-top: 250px;
+
+  mask:
+    radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%) left calc(50% - 2*var(--size)) top 0/calc(4*var(--size)) 51% repeat-x,
+    radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), #0000 99%, #000 101%) left 50% top var(--size)/calc(4*var(--size)) calc(51% - var(--size)) repeat-x;
+  background: linear-gradient(90deg, rgb(202, 11, 11), rgb(0, 0, 255));
+  border: none;
+}
\ No newline at end of file

From d7c7b862a4b770ca3a5de4749db6861b8ef7778e Mon Sep 17 00:00:00 2001
From: Chris <rolletchris1@gmail.com>
Date: Wed, 15 May 2024 16:59:40 -0700
Subject: [PATCH 3/5] Update SimpleMDE options to use EasyMDE options

---
 src/components/pages/editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/editor.tsx b/src/components/pages/editor.tsx
index dcaaec1..8cfa2e4 100644
--- a/src/components/pages/editor.tsx
+++ b/src/components/pages/editor.tsx
@@ -84,7 +84,7 @@ export default function PageEditor({ page_id }: { page_id: String }): JSX.Elemen
         codeSyntaxHighlighting: true,
         hljs: hljs,
       },
-    } as SimpleMDE.Options;
+    } as EasyMDE.Options;
   }, []);
 
   if (loading)

From 47df90b91ef0eca53e8d7606fe313c8842b3ba1a Mon Sep 17 00:00:00 2001
From: Chris <rolletchris1@gmail.com>
Date: Wed, 15 May 2024 17:00:15 -0700
Subject: [PATCH 4/5] Adjust height and margin-top in homepage CSS

---
 src/styles/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3f4943e..9e53d20 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -228,9 +228,9 @@
   --p: calc(var(--m)*var(--size));
   --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));
 
-  height: 90%;
+  height: 100%;
   margin: auto;
-  margin-top: 250px;
+  margin-top: 200px;
 
   mask:
     radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%) left calc(50% - 2*var(--size)) top 0/calc(4*var(--size)) 51% repeat-x,

From a64341b4ca2b7829deadbfee2b5362e26b18e47a Mon Sep 17 00:00:00 2001
From: Chris <rolletchris1@gmail.com>
Date: Wed, 15 May 2024 17:00:34 -0700
Subject: [PATCH 5/5] Update SimpleMDE options to use EasyMDE options

---
 src/app/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7c6c9da..e5f9740 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,7 +30,7 @@ export default function Page() {
         codeSyntaxHighlighting: true,
         hljs: hljs,
       },
-    } as SimpleMDE.Options;
+    } as EasyMDE.Options;
   }, []);
 
   return (
@@ -47,7 +47,7 @@ export default function Page() {
         </div>
 
         <p className="text-center font-extrabold mt-32 text-3xl bg-clip-text text-transparent bg-gradient-to-r from-gray-200 to-gray-800">Try It Yourself!</p>
-        <div className="mt-8 mx-auto relative border-2 border-gray-200 rounded shadow-lg h-96 w-[55%]">
+        <div className="mt-8 mx-auto relative border-2 border-gray-200 rounded shadow-lg w-full h-96 lg:w-[55%] sm:w-[80%]">
           <SimpleMDE
             className='editor'
             placeholder='Write your thoughts...'