Restyle registration page for coaching workspace

frontend/src/pages/register.tsx

@@ -1,92 +1,260 @@
 import React from 'react';
 import type { ReactElement } from 'react';
-import { ToastContainer, toast } from 'react-toastify';
 import Head from 'next/head';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
-import LayoutGuest from '../layouts/Guest';
+import Link from 'next/link';
 import { Field, Form, Formik } from 'formik';
-import FormField from '../components/FormField';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
+import { ToastContainer, toast } from 'react-toastify';
 import { useRouter } from 'next/router';
+import axios from 'axios';
+import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 
-import axios from "axios";
+const ui = {
+  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]',
+  border: 'border-[#19192d]/10',
+  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 RegisterValues = {
+  email: string;
+  password: string;
+  confirm: string;
+};
+
+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='/login/'
+          className='rounded-full border border-[#19192d]/10 bg-white px-5 py-2.5 text-sm font-semibold'
+        >
+          Login
+        </Link>
+      </div>
+    </header>
+  );
+}
 
 export default function Register() {
-    const [loading, setLoading] = React.useState(false);
-    const router = useRouter();
-    const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+  const [loading, setLoading] = React.useState(false);
+  const router = useRouter();
 
+  async function handleSubmit(values: RegisterValues) {
+    if (values.password !== values.confirm) {
+      toast('Passwords do not match', {
+        type: 'error',
+        position: 'bottom-center',
+      });
+      return;
+    }
 
-    const handleSubmit = async (value) => {
-        setLoading(true)
-        try {
-            
-            const { data: response } = await axios.post('/auth/signup',value);
-            await router.push('/login')
-            setLoading(false)
-            notify('success', 'Please check your email for verification link')
-        } catch (error) {
-            setLoading(false)
-            console.log('error: ', error)
-            notify('error', 'Something was wrong. Try again')
-        }
-    };
+    setLoading(true);
 
-    return (
-        <>
-            <Head>
-                <title>{getPageTitle('Login')}</title>
-            </Head>
+    try {
+      await axios.post('/auth/signup', {
+        email: values.email,
+        password: values.password,
+      });
+      toast('Please check your email for verification link', {
+        type: 'success',
+        position: 'bottom-center',
+      });
+      await router.push('/login');
+    } catch (error) {
+      console.log('error: ', error);
+      toast('Something was wrong. Try again', {
+        type: 'error',
+        position: 'bottom-center',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
 
-            <SectionFullScreen bg='violet'>
-                <CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
-                    <Formik
-                        initialValues={{
-                            email: '',
-                            password: '',
-                            confirm: ''
-                        }}
-                        onSubmit={(values) => handleSubmit(values)}
-                    >
-                        <Form>
-                         
-                            <FormField label='Email' help='Please enter your email'>
-                                <Field type='email' name='email' />
-                            </FormField>
-                            <FormField label='Password' help='Please enter your password'>
-                                <Field type='password' name='password' />
-                            </FormField>
-                            <FormField label='Confirm Password' help='Please confirm your password'>
-                                <Field type='password' name='confirm' />
-                            </FormField>
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Register')}</title>
+      </Head>
 
-                            <BaseDivider />
+      <main className={`min-h-screen ${ui.page}`}>
+        <div className={`${ui.banner} px-5 py-4 text-center text-lg`}>
+          <p className='text-xs font-bold uppercase tracking-[0.34em]'>
+            Still human
+          </p>
+          <p className='mt-2 text-xl font-medium md:text-2xl'>
+            AI is not a coach. Keep the real relationship at the center.
+          </p>
+        </div>
 
-                            <BaseButtons>
-                                <BaseButton
-                                    type='submit'
-                                    label={loading ? 'Loading...' : 'Register' }
-                                    color='info'
-                                />
-                                <BaseButton
-                                    href={'/login'}
-                                    label={'Login'}
-                                    color='info'
-                                />
-                            </BaseButtons>
-                        </Form>
-                    </Formik>
-                </CardBox>
-            </SectionFullScreen>
-            <ToastContainer />
-        </>
-    );
+        <Nav />
+
+        <section className='mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-5 pb-20 pt-14 lg:grid-cols-[1.05fr_0.95fr] lg:px-8'>
+          <div>
+            <p className={ui.overline}>Start your workspace</p>
+            <h1
+              className={`${ui.heading} mt-5 text-5xl leading-tight md:text-6xl`}
+            >
+              Build a coaching practice that keeps working between sessions.
+            </h1>
+            <p className={`mt-6 max-w-2xl text-lg leading-8 ${ui.muted}`}>
+              Create your account, then shape the workspace around your clients,
+              packages, session memory, resources, and follow-up rhythm.
+            </p>
+
+            <div className='mt-10 grid gap-4 md:grid-cols-2'>
+              {[
+                [
+                  'Coach-approved AI',
+                  'Review every generated note before it is shared.',
+                ],
+                [
+                  'Client-ready portal',
+                  'Give clients a clean place for approved notes and resources.',
+                ],
+                [
+                  'Built for momentum',
+                  'Keep commitments visible between sessions.',
+                ],
+                [
+                  'Practice memory',
+                  'Bring past themes into the next conversation.',
+                ],
+              ].map(([title, copy]) => (
+                <div key={title} className={`p-5 ${ui.card}`}>
+                  <h2 className='font-semibold'>{title}</h2>
+                  <p className={`mt-2 text-sm leading-6 ${ui.muted}`}>{copy}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className='mx-auto w-full max-w-md'>
+            <div className={`${ui.card} p-6 md:p-8`}>
+              <div className='mb-8'>
+                <p className={`${ui.overline} text-xs`}>Create account</p>
+                <h2 className='mt-3 text-3xl font-semibold'>
+                  Open your coaching workspace
+                </h2>
+                <p className={`mt-2 ${ui.muted}`}>
+                  Start with one client and test the full coaching loop.
+                </p>
+              </div>
+
+              <Formik
+                initialValues={{
+                  email: '',
+                  password: '',
+                  confirm: '',
+                }}
+                onSubmit={(values) => handleSubmit(values)}
+              >
+                <Form className='space-y-5'>
+                  <label className='block'>
+                    <span className='mb-2 block text-sm font-semibold'>
+                      Email
+                    </span>
+                    <Field
+                      type='email'
+                      name='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>
+                    <Field
+                      type='password'
+                      name='password'
+                      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'>
+                      Confirm password
+                    </span>
+                    <Field
+                      type='password'
+                      name='confirm'
+                      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>
+
+                  <button
+                    type='submit'
+                    disabled={loading}
+                    className={`w-full rounded-full px-6 py-4 font-semibold disabled:cursor-not-allowed disabled:opacity-60 ${ui.button}`}
+                  >
+                    {loading ? 'Creating...' : 'Create account'}
+                  </button>
+                </Form>
+              </Formik>
+
+              <p className={`mt-6 text-center text-sm ${ui.muted}`}>
+                Already have an account?{' '}
+                <Link
+                  href='/login'
+                  className='font-semibold text-[#248b7e] hover:underline'
+                >
+                  Login
+                </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 />
+    </>
+  );
 }
 
 Register.getLayout = function getLayout(page: ReactElement) {
-    return <LayoutGuest>{page}</LayoutGuest>;
+  return <LayoutGuest>{page}</LayoutGuest>;
 };