added signin page

8 files changed, 119 insertions, 13 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";
 
diff --git a/apps/web/env.d.ts b/apps/web/env.d.ts
index 161177a1..2755280c 100644
--- a/apps/web/env.d.ts
+++ b/apps/web/env.d.ts
@@ -1,10 +1,10 @@
-// Generated by Wrangler on Sat May 25 2024 23:32:58 GMT-0500 (Central Daylight Time)
+// Generated by Wrangler on Sun May 26 2024 17:03:05 GMT-0500 (Central Daylight Time)
 // by running `wrangler types --env-interface CloudflareEnv env.d.ts`
 
 interface CloudflareEnv {
   GOOGLE_CLIENT_ID: string;
   GOOGLE_CLIENT_SECRET: string;
-  NEXTAUTH_SECRET: string;
+  AUTH_SECRET: string;
   R2_ENDPOINT: string;
   R2_ACCESS_ID: string;
   R2_SECRET_KEY: string;
diff --git a/packages/ui/src/components/icons.tsx b/packages/ui/src/components/icons.tsx
index a7e0ef1a..d72c8e1f 100644
--- a/packages/ui/src/components/icons.tsx
+++ b/packages/ui/src/components/icons.tsx
@@ -274,3 +274,31 @@ export const X = (props: SVGProps<SVGSVGElement>) => (
     />
   </svg>
 );
+
+export const Google = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 256 262"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid"
+    {...props}
+  >
+    <path
+      d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+      fill="#ffffff"
+    />
+    <path
+      d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+      fill="#ffffff"
+    />
+    <path
+      d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
+      fill="#ffffff"
+    />
+    <path
+      d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+      fill="#ffffff"
+    />
+  </svg>
+);