Gig Overview:

This project involves converting and implementing the Login, Registration, and Dashboard pages for a web application using Vue.js Composition API and TailwindCSS. The goal is to create a responsive, visually appealing, and user-friendly interface that adheres to modern web standards. You are provided with a link to UI design for the Login, Registration and Dashboard pages.

Scope of work:

1. Login Page:
   • Input fields for email/username and password.
   • "Remember Me" checkbox.
   • "Forgot Password?" link.
   • Submit button to authenticate the user.
   • Background image inputted properly and opacity used when needed
   • Responsive layout for desktop, tablet, and mobile devices.
   • User-friendly error messages (e.g., incorrect credentials).
   • Form validation using Vue.js with clear visual feedback.
   • TailwindCSS for styling to match the desired color scheme and responsive behavior.
   • Design the layout and form structure using Vue.js Composition API.
   • Implement form validation and submission using Vue.js reactive states.
   • TailwindCSS classes for styling the page and ensuring it’s fully responsive.

• Required Features:
• Expected Tasks:

1. Registration Page:
   • Input fields for first and last name, email, password, confirm password.
   • Checkbox to accept terms and conditions.
   • A button to submit the registration form.
   • Visual feedback for form validation (e.g., password strength, email format).
   • Links for navigating to the login page.
   • Responsive design with a clean layout and user-friendly form.
   • Utilize Vue.js Composition API to build the form logic.
   • Implement form validation to ensure secure password creation, valid email, etc.
   • Use TailwindCSS to apply appropriate styling and responsiveness.
   • Ensure that the layout is simple yet visually appealing for a smooth user experience.

• Required Features:
• Expected Tasks:

1. Dashboard Page:
   • Left-Sidebar navigation with links to different sections of the dashboard.
   • Main content area displaying user data or a welcome message.
   • Responsive design to adjust the layout for various screen sizes.
   • Card-style components displaying relevant information (e.g., user stats, notifications).
   • Components like graphs & charts, calendar and channel cards  .
   • A search bar, night/day toggle and a profile tab.
   • Set up the left-sidebar and main content using Vue.js Composition API.
   • Design reusable components (e.g., card components for stats and charts).
   • Use TailwindCSS for layout and styling, ensuring proper spacing, positioning, and responsiveness.
   • Ensure dynamic data (such as user stats or notifications) can be rendered effectively.
   • Implement state management for data handling in the dashboard if necessary (e.g., Vuex or Vue Composition API).

Required Skills:

• Strong proficiency inVue.js3 with experience in using theComposition API.
• Expertise inTailwindCSSfor creating responsive and modern UI layouts.
• Ability to work with Vue.js state management (Vuex or Composition API’s reactive states) for dynamic data rendering.
• Experience with form validation and handling user input securely in frontend applications.
• Knowledge of responsive design principles and mobile-first development.
• Familiarity with Git for version control.

Design & Aesthetic Requirements:

-Color Scheme:

Primary color: #D50036 

Secondary color: #C4C4C4

Primary-green: #00B454

Primary-yellow:#F39D1C

Primary-gray:#4B5054

Primary-black:#0F151F

Primary-red:#E50303

Background color: #F5F5F5 

Text color: #000000, #D50036, #FFFFFF 

Button color: #D50036

Border color: #E5E5E5

These color codes are the company’s brand colors and design guide

-Fonts:

Use a clean, modern font likeSource-san.

-Spacing:

Generous padding and margin for a spacious design that enhances readability.

-Responsiveness:

Ensure that all pages are responsive across all device sizes, from desktop to mobile.

-Layout:

Use TailwindCSS grid and flex utilities for consistent alignment.

Ensure buttons, progress bars, and question layouts are accessible and easy to interact with on all devices.

Figma: https://www.figma.com/design/N7fU2gWeMd0ZBFKn8krPxX/Login-and-Dashboard?node-id=19-2218&p=f&t=ZdX5nX7QLNMUr4MO-0

Expectations: 

   As a Techo chosen to participate in this gig, we have some expectations.

• Timely Completion: complete each gig within the given timeframe. If the gig has not been completed within this frame, the project will be re-assigned.
• Communication: Stay in touch with the Community Manager for guidance, support and feedback throughout the project. This can be done through the chat box in the My Gigs section underneath the gig description.
• Work-Ethic Alignment: Make a concerted effort to comply with our standards.