benchmate-build

byTaaha Quraishi

so i want to make a pc compatibilty assistant like pcpartpicker.com. I made a web design through replit design AI. my credits got ended so i took screenshots of the design and captured a video which i am gonna share with you. Also i am gonna share the prompts that i given to the replit AI for you to have better context about the app. i could not able to upload the video right now. In the next prompt i am gonna give you the light theme design screenshots as limit is reached for attaching files. The replit design link (if you can open it): https://f20ccd2b-8109-45b6-a94a-a7bcd0844b5e-00-1cpr88jdr3tz5.janeway.replit.dev/__mockup/preview/pc-compatibility-assistant/PCCompatibilityAssistant#completed-builds The prompts so far: Build a modern, responsive React frontend for an AI-powered PC Component Compatibility Assistant featuring a global theme toggle. The default theme must be dark, utilizing a black background with vibrant yellow accents for primary buttons, borders, and active states. The UI must include a header toggle switch that shifts the interface to a light theme—a clean white background with purplish accents, structured specifically with Times New Roman typography featuring 16-point bold headings and 12-point body text. 1. Hero Section (Landing Page) Create a bold hero section featuring high-quality, floating images of PC components (motherboard, GPU, case fan) orbiting a central text area. Center a main heading with a primary yellow call-to-action button to 'Start Building', with quick-start configuration cards positioned directly below. 2. Main Builder Interface (Minimalist Layout) Design a minimalist layout for the builder. Implement a structured component selection list using clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case. Use simple action buttons—yellow in dark mode, purplish in light mode—labeled '+ Choose A [Component]' for each respective row. 3. AI Chat & Compatibility Status Above the component selection list, span a prominent, full-width status banner indicating system health, styled similarly to a bright green 'Compatibility: No issues found' bar. Beside the component list, integrate a dedicated 'AI Hardware Assistant' chat panel. Pre-populate this chat with a sample user query asking if a specific CPU cooler mounting bracket fits a Thermaltake Level 20MT case, followed by a simulated AI response confirming physical clearance and socket compatibility. 4. Component & Build Cards Include a 'Suggested Builds' section using a grid of structurally clean cards. Each card must display a thumbnail image of a PC case, smaller nested component icons, a brief title, an estimated price, and a comment counter. Add a secondary grid for 'Completed Builds' that showcases larger user-submitted photos of custom PC rigs, component lists, and upvote counters. Ensure all card backgrounds and text colors invert seamlessly when switching between the black/yellow and white/purplish themes.