login.tsx

import React from 'react';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

const LoginPage = () => {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <Card className="w-96 p-8 space-y-6">
        <h1 className="text-3xl font-serif text-center text-gray-800">Login</h1>
        
        <div className="space-y-4">
          <div className="space-y-2">
            <label htmlFor="email" className="text-sm font-medium text-gray-700">
              Email
            </label>
            <Input
              id="email"
              type="email"
              placeholder="Enter your email"
              className="w-full"
            />
          </div>
          
          <div className="space-y-2">
            <label htmlFor="password" className="text-sm font-medium text-gray-700">
              Password
            </label>
            <Input
              id="password"
              type="password"
              placeholder="Enter your password"
              className="w-full"
            />
          </div>
        </div>
        
        <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
          Log In
        </Button>
        
        <p className="text-center text-gray-600">
          Don't have an account?{' '}
          <a href="#signup" className="text-blue-600 hover:text-blue-700 hover:underline">
            Sign Up
          </a>
        </p>
      </Card>
    </div>
  );
};

export default LoginPage;