-
Mega Prompt: Vision Bleu LED Homepage Brand Identity: Color Palette: Primary: #000000 (Black), #FFFFFF (White) Accent: #0055FF (Electric Blue) Special: #00E5FF (Cyan glow for LED elements) Typography: Headings: "Bebas Neue" (Bold, uppercase) Body: "Montserrat" (Light, clean lines) Visual Style: Ultra-minimalist dark theme (95% black backgrounds) "LED-inspired" elements with subtle glow effects High-contrast white text with blue accents Cinematic full-bleed imagery Page Structure & Functionality 1. Hero Section (Full Viewport Split-Screen) Left Panel (Dealer Program): Visual: 5-second looping video of commercial building LED transformation (day→night) Overlay: 80% dark gradient fading to transparent at center Glowing border effect: 1px #00E5FF pulse animation (3s interval) Content: Text: "PROFIT FROM PREMIUM LIGHTING" (Bebas Neue, 4rem) Subtext: "Join Our Exclusive Dealer Network" (Montserrat, 1.2rem) Button: html <button class="glow-cta" data-destination="/dealer-program"> BECOME A DEALER → </button> Hover Effect: Cyan text glow (#00E5FF) Scale transform: 105% 0.3s ease transition Click Action: Instant redirect to /dealer-program with crossfade transition Right Panel (Dealer Shop): Visual: 3D rotating product showcase (residential starter kit) Dynamic CSS grid overlay simulating LED matrix Content: Text: "DEALER EXCLUSIVE PRICING" (Bebas Neue, 4rem) Subtext: "Industry-Leading Margins" (Montserrat, 1.2rem) Button: html <button class="glow-cta" data-destination="https://shop.visionbleuled.com"> DEALER SHOP LOGIN 🔒 </button> Hover Effect: White pulse animation Lock icon transforms to unlocked state Click Action: Redirect to Shopify store Non-dealers see modal: "Approved Partners Only" with application link 2. Value Proposition Section (Below Fold) Layout: 3-column responsive grid (becomes carousel on mobile) Column 1: Residential Solutions Visual: Animated icon: House outline with 3 lighting modes cycling (security → architectural → holiday) Hover-triggered demo video overlay Content: Header: "HOME LIGHTING REIMAGINED" Bullets: • Security Mode: 6000K White • 100+ Architectural Presets • 1000+ Holiday Effects Column 2: Commercial Solutions Visual: Interactive building silhouette with brand-colored LEDs Drag slider to change lighting scenarios Content: Header: "BRAND AMPLIFICATION" Bullets: • Turnkey Physical Marketing • Custom Brand Integration • ROI Calculator Tool Column 3: Dealer Advantages Visual: Animated profit graph (42% avg margin) Icons floating around: 🎓 (Education) 📈 (Leads) 🎥 (Videos) Content: Header: "YOUR SUCCESS ECOSYSTEM" Bullets: • Marketing Video Production • Lead Generation Services • Installation Academy 3. Product Superiority Bar (Sticky Element) Position: Fixed to bottom viewport edge Content: css .superiority-bar { background: rgba(0,0,0,0.9); border-top: 1px solid #0055FF; display: grid; grid-template-columns: repeat(4, 1fr); } Animated Text Ticker: IP68 WATERPROOF • 24V LOW-VOLTAGE • 100,000 HOUR LIFESPAN • 5-YEAR WARRANTY • RGBW TECHNOLOGY 4. Conversion Gateway Visual: Dark blue gradient background (#001233 → #000) Floating 3D product render (center) Particle effect: Simulated LED light particles Content Layout (2-column): html <div class="conversion-grid"> <div class="brochure-cta"> <h3>DEALER PROGRAM GUIDE</h3> <form id="brochure-download">...</form> </div> <div class="contact-cta"> <h3>STRATEGY SESSION</h3> <button onclick="Calendly.initPopupWidget()">BOOK DISCOVERY CALL</button> </div> </div> Form Specs: Fields: Name (text), Email (email), Phone (tel) Validation: Real-time error highlighting Submit Action: PDF brochure download (dynamic filename: VisionBleu_DealerGuide_[timestamp].pdf) HubSpot CRM entry creation Confirmation toast: "Check your email for full dealer kit!" Motion Design System Scroll Animations: Sections fade in with parallax effect LED elements "power on" when in viewport Interactive Elements: Glow pulse on all CTAs (3s loop) Hover-triggered lighting mode previews Transitions: Page load: Simulated LED startup sequence Between sections: Vertical wipe with blue accent line Technical Specifications Performance: Lazy-load videos/images Critical CSS inlined WebP images with AVIF fallback Responsive Rules: Mobile: Split-screen → Full-width stacked panels Tablet: Column grids → 2x2 layout Breakpoints: 768px / 1024px Accessibility: WCAG 2.1 AA compliant Reduced motion option Keyboard navigation flow Required Assets: 4K background videos (commercial/residential) 3D product GLB files Custom icon set (SVG) json { "page_title": "Vision Bleu LED | Premium Architectural Lighting", "meta_description": "Become a dealer for industry-leading residential/commercial LED solutions. IP68 waterproof, 24V systems with 1000+ lighting effects.", "scripts": ["gsap.min.js", "calendly.js"], "integrations": ["HubSpot", "Google Analytics 4"] } Output Instructions for DeepSite Single-page HTML/CSS/JS build Mobile-first responsive architecture All animations using CSS transitions/GSAP Form handling via Netlify Functions (if static) ADA-compliant focus states Dynamic PDF generation endpoint - Initial Deployment
-
initial commit
