Update homepage design + editor

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 EasyMDE.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 w-full h-96 lg:w-[55%] sm:w-[80%]">
+          <SimpleMDE
+            className='editor'
+            placeholder='Write your thoughts...'
+            options={options}
+          />
+        </div>
       </div>
-    </span>
+    </div>
   );
 }

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)

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: 100%;
+  margin: auto;
+  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,
+    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;
+}