From 87a75dc0570115c61a97ffa4ede974232bedc0c7 Mon Sep 17 00:00:00 2001
From: Vince Loewe <vince@lunary.ai>
Date: Fri, 4 Oct 2024 19:04:31 +0100
Subject: [PATCH 1/3] improve design

---
 packages/backend/src/jobs/resetUsage.ts       |   2 +-
 .../components/blocks/SocialProof.tsx         |   4 +-
 packages/frontend/components/layout/index.tsx |   4 +-
 packages/frontend/pages/login.tsx             | 171 +++--
 .../frontend/pages/request-password-reset.tsx |  80 +--
 packages/frontend/pages/reset-password.tsx    |  74 ++-
 packages/frontend/pages/signup.tsx            | 584 ++++++++----------
 packages/frontend/styles/globals.css          |  41 ++
 packages/frontend/utils/features.ts           |   5 +-
 9 files changed, 487 insertions(+), 478 deletions(-)

diff --git a/packages/backend/src/jobs/resetUsage.ts b/packages/backend/src/jobs/resetUsage.ts
index bd61b156..3333fecb 100644
--- a/packages/backend/src/jobs/resetUsage.ts
+++ b/packages/backend/src/jobs/resetUsage.ts
@@ -68,7 +68,7 @@ RETURNING *;`;
 
 // reset playground allowance
 async function resetPlaygroundAllowance() {
-  await sql`UPDATE "public"."org" o SET play_allowance = 3 WHERE o.plan = 'free';`;
+  await sql`UPDATE "public"."org" o SET play_allowance = 10 WHERE o.plan = 'free';`;
   await sql`UPDATE "public"."org" o SET play_allowance = 1000 WHERE o.plan = 'pro' OR o.plan = 'team';`;
   await sql`UPDATE "public"."org" o SET play_allowance = 1000 WHERE o.plan = 'unlimited' OR o.plan = 'custom';`;
 }
diff --git a/packages/frontend/components/blocks/SocialProof.tsx b/packages/frontend/components/blocks/SocialProof.tsx
index 23a2a8da..08c22834 100644
--- a/packages/frontend/components/blocks/SocialProof.tsx
+++ b/packages/frontend/components/blocks/SocialProof.tsx
@@ -22,9 +22,9 @@ export default function SocialProof() {
             span
             fw="bolder"
           >
-            2500+
+            4500+
           </Text>{" "}
-          AI devs build better apps
+          GenAI devs build better apps
         </Text>
       </Stack>
     </Group>
diff --git a/packages/frontend/components/layout/index.tsx b/packages/frontend/components/layout/index.tsx
index 30cb3243..d16732c4 100644
--- a/packages/frontend/components/layout/index.tsx
+++ b/packages/frontend/components/layout/index.tsx
@@ -30,6 +30,8 @@ export default function Layout({ children }: { children: ReactNode }) {
     "/reset-password",
   ].find((path) => router.pathname.startsWith(path));
 
+  const isSignupPage = router.pathname.startsWith("/signup");
+
   const isSignupLastStep =
     router.pathname === "/signup" && router.query.step === "3";
 
@@ -74,7 +76,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 
   const isPromptPage = router.pathname.startsWith("/prompt");
   const isTracePage = router.pathname.startsWith("/traces");
-  const disablePagePadding = isPromptPage || isTracePage;
+  const disablePagePadding = isPromptPage || isTracePage || isAuthPage;
 
   useEffect(() => {
     if (user) {
diff --git a/packages/frontend/pages/login.tsx b/packages/frontend/pages/login.tsx
index 16ff8f79..5f9c1c22 100644
--- a/packages/frontend/pages/login.tsx
+++ b/packages/frontend/pages/login.tsx
@@ -1,5 +1,6 @@
 import {
   Anchor,
+  Box,
   Button,
   Container,
   Paper,
@@ -143,102 +144,100 @@ function LoginPage() {
     const email = router.query.email
       ? decodeURIComponent(router.query.email as string)
       : "";
-    console.log(form.values.password);
     if (email && !form.values.email) {
-      console.log("here");
       form.setFieldValue("email", email);
       determineAuthMethod(email);
-      console.log(step);
     }
   }, [router.query.email]);
 
   return (
-    <Container pt="60" size="600">
-      <NextSeo title="Login" />
-      <Stack align="center" gap="50">
-        <Stack align="center">
-          <IconAnalyze color="#206dce" size="60" />
-          <Title order={2} fw="700" size="40" ta="center">
-            Welcome back
-          </Title>
-        </Stack>
-        <Paper radius="md" p="xl" withBorder miw="350">
-          <Text size="lg" mb="xl" fw="700">
-            Sign In
-          </Text>
-
-          {step !== "saml" && (
-            <form
-              onSubmit={
-                step === "email"
-                  ? (e) => {
-                      determineAuthMethod(form.values.email);
-                      e.preventDefault();
+    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
+      <Container size="600" pt="60">
+        <NextSeo title="Login" />
+        <Stack align="center" gap="50">
+          <Stack align="center">
+            <IconAnalyze color="#4f87ff" size="60" />
+          </Stack>
+          <Paper radius="md" p="xl" miw="350" shadow="md">
+            <Text size="xl" mb="lg" fw="700" ta="center">
+              Welcome back!
+            </Text>
+
+            {step !== "saml" && (
+              <form
+                onSubmit={
+                  step === "email"
+                    ? (e) => {
+                        determineAuthMethod(form.values.email);
+                        e.preventDefault();
+                      }
+                    : form.onSubmit(handleLoginWithPassword)
+                }
+              >
+                <Stack>
+                  <TextInput
+                    leftSection={<IconAt size="16" />}
+                    label="Email"
+                    type="email"
+                    autoComplete="email"
+                    value={form.values.email}
+                    onChange={(event) =>
+                      form.setFieldValue("email", event.currentTarget.value)
+                    }
+                    error={form.errors.email}
+                    placeholder="Your email"
+                  />
+                  <TextInput
+                    type="password"
+                    opacity={step === "email" ? 0 : 1}
+                    h={step === "email" ? 0 : "auto"}
+                    autoComplete="current-password"
+                    label="Password"
+                    value={form.values.password}
+                    onChange={(event) =>
+                      form.setFieldValue("password", event.currentTarget.value)
                     }
-                  : form.onSubmit(handleLoginWithPassword)
-              }
-            >
-              <Stack>
-                <TextInput
-                  leftSection={<IconAt size="16" />}
-                  label="Email"
-                  type="email"
-                  autoComplete="email"
-                  value={form.values.email}
-                  onChange={(event) =>
-                    form.setFieldValue("email", event.currentTarget.value)
-                  }
-                  error={form.errors.email}
-                  placeholder="Your email"
-                />
-                <TextInput
-                  type="password"
-                  opacity={step === "email" ? 0 : 1}
-                  h={step === "email" ? 0 : "auto"}
-                  autoComplete="current-password"
-                  label="Password"
-                  value={form.values.password}
-                  onChange={(event) =>
-                    form.setFieldValue("password", event.currentTarget.value)
-                  }
-                  error={form.errors.password}
-                  placeholder="Your password"
-                />
-                <Button
-                  mt={step === "email" ? 0 : "md"}
-                  type="submit"
-                  fullWidth
-                  loading={loading}
-                  data-testid="continue-button"
-                >
-                  {step === "email" ? "Continue" : "Login"}
-                </Button>
-              </Stack>
-            </form>
-          )}
-
-          {step === "saml" && (
-            <p>
-              Redirecting to your SSO login.
-              <br />
-              If you are not redirected in 5s,{" "}
-              <Anchor href={ssoURI || ""}>click here</Anchor>.
-            </p>
-          )}
-
-          <Text size="sm" mt="sm" style={{ textAlign: "center" }}>
-            {`Don't have an account? `}
-            <Anchor href="/signup">Sign Up</Anchor>
-          </Text>
-
-          {step === "password" && (
+                    error={form.errors.password}
+                    placeholder="Your password"
+                  />
+                  <Button
+                    mt={step === "email" ? 0 : "md"}
+                    type="submit"
+                    fullWidth
+                    className="CtaBtn"
+                    size="md"
+                    loading={loading}
+                    data-testid="continue-button"
+                  >
+                    {step === "email" ? "Continue" : "Login"}
+                  </Button>
+                </Stack>
+              </form>
+            )}
+
+            {step === "saml" && (
+              <p>
+                Redirecting to your SSO login.
+                <br />
+                If you are not redirected in 5s,{" "}
+                <Anchor href={ssoURI || ""}>click here</Anchor>.
+              </p>
+            )}
+
             <Text size="sm" mt="sm" style={{ textAlign: "center" }}>
