Gig  Overview: This project involves converting the Certificates Page into a responsive, dynamic, and visually appealing interface using Vue.js 3 Composition API and TailwindCSS. The Certificates Page will allow users to view, download, and manage their earned certificates. The design will focus on modern aesthetics, seamless functionality, and responsive layouts. You are provided with a link to UI design for the conversion of the Certificates Page.

Scope of Work:

1. Main Certificates Page Layout:

-A dashboard-like card  layout displaying a grid of earned certificates.

-Filter and search bar to quickly find specific certificates by name, date, or course.

-On the card there should be a:

-Download Icon that allows download of certificates.

-In-progress (pending completion of requirements).

-Also a forward icon.

-Certification Grade

Responsive design to accommodate desktop, tablet, and mobile views.

Tasks:

-Develop a responsive grid layout for certificates.

-Integrate a search and filter functionality using Vue.js reactivity.

-Download functionality

2. Certificate Details Section:

Features:

-Certificate title.

-Issuing organization.

-Completion date.

-Course details.

-Download/Share buttons.

-Clicking on a certificate opens a detailed view modal showing:

-QR code integration for easy verification (optional).

Tasks:

-Build a Vue modal component to display certificate details.

-Style and format the modal for clarity and professional aesthetics.

-Integrate dynamic content from an API or mock data source.

3. Certificate Download and Sharing:

Features:

-Download certificate as a PDF with a styled download button.

-Share certificate link via email or social media.

Tasks:

-Use a library (e.g., jsPDF or html2pdf) to implement PDF download functionality.

-Implement dynamic sharing links.

-Ensure the interface for download and sharing is intuitive and visually appealing.

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/Q8kja0oPgJdjCFhYd98QBO/Certification?node-id=0-1&p=f&t=GkUBfZOwPll37sfR-0

Repository Link: Clone from lms_certificate branch for this project. https://github.com/suburban-fiber-company/Suburban_LMS_Student/tree/lms_certificate