feat: sign-up page (#110)

* feat: sign-up page

* fix: review comments

Author: waltergalvao

apps/web/src/app/auth/components/particles/index.ts

@@ -0,0 +1 @@
+export { Particles } from "./particles";

…eb/src/app/auth/login/mouse-position.tsx …/components/particles/mouse-position.tsxapps/web/src/app/auth/login/mouse-position.tsx renamed to apps/web/src/app/auth/components/particles/mouse-position.tsx apps/web/src/app/auth/login/mouse-position.tsx renamed to apps/web/src/app/auth/components/particles/mouse-position.tsx

@@ -12,7 +12,7 @@ interface ParticlesProps {
   rgb?: string;
 }
 
-export default function Particles({
+export function Particles({
   className = "",
   quantity = 30,
   staticity = 50,

apps/web/src/app/auth/login/particles.tsx …/auth/components/particles/particles.tsxapps/web/src/app/auth/login/particles.tsx renamed to apps/web/src/app/auth/components/particles/particles.tsx apps/web/src/app/auth/login/particles.tsx renamed to apps/web/src/app/auth/components/particles/particles.tsx

@@ -1,52 +1,11 @@
-import {
-  Box,
-  Button,
-  Flex,
-  Paper,
-  Stack,
-  Text,
-  ThemeIcon,
-  Title,
-  useMantineColorScheme,
-} from "@mantine/core";
+import { Button, Flex, Paper, Stack, Text, Title } from "@mantine/core";
 import { AuthProvider } from "@sweetr/graphql-types/frontend/graphql";
-import {
-  IconBrandGithub,
-  IconClock,
-  IconFireExtinguisher,
-  IconFlame,
-  IconQuote,
-} from "@tabler/icons-react";
 import { useAuthProviderQuery } from "../../../api/auth.api";
 import { Logo } from "../../../components/logo";
-import { IconDeployment } from "../../../providers/icon.provider";
-import { useSearchParams } from "react-router";
-import Particles from "./particles";
+import { Link, useSearchParams } from "react-router";
+import { Particles } from "../components/particles";
 import classes from "./page.module.css";
 
-const ELITE_BENCHMARKS = [
-  {
-    icon: IconDeployment,
-    metric: "Deployment Frequency",
-    benchmark: "On-demand, multiple deploys per day",
-  },
-  {
-    icon: IconClock,
-    metric: "Lead Time for Changes",
-    benchmark: "Less than one hour from commit to production",
-  },
-  {
-    icon: IconFireExtinguisher,
-    metric: "Time to Restore Service",
-    benchmark: "Less than one hour to recover from incidents",
-  },
-  {
-    icon: IconFlame,
-    metric: "Change Failure Rate",
-    benchmark: "0–15% of changes cause failures",
-  },
-];
-
 export const LoginPage = () => {
   const [searchParams] = useSearchParams({
     redirectTo: "",
@@ -59,8 +18,6 @@ export const LoginPage = () => {
     },
   });
 
-  const { colorScheme } = useMantineColorScheme();
-
   document.body.style.backgroundColor = "#141517";
 
   return (
@@ -76,7 +33,6 @@ export const LoginPage = () => {
         radius="lg"
         p={48}
         maw={960}
-        w="100%"
         pos="relative"
         style={{ zIndex: 1 }}
       >
@@ -89,29 +45,39 @@ export const LoginPage = () => {
           >
             <Logo size={96} />
             <Stack gap={5} align="center">
-              <Title order={3}>Get started for free</Title>
+              <Title order={3}>Sweetr</Title>
               <Text size="sm" c="dimmed">
-                No credit card required
+                Login or signup with GitHub
               </Text>
             </Stack>
-            <Button
-              component="a"
-              fullWidth
-              size="md"
-              w={280}
-              href={data?.authProvider.redirectUrl}
-              loading={isLoading}
-              leftSection={<IconBrandGithub size={16} />}
-              bg="green.4"
-              loaderProps={{ color: "black" }}
-              c="black"
-            >
-              Continue with GitHub
-            </Button>
-            <Text size="sm" c="dimmed" ta="center" maw={260} lh={1.5}>
-              Works for login and signup. New teams will be guided through
-              setup.
-            </Text>
+
+            <Stack gap={10}>
+              <Button
+                component="a"
+                fullWidth
+                size="md"
+                w={280}
+                href={data?.authProvider.redirectUrl}
+                loading={isLoading}
+                bg="green.4"
+                loaderProps={{ color: "black" }}
+                c="black"
+              >
+                Login with GitHub
+              </Button>
+              <Button
+                component={Link}
+                fullWidth
+                size="md"
+                w={280}
+                to="/sign-up"
+                loaderProps={{ color: "black" }}
+                variant="default"
+              >
+                Start 14-day free trial
+              </Button>
+            </Stack>
+
             <Text
               component="a"
               href="/sandbox"
@@ -120,76 +86,9 @@ export const LoginPage = () => {
               td="underline"
               style={{ textUnderlineOffset: 3 }}
             >
-              Explore the sandbox instead.
+              Explore the sandbox instead
             </Text>
           </Stack>
-
-          <Box
-            pl={60}
-            visibleFrom="md"
-            style={{
-              borderLeft: "1px solid var(--mantine-color-dark-4)",
-              flex: 1,
-              minWidth: 0,
-            }}
-          >
-            <Title order={2} lh={1.3}>
-              Is your engineering team elite?
-            </Title>
-            <Text size="sm" c="dimmed" mt="xs" mb={36}>
-              According to the DORA research program, elite teams hit all four
-              of these benchmarks. Most teams don&apos;t know where they stand.
-            </Text>
-
-            <Stack gap="lg">
-              {ELITE_BENCHMARKS.map((item) => (
-                <Flex key={item.metric} gap="md" align="center">
-                  <ThemeIcon
-                    variant="default"
-                    size={42}
-                    radius="md"
-                    style={{ flexShrink: 0 }}
-                  >
-                    <item.icon size={22} />
-                  </ThemeIcon>
-                  <Box style={{ minWidth: 0 }}>
-                    <Text fw={600} size="md">
-                      {item.metric}
-                    </Text>
-                    <Text size="sm" c="dimmed">
-                      {item.benchmark}
-                    </Text>
-                  </Box>
-                </Flex>
-              ))}
-            </Stack>
-
-            <Text fw={500} size="sm" mt={36}>
-              Sweetr tracks these metrics automatically from your Git data.
-            </Text>
-
-            <Flex align="center" gap={6} mt={36}>
-              <IconQuote
-                size={14}
-                color="var(--mantine-color-dark-3)"
-                style={{ flexShrink: 0 }}
-              />
-              <Text
-                component="a"
-                href="https://dora.dev/research/2021/dora-report/2021-dora-accelerate-state-of-devops-report.pdf"
-                target="_blank"
-                rel="noopener noreferrer"
-                size="xs"
-                c="dimmed"
-                fs="italic"
-                td="underline"
-                style={{ textUnderlineOffset: 3 }}
-              >
-                Source: 2021 Accelerate State of DevOps Report (DORA / Google
-                Cloud)
-              </Text>
-            </Flex>
-          </Box>
         </Flex>
       </Paper>
     </Flex>

apps/web/src/app/auth/login/page.tsx

@@ -0,0 +1,32 @@
+.page {
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(
+      ellipse 600px 400px at 15% 10%,
+      rgba(64, 192, 87, 0.12) 0%,
+      transparent 100%
+    ),
+    radial-gradient(
+      ellipse 500px 500px at 85% 80%,
+      rgba(64, 192, 87, 0.08) 0%,
+      transparent 100%
+    ),
+    radial-gradient(
+      ellipse 300px 600px at 50% 50%,
+      rgba(64, 192, 87, 0.04) 0%,
+      transparent 100%
+    ),
+    radial-gradient(
+      circle 800px at 70% 20%,
+      rgba(34, 139, 230, 0.04) 0%,
+      transparent 100%
+    );
+}
+
+.particles {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}