added kartik's codev2-refactor

4 files changed, 152 insertions, 0 deletions

diff --git a/apps/web/app/home/header.tsx b/apps/web/app/home/header.tsx
new file mode 100644
index 00000000..0f84cbe2
--- /dev/null
+++ b/apps/web/app/home/header.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import Logo from "../../public/logo.svg";
+import { AddIcon, ChatIcon } from "@repo/ui/src/icons";
+
+function Header() {
+  return (
+    <div>
+      <div className="flex items-center justify-between relative z-10">
+        <Link href="/">
+          <Image
+            src={Logo}
+            alt="SuperMemory logo"
+            className="hover:brightness-125 duration-200"
+          />
+        </Link>
+
+        <div className="absolute flex justify-center w-full -z-10">
+          <button className="bg-secondary all-center h-11 rounded-full p-2 min-w-14">
+            <Image src={AddIcon} alt="Add icon" />
+          </button>
+        </div>
+
+        <button className="flex shrink-0 duration-200 items-center gap-2 px-2 py-1.5 rounded-xl hover:bg-secondary">
+          <Image src={ChatIcon} alt="Chat icon" />
+          Start new chat
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/apps/web/app/home/menu.tsx b/apps/web/app/home/menu.tsx
new file mode 100644
index 00000000..1ab22543
--- /dev/null
+++ b/apps/web/app/home/menu.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { MemoriesIcon, ExploreIcon, HistoryIcon } from "@repo/ui/src/icons";
+
+function Menu() {
+  const menuItems = [
+    {
+      icon: MemoriesIcon,
+      text: "Memories",
+      url: "/",
+    },
+    {
+      icon: ExploreIcon,
+      text: "Explore",
+      url: "/explore",
+    },
+    {
+      icon: HistoryIcon,
+      text: "History",
+      url: "/history",
+    },
+  ];
+
+  return (
+    <div className="absolute h-full p-4 flex items-center top-0 left-0">
+      <div className="">
+        <div className="hover:rounded-2x group inline-flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40">
+          {menuItems.map((item) => (
+            <div
+              key={item.url}
+              className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90"
+            >
+              <Image
+                src={item.icon}
+                alt={`${item.text} icon`}
+                className="hover:brightness-125 duration-200"
+              />
+              <p className="opacity-0 duration-200 group-hover:opacity-100">
+                {item.text}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Menu;
diff --git a/apps/web/app/home/page.tsx b/apps/web/app/home/page.tsx
new file mode 100644
index 00000000..83416bee
--- /dev/null
+++ b/apps/web/app/home/page.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import Menu from "./menu";
+import Header from "./header";
+import QueryInput from "./queryinput";
+
+function Page() {
+  return (
+    <main className="h-screen flex flex-col p-4 relative">
+      <Menu />
+
+      <Header />
+
+      <div className="max-w-3xl flex mx-auto w-full flex-col">
+        {/* all content goes here */}
+        <div className=""></div>
+
+        <div className="w-full h-96">
+          <QueryInput />
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export default Page;
diff --git a/apps/web/app/home/queryinput.tsx b/apps/web/app/home/queryinput.tsx
new file mode 100644
index 00000000..41b2934f
--- /dev/null
+++ b/apps/web/app/home/queryinput.tsx
@@ -0,0 +1,43 @@
+import { ArrowRightIcon, MemoriesIcon, SelectIcon } from "@repo/ui/src/icons";
+import Image from "next/image";
+import React from "react";
+import Divider from "@repo/ui/src/shadcn/divider";
+
+function QueryInput() {
+  return (
+    <div className="bg-secondary h- [68px] rounded-[24px] w-full mt-40">
+      {/* input and action button */}
+      <div className="flex gap-4 p-3">
+        <textarea
+          name="query-input"
+          cols={30}
+          rows={7}
+          className="bg-transparent pt-2.5 text-base text-[#989EA4] focus:text-foreground duration-200 tracking-[3%] outline-none resize-none w-full p-1"
+          placeholder="Ask your second brain..."
+        ></textarea>
+
+        <button className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90">
+          <Image src={ArrowRightIcon} alt="Right arrow icon" />
+        </button>
+      </div>
+
+      <Divider />
+
+      {/* suggestions */}
+      <div className="flex items-center gap-6 p-2">
+        <button className="bg-[#2B3237] h-9 p-2 px-3 flex items-center gap-2 rounded-full">
+          <Image src={MemoriesIcon} alt="Memories icon" className="w-5" />
+          <span className="pr-3">Filters</span>
+          <Image src={SelectIcon} alt="Select icon" className="w-4" />
+        </button>
+        <div className="flex gap-6 brightness-75">
+          <p>Nvidia</p>
+          <p>Open-source</p>
+          <p>Artificial Intelligence</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default QueryInput;