added signin page

6 files changed, 89 insertions, 11 deletions

diff --git a/apps/web/app/(auth)/auth-buttons.tsx b/apps/web/app/(auth)/auth-buttons.tsx
index 9da1f5a5..47dc1448 100644
--- a/apps/web/app/(auth)/auth-buttons.tsx
+++ b/apps/web/app/(auth)/auth-buttons.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@repo/ui/src/button";
+import { Button } from "@repo/ui/src/shadcn/button";
 import React from "react";
 import { signIn } from "../helpers/server/auth";
 
diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index 44d2b4f4..03f2ad7c 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -1,8 +1,85 @@
-import { getThemeToggler } from "../../helpers/lib/get-theme-button";
+import Image from "next/image";
+import Link from "next/link";
+import Logo from "@/public/logo.svg";
+import { signIn } from "@/app/helpers/server/auth";
+import { Google } from "@repo/ui/src/components/icons";
+
+export const runtime = "edge";
 
 async function Signin() {
-  const SetThemeButton = getThemeToggler();
-  return <SetThemeButton />;
+  return (
+    <div className="flex items-center justify-between min-h-screen">
+      <div className="relative w-1/2 flex items-center min-h-screen bg-secondary p-8">
+        <div className="absolute top-0 left-0 p-8 text-white inline-flex gap-2 items-center">
+          <Image
+            src={Logo}
+            alt="SuperMemory logo"
+            className="hover:brightness-125 duration-200"
+          />
+          <span className="text-xl">SuperMemory.ai</span>
+        </div>
+
+        <div>
+          <h1 className="text-5xl text-foreground mb-8">
+            Hello, <span className="text-white">human</span>{" "}
+          </h1>
+          <p className="text-white mb-8 text-lg">
+            Write, ideate, and learn with all the wisdom of your bookmarks.
+          </p>
+          <div className="flex items-center gap-4">
+            <div
+              className={`transition-width z-20 rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0.7px] duration-300 ease-in-out w-full`}
+            >
+              <form
+                action={async () => {
+                  "use server";
+                  await signIn("google");
+                }}
+              >
+                <button
+                  type="submit"
+                  className={`text-white transition-width flex justify-between w-full items-center rounded-2xl bg-[#37485E] px-6 py-4 outline-none duration-300 focus:outline-none`}
+                >
+                  <Google />
+                  <span className="w-full self-start">
+                    Continue with Google
+                  </span>
+                </button>
+              </form>
+            </div>
+          </div>
+          <div className="text-slate-500 mt-16">
+            By continuing, you agree to the
+            <Link href="/terms" className="text-slate-200">
+              {" "}
+              Terms of Service
+            </Link>{" "}
+            and
+            <Link href="/privacy" className="text-slate-200">
+              {" "}
+              Privacy Policy
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className="w-1/2 flex flex-col items-center justify-center min-h-screen">
+        <span className="text-3xl leading-relaxed italic mb-8">
+          Ready for your{" "}
+          <span className="text-white font-bold">Second brain</span>?
+        </span>
+
+        <div>
+          <Image
+            className="mx-auto rounded-lg shadow-2xl lg:max-w-none"
+            src={"/images/carousel-illustration-01.png"}
+            width={700}
+            height={520}
+            alt="Carousel 01"
+          />
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default Signin;
diff --git a/apps/web/app/(landing)/Navbar.tsx b/apps/web/app/(landing)/Navbar.tsx
index 1208d1ec..1ad43436 100644
--- a/apps/web/app/(landing)/Navbar.tsx
+++ b/apps/web/app/(landing)/Navbar.tsx
@@ -23,7 +23,7 @@ function Navbar() {
           </Link>
         </div>
         <Link
-          href="https://git.new/memory"
+          href="/signin"
           className="m-2 flex items-center gap-3 rounded-xl bg-white/20 px-4 text-center text-white group"
         >
           Login
diff --git a/apps/web/app/helpers/server/auth.ts b/apps/web/app/helpers/server/auth.ts
index e2817cf0..73119d87 100644
--- a/apps/web/app/helpers/server/auth.ts
+++ b/apps/web/app/helpers/server/auth.ts
@@ -9,7 +9,7 @@ export const {
   signOut,
   auth,
 } = NextAuth({
-  secret: process.env.NEXTAUTH_SECRET ?? process.env.AUTH_SECRET,
+  secret: process.env.BACKEND_SECURITY_KEY,
   callbacks: {
     session: ({ session, token, user }) => ({
       ...session,
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index da6fc2db..e1956914 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,10 +2,11 @@ import "./globals.css";
 
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { ThemeScript } from "next-app-theme/theme-script";
 
 const inter = Inter({ subsets: ["latin"] });
 
+export const runtime = "edge";
+
 export const metadata: Metadata = {
   title: "Supermemory - Your personal second brain.",
   description:
diff --git a/apps/web/app/page-ref.tsx b/apps/web/app/ref/page.tsx
index 2d4c9cc3..667f618c 100644
--- a/apps/web/app/page-ref.tsx
+++ b/apps/web/app/ref/page.tsx
@@ -1,9 +1,9 @@
 import { Button } from "@repo/ui/src/shadcn/button";
-import { auth, signIn, signOut } from "./helpers/server/auth";
-import { db } from "./helpers/server/db";
+import { auth, signIn, signOut } from "../helpers/server/auth";
+import { db } from "../helpers/server/db";
 import { sql } from "drizzle-orm";
-import { users } from "./helpers/server/db/schema";
-import { getThemeToggler } from "./helpers/lib/get-theme-button";
+import { users } from "../helpers/server/db/schema";
+import { getThemeToggler } from "../helpers/lib/get-theme-button";
 
 export const runtime = "edge";