vivid-it

As a user, I want to view the Home page so that I can explore Vivid-IT's services and brand. Implement the Home page based on the existing JSX design (v2). Includes: animated hero with 3D globe nodes, interactive service cards, dynamic time-of-day gradient background, CTA buttons (Explore Services, Contact Us), testimonials preview, and responsive layout. Navigates to: Services page, Testimonials page, Contact page.

As a user, I want to log in to the admin dashboard so that I can manage site content. Implement the Login page based on the existing JSX design (v2). Includes: email/password form with vivid blue focus states, glassmorphism card, animated background, validation feedback, and redirect to Dashboard on success. Connects to: Dashboard overview page.

As a user, I want to view detailed IT service offerings so that I can evaluate which service fits my needs. Implement the Services page based on the existing JSX design (v2). Includes: service listing with flip/expand cards (Cloud Solutions, Cybersecurity, Managed IT, Data Analytics, Network Infrastructure, DevOps & Automation), filtering, CTAs, and responsive grid. Navigates from: Home page and Admin dashboard.

As a user, I want to read client testimonials so that I can assess Vivid-IT's reputation and results. Implement the Testimonials page based on the existing JSX design (v2). Includes: hero stats, featured testimonial card, masonry testimonials grid, industry filter, video testimonials section, ratings breakdown, client logos marquee bar, and submit testimonial CTA. Navigates to: Case Studies page.

As a user, I want to read detailed case studies so that I can understand how Vivid-IT has solved real IT challenges. Implement the Case Studies page based on the existing JSX design (v2). Includes: case study listing with industry tags, featured case study spotlight, results metrics, and individual case study detail cards. Navigates from: Testimonials page and Home page.

As a user, I want to submit an inquiry so that I can get in touch with Vivid-IT about my IT needs. Implement the Contact/Inquiries page based on the existing JSX designs (Contact v2 and Inquiries v2). Includes: inquiry form (name, company, email, phone, service of interest, budget, message), contact info strip, FAQ accordion, trust reassurance section, and a newsletter signup. Navigates from: Home page CTA.

As an admin, I want to view the dashboard overview so that I can monitor site activity and manage content. Implement the Dashboard page based on the existing JSX design (v2). Includes: overview stats panel, quick-access cards for Services, Testimonials, Case Studies, and Inquiries management, activity feed, and admin navigation. Navigates from: Login page.

As a user, I want to use a backend API to submit inquiries so that my contact form data is stored and admins can review it. Implement FastAPI endpoints: POST /inquiries (public, no auth), GET /inquiries (admin only), GET /inquiries/{id} (admin only), PATCH /inquiries/{id}/status (admin only). Fields: full name, company, email, phone, service of interest, budget range, message. MySQL persistence via Alembic.

As an admin, I want to use a backend API for services management so that I can add, edit, and remove IT service listings. Implement FastAPI CRUD endpoints: POST /services, GET /services, GET /services/{id}, PUT /services/{id}, DELETE /services/{id}. Include MySQL persistence via Alembic migration and appropriate request/response schemas.

As an admin, I want to use a backend API for testimonials management so that I can add, edit, and remove client testimonials. Implement FastAPI CRUD endpoints: POST /testimonials, GET /testimonials, GET /testimonials/{id}, PUT /testimonials/{id}, DELETE /testimonials/{id}. Include rating, industry tag, client info, and video URL fields. MySQL persistence via Alembic.

As an admin, I want to use a backend API for case studies management so that I can add, edit, and remove case studies. Implement FastAPI CRUD endpoints: POST /case-studies, GET /case-studies, GET /case-studies/{id}, PUT /case-studies/{id}, DELETE /case-studies/{id}. Fields include title, industry, challenge, solution, results metrics, and client details. MySQL persistence via Alembic.

As a frontend developer, I want to connect the Contact/Inquiries page form to the Inquiries backend API so that submitted inquiries are persisted and admins can review them in the Dashboard. Wire POST /inquiries to the contact form submit, and GET /inquiries to the admin inquiries review panel. Handle success toast, validation errors, and loading state.

As a developer, I want to audit and fix accessibility issues across all pages so that the site complies with WCAG 2.1 standards. Tasks include: proper semantic HTML, ARIA labels on interactive elements, keyboard navigation support, sufficient color contrast ratios (especially for dark theme overlays), focus ring visibility, and screen reader compatibility across Home, Services, Testimonials, Case Studies, Contact, Dashboard, and Login pages.

As a frontend developer, I want to connect the Services page and Admin Dashboard to the Services backend API so that service data is dynamic and manageable. Wire GET /services to the public Services page listing, and POST/PUT/DELETE to the admin Services management panel in the Dashboard. Handle loading, error, and empty states.

As a frontend developer, I want to connect the Testimonials page and Admin Dashboard to the Testimonials backend API so that testimonial data is dynamic. Wire GET /testimonials to the public Testimonials page, and admin CRUD to the Dashboard testimonials management panel. Handle loading, error, and filter states.

As a frontend developer, I want to connect the Case Studies page and Admin Dashboard to the Case Studies backend API so that case study content is dynamic. Wire GET /case-studies to the public Case Studies page, and admin CRUD to the Dashboard case studies management panel. Handle loading and error states.

As a backend developer, I want to harden the API against common vulnerabilities so that the site is protected against SQL injection, XSS, and CSRF. Includes: parameterized queries via SQLAlchemy ORM, input sanitization on all form endpoints, HTTPS enforcement, CORS policy lockdown, rate limiting on the inquiry submission endpoint, and Content Security Policy headers.