Gig Overview: This project involves converting and implementing the Gig Automation Platform UI using Vue.js Composition API (JavaScript) and TailwindCSS. The UI will feature widgets for data correlation, search bars, tables with pagination, modals for data entry, and chart visualizations. The aim is to build a responsive, user-friendly, and visually appealing interface that aligns with modern web standards. You are provided with a Figma design to guide the UI implementation.

Scope of Work:

1.Navigation Bar:

-Navbar with Gig Pipeline

-Responsive design & state handling

-Responsive layout for desktop, tablet, and mobile devices.

-TailwindCSS for styling to match the desired color scheme and responsive behavior.

-Implement state management for dropdowns and active links.

-TailwindCSS classes for styling the page and ensuring it’s fully responsive.

Required Features:

1.Main Page:

-Responsive design to adjust the layout for various screen sizes.

-Widgets for data summary correlation.

-An Active tab with : Overview, BRD, Scoping Document and All Gigs . Each tab should be dynamically loads corresponding content

-Search bar for filtering request

-A responsive, data-driven table with pagination for structured data display for all gigs.

-Bar chart and Line graph for trends (suggested chart API: chart.js , Apexchart)

-View Page to display detailed table information ( it should have a reject and accept button at the top of the page).

-Develop interactive widgets for key metrics.

-Implement Data visualization with charts.

-Responsive design with a clean layout and user-friendly form.

-Create reusable Table, Buttons & Widget components

-Ensure Buttons are active and functional.

-Ensure all view pages work properly

-Use TailwindCSS to apply appropriate styling and responsiveness.

-Ensure that the layout is simple yet visually appealing for a smooth user experience.

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

-Widget color : #FFECEC

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/Cy1aNflDdZIymA4DnaBfK0/Gig-Pipeline-2?node-id=1-673&t=vVkLts5BnJqX9hIs-0

Repository: Clone from main branch to gig_pipeline for this project