Restyle login page for coaching workspace

frontend/src/pages/login.tsx

@@ -1,273 +1,281 @@
-
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
-import BaseButton from '../components/BaseButton';
+import Link from 'next/link';
-import CardBox from '../components/CardBox';
-import BaseIcon from "../components/BaseIcon";
-import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
-import SectionFullScreen from '../components/SectionFullScreen';
-import LayoutGuest from '../layouts/Guest';
 import { Field, Form, Formik } from 'formik';
-import FormField from '../components/FormField';
+import { mdiEye, mdiEyeOff } from '@mdi/js';
-import FormCheckRadio from '../components/FormCheckRadio';
+import { toast, ToastContainer } from 'react-toastify';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
 import { useRouter } from 'next/router';
+import BaseIcon from '../components/BaseIcon';
+import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 import { findMe, loginUser, resetAction } from '../stores/authSlice';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
-import Link from 'next/link';
+
-import {toast, ToastContainer} from "react-toastify";
+const ui = {
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
+  page: 'bg-[#fffdf9] text-[#19192d]',
+  banner:
+    'bg-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
+  navShell:
+    'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
+  ink: 'text-[#19192d]',
+  muted: 'text-[#72798a]',
+  accent: 'text-[#35b7a5]',
+  gold: 'text-[#b17a1e]',
+  border: 'border-[#19192d]/10',
+  surface: 'bg-white',
+  softSurface: 'bg-[#fbf8f1]',
+  darkPanel: 'bg-[#19192d] text-white',
+  button:
+    'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
+  card: 'rounded-[1.75rem] border border-[#19192d]/10 bg-white shadow-[0_18px_50px_rgba(31,31,50,0.05)]',
+  overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#b17a1e]',
+  heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
+};
+
+type LoginValues = {
+  email: string;
+  password: string;
+  remember: boolean;
+};
+
+function Nav() {
+  return (
+    <header className='sticky top-3 z-50 px-5 pt-5'>
+      <div
+        className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
+      >
+        <Link
+          href='/'
+          className='flex items-center gap-3 text-lg font-semibold tracking-tight'
+        >
+          <span className='flex h-9 w-9 items-center justify-center rounded-xl bg-[#f3fbf8] text-xl font-black text-[#35b7a5]'>
+            C
+          </span>
+          <span className='sr-only'>Coaching SaaS Workspace</span>
+        </Link>
+        <nav
+          className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
+        >
+          <Link href='/how-it-works/'>How it works</Link>
+          <Link href='/client-portal/'>Coachee</Link>
+          <Link href='/#pricing'>Pricing</Link>
+          <Link href='/#trust'>Trust</Link>
+        </nav>
+        <Link
+          href='/register/'
+          className={`rounded-full px-5 py-2.5 text-sm font-semibold ${ui.button}`}
+        >
+          Join waitlist
+        </Link>
+      </div>
+    </header>
+  );
+}
 
 export default function Login() {
   const router = useRouter();
   const dispatch = useAppDispatch();
-  const textColor = useAppSelector((state) => state.style.linkColor);
+  const [showPassword, setShowPassword] = useState(false);
-  const iconsColor = useAppSelector((state) => state.style.iconsColor);
+  const {
-  const notify = (type, msg) => toast(msg, { type });
+    currentUser,
-  const [ illustrationImage, setIllustrationImage ] = useState({
+    isFetching,
-      src: undefined,
+    errorMessage,
-      photographer: undefined,
+    token,
-      photographer_url: undefined,
+    notify: notifyState,
-  })
+  } = useAppSelector((state) => state.auth);
-  const [ illustrationVideo, setIllustrationVideo ] = useState({video_files: []})
+
-    const [contentType, setContentType] = useState('video');
+  const initialValues: LoginValues = {
-    const [contentPosition, setContentPosition] = useState('left');
+    email: 'admin@flatlogic.com',
-    const [showPassword, setShowPassword] = useState(false);
-  const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
-    (state) => state.auth,
-  );
-  const [initialValues, setInitialValues] = React.useState({ email:'admin@flatlogic.com',
     password: 'f76d928f',
-    remember: true })
+    remember: true,
+  };
 
