Gig  Overview:

This project involves converting the Setting Page into a modern, responsive, and interactive user interface using Vue.js 3 Composition API and TailwindCSS. The page will include a drawer-like functionality for navigating different sections of the settings and managing user preferences. The final product will prioritize usability, accessibility, and scalability. You are provided with a link to UI design for the conversion of the Setting Page.

Scope of Work:

1. Main Setting Page Layout:

Required Features:

-A clean and structured layout with a  drawer navigation on the left to access:

Profile Settings

Account Settings

Notifications

Payment Methods

Orders

Subscriptions

Display Settings

Logout

Dynamic content on the right based on the selected section.

A responsive design that adapts to mobile, tablet, and desktop screens.

Mobile-friendly drawer functionality (collapsible/expandable).

Expected Tasks:

-Vue.js 3 Composition API:

-Create a dynamic layout component with a collapsible drawer.

-Use reactive state to manage the selected setting category.

-TailwindCSS:

-Style the drawer and content area for a modern and cohesive look.

-Ensure proper spacing, alignment, and responsive behavior.

2. Individual Setting Sections:

Each section in the settings drawer will have its own UI and functionality:

Profile Settings:

-Editable fields for name, email, date of birth, profile picture upload and contact details field.

-Real-time validation and error messages.

Account Settings :

-Options to update login credentials (username and password).

-Two-factor authentication toggle.

Notifications:

-Toggles and sliders for managing email, SMS, and push notifications.

Payment Method:

-Add, edit, and remove payment methods (credit/debit cards, PayPal, etc.).

-Mark a default payment method.

-Display payment method details securely (e.g., masked card numbers).

5.   Orders:

Display the list of past orders in a tabular form with the following structure:

-Order ID

-Date

-Total

-Status (e.g., Completed, Pending, Canceled)

-Option to view detailed order information.

6. Subscriptions:

-Display two separate cards in a tabular form one for status and the other for subscription

-Related orders card  in a tabular form with the following structure:

-Orders

-Date

-Total

-Status (e.g., Completed, Pending, Canceled).

7. Display Settings:

-Toggle UI animation On/Off.

-Enable dark/light background mode.

-Sound preview toggle button.             

8. Logout

-When logout is clicked a modal message asking if the user is sure with a yes and no button for the user to click. 

Expected Tasks:

-Vue.js 3 Composition API:

-Develop modular components for each setting section.

-Create a secure form for adding/editing payment details.

-Handle form submissions and integrate with the API for data updates.

-Use Vue.js components for managing payment methods dynamically

TailwindCSS:

-Design user-friendly forms with proper spacing, colors, and responsive elements.

-Ensure styling is usable and consistent.

3. Drawer Functionality:

-Required Features:

-A drawer navigation component with:

-List of categories.

-Highlighting of the active category.

-Smooth open/close animation for mobile screens.

-Persistent state to remember the last selected category.

Expected Tasks:

-Vue.js 3 Composition API:

-Implement drawer open/close functionality using reactive state.

-Handle click events to update the active category.

TailwindCSS:

-Style the drawer with hover effects and active states.

-Ensure smooth animations using Tailwind’s transition utilities.

Required Skills:

Strong proficiency in Vue.js 3 with experience in using the Composition API.

Expertise in TailwindCSS for 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 like Source-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.

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.

Figma Link: 

-https://www.figma.com/design/G5UcHvawwtkdXjlSsUdoeO/Settings?node-id=0-1&p=f&t=Cn0BEp2NPH3u6L5e-0

Repository Link: Clone from lms_settings branch for this project

-https://github.com/suburban-fiber-company/Suburban_LMS_Student/tree/lms_settings