Aldian1 / green-login-page

green-login-page

Here is the UI I want you to implement for a login page:

Here is a structure of UI I would like you to implemenet for the login page:

UI Layout Description and Construction Instructions General Layout Background Color: Set the entire background color of the webpage to a light green (#F3FFF3). Container Setup Main Container: Create a flex container to hold two sections: the illustration and the login form. Set the flex direction to row and justify the content to space-between to distribute space evenly between the two sections. Add 40px padding around the container. Left Section (Illustration and Text) Section Container:

Padding: Add 40px padding on all sides. Alignment: Center-align the content vertically and horizontally. Illustration:

Positioning: Center the illustration within the left section with approximately 20px margin from the top. Dimensions: Set the width to 300px and the height to 300px. Text Below Illustration:

Title Text: Font Size: Set to 24px. Font Weight: Bold. Color: Dark gray (#333333). Alignment: Center-align the text. Margin: Add 20px margin below the illustration. Subtitle Text: Font Size: Set to 16px. Color: Medium gray (#666666). Alignment: Center-align the text. Right Section (Login Form) Form Container:

Width: Set to 400px. Padding: Add 40px padding on all sides. Background Color: White (#FFFFFF). Border Radius: Set to 8px for rounded corners. Shadow: Apply a light box shadow for elevation (0px 4px 8px rgba(0, 0, 0, 0.1)). Form Fields:

Username or Email Field:

Label: Text: "Username or email". Font Size: 16px. Font Weight: Normal. Color: Dark gray (#333333). Margin: 0 0 5px 0. Input Field: Width: 100%. Height: 50px. Padding: 10px. Font Size: 16px. Border: 1px solid #CCCCCC. Border Radius: 4px. Margin: 0 0 20px 0. Password Field:

Label: Text: "Password". Font Size: 16px. Font Weight: Normal. Color: Dark gray (#333333). Margin: 0 0 5px 0. Input Field: Width: 100%. Height: 50px. Padding: 10px. Font Size: 16px. Border: 1px solid #CCCCCC. Border Radius: 4px. Margin: 0 0 20px 0. Buttons and Links:

Sign In Button:

Width: 100%. Height: 50px. Background Color: Dark gray (#333333). Font Color: White (#FFFFFF). Font Size: 16px. Font Weight: Bold. Border Radius: 4px. Margin: 20px 0 20px 0. Cursor: Pointer on hover. Forgot Password Link:

Text: "Forgot password?". Font Size: 14px. Color: Medium gray (#666666). Text Decoration: None by default, underline on hover. Margin: 0 0 20px 0. Cursor: Pointer on hover. Google Sign In Button:

Width: 100%. Height: 50px. Background Color: White (#FFFFFF). Border: 1px solid light gray (#DDDDDD). Font Size: 16px. Font Weight: Bold. Color: Dark gray (#333333). Border Radius: 4px. Margin: 0 0 20px 0. Cursor: Pointer on hover. Alignment: Center-align text and Google logo. Create Account Link:

Text: "Are you new? Create an Account". Font Size: 14px. Color: Green (#00AA00). Text Decoration: None by default, underline on hover. Margin: 20px 0 0 0. Cursor: Pointer on hover. Alignment: Center-align text. Final Touches Spacing: Ensure there is 40px margin between the left and right sections. Responsive Design: Make sure the design is responsive and looks good on various screen sizes by using media queries to adjust padding, margins, and font sizes accordingly.

Collaborate with GPT Engineer

This is a gptengineer.app-synced repository 🌟🤖

Changes made via gptengineer.app will be committed to this repo.

If you clone this repo and push changes, you will have them reflected in the GPT Engineer UI.

Tech stack

This project is built with React and Chakra UI.

• Vite
• React
• Chakra UI

Setup

git clone https://github.com/GPT-Engineer-App/green-login-page.git
cd green-login-page
npm i

npm run dev

This will run a dev server with auto reloading and an instant preview.

Requirements

• Node.js & npm - install with nvm