feat(auth): implement sign-in page

app/(auth)/layout.tsx

@@ -1,20 +1,28 @@
 import type { PropsWithChildren } from 'react';
 
-import { Flex } from '@radix-ui/themes';
+import { Logo } from '@/components/logo';
+import { Container, Flex } from '@radix-ui/themes';
+import Link from 'next/link';
 
 export default function AuthLayout(props: PropsWithChildren) {
   return (
-    <Flex
-      direction="column"
-      gap="4"
-      mx="auto"
-      style={{
-        alignItems: 'center',
-        height: '100vh',
-        justifyContent: 'center',
-      }}
-    >
-      {props.children}
-    </Flex>
+    <Container size="1">
+      <Flex
+        direction="column"
+        gap="4"
+        mx="auto"
+        style={{
+          alignItems: 'start',
+          justifyContent: 'center',
+          minHeight: '80vh',
+        }}
+      >
+        <Link href="/" title="Go to home page">
+          <Logo size={64} />
+        </Link>
+
+        {props.children}
+      </Flex>
+    </Container>
   );
 }

app/(auth)/sign-in/page.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SignInPage from './page';
+
+const meta: Meta<typeof SignInPage> = {
+  component: SignInPage,
+};
+
+export const Default: StoryObj<typeof SignInPage> = {
+  render: () => <SignInPage />,
+};
+
+export default meta;

app/(auth)/sign-in/page.tsx

@@ -1,9 +1,37 @@
-import { Button } from '@radix-ui/themes';
+import { Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { FaSpotify } from 'react-icons/fa';
 
 export default function Page() {
   return (
-    <form action="/auth/sign-in" method="POST">
-      <Button type="submit">Sign in with Spotify</Button>
-    </form>
+    <Flex direction="column" gap="4">
+      <Heading>Welcome to Beecast</Heading>
+
+      <Text color="gray" size="4">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod
+        quia quibusdam quos quae.
+      </Text>
+
+      <form action="/auth/sign-in" method="POST">
+        <Flex direction="column">
+          <Button color="gray" highContrast size="3" type="submit">
+            <FaSpotify />
+            Continue with Spotify
+          </Button>
+        </Flex>
+      </form>
+
+      <Text color="gray" size="1">
+        By clicking continue, you acknowledge that you have read and understood,
+        and agree to our{' '}
+        <Link href="/terms-of-service" target="_blank">
+          Terms of Service
+        </Link>{' '}
+        and{' '}
+        <Link href="/privacy-policy" target="_blank">
+          Privacy Policy
+        </Link>
+        .
+      </Text>
+    </Flex>
   );
 }

components/layout/app-header-logo.tsx

@@ -0,0 +1,24 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import Link from 'next/link';
+
+import { Logo } from '../logo';
+
+export function AppHeaderLogo() {
+  return (
+    <Flex align="center" asChild gap="2">
+      <Link
+        href="/"
+        style={{
+          color: 'inherit',
+          textDecoration: 'none',
+        }}
+      >
+        <Logo />
+
+        <Heading size="5" weight="medium">
+          Beecast
+        </Heading>
+      </Link>
+    </Flex>
+  );
+}

components/layout/app-header.tsx

@@ -1,16 +1,9 @@
 import { ArrowRightIcon, PersonIcon } from '@radix-ui/react-icons';
-import {
-  Avatar,
-  Button,
-  DropdownMenu,
-  Flex,
-  Heading,
-  Text,
-} from '@radix-ui/themes';
-import Image from 'next/image';
+import { Avatar, Button, DropdownMenu, Flex, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 
 import { AppContent } from './app-content';
+import { AppHeaderLogo } from './app-header-logo';
 
 type Props =
   | {
@@ -83,27 +76,7 @@ export function AppHeader(props: Props) {
     <Flex direction="column" gap="4" py="4">
       <AppContent>
         <Flex align="center" justify="between">
-          <Flex align="center" asChild gap="2">
-            <Link
-              href="/"
-              style={{
-                color: 'inherit',
-                textDecoration: 'none',
-              }}
-            >
-              <Image
-                alt="beecast logo"
-                height="48"
-                src="/logo.png"
-                style={{ display: 'block' }}
-                width="48"
-              />
-
-              <Heading size="5" weight="medium">
-                Beecast
-              </Heading>
-            </Link>
-          </Flex>
+          <AppHeaderLogo />
 
           {props.variant === 'authenticated' ? (
             <AppHeaderActionsAuthenticated {...props} />

components/logo.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+
+import Image from 'next/image';
+
+type Props = {
+  size?: ComponentProps<typeof Image>['width'];
+};
+
+export function Logo(props: Props) {
+  return (
+    <Image
+      alt="beecast logo"
+      height={props.size || 48}
+      src="/logo.png"
+      style={{ display: 'block' }}
+      width={props.size || 48}
+    />
+  );
+}

components/theme-provider/styles.css

@@ -3,3 +3,7 @@
 body {
   margin: 0;
 }
+
+.radix-themes {
+  --cursor-button: pointer;
+}

package.json

@@ -26,6 +26,7 @@
     "ofetch": "^1.3.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^4.12.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {