Recreating the Vercel Login Page

I'll help you recreate this Vercel login page using Next.js and Tailwind CSS. Let's build a complete replica of the page shown in the screenshot.

How It Works

This code recreates the Vercel login page shown in the screenshot with the following components:

1. Header Section:

   • Vercel logo on the left (created with SVG)
   • "Sign Up" link and "Contact" button on the right

2. Main Login Card:

   • v0 logo in a black circle
   • "Continue with Vercel" heading
   • "Sign in to v0 using your Vercel account" subheading
   • Email input field
   • "Continue with Email" button
   • Social login options (GitHub, GitLab, Bitbucket)
   • "Continue with SAML SSO" option
   • "Continue with Passkey" option
   • "Don't have a Vercel account? Sign Up" at the bottom

3. Styling:

   • Uses Tailwind CSS for styling
   • Maintains the clean, minimalist design of the original
   • Responsive layout that works on different screen sizes

How to Use

1. Create a new Next.js project with the App Router
2. Copy these files into your project
3. Make sure you have shadcn/ui components installed
4. Run your development server

You can customize the page further by:

• Changing the colors in the Tailwind config
• Adding actual functionality to the buttons and forms
• Modifying the layout for different screen sizes

The page is fully responsive and matches the design shown in the screenshot.