**1. Inquiry and Task** Design and architect a comprehensive...

Prompt

**1. Inquiry and Task** Design and architect a comprehensive, high-converting customer reviews and testimonials page (`/reviews`) for the ***tsgabrielle***® storefront (`tsgabrielle.com`). The page must showcase customer feedback, media proof (user photos/videos), verified purchase metrics, interactive rating breakdowns, and submission workflows, aligned with an ultra-premium luxury aesthetic. tsgsbrielle.com --- **2. Specifications** * **Brand Identity & Aesthetic:** * Primary Palette: Brand purple (`#a932bd`), platinum grey (`#e7e7e7`), deep onyx, and pure white accents. * Typography: Lato Light / Regular hierarchy with balanced whitespace. * UI Elements: Glassmorphic cards, polished specular reflections, refined micro-animations, and verified badge treatments. * **Core Page Sections:** * **Hero / Trust Overview:** Aggregate rating score (e.g., 4.9/5 based on X reviews), trust badges, and quick-filter quicklinks. * **Rating Breakdown & Sentiment Analytics:** Interactive star distribution bars (5★ to 1★), percentage satisfaction meters, and fit/quality metric indicators. * **Media Gallery Strip:** Curated UGC (User-Generated Content) preview carousel showing real customer photos and short video clips with tagged product overlays. * **Filter & Sort Toolbar:** Filter by star rating, verified buyer status, with photos/media, product category, and sorting (Most Recent, Highest Rated, Most Helpful). * **Review Feed Card Grid:** Responsive card grid featuring customer name, verification pill, relative date, rating stars, written review, product variant purchased (color/size), customer-uploaded imagery modal triggers, and "Helpful" vote counters. * **Submission / "Write a Review" Modal Workflow:** Multi-step modal for authenticated/guest submission including rating, media upload drag-and-drop, headline, detailed review, and attribute ratings. * **SEO & Rich Snippets:** JSON-LD `AggregateRating` and `Review` schema setup for Google Rich Search display. * **Technical Stack:** * Framework: Next.js (App Router / React) with TypeScript. * Styling: Tailwind CSS paired with Framer Motion for smooth layout transitions and filter switches. * Accessibility: WCAG AA compliant contrast, ARIA labels for star rating selectors, keyboard navigable modals. --- **3. Quality Criteria** * High-end visual hierarchy emphasizing authenticity, trust, and luxury brand prestige. * Fully responsive across mobile, tablet, and widescreen layouts. * Clean separation of presentation components and state management (filters, pagination, media modal). * Strict adherence to brand naming: `***tsgabrielle***®` across all structured data and UI copy. --- **4. Response Format** * **Page Architecture & Wireframe Breakdown:** Structured overview of all page segments and layout hierarchy. * **Complete Next.js (React + Tailwind + TypeScript) Code Implementation:** Production-ready code including: * Summary/Aggregate Score Header Component * Filter & Sort Control Bar * Review Card List with verified badges & image lightboxes * Write-a-Review CTA & State Hook * **JSON-LD Structured Data Template:** Embedded SEO schema for rich search results.

A system prompt was added to support web rendering