From 302613ec8b50d3902463aeaca668607ae07326d6 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Sun, 23 Jun 2024 12:10:36 +0300
Subject: [PATCH] fix: auth page revamap

---
 .../TextGradient/gradient.module.css          | 70 +++++++++++++++++++
 apps/web/app/(auth)/signin/page.tsx           | 14 ++--
 packages/tailwind-config/tailwind.config.ts   |  6 ++
 3 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/app/(auth)/signin/_components/TextGradient/gradient.module.css

diff --git a/apps/web/app/(auth)/signin/_components/TextGradient/gradient.module.css b/apps/web/app/(auth)/signin/_components/TextGradient/gradient.module.css
new file mode 100644
index 00000000..b9afc7d1
--- /dev/null
+++ b/apps/web/app/(auth)/signin/_components/TextGradient/gradient.module.css
@@ -0,0 +1,70 @@
+@keyframes background-pan {
+    from {
+      background-position: 0% center;
+    }
+  
+    to {
+      background-position: -200% center;
+    }
+  }
+  
+  @keyframes scale {
+    from,
+    to {
+      transform: scale(0);
+    }
+  
+    50% {
+      transform: scale(1);
+    }
+  }
+  
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+  
+    to {
+      transform: rotate(180deg);
+    }
+  }
+  
+  .star {
+    --size: clamp(20px, 1.5vw, 30px);
+  
+    animation: scale 700ms ease forwards;
+    display: block;
+    height: var(--size);
+    left: var(--star-left);
+    position: absolute;
+    top: var(--star-top);
+    width: var(--size);
+  }
+  
+  .star > svg {
+    animation: rotate 1000ms linear infinite;
+    display: block;
+    opacity: 0.7;
+  }
+  
+  .star > svg > path {
+    fill: #7b3907;
+  }
+  
+  .magicText {
+    --purple: rgba(72, 130, 244, 0.868);
+    --violet: #9a80f7;
+    --pink: #f7f7f7;
+    animation: background-pan 3s linear infinite;
+    background: linear-gradient(
+      to right,
+      var(--purple),
+      var(--violet),
+      var(--pink),
+      var(--purple)
+    );
+    background-size: 200%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    white-space: nowrap;
+  }
\ No newline at end of file
diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index 86ceeb95..dc2f9ac6 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -3,6 +3,8 @@ import Link from "next/link";
 import Logo from "@/public/logo.svg";
 import { signIn } from "@/app/helpers/server/auth";
 import { Google } from "@repo/ui/components/icons";
+import gradientStyle from "./_components/TextGradient/gradient.module.css"
+import { cn } from "@repo/ui/lib/utils";
 
 export const runtime = "edge";
 
@@ -29,11 +31,11 @@ async function Signin() {
           alt="back bg"
         />
 
-        <div className="pl-4">
-          <h1 className="text-5xl text-foreground mb-8 tracking-tighter">
-            Hello, <span className="text-white">human</span>{" "}
+        <div className="pl-4 z-20">
+          <h1 className="text-5xl text-white mb-8 tracking-tighter">
+            Hello, <span className={cn("bg-gradient-to-tr from-zinc-100 via-zinc-200/50 to-zinc-200/90 text-transparent bg-clip-text animate-gradient" , gradientStyle.magicText)}>human</span>{" "}
           </h1>
-          <p className="text-white mb-8 text-lg">
+          <p className="text-white mb-8 text-lg tracking-tighter">
             Write, ideate, and learn with all the wisdom of your bookmarks.
           </p>
           <div className="flex items-center gap-4">
@@ -60,7 +62,7 @@ async function Signin() {
               </form>
             </div>
           </div>
-          <div className="text-slate-500 mt-16">
+          <div className="text-slate-500 mt-16 z-20">
             By continuing, you agree to the
             <Link href="/terms" className="text-slate-200">
               {" "}
@@ -82,7 +84,7 @@ async function Signin() {
 
         <div>
           <Image
-            className="mx-auto rounded-lg shadow-2xl px-10 md:px-14 lg:max-w-none"
+            className="mx-auto rounded-lg shadow-2xl w-[calc(100%-100px)] md:px-14 lg:px-0 lg:max-w-none"
             src={"/images/memory.svg"}
             width={700}
             height={520}
diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
index b3ef71b5..c321559b 100644
--- a/packages/tailwind-config/tailwind.config.ts
+++ b/packages/tailwind-config/tailwind.config.ts
@@ -60,6 +60,11 @@ const config = {
         sm: "calc(var(--radius) - 4px)",
       },
       keyframes: {
+        gradient: {
+          to: {
+            backgroundPosition: "var(--bg-size) 0",
+          },
+        },
         "background-shine": {
           from: {
             backgroundPosition: "0 0",
@@ -86,6 +91,7 @@ const config = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "logo-cloud": "logo-cloud 30s linear infinite",
         "background-shine": "background-shine 5s linear infinite",
+        gradient: "gradient 8s linear infinite",
       },
       backgroundImage: {
         "glass-gradient":