Ctrl+K
- 1.52 kB initial commit
- 224 Bytes ### Mega Prompt for Vision Bleu LED Website Construction **Project Goal:** Create 3 interconnected websites with seamless UX flows **Core Functionality:** Dealer conversion funnel + exclusive Shopify store **Technical Specs:** - Framework: React (Homepage/Funnel) + Shopify (Dealer Store) - Animations: GSAP for scroll/hover effects - Form Handling: Formik + HubSpot CRM integration --- ### **1. Main Homepage (`visionbleuled.com`)** **Visual Style:** Dark-mode focused (90% dark blue/black) with vibrant LED accent colors (electric cyan/amber) **Hero Section (Full-viewport split-screen):** | Left Panel (Dealer Program) | Right Panel (Dealer Shop) | |-------------------------------------------|-----------------------------------------| | **Background:** 5-sec video loop of:<br>- Commercial building LED transformation (day→night)<br>- Text overlay: "Profit from Premium Lighting" | **Background:** 3D rotating product showcase<br>- Residential starter kit<br>- Commercial RGBW strip<br>Text overlay: "Dealer-Exclusive Pricing" | | **Button:**<br>```html<button id="dealer-cta">BECOME A DEALER →</button>```<br>- *Hover Effect:* Cyan glow pulse (box-shadow: 0 0 15px #00E5FF)<br>- *Click Action:* Instant redirect to `visionbleuled.com/dealer-program` with smooth fade transition | **Button:**<br>```html<button id="shop-cta">DEALER SHOP LOGIN →</button>```<br>- *Hover Effect:* Amber border glow (border: 2px solid #FF9E00)<br>- *Click Action:* Redirect to `shop.visionbleuled.com`<br>- *Non-Dealer Click:* Show modal "Approved Dealers Only" with link to apply | **Scroll-Down Sequence (After Hero):** 1. **Problem/Solution Section** - *Left:* Pain points (fading bulbs, complex installs) with ❌ icons - *Right:* Vision Bleu solutions (IP68 seal, plug-and-play) with ✅ icons - *CTA:* "Download Technical Specs" (PDF generator) 2. **Mode Showcase (Interactive Grid)** ```html <div class="mode-selector"> <div data-mode="security" onclick="showVideo('security.mp4')">SECURITY</div> <div data-mode="architectural" onclick="showVideo('warmwhite.mp4')">ARCHITECTURAL</div> <div data-mode="holiday" onclick="showVideo('xmas-pattern.mp4')">HOLIDAY</div> </div> <video id="mode-demo" autoplay loop muted></video> ``` - *Hover Effect:* RGB border cycle animation 3. **Dealer Benefits Teaser** - Animated counter: "42% Average Margin" - "Pre-Built Marketing Kits" thumbnail → Opens video modal --- ### **2. Dealer Program Funnel (`visionbleuled.com/dealer-program`)** **Visual Style:** Light/dark toggle (prioritizing project imagery) **Conversion Pathway:** #### Section 1: Value Proposition - **Header Video:** 15-sec sizzle reel (residential/commercial projects) - **3-Tab System:** ```html <div class="tab" data-tab="products">PRODUCT ADVANTAGES</div> <div class="tab" data-tab="business">BUSINESS GROWTH</div> <div class="tab" data-tab="support">DEALER SUPPORT</div> ``` - *Click Action:* Content swap with slide animation #### Section 2: Interactive Product Explorer - **Residential vs Commercial Toggle** ```javascript function showProductLine(type) { document.querySelectorAll('.product-card').forEach(card => { card.style.display = (card.dataset.category === type) ? 'grid' : 'none'; }); } ``` - *Hover on Product Card:* 360° spin + spec overlay (IP68, RGBW, voltage) #### Section 3: Onboarding Process ```mermaid graph LR A[Application] -->|Instant| B[Discovery Call] B -->|24hr| C[Portal Access] C -->|48hr| D[First Order Shipped] ``` - **Tooltip Hover:** Explainer modals for each step #### Section 4: Application Form - **Fields:** ```html <input type="text" id="company" placeholder="Company Name" required> <select id="experience"> <option>New to Lighting</option> <option>1-3 Years Experience</option> <option>5+ Years Expert</option> </select> <input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> ``` - **Submit Action:** 1. HubSpot CRM creation 2. Auto-Calendly invite ("Book Strategy Call") 3. PDF dealer kit download --- ### **3. Dealer Shop (`shop.visionbleuled.com`)** **Shopify Theme:** Minimalist industrial (exposed grid layout) **Auth Workflow:** ```mermaid sequenceDiagram Visitor->>Shopify: Access URL Shopify->>Auth API: Check session Auth API--xUnauthorized: Show login modal Authorized->>Shopify: Load dashboard ``` **Key Page Elements:** #### A. Login Gateway - **Modal if Unauthenticated:** ```html <div class="auth-modal"> <input type="email" placeholder="Dealer Email"> <input type="password" placeholder="Password"> <button onclick="authenticate()">ACCESS PORTAL</button> <p>Not a dealer? <a href="/dealer-program">Apply Now</a></p> </div> ``` #### B. Product Listing Page (Post-Login) - **View Toggles:** - Grid vs. List view - Residential/Commercial filter - **Hover on Product:** - Quick-add to cart (+) button - "Install Guide" PDF icon #### C. Product Detail Page - **Media Gallery:** - 360° product viewer - "Lighting Mode Simulator" (drag slider to see color temps) - **Tech Specs Accordion:** ```html <details> <summary>Waterproof Testing Data</summary> <embed src="ip68-certificate.pdf"> </details> ``` - **Bulk Discount Badge:** "10+ units: 15% OFF" #### D. Cart & Checkout Flow - **Cart Page Features:** - Project calculator (price/sq. ft) - "Add Marketing Services" expandable section - **Checkout Process:** - Dealer-specific shipping tiers - PO number field --- ### **Global Interactions & UX Rules** 1. **Navigation:** - Sticky header with real-time cart counter - "Dealer Support" chat bubble (bottom right) 2. **Responsive Behavior:** - Mobile: Split-screen → Stacked cards + hamburger menu - Tablet: Product grids → 2-column layout 3. **Micro-Interactions:** - Button clicks: Ripple animation - Form errors: Pulsating red border - Page transitions: Fade + slide 4. **Data Flow:** ```mermaid graph TB Homepage -->|Dealer Apply| HubSpot HubSpot -->|Approval| Shopify[Shopify User DB] Shopify -->|Order Data| Analytics[Google Analytics] ``` 5. **Asset Requirements:** - 4K project videos (day/night transitions) - 3D product rotations (GLB files) - Dealer testimonial clips (15-30 sec) --- **Output Specifications:** - Fully functional React pages (Home/Funnel) - Shopify theme JSON config - GSAP animation timeline scripts - Mobile interaction documentation - Initial Deployment
- 76.2 kB ### Mega Prompt for Vision Bleu LED Website Construction **Project Goal:** Create 3 interconnected websites with seamless UX flows **Core Functionality:** Dealer conversion funnel + exclusive Shopify store **Technical Specs:** - Framework: React (Homepage/Funnel) + Shopify (Dealer Store) - Animations: GSAP for scroll/hover effects - Form Handling: Formik + HubSpot CRM integration --- ### **1. Main Homepage (`visionbleuled.com`)** **Visual Style:** Dark-mode focused (90% dark blue/black) with vibrant LED accent colors (electric cyan/amber) **Hero Section (Full-viewport split-screen):** | Left Panel (Dealer Program) | Right Panel (Dealer Shop) | |-------------------------------------------|-----------------------------------------| | **Background:** 5-sec video loop of:<br>- Commercial building LED transformation (day→night)<br>- Text overlay: "Profit from Premium Lighting" | **Background:** 3D rotating product showcase<br>- Residential starter kit<br>- Commercial RGBW strip<br>Text overlay: "Dealer-Exclusive Pricing" | | **Button:**<br>```html<button id="dealer-cta">BECOME A DEALER →</button>```<br>- *Hover Effect:* Cyan glow pulse (box-shadow: 0 0 15px #00E5FF)<br>- *Click Action:* Instant redirect to `visionbleuled.com/dealer-program` with smooth fade transition | **Button:**<br>```html<button id="shop-cta">DEALER SHOP LOGIN →</button>```<br>- *Hover Effect:* Amber border glow (border: 2px solid #FF9E00)<br>- *Click Action:* Redirect to `shop.visionbleuled.com`<br>- *Non-Dealer Click:* Show modal "Approved Dealers Only" with link to apply | **Scroll-Down Sequence (After Hero):** 1. **Problem/Solution Section** - *Left:* Pain points (fading bulbs, complex installs) with ❌ icons - *Right:* Vision Bleu solutions (IP68 seal, plug-and-play) with ✅ icons - *CTA:* "Download Technical Specs" (PDF generator) 2. **Mode Showcase (Interactive Grid)** ```html <div class="mode-selector"> <div data-mode="security" onclick="showVideo('security.mp4')">SECURITY</div> <div data-mode="architectural" onclick="showVideo('warmwhite.mp4')">ARCHITECTURAL</div> <div data-mode="holiday" onclick="showVideo('xmas-pattern.mp4')">HOLIDAY</div> </div> <video id="mode-demo" autoplay loop muted></video> ``` - *Hover Effect:* RGB border cycle animation 3. **Dealer Benefits Teaser** - Animated counter: "42% Average Margin" - "Pre-Built Marketing Kits" thumbnail → Opens video modal --- ### **2. Dealer Program Funnel (`visionbleuled.com/dealer-program`)** **Visual Style:** Light/dark toggle (prioritizing project imagery) **Conversion Pathway:** #### Section 1: Value Proposition - **Header Video:** 15-sec sizzle reel (residential/commercial projects) - **3-Tab System:** ```html <div class="tab" data-tab="products">PRODUCT ADVANTAGES</div> <div class="tab" data-tab="business">BUSINESS GROWTH</div> <div class="tab" data-tab="support">DEALER SUPPORT</div> ``` - *Click Action:* Content swap with slide animation #### Section 2: Interactive Product Explorer - **Residential vs Commercial Toggle** ```javascript function showProductLine(type) { document.querySelectorAll('.product-card').forEach(card => { card.style.display = (card.dataset.category === type) ? 'grid' : 'none'; }); } ``` - *Hover on Product Card:* 360° spin + spec overlay (IP68, RGBW, voltage) #### Section 3: Onboarding Process ```mermaid graph LR A[Application] -->|Instant| B[Discovery Call] B -->|24hr| C[Portal Access] C -->|48hr| D[First Order Shipped] ``` - **Tooltip Hover:** Explainer modals for each step #### Section 4: Application Form - **Fields:** ```html <input type="text" id="company" placeholder="Company Name" required> <select id="experience"> <option>New to Lighting</option> <option>1-3 Years Experience</option> <option>5+ Years Expert</option> </select> <input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> ``` - **Submit Action:** 1. HubSpot CRM creation 2. Auto-Calendly invite ("Book Strategy Call") 3. PDF dealer kit download --- ### **3. Dealer Shop (`shop.visionbleuled.com`)** **Shopify Theme:** Minimalist industrial (exposed grid layout) **Auth Workflow:** ```mermaid sequenceDiagram Visitor->>Shopify: Access URL Shopify->>Auth API: Check session Auth API--xUnauthorized: Show login modal Authorized->>Shopify: Load dashboard ``` **Key Page Elements:** #### A. Login Gateway - **Modal if Unauthenticated:** ```html <div class="auth-modal"> <input type="email" placeholder="Dealer Email"> <input type="password" placeholder="Password"> <button onclick="authenticate()">ACCESS PORTAL</button> <p>Not a dealer? <a href="/dealer-program">Apply Now</a></p> </div> ``` #### B. Product Listing Page (Post-Login) - **View Toggles:** - Grid vs. List view - Residential/Commercial filter - **Hover on Product:** - Quick-add to cart (+) button - "Install Guide" PDF icon #### C. Product Detail Page - **Media Gallery:** - 360° product viewer - "Lighting Mode Simulator" (drag slider to see color temps) - **Tech Specs Accordion:** ```html <details> <summary>Waterproof Testing Data</summary> <embed src="ip68-certificate.pdf"> </details> ``` - **Bulk Discount Badge:** "10+ units: 15% OFF" #### D. Cart & Checkout Flow - **Cart Page Features:** - Project calculator (price/sq. ft) - "Add Marketing Services" expandable section - **Checkout Process:** - Dealer-specific shipping tiers - PO number field --- ### **Global Interactions & UX Rules** 1. **Navigation:** - Sticky header with real-time cart counter - "Dealer Support" chat bubble (bottom right) 2. **Responsive Behavior:** - Mobile: Split-screen → Stacked cards + hamburger menu - Tablet: Product grids → 2-column layout 3. **Micro-Interactions:** - Button clicks: Ripple animation - Form errors: Pulsating red border - Page transitions: Fade + slide 4. **Data Flow:** ```mermaid graph TB Homepage -->|Dealer Apply| HubSpot HubSpot -->|Approval| Shopify[Shopify User DB] Shopify -->|Order Data| Analytics[Google Analytics] ``` 5. **Asset Requirements:** - 4K project videos (day/night transitions) - 3D product rotations (GLB files) - Dealer testimonial clips (15-30 sec) --- **Output Specifications:** - Fully functional React pages (Home/Funnel) - Shopify theme JSON config - GSAP animation timeline scripts - Mobile interaction documentation - Initial Deployment
- 388 Bytes initial commit