-  const title = 'Coaching SaaS Workspace'
-
-  // Fetch Pexels image/video
-  useEffect( () => {
-      async function fetchData() {
-          const image = await getPexelsImage()
-          const video = await getPexelsVideo()
-          setIllustrationImage(image);
-          setIllustrationVideo(video);
-      }
-      fetchData();
-  }, []);
-  // Fetch user data
   useEffect(() => {
     if (token) {
       dispatch(findMe());
     }
   }, [token, dispatch]);
-  // Redirect to dashboard if user is logged in
+
   useEffect(() => {
     if (currentUser?.id) {
       router.push('/dashboard');
     }
   }, [currentUser?.id, router]);
-  // Show error message if there is one
+
   useEffect(() => {
-    if (errorMessage){
+    if (errorMessage) {
-      notify('error', errorMessage)
+      toast(errorMessage, { type: 'error' });
     }
+  }, [errorMessage]);
 
-  }, [errorMessage])
-  // Show notification if there is one
   useEffect(() => {
-      if (notifyState?.showNotification) {
+    if (notifyState?.showNotification) {
-        notify('success', notifyState?.textNotification)
+      toast(notifyState?.textNotification, { type: 'success' });
-        dispatch(resetAction());
+      dispatch(resetAction());
-      }
+    }
-    }, [notifyState?.showNotification])
+  }, [notifyState?.showNotification, notifyState?.textNotification, dispatch]);
 
