Feature: Build an interactive side-by-side Fabric Swatch comparison d…

[pradeep0153]

Closes #358.

Description

This PR executes a massive strategic upgrade to the primary purchasing funnel by engineering a highly interactive, side-by-side Fabric Swatch Comparison tool, specifically designed to eliminate customer hesitation when choosing between premium upholstery options.

Changes Made

• Component Architecture: Engineered a sleek, new <SwatchComparisonDrawer /> React component.
• UI Integration: Injected a prominent, secondary action button ("Compare Fabrics") directly adjacent to the primary swatch selector matrix on the Product Display Page (PDP).
• Interactive Orchestration: When clicked, this button triggers a beautifully animated bottom-sheet drawer (optimized for mobile touch interfaces) or a sliding side-panel (on desktop), utilizing framer-motion for buttery-smooth spring physics.
• Side-by-Side Visualization: The drawer allows the user to select up to 3 distinct fabric variants from the master list. The component asynchronously fetches the high-resolution, macro-texture imagery for these specific fabrics and renders them in a seamless, side-by-side CSS Grid layout, allowing the user to visually compare the weave and nap of the fabrics simultaneously.
• Data Hydration: Below the visual comparison, the component dynamically renders a strict data table cross-referencing critical durability metrics (e.g., Rub Count/Double Rubs, Stain Resistance, Pet Friendly rating, Cleaning Code) directly sourced from the GraphQL product payload.

Impact

• Conversion Velocity & Customer Confidence: When a customer is preparing to spend $4,000 on a custom sofa, they are paralyzed by the fear of choosing the wrong fabric. The legacy UI forced them to click back and forth between swatches, trying to remember what "Performance Velvet" looked like compared to "Boucle." This friction directly destroys conversion rates. By engineering a dedicated comparison environment, we empower the customer. We allow them to visually compare textures and scientifically compare durability metrics side-by-side. This drastically increases their purchasing confidence, eradicates decision paralysis, and significantly accelerates the conversion velocity of high-ticket items.

[vercel]

@pradeep0153 is attempting to deploy a commit to the janavipandole's projects Team on Vercel.

A member of the Team first needs to authorize it.