-              <Anchor href="/request-password-reset">Forgot password?</Anchor>
+              {`Don't have an account? `}
+              <Anchor href="/signup">Sign Up</Anchor>
             </Text>
-          )}
-        </Paper>
-      </Stack>
-    </Container>
+
+            {step === "password" && (
+              <Text size="sm" mt="sm" style={{ textAlign: "center" }}>
+                <Anchor href="/request-password-reset">Forgot password?</Anchor>
+              </Text>
+            )}
+          </Paper>
+        </Stack>
+      </Container>
+    </Box>
   );
 }
 export default LoginPage;
diff --git a/packages/frontend/pages/request-password-reset.tsx b/packages/frontend/pages/request-password-reset.tsx
index 7361ddbb..e4f6dda5 100644
--- a/packages/frontend/pages/request-password-reset.tsx
+++ b/packages/frontend/pages/request-password-reset.tsx
@@ -1,11 +1,11 @@
 import {
+  Box,
   Button,
   Container,
   Paper,
   Stack,
   Text,
   TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
@@ -53,42 +53,52 @@ export default function PasswordReset() {
   }
 
   return (
-    <Container py={100} size={600}>
-      <NextSeo title="Login" />
-      <Stack align="center" gap={50}>
-        <Stack align="center">
-          <IconAnalyze color={"#206dce"} size={60} />
-          <Title order={2} fw={700} size={40} ta="center">
-            Forgot password
-          </Title>
-        </Stack>
+    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
+      <Container py={100} size={600}>
+        <NextSeo title="Login" />
+        <Stack align="center" gap={50}>
+          <Stack align="center">
+            <IconAnalyze color={"#4f87ff"} size={60} />
+          </Stack>
+
+          <Paper radius="md" p="xl" maw={400} miw={350} shadow="md">
+            <Text size="lg" mb="lg" fw={500} ta="center">
+              Password Recovery
+            </Text>
 
-        <Paper radius="md" p="xl" withBorder miw={350}>
-          <Text size="lg" mb="xl" fw={500}>
-            Request reset link
-          </Text>
+            <Text size="sm" mb="lg" c="gray.8">
+              Enter your email address and if it is registered, we will send you
+              a link to reset your password.
+            </Text>
 
-          <form onSubmit={form.onSubmit(handlePasswordReset)}>
-            <Stack>
-              <TextInput
-                leftSection={<IconAt size="16" />}
-                label="Email"
-                type="email"
-                value={form.values.email}
-                onChange={(event) =>
-                  form.setFieldValue("email", event.currentTarget.value)
-                }
-                error={form.errors.email && "Invalid email"}
-                placeholder="Your email"
-              />
+            <form onSubmit={form.onSubmit(handlePasswordReset)}>
+              <Stack gap="lg">
+                <TextInput
+                  leftSection={<IconAt size="16" />}
+                  label="Email"
+                  type="email"
+                  value={form.values.email}
+                  onChange={(event) =>
+                    form.setFieldValue("email", event.currentTarget.value)
+                  }
+                  error={form.errors.email && "Invalid email"}
+                  placeholder="Your email"
+                />
 
-              <Button mt="md" type="submit" fullWidth loading={loading}>
-                Submit
-              </Button>
-            </Stack>
-          </form>
-        </Paper>
-      </Stack>
-    </Container>
+                <Button
+                  className="CtaBtn"
+                  type="submit"
+                  fullWidth
+                  size="md"
+                  loading={loading}
+                >
+                  Request reset link
+                </Button>
+              </Stack>
+            </form>
+          </Paper>
+        </Stack>
+      </Container>
+    </Box>
   );
 }
diff --git a/packages/frontend/pages/reset-password.tsx b/packages/frontend/pages/reset-password.tsx
index 13b4f127..59e5a049 100644
--- a/packages/frontend/pages/reset-password.tsx
+++ b/packages/frontend/pages/reset-password.tsx
@@ -1,10 +1,11 @@
 import {
+  Box,
   Button,
   Container,
   Paper,
   PasswordInput,
   Stack,
-  Title,
+  Text,
 } from "@mantine/core";
 
 import { useForm } from "@mantine/form";
@@ -60,37 +61,46 @@ export default function UpdatePassword() {
   };
 
   return (
-    <Container py={100} size={600}>
-      <NextSeo title="Reset password" />
-      <Stack align="center" gap={50}>
-        <Stack align="center">
-          <IconAnalyze color={"#206dce"} size={60} />
-          <Title order={2} fw={700} size={40} ta="center">
-            Reset password
-          </Title>
-        </Stack>
-        <Paper radius="md" p="xl" withBorder miw={350}>
-          <form onSubmit={form.onSubmit(handlePasswordReset)}>
-            <Stack>
-              <PasswordInput
-                label="New Password"
-                type="password"
-                autoComplete="new-password"
-                value={form.values.password}
-                onChange={(event) =>
-                  form.setFieldValue("password", event.currentTarget.value)
-                }
-                error={form.errors.password && "Invalid password"}
-                placeholder="Your new password"
-              />
+    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
+      <Container py={100} size={600}>
+        <NextSeo title="Reset password" />
+        <Stack align="center" gap={50}>
+          <Stack align="center">
+            <IconAnalyze color={"#4f87ff"} size={60} />
+          </Stack>
+          <Paper radius="md" p="xl" miw={350} shadow="md">
+            <Text size="lg" mb="lg" fw="700" ta="center">
+              Reset your password
+            </Text>
+            <form onSubmit={form.onSubmit(handlePasswordReset)}>
+              <Stack>
+                <PasswordInput
+                  label="New Password"
+                  type="password"
+                  autoComplete="new-password"
+                  value={form.values.password}
+                  onChange={(event) =>
+                    form.setFieldValue("password", event.currentTarget.value)
+                  }
+                  error={form.errors.password && "Invalid password"}
+                  placeholder="Your new password"
+                />
 
-              <Button mt="md" type="submit" fullWidth loading={loading}>
-                Submit
-              </Button>
-            </Stack>
-          </form>
-        </Paper>
-      </Stack>
-    </Container>
+                <Button
+                  className="CtaBtn"
+                  mt="md"
+                  size="md"
+                  type="submit"
+                  fullWidth
+                  loading={loading}
+                >
+                  Confirm
+                </Button>
+              </Stack>
+            </form>
+          </Paper>
+        </Stack>
+      </Container>
+    </Box>
   );
 }
