feat: add new fancy index + add org slugs

front/pages/index.tsx

@@ -1,17 +1,90 @@
 import type { NextPage } from "next";
-import { Title } from "../components/ui/styles/title";
-import Layout from "../components/ui/layout";
-import { Header } from "../components/ui/header";
+import { motion } from "framer-motion";
+import styled from "styled-components";
+import learnhouseBigIcon from "public/learnhouse_bigicon.png";
+import Image from "next/image";
+import Link from "next/link";
+import { PreAlphaLabel } from "../components/ui/layout";
 
 const Home: NextPage = () => {
   return (
-    <div>
-      <Layout title="Index">
-      <Header></Header>
-        <Title>Home</Title>
-      </Layout>
-    </div>
+    <HomePage>
+      <PreAlphaLabel>🚧 Pre-Alpha</PreAlphaLabel>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          type: "spring",
+          stiffness: 260,
+          damping: 70,
+          delay: 0.2,
+        }}
+        exit={{ opacity: 1 }}
+      >
+        <Image alt="Learnhouse Icon" height={295} width={295} quality={100} src={learnhouseBigIcon}></Image>
+      </motion.div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          type: "spring",
+          stiffness: 260,
+          damping: 70,
+          delay: 0.8,
+        }}
+        exit={{ opacity: 1 }}
+      >
+        <div>
+          <Link href={"/organizations"}>
+            <a>
+              <OrgsButton>See Organizations</OrgsButton>
+            </a>
+          </Link>
+        </div>
+      </motion.div>
+    </HomePage>
   );
 };
 
+const OrgsButton = styled.button`
+  background: #151515;
+    border: 1px solid #e5e5e50a;
+    box-sizing: border-box;
+    border-radius: 4px;
+    padding: 10px 20px;
+    color: white;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0 10px;
+    margin: auto;
+    cursor: pointer;
+    font-family: "DM Sans";
+    font-weight: 500;
+    border-radius: 12px;
+    -webkit-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+  &:hover {
+    background: #191919;
+  }
+`;
+
+const HomePage = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(131.61deg, #202020 7.15%, #000000 90.96%);
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  min-height: 100vh;
+  text-align: center;
+  img {
+    width: 60px;
+  }
+`;
+
 export default Home;

front/pages/org/[orgslug].tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import Layout from '../../components/ui/layout'
+import { Title } from '../../components/ui/styles/title'
+import { Header } from '../../components/ui/header'
+
+const OrgHome = () => {
+  const router = useRouter()
+  const { orgslug } = router.query
+
+  return (
+    <div>
+      <Layout title="Index">
+      <Header></Header>
+        <Title>Welcome {orgslug} 👋🏻</Title>
+      </Layout>
+    </div>
+  )
+}
+
+
+export default OrgHome;

front/pages/organizations/index.tsx

@@ -49,7 +49,7 @@ const Organizations = () => {
         <div>
           {userOrganizations.map((org: any) => (
             <div key={org.org_id}>
-              <Link href={`/organizations/${org.org_id}`}>
+              <Link href={`/org/${org.slug}`}>
                 <a>
                   <h3>{org.name}</h3>
                 </a>

front/pages/organizations/new.tsx

@@ -7,6 +7,7 @@ const Organizations = () => {
   const [name, setName] = React.useState("");
   const [description, setDescription] = React.useState("");
   const [email, setEmail] = React.useState("");
+  const [slug, setSlug] = React.useState("");
 
   const handleNameChange = (e: any) => {
     setName(e.target.value);
@@ -20,12 +21,15 @@ const Organizations = () => {
     setEmail(e.target.value);
   };
 
+  const handleSlugChange = (e: any) => {
+    setSlug(e.target.value);
+  };
+
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     console.log({ name, description, email });
-    const status = await createNewOrganization({ name, description, email });
-   alert(JSON.stringify(status));
-
+    const status = await createNewOrganization({ name, description, email, slug });
+    alert(JSON.stringify(status));
   };
 
   return (
@@ -35,6 +39,8 @@ const Organizations = () => {
       <br />
       Description: <input onChange={handleDescriptionChange} type="text" />
       <br />
+      Slug: <input onChange={handleSlugChange} type="text" />
+      <br />
       Email Address: <input onChange={handleEmailChange} type="text" />
       <br />
       <button onClick={handleSubmit}>Create</button>