feat(web): add Google Sign-in buttons to auth pages

Author: Arun-kushwaha007

apps/web/app/login/page.tsx

@@ -178,7 +178,7 @@ function LoginContent() {
                     </div>
                   </div>
 
-                  <div className="pt-4">
+                  <div className="pt-4 space-y-4">
                     <AccentButton 
                       type="submit"
                       disabled={loading}
@@ -195,6 +195,26 @@ function LoginContent() {
                         </span>
                       )}
                     </AccentButton>
+
+                    <div className="relative flex items-center justify-center pt-2">
+                      <div className="absolute inset-0 flex items-center">
+                        <div className="w-full border-t border-white/5"></div>
+                      </div>
+                      <span className="relative bg-transparent px-4 text-xs font-bold text-zinc-600 uppercase tracking-widest bg-clip-padding">OR</span>
+                    </div>
+
+                    <a 
+                      href="http://localhost:3001/api/v1/auth/google"
+                      className="flex h-14 w-full items-center justify-center gap-3 rounded-xl border border-white/10 bg-white/[0.02] text-sm font-bold text-white transition-all hover:bg-white/[0.06] hover:border-white/20 active:scale-[0.98]"
+                    >
+                      <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
+                        <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
+                        <path d="M23.49 12.275C23.49 11.49 23.415 10.73 23.3 10H12V14.51H18.47C18.18 15.99 17.34 17.25 16.08 18.1L19.945 21.1C22.2 19.01 23.49 15.92 23.49 12.275Z" fill="#4285F4" />
+                        <path d="M5.26498 14.2949C5.02498 13.5699 4.88501 12.7999 4.88501 11.9999C4.88501 11.1999 5.01998 10.4299 5.26498 9.7049L1.275 6.60986C0.46 8.22986 0 10.0599 0 11.9999C0 13.9399 0.46 15.7699 1.28 17.3899L5.26498 14.2949Z" fill="#FBBC05" />
+                        <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.26538 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
+                      </svg>
+                      Continue with Google
+                    </a>
                   </div>
 
                   <p className="pt-8 text-center text-xs font-medium text-zinc-500">

apps/web/app/register/page.tsx

@@ -226,22 +226,25 @@ export default function RegisterPage() {
                     </AccentButton>
                   </div>
 
-                  {/* <div className="relative flex items-center gap-4 py-6">
-                    <div className="h-px flex-1 bg-white/5" />
-                    <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-700">Continue with</span>
-                    <div className="h-px flex-1 bg-white/5" />
+                  <div className="relative flex items-center justify-center pt-2 pb-2">
+                    <div className="absolute inset-0 flex items-center">
+                      <div className="w-full border-t border-white/5"></div>
+                    </div>
+                    <span className="relative bg-transparent px-4 text-xs font-bold text-zinc-600 uppercase tracking-widest bg-clip-padding">OR</span>
                   </div>
 
-                  <div className="grid grid-cols-2 gap-3">
-                    <button type="button" className="flex items-center justify-center gap-3 h-12 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/5 transition-all text-xs font-bold text-zinc-400">
-                      <Chrome size={16} className="text-zinc-500" />
-                      Google
-                    </button>
-                    <button type="button" className="flex items-center justify-center gap-3 h-12 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/5 transition-all text-xs font-bold text-zinc-400">
-                      <Apple size={16} className="text-zinc-500" />
-                      Apple
-                    </button>
-                  </div> */}
+                  <a 
+                    href="http://localhost:3001/api/v1/auth/google"
+                    className="flex h-14 w-full items-center justify-center gap-3 rounded-xl border border-white/10 bg-white/[0.02] text-sm font-bold text-white transition-all hover:bg-white/[0.06] hover:border-white/20 active:scale-[0.98]"
+                  >
+                    <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
+                      <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
+                      <path d="M23.49 12.275C23.49 11.49 23.415 10.73 23.3 10H12V14.51H18.47C18.18 15.99 17.34 17.25 16.08 18.1L19.945 21.1C22.2 19.01 23.49 15.92 23.49 12.275Z" fill="#4285F4" />
+                      <path d="M5.26498 14.2949C5.02498 13.5699 4.88501 12.7999 4.88501 11.9999C4.88501 11.1999 5.01998 10.4299 5.26498 9.7049L1.275 6.60986C0.46 8.22986 0 10.0599 0 11.9999C0 13.9399 0.46 15.7699 1.28 17.3899L5.26498 14.2949Z" fill="#FBBC05" />
+                      <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.26538 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
+                    </svg>
+                    Continue with Google
+                  </a>
 
                   <p className="pt-8 text-center text-xs font-medium text-zinc-500">
                     Already registered?{' '}