aboutsummaryrefslogtreecommitdiff
path: root/apps
diff options
context:
space:
mode:
Diffstat (limited to 'apps')
-rw-r--r--apps/web/app/(landing)/Navbar.tsx7
-rw-r--r--apps/web/app/(landing)/page.tsx7
-rw-r--r--apps/web/app/globals.css76
-rw-r--r--apps/web/app/home/header.tsx34
-rw-r--r--apps/web/app/home/menu.tsx50
-rw-r--r--apps/web/app/home/page.tsx25
-rw-r--r--apps/web/app/home/queryinput.tsx43
-rw-r--r--apps/web/app/layout.tsx4
8 files changed, 201 insertions, 45 deletions
diff --git a/apps/web/app/(landing)/Navbar.tsx b/apps/web/app/(landing)/Navbar.tsx
index 7d0e3225..6103af38 100644
--- a/apps/web/app/(landing)/Navbar.tsx
+++ b/apps/web/app/(landing)/Navbar.tsx
@@ -1,3 +1,4 @@
+import { ArrowRightIcon } from "@radix-ui/react-icons";
import Logo from "../../public/logo.svg";
import { Github } from "@repo/ui/src/components/icons";
import Image from "next/image";
@@ -24,10 +25,10 @@ function Navbar() {
</div>
<Link
href="https://git.new/memory"
- className="m-2 flex items-center gap-3 rounded-xl bg-white/20 px-4 text-center text-white"
+ className="m-2 flex items-center gap-3 rounded-xl bg-white/20 px-4 text-center text-white group"
>
- <Github className="h-4 w-4" />
- Open source
+ Login
+ <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 duration-100 ease-in-out" />
</Link>
</div>
</nav>
diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx
index 36f0ce8d..e3201912 100644
--- a/apps/web/app/(landing)/page.tsx
+++ b/apps/web/app/(landing)/page.tsx
@@ -6,6 +6,7 @@ import { Toaster } from "@repo/ui/src/shadcn/toaster";
import Features from "./Features";
import Footer from "./footer";
import { auth } from "../helpers/server/auth";
+import { redirect } from "next/navigation";
export const runtime = "edge";
@@ -14,8 +15,12 @@ export default async function Home() {
console.log(user);
+ if (user) {
+ // await redirect("/home")
+ }
+
return (
- <main className="dark flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
+ <main className="flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
<Navbar />
{/* Background gradients */}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 8eee6cbd..b1902464 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,50 +1,48 @@
-:root {
- --max-width: 1100px;
- --border-radius: 12px;
- --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
- "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
- "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
+/* :root {
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+} */
- --callout-rgb: 20, 20, 20;
- --callout-border-rgb: 108, 108, 108;
- --card-rgb: 100, 100, 100;
- --card-border-rgb: 200, 200, 200;
-
- --glow-conic: conic-gradient(
- from 180deg at 50% 50%,
- #2a8af6 0deg,
- #a853ba 180deg,
- #e92a67 360deg
- );
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground: rgba(179, 188, 197, 1);
+ --foreground-menu: rgba(106, 115, 125, 1);
+ --background: rgba(23, 27, 31, 1);
+ --secondary: rgba(31, 36, 40, 1);
+ --primary: rgba(54, 157, 253, 1);
+ --border: rgba(51, 57, 67, 1);
+ }
}
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
+body {
+ color: var(--foreground);
+ background: var(--background);
+ font-size: 14px;
}
-html,
-body {
- max-width: 100vw;
- overflow-x: hidden;
+@layer base {
+ .all-center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
+@layer utilities {
+ .text-balance {
+ text-wrap: balance;
+ }
}
-a {
- color: inherit;
- text-decoration: none;
+.gradient-background {
+ background: linear-gradient(
+ 150deg,
+ rgba(255, 255, 255, 0.1) 0%,
+ rgba(255, 255, 255, 0)
+ );
}
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;
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 035b5827..491162f1 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -61,9 +61,9 @@ export default function RootLayout({
}): JSX.Element {
return (
<html lang="en">
- <head>
+ {/* <head>
<ThemeScript />
- </head>
+ </head> */}
{/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
<body className={`${inter.className} dark`}>{children}</body>
</html>
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 07:09:34 +0000