[Web Spinner] Add New Authentication Page for Login and Account Creation

app/auth-page.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SiteHeader } from '@/components/site-header';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+const AuthPage: React.FC = () => {
+  // State and handlers would be defined here
+
+  return (
+    <>
+      <SiteHeader />
+      <main className='container py-12'>
+        <div className='max-w-md mx-auto bg-card p-8 rounded-lg shadow'>
+          <h1 className='text-lg font-bold mb-6'>Login</h1>
+          <form className='space-y-4'>
+            <Input placeholder='Username' />
+            <Input type='password' placeholder='Password' />
+            <Button type='submit'>Log In</Button>
+          </form>
+          <div className='text-center text-sm text-muted-foreground mt-4'>
+            Don't have an account? <a href='/signup' className='text-primary hover:underline'>Sign up</a>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default AuthPage;

components/ui/input.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const inputVariants = cva(
+  'block w-full rounded-md border-input shadow-sm transition duration-150 ease-in-out focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 disabled:bg-muted disabled:text-muted-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'text-sm leading-4 py-2 px-3',
+        md: 'text-md leading-5 py-2 px-4',
+        lg: 'text-lg leading-6 py-3 px-4',
+      },
+      variant: {
+        outline: 'border',
+        filled: 'bg-input',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'outline',
+    },
+  }
+);
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {}
+
+export const Input: React.FC<InputProps> = ({ size, variant, className, ...props }) => {
+  return <input className={cn(inputVariants({ size, variant }), className)} {...props} />;
+};