feet: auth page revamp

3 files changed, 26 insertions, 13 deletions

diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index 2f913a75..86ceeb95 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -8,8 +8,8 @@ export const runtime = "edge";
 
 async function Signin() {
   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="flex relative font-geistSans overflow-hidden items-center justify-between min-h-screen">
+      <div className="relative w-full lg:w-1/2 flex items-center min-h-screen  p-8 border-r-[1px] border-white/5">
         <div className="absolute top-0 left-0 p-8 text-white inline-flex gap-2 items-center">
           <Image
             src={Logo}
@@ -18,9 +18,19 @@ async function Signin() {
           />
           <span className="text-xl">SuperMemory.ai</span>
         </div>
+        <div className="absolute  inset-0 opacity-10  w-full  bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
+        <img
+          className="absolute inset-x-0 -top-20 opacity-25 "
+          src={
+            "https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75"
+          }
+          width={1000}
+          height={1000}
+          alt="back bg"
+        />
 
-        <div>
-          <h1 className="text-5xl text-foreground mb-8">
+        <div className="pl-4">
+          <h1 className="text-5xl text-foreground mb-8 tracking-tighter">
             Hello, <span className="text-white">human</span>{" "}
           </h1>
           <p className="text-white mb-8 text-lg">
@@ -28,7 +38,7 @@ async function Signin() {
           </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-3/4`}
+              className={`relative cursor-pointer transition-width z-20 rounded-2xl bg-page-gradient p-[0.7px] duration-300 ease-in-out fit dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]`}
             >
               <form
                 action={async () => {
@@ -40,10 +50,10 @@ async function Signin() {
               >
                 <button
                   type="submit"
-                  className={`relative 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`}
+                  className={`relative text-white transition-width flex gap-5 justify-center w-full items-center rounded-2xl bg-page-gradient  px-6 py-4 outline-none duration-300 focus:outline-none `}
                 >
                   <Google />
-                  <span className="relative w-full self-start">
+                  <span className="relative w-full">
                     Continue with Google
                   </span>
                 </button>
@@ -64,16 +74,16 @@ async function Signin() {
           </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">
+      <div className="hidden w-0 lg:flex lg:w-1/2  flex-col items-center justify-center min-h-screen bg-page-gradient overflow-hidden">
+        <span className="text-3xl leading-relaxed tracking-tighter 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"}
+            className="mx-auto rounded-lg shadow-2xl px-10 md:px-14 lg:max-w-none"
+            src={"/images/memory.svg"}
             width={700}
             height={520}
             alt="Carousel 01"
diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx
index 5bb317da..ec22aa3f 100644
--- a/apps/web/app/(landing)/page.tsx
+++ b/apps/web/app/(landing)/page.tsx
@@ -11,6 +11,7 @@ import FUIPricingSectionWithBadge from "./Pricing";
 import Services from "./Features/index";
 import { Showcases } from "./Showcase";
 import { cn } from "@repo/ui/lib/utils";
+import BackgroundPlus from "./GridPatterns/PlusGrid";
 
 export const runtime = "edge";
 
@@ -25,6 +26,10 @@ export default async function Home() {
 
   return (
     <main className="flex overflow-x-hidden relative flex-col items-center px-2 min-h-screen md:px-0 font-geistSans bg-hero-gradient">
+      <BackgroundPlus />
+      <div className="absolute top-0 z-10 min-h-screen w-screen overflow-hidden bg-inherit  bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
+
+      
       <Navbar />
 
       {/* Background gradients */}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 2c5808d9..6821a884 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -68,8 +68,6 @@ export default function RootLayout({
       {/* <head>
         <ThemeScript />
       </head> */}
-      <div className="absolute top-0 z-10 min-h-screen w-screen overflow-hidden bg-inherit  bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
-      <BackgroundPlus />
       {/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
       <body
         className={cn(