diff --git a/packages/frontend/pages/signup.tsx b/packages/frontend/pages/signup.tsx
index 3900dd99..e86f4300 100644
--- a/packages/frontend/pages/signup.tsx
+++ b/packages/frontend/pages/signup.tsx
@@ -1,18 +1,18 @@
-import Router, { useRouter } from "next/router";
-import React, { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/router";
+import { useMemo, useState } from "react";
 
 import {
   Alert,
   Anchor,
   Box,
   Button,
+  Center,
   Container,
   Grid,
   Group,
   List,
   Paper,
   PasswordInput,
-  Radio,
   Select,
   Stack,
   Text,
@@ -44,7 +44,6 @@ import { fetcher } from "@/utils/fetcher";
 import { NextSeo } from "next-seo";
 import { useAuth } from "@/utils/auth";
 import config from "@/utils/config";
-import Script from "next/script";
 
 function getRandomizedChoices() {
   const choices = [
@@ -55,6 +54,8 @@ function getRandomizedChoices() {
     { label: "Hacker News", value: "hackernews" },
     { label: "Friend", value: "friend" },
     { label: "LangFlow", value: "langflow" },
+    { label: "Flowise", value: "flowise" },
+    { label: "GitHub", value: "github" },
     { label: "Other", value: "other" },
   ];
 
@@ -79,7 +80,7 @@ function SignupPage() {
       name: "",
       projectName: "Project #1",
       orgName: "",
-      employeeCount: "",
+      // employeeCount: "",
       whereFindUs: "",
       password: "",
     },
@@ -92,8 +93,8 @@ function SignupPage() {
         val.length <= 3 ? "Can you pick something longer?" : null,
       orgName: (val) =>
         val.length <= 3 ? "Can you pick something longer?" : null,
-      employeeCount: (val) =>
-        val.length <= 1 ? "Please select a value" : null,
+      // employeeCount: (val) =>
+      //   val.length <= 1 ? "Please select a value" : null,
       password: (val) => {
         if (val.length < 6) {
           return "Password must be at least 6 characters";
@@ -109,7 +110,7 @@ function SignupPage() {
     name,
     projectName,
     orgName,
-    employeeCount,
+    // employeeCount,
     whereFindUs,
   }: {
     email: string;
@@ -117,7 +118,7 @@ function SignupPage() {
     name: string;
     projectName: string;
     orgName: string;
-    employeeCount: string;
+    // employeeCount: string;
     whereFindUs: string;
   }) {
     setLoading(true);
@@ -136,7 +137,7 @@ function SignupPage() {
           name,
           projectName,
           orgName,
-          employeeCount,
+          // employeeCount,
           whereFindUs,
           signupMethod: "signup",
         },
@@ -154,7 +155,7 @@ function SignupPage() {
         projectName,
         orgName,
         whereFindUs,
-        employeeCount,
+        // employeeCount,
       });
 
       if (!config.IS_SELF_HOSTED) {
@@ -200,141 +201,114 @@ function SignupPage() {
     router.push(router);
   }
 
-  useEffect(() => {
-    if (step === 3) {
-      (async function () {
-        window.SavvyCal =
-          window.SavvyCal ||
-          function () {
-            (SavvyCal.q = SavvyCal.q || []).push(arguments);
-          };
-        SavvyCal("init");
-        SavvyCal("inline", {
-          link: "vince/chat",
-          selector: "#booking-page",
-          email: form.values.email,
-          displayName: form.values.name,
-          hideAvatar: true,
-          hideBanner: true,
-          theme: "os",
-        });
-      })();
-    }
-  }, [step]);
-
   const isBigCompany = form.values.employeeCount !== "1-5";
 
   return (
-    <Container size={step === 3 ? 1200 : 800} mih="60%">
-      <NextSeo title="Sign Up" />
-
-      <Script async src="https://embed.savvycal.com/v1/embed.js" />
-
-      <Stack align="center" gap={50}>
-        {step < 3 && (
-          <>
-            <Stack align="center">
-              <IconAnalyze color={"#206dce"} size={60} />
-              <Title order={2} fw={700} size={40} ta="center">
-                lunary cloud
-              </Title>
-            </Stack>
-            <Grid gutter={50} align="center" mb="sm">
-              <Grid.Col span={{ base: 12, md: 6 }}>
-                <Paper radius="md" p="xl" withBorder>
-                  <form onSubmit={form.onSubmit(handleSignup)}>
-                    <Stack gap="lg">
-                      {step === 1 && (
-                        <>
-                          <Title order={2} fw={700} ta="center">
-                            Get Started
-                          </Title>
-                          <TextInput
-                            leftSection={<IconAt size="16" />}
-                            label="Email"
-                            type="email"
-                            autoComplete="email"
-                            error={form.errors.email}
-                            placeholder="Your email"
-                            {...form.getInputProps("email")}
-                          />
-
-                          <TextInput
-                            label="Full Name"
-                            autoComplete="name"
-                            description="Only used to address you properly."
-                            leftSection={<IconUser size="16" />}
-                            placeholder="Your full name"
-                            error={form.errors.name}
-                            {...form.getInputProps("name")}
-                            onChange={(e) => {
-                              form.setFieldValue("name", e.target.value);
-                              form.setFieldValue(
-                                "orgName",
-                                e.target.value + "'s Org",
-                              );
-                            }}
-                          />
-
-                          <PasswordInput
-                            label="Password"
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter") {
-                                nextStep();
-                              }
-                            }}
-                            error={form.errors.password}
-                            placeholder="Your password"
-                            {...form.getInputProps("password")}
-                          />
-
-                          <Button
-                            size="md"
-                            mt="md"
-                            onClick={nextStep}
-                            fullWidth
-                            loading={loading}
-                          >
-                            {`Continue →`}
-                          </Button>
-
-                          <Text size="sm" style={{ textAlign: "center" }}>
-                            {`Already have an account? `}
-                            <Anchor href="/login">Log In</Anchor>
-                          </Text>
-                        </>
-                      )}
-
-                      {step === 2 && (
-                        <>
-                          <Title order={2} fw={700} ta="center">
-                            Create an Organization
-                          </Title>
-
-                          <TextInput
-                            label="Organization Name"
-                            description="E.g. your company name"
-                            leftSection={<IconBuildingStore size="16" />}
-                            placeholder="Organization name"
-                            error={
-                              form.errors.orgName && "This field is required"
-                            }
-                            {...form.getInputProps("orgName")}
-                          />
-
-                          <TextInput
-                            label="Project Name"
-                            description="Can be changed later"
-                            leftSection={<IconFolderBolt size="16" />}
-                            placeholder="Your project name"
-                            error={
-                              form.errors.projectName &&
-                              "This field is required"
-                            }
-                            {...form.getInputProps("projectName")}
-                          />
-
-                          <Radio.Group
+    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
+      <Box style={{ position: "absolute", top: 10, left: 10 }}>
+        <IconAnalyze color={"#5468ff"} size={40} />
+      </Box>
+      <Center h="100vh">
+        <Container size={step === 1 ? 1200 : 800} mb={120}>
+          <NextSeo title="Sign Up" />
+
+          <Stack align="center" gap={50}>
+            {step < 3 && (
+              <>
+                <Grid gutter={50} align="center">
+                  <Grid.Col span={{ base: 12, md: step === 1 ? 6 : 12 }}>
+                    <Paper miw={350} radius="md" p="xl" shadow="md">
+                      <form onSubmit={form.onSubmit(handleSignup)}>
+                        <Stack gap="lg">
+                          {step === 1 && (
+                            <>
+                              <Title order={2} fw={700} ta="center">
+                                Get Started
+                              </Title>
+                              <TextInput
+                                leftSection={<IconAt size="16" />}
+                                label="Email"
+                                type="email"
+                                autoComplete="email"
+                                error={form.errors.email}
+                                placeholder="Your email"
+                                {...form.getInputProps("email")}
+                              />
+
+                              <TextInput
+                                label="Name"
+                                autoComplete="name"
+                                leftSection={<IconUser size="16" />}
+                                placeholder="Your full name"
+                                error={form.errors.name}
+                                {...form.getInputProps("name")}
+                                onChange={(e) => {
+                                  form.setFieldValue("name", e.target.value);
+                                  form.setFieldValue(
+                                    "orgName",
+                                    e.target.value + "'s Org",
+                                  );
+                                }}
+                              />
+
+                              <PasswordInput
+                                label="Password"
+                                onKeyDown={(e) => {
+                                  if (e.key === "Enter") {
+                                    nextStep();
+                                  }
+                                }}
+                                error={form.errors.password}
+                                placeholder="Pick a  password"
+                                {...form.getInputProps("password")}
+                              />
+
+                              <Button
+                                size="md"
+                                mt="md"
+                                radius="md"
+                                className="CtaBtn"
+                                onClick={nextStep}
+                                fullWidth
+                                loading={loading}
+                              >
+                                {`Create Account`}
+                              </Button>
+
+                              <Text size="sm" style={{ textAlign: "center" }}>
+                                {`Already have an account? `}
+                                <Anchor href="/login">Log In</Anchor>
+                              </Text>
+                            </>
+                          )}
+
+                          {step === 2 && (
+                            <>
+                              <TextInput
+                                label="Organization Name"
+                                description="E.g. your company name"
+                                leftSection={<IconBuildingStore size="16" />}
+                                placeholder="Organization name"
+                                error={
+                                  form.errors.orgName &&
+                                  "This field is required"
+                                }
+                                {...form.getInputProps("orgName")}
+                              />
+
+                              <TextInput
+                                label="Project Name"
+                                description="Can be changed later"
+                                leftSection={<IconFolderBolt size="16" />}
+                                placeholder="Your project name"
+                                error={
+                                  form.errors.projectName &&
+                                  "This field is required"
+                                }
+                                {...form.getInputProps("projectName")}
+                              />
+
+                              {/* <Radio.Group
                             label="Company Size"
                             error={
                               form.errors.employeeCount &&
@@ -348,145 +322,115 @@ function SignupPage() {
                               <Radio value="50-99" label="50-99" />
                               <Radio value="100+" label="100+" />
                             </Group>
-                          </Radio.Group>
-
-                          <Select
-                            label="Where did you find us?"
-                            description="This helps us focus our efforts :)"
-                            placeholder="Select an option"
-                            data={choices}
-                            {...form.getInputProps("whereFindUs")}
-                          />
-
-                          <Stack gap="xs">
-                            <Button
-                              size="md"
-                              mt="md"
-                              type="submit"
-                              fullWidth
-                              loading={loading}
-                            >
-                              {`Create account`}
-                            </Button>
-
-                            <Button
-                              size="sm"
-                              onClick={() => {
-                                router.query.step = String(1);
-                                router.push(router);
-                                setStep(1);
-                              }}
-                              fullWidth
-                              variant="transparent"
-                              color="dimmed"
-                            >
-                              {`← Go back`}
-                            </Button>
-                          </Stack>
-                        </>
-                      )}
-                    </Stack>
-                  </form>
-                </Paper>
-              </Grid.Col>
-
-              <Grid.Col span={{ base: 12, md: 6 }}>
-                <Box>
-                  <List
-                    spacing="xl"
-                    size="md"
-                    icon={
-                      <ThemeIcon
-                        variant="light"
-                        color="teal"
-                        size={24}
-                        radius="xl"
-                      >
-                        <IconCircleCheck size="16" />
-                      </ThemeIcon>
-                    }
-                  >
-                    <List.Item>
-                      <Text fw="bold">Free usage every month</Text>
-                      <Text>
-                        1K free events per day. Forever.
-                        <br />
-                        No credit card required.
-                      </Text>
-                    </List.Item>
-                    <List.Item>
-                      <Text fw="bold">Collect data immediately</Text>
-                      <Text>
-                        Integrate with dev-friendly SDKs, with native support
-                        for LangChain and OpenAI.
-                      </Text>
-                    </List.Item>
-                    <List.Item>
-                      <Text fw="bold">No config required</Text>
-                      <Text>Get insights without a complicated setup.</Text>
-                    </List.Item>
-                  </List>
-                </Box>
-              </Grid.Col>
-            </Grid>
-            <SocialProof />
-          </>
-        )}
-
-        {step === 3 && (
-          <>
-            {typeof window !== "undefined" && !isBigCompany && (
-              <Confetti
-                recycle={false}
-                numberOfPieces={500}
-                gravity={0.3}
-                width={window.innerWidth}
-                height={window.innerHeight}
-              />
+                          </Radio.Group> */}
+
+                              <Select
+                                searchable
+                                label="Where did you find us?"
+                                description="This helps us focus our efforts :)"
+                                placeholder="Select an option"
+                                data={choices}
+                                {...form.getInputProps("whereFindUs")}
+                              />
+
+                              <Stack gap="xs">
+                                <Button
+                                  size="md"
+                                  mt="md"
+                                  className="CtaBtn"
+                                  type="submit"
+                                  fullWidth
+                                  loading={loading}
+                                >
+                                  {`Finish`}
+                                </Button>
+
+                                <Button
+                                  size="sm"
+                                  onClick={() => {
+                                    router.query.step = String(1);
+                                    router.push(router);
+                                    setStep(1);
+                                  }}
+                                  fullWidth
+                                  variant="transparent"
+                                  color="dimmed"
+                                >
+                                  {`← Go back`}
+                                </Button>
+                              </Stack>
+                            </>
+                          )}
+                        </Stack>
+                      </form>
+                    </Paper>
+                  </Grid.Col>
+
+                  {step === 1 && (
+                    <Grid.Col span={{ base: 12, md: 6 }}>
+                      <Stack gap={50}>
+                        <Box>
+                          <List
+                            spacing="xl"
+                            size="md"
+                            icon={
+                              <ThemeIcon
+                                variant="light"
+                                color="teal"
+                                size={24}
+                                radius="xl"
+                              >
+                                <IconCircleCheck size="16" />
+                              </ThemeIcon>
+                            }
+                          >
+                            <List.Item>
+                              <Text fw="bold">No credit card required.</Text>
+                              <Text size="sm" opacity={0.8}>
+                                1K free events per day. Forever.
+                              </Text>
+                            </List.Item>
+                            <List.Item>
+                              <Text fw="bold">Collect data immediately</Text>
+                              <Text size="sm" opacity={0.8}>
+                                10+ integrations like LangChain and OpenAI.
+                              </Text>
+                            </List.Item>
+                            <List.Item>
+                              <Text fw="bold">Improve your chatbot</Text>
+                              <Text size="sm" opacity={0.8}>
+                                Get insights without a complicated setup.
+                              </Text>
+                            </List.Item>
+                          </List>
+                        </Box>
+                        <SocialProof />
+                      </Stack>
+                    </Grid.Col>
+                  )}
+                </Grid>
+              </>
             )}
 
-            <Stack align="center" w={800}>
-              {/* <IconAnalyze color={"#206dce"} size={60} /> */}
-
-              <Title order={2} fw={700} size={40} ta="center">
-                {`You're all set 🎉`}
-              </Title>
-
-              {isBigCompany ? (
-                <>
-                  <Text size="xl" ta="center" my="xl">
-                    Are you free in the next days for a quick call?
-                    <br />
-                    We'd love to understand your use-case and help you directly
-                    with the integration.
-                  </Text>
-                  {/* <Cal
-                    // namespace="lunary"
-                    calLink="vincelwt/lunary"
-                    className="calcom-embed"
-                    config={{
-                      hideEventTypeDetails: "true",
-                      layout: "month_view",
-                      name: form.values.name,
-                      email: form.values.email,
-                    }}
-                  /> */}
-                  <div id="booking-page" />
+            {step === 3 && (
+              <>
+                {typeof window !== "undefined" && !isBigCompany && (
+                  <Confetti
+                    recycle={false}
+                    numberOfPieces={500}
+                    gravity={0.3}
+                    width={window.innerWidth}
+                    height={window.innerHeight}
+                  />
+                )}
+
+                <Stack align="center" w={800}>
+                  {/* <IconAnalyze color={"#206dce"} size={60} /> */}
+
+                  <Title order={2} fw={700} size={40} ta="center">
+                    {`You're all set 🎉`}
+                  </Title>
 
-                  <Button
-                    onClick={() => {
-                      // use this to refresh properly
-                      window.location.href = "/";
-                    }}
-                    variant="default"
-                    rightSection={<IconArrowRight size={16} />}
-                    size="md"
-                  >
-                    Skip to Dashboard
-                  </Button>
-                </>
-              ) : (
-                <>
                   <Alert fw={500} icon={<IconMail />} my="lg">
                     <Text size="md" fw={500}>
                       Check your emails for the confirmation link.
@@ -505,46 +449,48 @@ function SignupPage() {
                     Open Dashboard
                   </Button>
 
-                  <Text size="lg">
-                    {`Want to say hi? We'd love to talk to you.`}
-                  </Text>
-
-                  <Group>
-                    {!config.IS_SELF_HOSTED && (
-                      <Button
-                        variant="outline"
-                        onClick={() => {
-                          $crisp.push(["do", "chat:open"]);
-                        }}
-                        rightSection={<IconMessageBolt size={18} />}
-                      >
-                        Chat
-                      </Button>
-                    )}
-
-                    <Button
-                      variant="outline"
-                      color="teal.8"
-                      component="a"
-                      href="mailto:hello@lunary.ai"
-                      rightSection={<IconMail size={18} />}
-                    >
-                      Email
-                    </Button>
-                  </Group>
-                </>
-              )}
-            </Stack>
-          </>
-        )}
-      </Stack>
-      <style jsx global>{`
-        #booking-page {
-          width: 1200px;
-          max-width: 90vw;
-        }
-      `}</style>
-    </Container>
+                  {!config.IS_SELF_HOSTED && (
+                    <>
+                      <Text size="lg">
+                        {`Want to say hi? We'd love to talk to you.`}
+                      </Text>
+
+                      <Group>
+                        <Button
+                          variant="outline"
+                          onClick={() => {
+                            $crisp.push(["do", "chat:open"]);
+                          }}
+                          rightSection={<IconMessageBolt size={18} />}
+                        >
+                          Chat
+                        </Button>
+
+                        <Button
+                          variant="outline"
+                          color="teal.8"
+                          component="a"
+                          href="mailto:hello@lunary.ai"
+                          rightSection={<IconMail size={18} />}
+                        >
+                          Email
+                        </Button>
+                      </Group>
+                    </>
+                  )}
+                </Stack>
+              </>
+            )}
+          </Stack>
+          <style jsx global>{`
+            #booking-page {
+              width: 1200px;
+              max-width: 90vw;
+            }
+          `}</style>
+        </Container>
+      </Center>
+    </Box>
   );
 }
 
diff --git a/packages/frontend/styles/globals.css b/packages/frontend/styles/globals.css
index aa71366e..a546613e 100644
--- a/packages/frontend/styles/globals.css
+++ b/packages/frontend/styles/globals.css
@@ -41,3 +41,44 @@ span.limited,
 .mantine-Badge-root {
   max-width: 100%;
 }
+
+/* CSS */
+.CtaBtn {
+  align-items: center;
+  appearance: none;
+  background-image: radial-gradient(
+    100% 100% at 100% 0,
+    #5adaff 0,
+    #5468ff 100%
+  );
+  border: 0;
+
+  box-shadow:
+    rgba(45, 35, 66, 0.3) 0 2px 4px,
+    rgba(45, 35, 66, 0.2) 0 7px 10px -3px,
+    rgba(58, 65, 111, 0.2) 0 -3px 0 inset;
+
+  color: #fff;
+
+  justify-content: center;
+
+  transition:
+    box-shadow 0.15s,
+    transform 0.15s;
+  user-select: none;
+  white-space: nowrap;
+  will-change: box-shadow, transform;
+
+  &:hover {
+    box-shadow:
+      rgba(45, 35, 66, 0.4) 0 4px 8px,
+      rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
+      #3c4fe0 0 -3px 0 inset;
+    transform: translateY(-2px);
+  }
+
+  &:active {
+    box-shadow: #3c4fe0 0 3px 7px inset;
+    transform: translateY(2px);
+  }
+}
diff --git a/packages/frontend/utils/features.ts b/packages/frontend/utils/features.ts
index fb35ea12..1dd53116 100644
--- a/packages/frontend/utils/features.ts
+++ b/packages/frontend/utils/features.ts
@@ -99,9 +99,10 @@ export const FEATURES: Feature[] = [
     title: "AI Playground",
     Icon: IconPlayerPlay,
     plans: [
+      { id: "free", value: "Limited usage" },
       {
         id: "team",
-        value: "300 / month included",
+        value: "500 / month included",
         help: "then $0.05 per query",
       },
       { id: "enterprise", value: true },
@@ -138,7 +139,7 @@ export const FEATURES: Feature[] = [
   },
   {
     id: "feedback",
-    title: "Edit Feedback",
+    title: "Human Reviews",
     Icon: IconThumbUpFilled,
     plans: [
       { id: "team", value: true },

From 8816f57dd0b256124d753c7c38934d5347e5d715 Mon Sep 17 00:00:00 2001
From: Vince Loewe <vince@lunary.ai>
Date: Sun, 6 Oct 2024 22:21:49 +0100
Subject: [PATCH 2/3] fix tests

---
 e2e/auth.setup.ts                  | 58 +++++++++++++++---------------
 packages/frontend/next-env.d.ts    |  2 +-
 packages/frontend/pages/signup.tsx |  3 ++
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/e2e/auth.setup.ts b/e2e/auth.setup.ts
index 7aecbd90..a1078ad3 100644
--- a/e2e/auth.setup.ts
+++ b/e2e/auth.setup.ts
@@ -1,55 +1,55 @@
-import { test, expect } from "@playwright/test"
+import { test, expect } from "@playwright/test";
 
-import { deleteOrg, populateLogs } from "./utils/db"
+import { deleteOrg, populateLogs } from "./utils/db";
 
-const authFile = "e2e/.auth/user.json"
+const authFile = "e2e/.auth/user.json";
 
 test.beforeAll(async () => {
   // Sometimes the teardown isn't called, so we need to clean up the database before running the tests
-  await deleteOrg()
-})
+  await deleteOrg();
+});
 
 test("signup flow", async ({ page }) => {
-  await page.goto("/")
+  await page.goto("/");
 
-  await page.getByRole("link", { name: "Sign Up" }).click()
+  await page.getByRole("link", { name: "Sign Up" }).click();
 
-  await page.waitForURL("**/signup")
+  await page.waitForURL("**/signup");
 
-  await page.getByPlaceholder("Your email").click()
-  await page.getByPlaceholder("Your email").fill("test@lunary.ai")
+  await page.getByPlaceholder("Your email").click();
+  await page.getByPlaceholder("Your email").fill("test@lunary.ai");
 
-  await page.getByPlaceholder("Your full name").click()
-  await page.getByPlaceholder("Your full name").fill("test test")
+  await page.getByPlaceholder("Your full name").click();
+  await page.getByPlaceholder("Your full name").fill("test test");
 
-  await page.getByPlaceholder("Your password").click()
-  await page.getByPlaceholder("Your password").fill("testtest")
+  await page.getByPlaceholder("Pick a  password").click();
+  await page.getByPlaceholder("Pick a  password").fill("testtest");
 
-  await page.getByRole("button", { name: "Continue →" }).click()
+  await page.getByTestId("continue-button").click();
 
-  await page.getByPlaceholder("Your project name").click()
-  await page.getByPlaceholder("Your project name").fill("TESTPROJECT")
+  await page.getByPlaceholder("Your project name").click();
+  await page.getByPlaceholder("Your project name").fill("TESTPROJECT");
 
-  await page.getByPlaceholder("Organization name").click()
-  await page.getByPlaceholder("Organization name").fill("TESTORG")
+  await page.getByPlaceholder("Organization name").click();
+  await page.getByPlaceholder("Organization name").fill("TESTORG");
 
-  await page.getByLabel("6-49").check()
+  // await page.getByLabel("6-49").check();
 
-  await page.getByRole("button", { name: "Create account" }).click()
+  await page.getByTestId("finish-button").click();
 
-  await page.waitForNavigation()
+  await page.waitForNavigation();
 
-  await expect(page.getByText("Are you free in the next days")).toBeVisible()
+  // await expect(page.getByText("Are you free in the next days")).toBeVisible();
 
-  await page.getByRole("button", { name: "Skip to Dashboard" }).click()
+  await page.getByTestId("open-dashboard-button").click();
 
-  await page.waitForURL("**/analytics")
+  await page.waitForURL("**/analytics");
 
   await expect(
     page.getByRole("heading", { name: "Waiting for data..." }),
-  ).toBeVisible()
+  ).toBeVisible();
 
-  await page.context().storageState({ path: authFile })
+  await page.context().storageState({ path: authFile });
 
-  await populateLogs()
-})
+  await populateLogs();
+});
diff --git a/packages/frontend/next-env.d.ts b/packages/frontend/next-env.d.ts
index a4a7b3f5..4f11a03d 100644
--- a/packages/frontend/next-env.d.ts
+++ b/packages/frontend/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/frontend/pages/signup.tsx b/packages/frontend/pages/signup.tsx
index e86f4300..59f3a7d7 100644
--- a/packages/frontend/pages/signup.tsx
+++ b/packages/frontend/pages/signup.tsx
@@ -267,6 +267,7 @@ function SignupPage() {
                                 size="md"
                                 mt="md"
                                 radius="md"
+                                data-testid="continue-button"
                                 className="CtaBtn"
                                 onClick={nextStep}
                                 fullWidth
@@ -339,6 +340,7 @@ function SignupPage() {
                                   mt="md"
                                   className="CtaBtn"
                                   type="submit"
+                                  data-testid="finish-button"
                                   fullWidth
                                   loading={loading}
                                 >
@@ -443,6 +445,7 @@ function SignupPage() {
                     }}
                     variant={isBigCompany ? "outline" : "filled"}
                     mb="xl"
+                    data-testid="open-dashboard-button"
                     rightSection={<IconArrowRight size={18} />}
                     size="lg"
                   >

From aedf05690530b1d53e8b0977dd46e1b84579e9ba Mon Sep 17 00:00:00 2001
From: Vince Loewe <vince@lunary.ai>
Date: Sun, 6 Oct 2024 23:15:59 +0100
Subject: [PATCH 3/3] fix dark mode login

---
 .../frontend/components/layout/AuthLayout.tsx |  32 ++
 packages/frontend/pages/login.tsx             |   8 +-
 .../frontend/pages/request-password-reset.tsx |  80 ++-
 packages/frontend/pages/reset-password.tsx    |  74 ++-
 packages/frontend/pages/signup.tsx            | 538 +++++++++---------
 5 files changed, 373 insertions(+), 359 deletions(-)
 create mode 100644 packages/frontend/components/layout/AuthLayout.tsx

diff --git a/packages/frontend/components/layout/AuthLayout.tsx b/packages/frontend/components/layout/AuthLayout.tsx
new file mode 100644
index 00000000..0dc2b32b
--- /dev/null
+++ b/packages/frontend/components/layout/AuthLayout.tsx
@@ -0,0 +1,32 @@
+import { Box, Center, Container, useComputedColorScheme } from "@mantine/core";
+import { IconAnalyze } from "@tabler/icons-react";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const scheme = useComputedColorScheme();
+
+  return (
+    <Box
+      style={{
+        backgroundColor:
+          scheme === "dark"
+            ? "var(--mantine-color-dark-6)"
+            : "var(--mantine-color-gray-0)",
+      }}
+      h="100vh"
+    >
+      <Box style={{ position: "absolute", top: 10, left: 10 }}>
+        <IconAnalyze
+          color={scheme === "dark" ? "white" : "#5468ff"}
+          size={40}
+        />
+      </Box>
+      <Center h="100vh">
+        <Container mb="10%">{children}</Container>
+      </Center>
+    </Box>
+  );
+}
diff --git a/packages/frontend/pages/login.tsx b/packages/frontend/pages/login.tsx
index 5f9c1c22..a8eec1d1 100644
--- a/packages/frontend/pages/login.tsx
+++ b/packages/frontend/pages/login.tsx
@@ -21,6 +21,7 @@ import { NextSeo } from "next-seo";
 import { useAuth } from "@/utils/auth";
 import { useRouter } from "next/router";
 import { notifications } from "@mantine/notifications";
+import AuthLayout from "@/components/layout/AuthLayout";
 
 function LoginPage() {
   const router = useRouter();
@@ -151,13 +152,10 @@ function LoginPage() {
   }, [router.query.email]);
 
   return (
-    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
+    <AuthLayout>
       <Container size="600" pt="60">
         <NextSeo title="Login" />
         <Stack align="center" gap="50">
-          <Stack align="center">
-            <IconAnalyze color="#4f87ff" size="60" />
-          </Stack>
           <Paper radius="md" p="xl" miw="350" shadow="md">
             <Text size="xl" mb="lg" fw="700" ta="center">
               Welcome back!
@@ -237,7 +235,7 @@ function LoginPage() {
           </Paper>
         </Stack>
       </Container>
-    </Box>
+    </AuthLayout>
   );
 }
 export default LoginPage;
diff --git a/packages/frontend/pages/request-password-reset.tsx b/packages/frontend/pages/request-password-reset.tsx
index e4f6dda5..e88ecc2d 100644
--- a/packages/frontend/pages/request-password-reset.tsx
+++ b/packages/frontend/pages/request-password-reset.tsx
@@ -13,6 +13,7 @@ import { IconAnalyze, IconAt, IconCheck } from "@tabler/icons-react";
 import { NextSeo } from "next-seo";
 import { useState } from "react";
 import errorHandler from "../utils/errors";
+import AuthLayout from "@/components/layout/AuthLayout";
 
 export default function PasswordReset() {
   const [loading, setLoading] = useState(false);
@@ -53,52 +54,45 @@ export default function PasswordReset() {
   }
 
   return (
-    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
-      <Container py={100} size={600}>
-        <NextSeo title="Login" />
-        <Stack align="center" gap={50}>
-          <Stack align="center">
-            <IconAnalyze color={"#4f87ff"} size={60} />
-          </Stack>
+    <AuthLayout>
+      <NextSeo title="Request password reset" />
 
-          <Paper radius="md" p="xl" maw={400} miw={350} shadow="md">
-            <Text size="lg" mb="lg" fw={500} ta="center">
-              Password Recovery
-            </Text>
+      <Paper radius="md" p="xl" maw={400} miw={350} shadow="md">
+        <Text size="lg" mb="lg" fw={500} ta="center">
+          Password Recovery
+        </Text>
 
-            <Text size="sm" mb="lg" c="gray.8">
-              Enter your email address and if it is registered, we will send you
-              a link to reset your password.
-            </Text>
+        <Text mb="lg" opacity={0.8}>
+          Enter your email address and if it is registered, we will send you a
+          link to reset your password.
+        </Text>
 
-            <form onSubmit={form.onSubmit(handlePasswordReset)}>
-              <Stack gap="lg">
-                <TextInput
-                  leftSection={<IconAt size="16" />}
-                  label="Email"
-                  type="email"
-                  value={form.values.email}
-                  onChange={(event) =>
-                    form.setFieldValue("email", event.currentTarget.value)
-                  }
-                  error={form.errors.email && "Invalid email"}
-                  placeholder="Your email"
-                />
+        <form onSubmit={form.onSubmit(handlePasswordReset)}>
+          <Stack gap="lg">
+            <TextInput
+              leftSection={<IconAt size="16" />}
+              label="Email"
+              type="email"
+              value={form.values.email}
+              onChange={(event) =>
+                form.setFieldValue("email", event.currentTarget.value)
+              }
+              error={form.errors.email && "Invalid email"}
+              placeholder="Your email"
+            />
 
-                <Button
-                  className="CtaBtn"
-                  type="submit"
-                  fullWidth
-                  size="md"
-                  loading={loading}
-                >
-                  Request reset link
-                </Button>
-              </Stack>
-            </form>
-          </Paper>
-        </Stack>
-      </Container>
-    </Box>
+            <Button
+              className="CtaBtn"
+              type="submit"
+              fullWidth
+              size="md"
+              loading={loading}
+            >
+              Request reset link
+            </Button>
+          </Stack>
+        </form>
+      </Paper>
+    </AuthLayout>
   );
 }
diff --git a/packages/frontend/pages/reset-password.tsx b/packages/frontend/pages/reset-password.tsx
index 59e5a049..74dc3cd0 100644
--- a/packages/frontend/pages/reset-password.tsx
+++ b/packages/frontend/pages/reset-password.tsx
@@ -17,6 +17,7 @@ import { useState } from "react";
 import { fetcher } from "@/utils/fetcher";
 import { useAuth } from "@/utils/auth";
 import analytics from "@/utils/analytics";
+import AuthLayout from "@/components/layout/AuthLayout";
 
 export default function UpdatePassword() {
   const { setJwt } = useAuth();
@@ -61,46 +62,39 @@ export default function UpdatePassword() {
   };
 
   return (
-    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
-      <Container py={100} size={600}>
-        <NextSeo title="Reset password" />
-        <Stack align="center" gap={50}>
-          <Stack align="center">
-            <IconAnalyze color={"#4f87ff"} size={60} />
-          </Stack>
-          <Paper radius="md" p="xl" miw={350} shadow="md">
-            <Text size="lg" mb="lg" fw="700" ta="center">
-              Reset your password
-            </Text>
-            <form onSubmit={form.onSubmit(handlePasswordReset)}>
-              <Stack>
-                <PasswordInput
-                  label="New Password"
-                  type="password"
-                  autoComplete="new-password"
-                  value={form.values.password}
-                  onChange={(event) =>
-                    form.setFieldValue("password", event.currentTarget.value)
-                  }
-                  error={form.errors.password && "Invalid password"}
-                  placeholder="Your new password"
-                />
+    <AuthLayout>
+      <NextSeo title="Reset password" />
+      <Paper radius="md" p="xl" miw={350} shadow="md">
+        <Text size="lg" mb="lg" fw="700" ta="center">
+          Reset your password
+        </Text>
+        <form onSubmit={form.onSubmit(handlePasswordReset)}>
+          <Stack>
+            <PasswordInput
+              label="New Password"
+              type="password"
+              autoComplete="new-password"
+              value={form.values.password}
+              onChange={(event) =>
+                form.setFieldValue("password", event.currentTarget.value)
+              }
+              error={form.errors.password && "Invalid password"}
+              placeholder="Your new password"
+            />
 
-                <Button
-                  className="CtaBtn"
-                  mt="md"
-                  size="md"
-                  type="submit"
-                  fullWidth
-                  loading={loading}
-                >
-                  Confirm
-                </Button>
-              </Stack>
-            </form>
-          </Paper>
-        </Stack>
-      </Container>
-    </Box>
+            <Button
+              className="CtaBtn"
+              mt="md"
+              size="md"
+              type="submit"
+              fullWidth
+              loading={loading}
+            >
+              Confirm
+            </Button>
+          </Stack>
+        </form>
+      </Paper>
+    </AuthLayout>
   );
 }
diff --git a/packages/frontend/pages/signup.tsx b/packages/frontend/pages/signup.tsx
index 59f3a7d7..6d551d92 100644
--- a/packages/frontend/pages/signup.tsx
+++ b/packages/frontend/pages/signup.tsx
@@ -6,7 +6,6 @@ import {
   Anchor,
   Box,
   Button,
-  Center,
   Container,
   Grid,
   Group,
@@ -19,6 +18,7 @@ import {
   TextInput,
   ThemeIcon,
   Title,
+  useComputedColorScheme,
 } from "@mantine/core";
 
 import Confetti from "react-confetti";
@@ -26,7 +26,6 @@ import Confetti from "react-confetti";
 import { useForm } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
 import {
-  IconAnalyze,
   IconArrowRight,
   IconAt,
   IconBuildingStore,
@@ -44,6 +43,7 @@ import { fetcher } from "@/utils/fetcher";
 import { NextSeo } from "next-seo";
 import { useAuth } from "@/utils/auth";
 import config from "@/utils/config";
+import AuthLayout from "@/components/layout/AuthLayout";
 
 function getRandomizedChoices() {
   const choices = [
@@ -203,113 +203,110 @@ function SignupPage() {
 
   const isBigCompany = form.values.employeeCount !== "1-5";
 
-  return (
-    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
-      <Box style={{ position: "absolute", top: 10, left: 10 }}>
-        <IconAnalyze color={"#5468ff"} size={40} />
-      </Box>
-      <Center h="100vh">
-        <Container size={step === 1 ? 1200 : 800} mb={120}>
-          <NextSeo title="Sign Up" />
-
-          <Stack align="center" gap={50}>
-            {step < 3 && (
-              <>
-                <Grid gutter={50} align="center">
-                  <Grid.Col span={{ base: 12, md: step === 1 ? 6 : 12 }}>
-                    <Paper miw={350} radius="md" p="xl" shadow="md">
-                      <form onSubmit={form.onSubmit(handleSignup)}>
-                        <Stack gap="lg">
-                          {step === 1 && (
-                            <>
-                              <Title order={2} fw={700} ta="center">
-                                Get Started
-                              </Title>
-                              <TextInput
-                                leftSection={<IconAt size="16" />}
-                                label="Email"
-                                type="email"
-                                autoComplete="email"
-                                error={form.errors.email}
-                                placeholder="Your email"
-                                {...form.getInputProps("email")}
-                              />
-
-                              <TextInput
-                                label="Name"
-                                autoComplete="name"
-                                leftSection={<IconUser size="16" />}
-                                placeholder="Your full name"
-                                error={form.errors.name}
-                                {...form.getInputProps("name")}
-                                onChange={(e) => {
-                                  form.setFieldValue("name", e.target.value);
-                                  form.setFieldValue(
-                                    "orgName",
-                                    e.target.value + "'s Org",
-                                  );
-                                }}
-                              />
-
-                              <PasswordInput
-                                label="Password"
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter") {
-                                    nextStep();
-                                  }
-                                }}
-                                error={form.errors.password}
-                                placeholder="Pick a  password"
-                                {...form.getInputProps("password")}
-                              />
-
-                              <Button
-                                size="md"
-                                mt="md"
-                                radius="md"
-                                data-testid="continue-button"
-                                className="CtaBtn"
-                                onClick={nextStep}
-                                fullWidth
-                                loading={loading}
-                              >
-                                {`Create Account`}
-                              </Button>
+  const scheme = useComputedColorScheme();
 
-                              <Text size="sm" style={{ textAlign: "center" }}>
-                                {`Already have an account? `}
-                                <Anchor href="/login">Log In</Anchor>
-                              </Text>
-                            </>
-                          )}
-
-                          {step === 2 && (
-                            <>
-                              <TextInput
-                                label="Organization Name"
-                                description="E.g. your company name"
-                                leftSection={<IconBuildingStore size="16" />}
-                                placeholder="Organization name"
-                                error={
-                                  form.errors.orgName &&
-                                  "This field is required"
-                                }
-                                {...form.getInputProps("orgName")}
-                              />
-
-                              <TextInput
-                                label="Project Name"
-                                description="Can be changed later"
-                                leftSection={<IconFolderBolt size="16" />}
-                                placeholder="Your project name"
-                                error={
-                                  form.errors.projectName &&
-                                  "This field is required"
+  return (
+    <AuthLayout>
+      <Container size={step === 1 ? 1200 : 800}>
+        <NextSeo title="Sign Up" />
+
+        <Stack align="center" gap={50}>
+          {step < 3 && (
+            <>
+              <Grid gutter={50} align="center">
+                <Grid.Col span={{ base: 12, md: step === 1 ? 6 : 12 }}>
+                  <Paper miw={350} radius="md" p="xl" shadow="md">
+                    <form onSubmit={form.onSubmit(handleSignup)}>
+                      <Stack gap="lg">
+                        {step === 1 && (
+                          <>
+                            <Title order={2} fw={700} ta="center">
+                              Get Started
+                            </Title>
+                            <TextInput
+                              leftSection={<IconAt size="16" />}
+                              label="Email"
+                              type="email"
+                              autoComplete="email"
+                              error={form.errors.email}
+                              placeholder="Your email"
+                              {...form.getInputProps("email")}
+                            />
+
+                            <TextInput
+                              label="Name"
+                              autoComplete="name"
+                              leftSection={<IconUser size="16" />}
+                              placeholder="Your full name"
+                              error={form.errors.name}
+                              {...form.getInputProps("name")}
+                              onChange={(e) => {
+                                form.setFieldValue("name", e.target.value);
+                                form.setFieldValue(
+                                  "orgName",
+                                  e.target.value + "'s Org",
+                                );
+                              }}
+                            />
+
+                            <PasswordInput
+                              label="Password"
+                              onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                  nextStep();
                                 }
-                                {...form.getInputProps("projectName")}
-                              />
-
-                              {/* <Radio.Group
+                              }}
+                              error={form.errors.password}
+                              placeholder="Pick a  password"
+                              {...form.getInputProps("password")}
+                            />
+
+                            <Button
+                              size="md"
+                              mt="md"
+                              radius="md"
+                              data-testid="continue-button"
+                              className="CtaBtn"
+                              onClick={nextStep}
+                              fullWidth
+                              loading={loading}
+                            >
+                              {`Create Account`}
+                            </Button>
+
+                            <Text size="sm" style={{ textAlign: "center" }}>
+                              {`Already have an account? `}
+                              <Anchor href="/login">Log In</Anchor>
+                            </Text>
+                          </>
+                        )}
+
+                        {step === 2 && (
+                          <>
+                            <TextInput
+                              label="Organization Name"
+                              description="E.g. your company name"
+                              leftSection={<IconBuildingStore size="16" />}
+                              placeholder="Organization name"
+                              error={
+                                form.errors.orgName && "This field is required"
+                              }
+                              {...form.getInputProps("orgName")}
+                            />
+
+                            <TextInput
+                              label="Project Name"
+                              description="Can be changed later"
+                              leftSection={<IconFolderBolt size="16" />}
+                              placeholder="Your project name"
+                              error={
+                                form.errors.projectName &&
+                                "This field is required"
+                              }
+                              {...form.getInputProps("projectName")}
+                            />
+
+                            {/* <Radio.Group
                             label="Company Size"
                             error={
                               form.errors.employeeCount &&
@@ -325,175 +322,174 @@ function SignupPage() {
                             </Group>
                           </Radio.Group> */}
 
-                              <Select
-                                searchable
-                                label="Where did you find us?"
-                                description="This helps us focus our efforts :)"
-                                placeholder="Select an option"
-                                data={choices}
-                                {...form.getInputProps("whereFindUs")}
-                              />
-
-                              <Stack gap="xs">
-                                <Button
-                                  size="md"
-                                  mt="md"
-                                  className="CtaBtn"
-                                  type="submit"
-                                  data-testid="finish-button"
-                                  fullWidth
-                                  loading={loading}
-                                >
-                                  {`Finish`}
-                                </Button>
-
-                                <Button
-                                  size="sm"
-                                  onClick={() => {
-                                    router.query.step = String(1);
-                                    router.push(router);
-                                    setStep(1);
-                                  }}
-                                  fullWidth
-                                  variant="transparent"
-                                  color="dimmed"
-                                >
-                                  {`← Go back`}
-                                </Button>
-                              </Stack>
-                            </>
-                          )}
-                        </Stack>
-                      </form>
-                    </Paper>
-                  </Grid.Col>
+                            <Select
+                              searchable
+                              label="Where did you find us?"
+                              description="This helps us focus our efforts :)"
+                              placeholder="Select an option"
+                              data={choices}
+                              {...form.getInputProps("whereFindUs")}
+                            />
+
+                            <Stack gap="xs">
+                              <Button
+                                size="md"
+                                mt="md"
+                                className="CtaBtn"
+                                type="submit"
+                                data-testid="finish-button"
+                                fullWidth
+                                loading={loading}
+                              >
+                                {`Finish`}
+                              </Button>
 
-                  {step === 1 && (
-                    <Grid.Col span={{ base: 12, md: 6 }}>
-                      <Stack gap={50}>
-                        <Box>
-                          <List
-                            spacing="xl"
-                            size="md"
-                            icon={
-                              <ThemeIcon
-                                variant="light"
-                                color="teal"
-                                size={24}
-                                radius="xl"
+                              <Button
+                                size="sm"
+                                onClick={() => {
+                                  router.query.step = String(1);
+                                  router.push(router);
+                                  setStep(1);
+                                }}
+                                fullWidth
+                                variant="transparent"
+                                color="dimmed"
                               >
-                                <IconCircleCheck size="16" />
-                              </ThemeIcon>
-                            }
-                          >
-                            <List.Item>
-                              <Text fw="bold">No credit card required.</Text>
-                              <Text size="sm" opacity={0.8}>
-                                1K free events per day. Forever.
-                              </Text>
-                            </List.Item>
-                            <List.Item>
-                              <Text fw="bold">Collect data immediately</Text>
-                              <Text size="sm" opacity={0.8}>
-                                10+ integrations like LangChain and OpenAI.
-                              </Text>
-                            </List.Item>
-                            <List.Item>
-                              <Text fw="bold">Improve your chatbot</Text>
-                              <Text size="sm" opacity={0.8}>
-                                Get insights without a complicated setup.
-                              </Text>
-                            </List.Item>
-                          </List>
-                        </Box>
-                        <SocialProof />
+                                {`← Go back`}
+                              </Button>
+                            </Stack>
+                          </>
+                        )}
                       </Stack>
-                    </Grid.Col>
-                  )}
-                </Grid>
-              </>
-            )}
-
-            {step === 3 && (
-              <>
-                {typeof window !== "undefined" && !isBigCompany && (
-                  <Confetti
-                    recycle={false}
-                    numberOfPieces={500}
-                    gravity={0.3}
-                    width={window.innerWidth}
-                    height={window.innerHeight}
-                  />
+                    </form>
+                  </Paper>
+                </Grid.Col>
+
+                {step === 1 && (
+                  <Grid.Col span={{ base: 12, md: 6 }}>
+                    <Stack gap={50}>
+                      <Box>
+                        <List
+                          spacing="xl"
+                          size="md"
+                          icon={
+                            <ThemeIcon
+                              variant="light"
+                              color="teal"
+                              size={24}
+                              radius="xl"
+                            >
+                              <IconCircleCheck size="16" />
+                            </ThemeIcon>
+                          }
+                        >
+                          <List.Item>
+                            <Text fw="bold">No credit card required.</Text>
+                            <Text size="sm" opacity={0.8}>
+                              1K free events per day. Forever.
+                            </Text>
+                          </List.Item>
+                          <List.Item>
+                            <Text fw="bold">Collect data immediately</Text>
+                            <Text size="sm" opacity={0.8}>
+                              10+ integrations like LangChain and OpenAI.
+                            </Text>
+                          </List.Item>
+                          <List.Item>
+                            <Text fw="bold">Improve your chatbot</Text>
+                            <Text size="sm" opacity={0.8}>
+                              Get insights without a complicated setup.
+                            </Text>
+                          </List.Item>
+                        </List>
+                      </Box>
+                      <SocialProof />
+                    </Stack>
+                  </Grid.Col>
                 )}
-
-                <Stack align="center" w={800}>
-                  {/* <IconAnalyze color={"#206dce"} size={60} /> */}
-
-                  <Title order={2} fw={700} size={40} ta="center">
-                    {`You're all set 🎉`}
-                  </Title>
-
-                  <Alert fw={500} icon={<IconMail />} my="lg">
-                    <Text size="md" fw={500}>
-                      Check your emails for the confirmation link.
+              </Grid>
+            </>
+          )}
+
+          {step === 3 && (
+            <>
+              {typeof window !== "undefined" && !isBigCompany && (
+                <Confetti
+                  recycle={false}
+                  numberOfPieces={500}
+                  gravity={0.3}
+                  width={window.innerWidth}
+                  height={window.innerHeight}
+                />
+              )}
+
+              <Stack align="center" w={800}>
+                {/* <IconAnalyze color={"#206dce"} size={60} /> */}
+
+                <Title order={2} fw={700} size={40} ta="center">
+                  {`You're all set 🎉`}
+                </Title>
+
+                <Alert fw={500} icon={<IconMail />} my="lg">
+                  <Text size="md" fw={500}>
+                    Check your emails for the confirmation link.
+                  </Text>
+                </Alert>
+
+                <Button
+                  onClick={() => {
+                    window.location.href = "/";
+                  }}
+                  variant={isBigCompany ? "outline" : "filled"}
+                  mb="xl"
+                  data-testid="open-dashboard-button"
+                  rightSection={<IconArrowRight size={18} />}
+                  size="lg"
+                >
+                  Open Dashboard
+                </Button>
+
+                {!config.IS_SELF_HOSTED && (
+                  <>
+                    <Text size="lg">
+                      {`Want to say hi? We'd love to talk to you.`}
                     </Text>
-                  </Alert>
-
-                  <Button
-                    onClick={() => {
-                      window.location.href = "/";
-                    }}
-                    variant={isBigCompany ? "outline" : "filled"}
-                    mb="xl"
-                    data-testid="open-dashboard-button"
-                    rightSection={<IconArrowRight size={18} />}
-                    size="lg"
-                  >
-                    Open Dashboard
-                  </Button>
-
-                  {!config.IS_SELF_HOSTED && (
-                    <>
-                      <Text size="lg">
-                        {`Want to say hi? We'd love to talk to you.`}
-                      </Text>
-
-                      <Group>
-                        <Button
-                          variant="outline"
-                          onClick={() => {
-                            $crisp.push(["do", "chat:open"]);
-                          }}
-                          rightSection={<IconMessageBolt size={18} />}
-                        >
-                          Chat
-                        </Button>
-
-                        <Button
-                          variant="outline"
-                          color="teal.8"
-                          component="a"
-                          href="mailto:hello@lunary.ai"
-                          rightSection={<IconMail size={18} />}
-                        >
-                          Email
-                        </Button>
-                      </Group>
-                    </>
-                  )}
-                </Stack>
-              </>
-            )}
-          </Stack>
-          <style jsx global>{`
-            #booking-page {
-              width: 1200px;
-              max-width: 90vw;
-            }
-          `}</style>
-        </Container>
-      </Center>
-    </Box>
+
+                    <Group>
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          $crisp.push(["do", "chat:open"]);
+                        }}
+                        rightSection={<IconMessageBolt size={18} />}
+                      >
+                        Chat
+                      </Button>
+
+                      <Button
+                        variant="outline"
+                        color="teal.8"
+                        component="a"
+                        href="mailto:hello@lunary.ai"
+                        rightSection={<IconMail size={18} />}
+                      >
+                        Email
+                      </Button>
+                    </Group>
+                  </>
+                )}
+              </Stack>
+            </>
+          )}
+        </Stack>
+        <style jsx global>{`
+          #booking-page {
+            width: 1200px;
+            max-width: 90vw;
+          }
+        `}</style>
+      </Container>
+    </AuthLayout>
   );
 }