Spaces:

---

VisionBleuLED

/

shopify-store-example-1

Like 0

Running

Project Brief Create a password-protected, minimalist Shopify store for Vision Bleu LED dealers featuring: Temporary "X" bypass for development preview Wholesale-focused UX with bulk pricing LED product visualization tools Seamless dealer onboarding integration 1. Core Design Specifications Color Scheme Element Color Code Usage Primary #000000 Backgrounds, text Secondary #FFFFFF Cards, accents Accent #0055FF CTAs, interactive elements Glow Effect #00E5FF Hover states, animations Typography Headings: Bebas Neue (Bold, Uppercase) Body: Inter (Light, 16px with 1.6 line height) Interactive Elements Diagram Code graph TD A[Hover States] --> B[Blue Glow Effect] A --> C[Subtle Scale Transform] D[Buttons] --> E[0.3s Smooth Transition] F[Product Cards] --> G[3D Lift Effect] 2. Page Architecture A. Login Gateway (with Developer Bypass) Visual Elements: Full-screen dark overlay (85% opacity) Centered white login panel with: Vision Bleu logo (SVG preferred) "DEALER PORTAL" heading in Bebas Neue Subtle blue border pulse animation (3s interval) Temporary Developer Features: html <!-- Top-right close button --> <button onclick="bypassAuth()" class="absolute top-6 right-6 text-white text-2xl hover:text-blue-300 transition"> <i class="fas fa-times"></i> </button> <!-- Console warning script --> <script> function bypassAuth() { document.getElementById('loginModal').classList.add('hidden'); document.getElementById('storeContent').classList.remove('hidden'); console.warn("DEV MODE: Login bypass active"); } </script> Login Form Fields: Dealer Email (with @ validation) Password (with show/hide toggle) "Remember Me" checkbox Forgot password link B. Store Dashboard (Post-Login) Header Components: Sticky navigation bar Left: Vision Bleu wordmark + dealer portal badge Right: Search icon (magnifying glass) Cart with dynamic item counter Account dropdown (Name + Avatar) Hero Section: Personalized welcome message ("Welcome Back, [First Name]") New product spotlight (with auto-rotating featured items) Two primary CTAs: "Explore New Arrivals" (blue button) "View Bulk Pricing" (white outline button) C. Product Grid System Layout Rules: Diagram Code graph LR Desktop[Desktop] -->|4 Columns| A[Product Cards] Tablet[Tablet] -->|2 Columns| A Mobile[Mobile] -->|1 Column| A Product Card Components: Product image (with hover zoom) Quick-add to cart button (appears on hover) Essential specs (IP68, voltage, warranty) Dynamic pricing (shows bulk discounts) "NEW" badge for recent additions Filtering System: Voltage (24V/12V toggle) Application (Residential/Commercial) Product Type (Strips/Spotlights/Controllers) D. Product Detail Page Interactive Features: 360° Product Viewer (GSAP-powered) LED Simulator: javascript function previewColor(type) { const colors = { white: "#FFFFFF", warm: "#F5F0E6", blue: "#0055FF", custom: colorPicker.value }; document.getElementById('led-preview').style.backgroundColor = colors[type]; } Brightness Slider (0-100% with real-time update) Technical Specs Accordion: Expandable sections for: Electrical specifications Installation requirements Certifications (IP68, safety standards) E. Cart & Checkout Flow Dealer-Specific Features: PO Number field Bulk order discount calculator "Request Installation Support" checkbox Shipping options prioritized for contractors Upsell Section: "Frequently Ordered Together" items Project estimation tool (sq. ft calculator) 3. Technical Requirements Performance Optimization Lazy-load all images (WebP format) Critical CSS inlined Animations hardware-accelerated Mobile-First Rules Thumb-friendly CTAs (minimum 48x48px) Simplified product grid on small screens Sticky "Add to Cart" button on product pages Integration Checklist json { "required": [ "Shopify Hydrogen", "HubSpot CRM Sync", "Bulk Discount Manager", "Order Tracking Pro" ], "optional": [ "LED Product Configurator", "Dealer Training Portal" ] } 4. Development Notes Temporary Bypass Implementation Add the "X" button to login modal Include bypassAuth() function Show visual indicator in header: html <div class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs"> <i class="fas fa-code mr-1"></i> DEVELOPMENT PREVIEW </div> Production Removal Steps Delete bypassAuth() function Remove "X" button from login Test actual authentication flow Final Output Deliverables ✅ Complete Shopify theme files ✅ Mobile-optimized responsive layout ✅ Interactive product preview tools ✅ Temporary developer bypass system ✅ Documentation for production deployment Prompt Usage Instructions: "DeepSite, create a Shopify dealer portal using these specifications. Implement the temporary login bypass for development purposes. Prioritize mobile responsiveness and maintain the black/white/blue color scheme with LED-inspired interactive elements." - Initial Deployment