From 3f5a8288d59df2c8f6c5030f82c46da1a12913a7 Mon Sep 17 00:00:00 2001
From: Don Strawsburg <don@goforward.group>
Date: Fri, 13 Dec 2024 12:23:43 -0500
Subject: [PATCH] click signin icon

---
 src/app/signin/page.tsx | 199 ++++++++++++++++++++--------------------
 1 file changed, 101 insertions(+), 98 deletions(-)

diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx
index e86bdc6..c998392 100644
--- a/src/app/signin/page.tsx
+++ b/src/app/signin/page.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import constants from '@src/lib/constants';
+import Link from 'next/link';
 
 export default function SignupPage() {
   const router = useRouter();
@@ -46,124 +47,126 @@ export default function SignupPage() {
 
   return (
     <div className="flex min-h-screen flex-1">
-        <div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
-          <div className="mx-auto w-full max-w-sm lg:w-96">
-            <div>
+      <div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
+        <div className="mx-auto w-full max-w-sm lg:w-96">
+          <div>
+            <Link href={"/"}>
               <img
                 alt={constants.APP_NAME}
                 src="https://tailwindui.com/plus/img/logos/mark.svg?color=lime&shade=600"
                 className="h-10 w-auto"
               />
-              <h2 className="mt-8 text-2xl/9 font-bold tracking-tight text-gray-900">Sign in to your account</h2>
-              <p className="mt-2 text-sm/6 text-gray-500">
-                Not a member?{' '}
-                <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
-                  Create An Account
-                </a>
-              </p>
-            </div>
+            </Link>
+            <h2 className="mt-8 text-2xl/9 font-bold tracking-tight text-gray-900">Sign in to your account</h2>
+            <p className="mt-2 text-sm/6 text-gray-500">
+              Not a member?{' '}
+              <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
+                Create An Account
+              </a>
+            </p>
+          </div>
 
-            <div className="mt-10">
-              <div>
-                <form action="#" method="POST" className="space-y-6">
-                  <div>
-                    <label htmlFor="email" className="block text-sm/6 font-medium text-gray-900">
-                      Email address
-                    </label>
-                    <div className="mt-2">
-                      <input
-                        id="email"
-                        name="email"
-                        type="email"
-                        required
-                        autoComplete="email"
-                        className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
-                      />
-                    </div>
+          <div className="mt-10">
+            <div>
+              <form action="#" method="POST" className="space-y-6">
+                <div>
+                  <label htmlFor="email" className="block text-sm/6 font-medium text-gray-900">
+                    Email address
+                  </label>
+                  <div className="mt-2">
+                    <input
+                      id="email"
+                      name="email"
+                      type="email"
+                      required
+                      autoComplete="email"
+                      className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                    />
                   </div>
+                </div>
 
-                  <div>
-                    <label htmlFor="password" className="block text-sm/6 font-medium text-gray-900">
-                      Password
-                    </label>
-                    <div className="mt-2">
-                      <input
-                        id="password"
-                        name="password"
-                        type="password"
-                        required
-                        autoComplete="current-password"
-                        className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
-                      />
-                    </div>
+                <div>
+                  <label htmlFor="password" className="block text-sm/6 font-medium text-gray-900">
+                    Password
+                  </label>
+                  <div className="mt-2">
+                    <input
+                      id="password"
+                      name="password"
+                      type="password"
+                      required
+                      autoComplete="current-password"
+                      className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                    />
                   </div>
+                </div>
 
-                  <div className="flex items-center justify-between">
-                    <div className="flex gap-3">
-                      <div className="flex h-6 shrink-0 items-center">
-                        <div className="group grid size-4 grid-cols-1">
-                          <input
-                            id="remember-me"
-                            name="remember-me"
-                            type="checkbox"
-                            className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                <div className="flex items-center justify-between">
+                  <div className="flex gap-3">
+                    <div className="flex h-6 shrink-0 items-center">
+                      <div className="group grid size-4 grid-cols-1">
+                        <input
+                          id="remember-me"
+                          name="remember-me"
+                          type="checkbox"
+                          className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                        />
+                        <svg
+                          fill="none"
+                          viewBox="0 0 14 14"
+                          className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                        >
+                          <path
+                            d="M3 8L6 11L11 3.5"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="opacity-0 group-has-[:checked]:opacity-100"
                           />
-                          <svg
-                            fill="none"
-                            viewBox="0 0 14 14"
-                            className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
-                          >
-                            <path
-                              d="M3 8L6 11L11 3.5"
-                              strokeWidth={2}
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              className="opacity-0 group-has-[:checked]:opacity-100"
-                            />
-                            <path
-                              d="M3 7H11"
-                              strokeWidth={2}
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              className="opacity-0 group-has-[:indeterminate]:opacity-100"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M3 7H11"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="opacity-0 group-has-[:indeterminate]:opacity-100"
+                          />
+                        </svg>
                       </div>
-                      <label htmlFor="remember-me" className="block text-sm/6 text-gray-900">
-                        Remember me
-                      </label>
-                    </div>
-
-                    <div className="text-sm/6">
-                      <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
-                        Forgot password?
-                      </a>
                     </div>
+                    <label htmlFor="remember-me" className="block text-sm/6 text-gray-900">
+                      Remember me
+                    </label>
                   </div>
 
-                  <div>
-                    <button
-                      type="submit"
-                      className="flex w-full justify-center rounded-md bg-lime-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-lime-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-800"
-                    >
-                      Sign in
-                    </button>
+                  <div className="text-sm/6">
+                    <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
+                      Forgot password?
+                    </a>
                   </div>
-                </form>
-              </div>
+                </div>
 
-              
+                <div>
+                  <button
+                    type="submit"
+                    className="flex w-full justify-center rounded-md bg-lime-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-lime-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-800"
+                  >
+                    Sign in
+                  </button>
+                </div>
+              </form>
             </div>
+
+
           </div>
         </div>
-        <div className="relative hidden w-0 flex-1 lg:block">
-          <img
-            alt=""
-            src="https://images.unsplash.com/photo-1682876747535-a13486e9a726?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-            className="absolute inset-0 size-full object-cover"
-          />
-        </div>
       </div>
+      <div className="relative hidden w-0 flex-1 lg:block">
+        <img
+          alt=""
+          src="https://images.unsplash.com/photo-1682876747535-a13486e9a726?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          className="absolute inset-0 size-full object-cover"
+        />
+      </div>
+    </div>
   );
 } 
\ No newline at end of file