-  const togglePasswordVisibility = () => {
+  async function handleSubmit(values: LoginValues) {
-      setShowPassword(!showPassword);
+    const { remember, ...credentials } = values;
-  };
+    await dispatch(loginUser(credentials));
-
+  }
-  const handleSubmit = async (value) => {
-    const {remember, ...rest} = value
-    await dispatch(loginUser(rest));
-  };
-
-  const setLogin = (target: HTMLElement) => {
-      setInitialValues(prev => ({
-          ...prev,
-          email   : target.innerText.trim(),
-          password: target.dataset.password ?? '',
-      }));
-  };
-
-  const imageBlock = (image) => (
-      <div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
-           style={{
-               backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
-               backgroundSize: 'cover',
-               backgroundPosition: 'left center',
-               backgroundRepeat: 'no-repeat',
-           }}>
-          <div className="flex justify-center w-full bg-blue-300/20">
-              <a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
-                  by {image?.photographer} on Pexels</a>
-          </div>
-      </div>
-  )
-
-  const videoBlock = (video) => {
-      if (video?.video_files?.length > 0) {
-          return (
-              <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                  <video
-                      className='absolute top-0 left-0 w-full h-full object-cover'
-                      autoPlay
-                      loop
-                      muted
-                  >
-                      <source src={video.video_files[0]?.link} type='video/mp4'/>
-                      Your browser does not support the video tag.
-                  </video>
-                  <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                      <a
-                          className='text-[8px]'
-                          href={video.user.url}
-                          target='_blank'
-                          rel='noreferrer'
-                      >
-                          Video by {video.user.name} on Pexels
-                      </a>
-                  </div>
-              </div>)
-      }
-  };
 
   return (
-      <div style={contentPosition === 'background' ? {
+    <>
-          backgroundImage: `${
+      <Head>
-              illustrationImage
+        <title>{getPageTitle('Login')}</title>
-                  ? `url(${illustrationImage.src?.original})`
+      </Head>
-                  : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-          }`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'left center',
-          backgroundRepeat: 'no-repeat',
-      } : {}}>
-        <Head>
-          <title>{getPageTitle('Login')}</title>
-        </Head>
 
-        <SectionFullScreen bg='violet'>
+      <main className={`min-h-screen ${ui.page}`}>
-          <div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
+        <div className={`${ui.banner} px-5 py-4 text-center text-lg`}>
-            {contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
+          <p className='text-xs font-bold uppercase tracking-[0.34em]'>
-            {contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
+            Still human
-            <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
+          </p>
-              
+          <p className='mt-2 text-xl font-medium md:text-2xl'>
-                <CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>
+            AI is not a coach. Keep the real relationship at the center.
-                 
+          </p>
-                    <h2 className="text-4xl font-semibold my-4">{title}</h2>
+        </div>
-                    
-                    <div className='flex flex-row text-gray-500 justify-between'>
-                        <div>
-                          
-                            <p className='mb-2'>Use{' '}
-                                <code className={`cursor-pointer ${textColor} `}
-                                      data-password="f76d928f"
-                                      onClick={(e) => setLogin(e.target)}>admin@flatlogic.com</code>{' / '}
-                                <code className={`${textColor}`}>f76d928f</code>{' / '}
-                                to login as Admin</p>
-                            <p>Use <code
-                                className={`cursor-pointer ${textColor} `}
-                                data-password="2226f6026f52"
-                                onClick={(e) => setLogin(e.target)}>client@hello.com</code>{' / '}
-                                <code className={`${textColor}`}>2226f6026f52</code>{' / '}
-                                to login as User</p>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w='w-16'
-                                h='h-16'
-                                size={48}
-                                path={mdiInformation}
-                            />
-                        </div>
-                    </div>
-                </CardBox>
-              
-                <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-                    <Formik
-                        initialValues={initialValues}
-                        enableReinitialize
-                        onSubmit={(values) => handleSubmit(values)}
-                    >
-                        <Form>
-                            <FormField
-                                label='Login'
-                                 help='Please enter your login'>
-                                <Field name='email' />
-                            </FormField>
 
-                            <div className='relative'>
+        <Nav />
-                                <FormField
-                                    label='Password'
-                                     help='Please enter your password'>
-                                    <Field name='password' type={showPassword ? 'text' : 'password'} />
-                                </FormField>
-                                <div
-                                    className='absolute bottom-8 right-0 pr-3 flex items-center cursor-pointer'
-                                    onClick={togglePasswordVisibility}
-                                >
-                                    <BaseIcon
-                                        className='text-gray-500 hover:text-gray-700'
-                                        size={20}
-                                        path={showPassword ? mdiEyeOff : mdiEye}
-                                    />
-                                </div>
-                            </div>
 
-                            <div className={'flex justify-between'}>
+        <section className='mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-5 pb-20 pt-14 lg:grid-cols-[0.95fr_1.05fr] lg:px-8'>
-                                <FormCheckRadio type='checkbox' label='Remember'>
+          <div>
-                                    <Field type='checkbox' name='remember' />
+            <p className={ui.overline}>Welcome back</p>
-                                </FormCheckRadio>
+            <h1
+              className={`${ui.heading} mt-5 text-5xl leading-tight md:text-6xl`}
+            >
+              Return to your coaching workspace.
+            </h1>
+            <p className={`mt-6 max-w-2xl text-lg leading-8 ${ui.muted}`}>
+              Review session memory, prepare for the next call, and keep client
+              commitments moving between sessions.
+            </p>
 
-                                <Link className={`${textColor} text-blue-600`} href={'/forgot'}>
+            <div className='mt-10 grid gap-4 sm:grid-cols-3'>
-                                    Forgot password?
+              {[
-                                </Link>
+                ['Session memory', 'Summaries, themes, and commitments.'],
-                            </div>
+                ['Prep briefs', 'Context before the next conversation.'],
-
+                ['Client portal', 'Approved notes and resources.'],
-                            <BaseDivider />
+              ].map(([title, copy]) => (
-
+                <div key={title} className={`p-5 ${ui.card}`}>
-                            <BaseButtons>
+                  <h2 className='font-semibold'>{title}</h2>
-                                <BaseButton
+                  <p className={`mt-2 text-sm leading-6 ${ui.muted}`}>{copy}</p>
-                                    className={'w-full'}
+                </div>
-                                    type='submit'
+              ))}
-                                    label={isFetching ? 'Loading...' : 'Login'}
-                                    color='info'
-                                    disabled={isFetching}
-                                />
-                            </BaseButtons>
-                            <br />
-                            <p className={'text-center'}>
-                                Don’t have an account yet?{' '}
-                                <Link className={`${textColor}`} href={'/register'}>
-                                    New Account
-                                </Link>
-                            </p>
-                        </Form>
-                    </Formik>
-                </CardBox>
             </div>
           </div>
-        </SectionFullScreen>
+
-        <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
+          <div className='mx-auto w-full max-w-md'>
-          <p className='py-6 text-sm'>© 2026 <span>{title}</span>. © All rights reserved</p>
+            <div className={`${ui.card} p-6 md:p-8`}>
-          <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
+              <div className='mb-8'>
-              Privacy Policy
+                <p className={`${ui.overline} text-xs`}>Sign in</p>
-          </Link>
+                <h2 className='mt-3 text-3xl font-semibold'>
-        </div>
+                  Open your workspace
-        <ToastContainer />
+                </h2>
-      </div>
+                <p className={`mt-2 ${ui.muted}`}>
+                  Use your workspace credentials to continue.
+                </p>
+              </div>
+
+              <Formik
+                initialValues={initialValues}
+                enableReinitialize
+                onSubmit={(values) => handleSubmit(values)}
+              >
+                <Form className='space-y-5'>
+                  <label className='block'>
+                    <span className='mb-2 block text-sm font-semibold'>
+                      Email
+                    </span>
+                    <Field
+                      name='email'
+                      type='email'
+                      className={`w-full rounded-2xl border px-4 py-3 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
+                    />
+                  </label>
+
+                  <label className='block'>
+                    <span className='mb-2 block text-sm font-semibold'>
+                      Password
+                    </span>
+                    <div className='relative'>
+                      <Field
+                        name='password'
+                        type={showPassword ? 'text' : 'password'}
+                        className={`w-full rounded-2xl border px-4 py-3 pr-12 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
+                      />
+                      <button
+                        type='button'
+                        className='absolute right-4 top-1/2 -translate-y-1/2 text-[#72798a] transition hover:text-[#19192d]'
+                        onClick={() => setShowPassword(!showPassword)}
+                        aria-label={
+                          showPassword ? 'Hide password' : 'Show password'
+                        }
+                      >
+                        <BaseIcon
+                          size={20}
+                          path={showPassword ? mdiEyeOff : mdiEye}
+                        />
+                      </button>
+                    </div>
+                  </label>
+
+                  <div className='flex items-center justify-between gap-4 text-sm'>
+                    <label className='flex items-center gap-2'>
+                      <Field
+                        type='checkbox'
+                        name='remember'
+                        className='h-4 w-4 rounded border-[#19192d]/20 text-[#35b7a5]'
+                      />
+                      <span className={ui.muted}>Remember me</span>
+                    </label>
+                    <Link
+                      href='/forgot'
+                      className='font-semibold text-[#248b7e] hover:underline'
+                    >
+                      Forgot password?
+                    </Link>
+                  </div>
+
+                  <button
+                    type='submit'
+                    disabled={isFetching}
+                    className={`w-full rounded-full px-6 py-4 font-semibold disabled:cursor-not-allowed disabled:opacity-60 ${ui.button}`}
+                  >
+                    {isFetching ? 'Opening...' : 'Login'}
+                  </button>
+                </Form>
+              </Formik>
+
+              <p className={`mt-6 text-center text-sm ${ui.muted}`}>
+                Don&apos;t have an account yet?{' '}
+                <Link
+                  href='/register'
+                  className='font-semibold text-[#248b7e] hover:underline'
+                >
+                  Create one
+                </Link>
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <footer className={`border-t px-5 py-10 ${ui.border}`}>
+          <div
+            className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}
+          >
+            <p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
+            <div className='flex gap-5'>
+              <Link href='/privacy-policy/'>Privacy Policy</Link>
+              <Link href='/terms-of-use/'>Terms of Use</Link>
+            </div>
+          </div>
+        </footer>
+      </main>
+
+      <ToastContainer />
+    </>
   );
 }