Spaces:

VisionBleuLED
/

homepage-example-1

Running

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

e8c59e8 verified over 1 year ago

Raw History Blame Contribute Delete

21.1 kB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vision Bleu LED | Premium Architectural Lighting</title>
    <meta name="description" content="Become a dealer for industry-leading residential/commercial LED solutions. IP68 waterproof, 24V systems with 1000+ lighting effects.">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/gsap@3.9.0/dist/gsap.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.5); }
            50% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.8); }
        }
        @keyframes text-glow {
            0%, 100% { text-shadow: 0 0 5px rgba(0, 229, 255, 0.5); }
            50% { text-shadow: 0 0 15px rgba(0, 229, 255, 0.8); }
        }
        @keyframes border-glow {
            0%, 100% { border-color: rgba(0, 85, 255, 0.5); }
            50% { border-color: rgba(0, 229, 255, 0.8); }
        }
        .glow-cta {
            animation: pulse-glow 3s infinite;
            transition: all 0.3s ease;
        }
        .glow-cta:hover {
            animation: none;
            box-shadow: 0 0 25px rgba(0, 229, 255, 0.8);
            transform: scale(1.05);
        }
        .glow-text {
            animation: text-glow 3s infinite;
        }
        .glow-border {
            animation: border-glow 3s infinite;
            transition: all 0.3s ease;
        }
        .ticker-item {
            display: inline-block;
            padding-right: 40px;
            position: relative;
        }
        .ticker-item:after {
            content: "•";
            position: absolute;
            right: 15px;
            color: #00E5FF;
        }
        .ticker-container {
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
        }
        .ticker-content {
            display: inline-block;
            animation: ticker 30s linear infinite;
        }
        @keyframes ticker {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .video-overlay {
            background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
        }
        .product-card:hover .product-overlay {
            opacity: 1;
        }
        .lock-icon {
            transition: all 0.3s ease;
        }
        .glow-cta:hover .lock-icon {
            transform: rotate(90deg);
            color: #00E5FF;
        }
        .modal {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .house-icon {
            transition: all 0.5s ease;
        }
        .house-icon:hover {
            filter: drop-shadow(0 0 10px #00E5FF);
        }
        .graph-bar {
            animation: grow-bar 2s ease-out forwards;
            transform-origin: bottom;
        }
        @keyframes grow-bar {
            0% { transform: scaleY(0); }
            100% { transform: scaleY(1); }
        }
    </style>
</head>
<body class="bg-black text-white font-sans" style="font-family: 'Montserrat', sans-serif;">
    <!-- Hero Section -->
    <section class="min-h-screen flex flex-col md:flex-row">
        <!-- Left Panel - Dealer Program -->
        <div class="relative w-full md:w-1/2 h-1/2 md:h-auto overflow-hidden">
            <div class="absolute inset-0 video-overlay z-10"></div>
            <div class="absolute inset-0 flex items-center justify-center z-20 p-8 glow-border" style="border: 1px solid #0055FF;">
                <div class="text-center max-w-lg">
                    <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">PROFIT FROM PREMIUM LIGHTING</h1>
                    <p class="text-lg mb-8">Join Our Exclusive Dealer Network</p>
                    <button class="glow-cta bg-transparent border-2 border-blue-500 text-white px-8 py-3 rounded-none uppercase font-bold tracking-wider transition-all duration-300 hover:bg-blue-500 hover:text-white" onclick="window.location.href='/dealer-program'">
                        BECOME A DEALER →
                    </button>
                </div>
            </div>
            <video autoplay muted loop class="absolute inset-0 w-full h-full object-cover">
                <source src="https://example.com/commercial-led-video.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>

        <!-- Right Panel - Dealer Shop -->
        <div class="relative w-full md:w-1/2 h-1/2 md:h-auto bg-gray-900 flex items-center justify-center">
            <div class="absolute inset-0 grid grid-cols-8 grid-rows-8 gap-px opacity-20">
                <div class="bg-blue-500"></div>
                <!-- Repeat for LED grid effect -->
            </div>
            <div class="relative z-10 p-8 text-center max-w-lg">
                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">DEALER EXCLUSIVE PRICING</h1>
                <p class="text-lg mb-8">Industry-Leading Margins</p>
                <button id="dealerShopBtn" class="glow-cta bg-transparent border-2 border-white text-white px-8 py-3 rounded-none uppercase font-bold tracking-wider transition-all duration-300 hover:bg-white hover:text-black flex items-center mx-auto">
                    DEALER SHOP LOGIN <span class="lock-icon ml-2">🔒</span>
                </button>
            </div>
        </div>
    </section>

    <!-- Value Proposition Section -->
    <section class="py-20 px-4 md:px-8 lg:px-16">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-4xl md:text-5xl font-bold mb-16 text-center uppercase glow-text" style="font-family: 'Bebas Neue', sans-serif;">YOUR LIGHTING SOLUTION PARTNER</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Residential Solutions -->
                <div class="bg-gray-900 p-8 border border-gray-800 hover:border-blue-500 transition-all duration-300">
                    <div class="house-icon w-20 h-20 mx-auto mb-6 flex items-center justify-center text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">HOME LIGHTING REIMAGINED</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>Security Mode: 6000K White</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>100+ Architectural Presets</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>1000+ Holiday Effects</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Commercial Solutions -->
                <div class="bg-gray-900 p-8 border border-gray-800 hover:border-blue-500 transition-all duration-300">
                    <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">BRAND AMPLIFICATION</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>Turnkey Physical Marketing</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>Custom Brand Integration</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>ROI Calculator Tool</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Dealer Advantages -->
                <div class="bg-gray-900 p-8 border border-gray-800 hover:border-blue-500 transition-all duration-300">
                    <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">YOUR SUCCESS ECOSYSTEM</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>Marketing Video Production</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>Lead Generation Services</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>Installation Academy</span>
                        </li>
                    </ul>
                    <div class="mt-6 h-40 relative">
                        <div class="absolute bottom-0 left-0 right-0 flex justify-around items-end h-32">
                            <div class="w-8 bg-blue-500 graph-bar" style="height: 30%;"></div>
                            <div class="w-8 bg-blue-500 graph-bar" style="height: 50%;"></div>
                            <div class="w-8 bg-blue-500 graph-bar" style="height: 70%;"></div>
                            <div class="w-8 bg-blue-500 graph-bar" style="height: 100%; animation-delay: 0.5s;"></div>
                            <div class="w-8 bg-blue-500 graph-bar" style="height: 80%; animation-delay: 0.3s;"></div>
                            <div class="w-8 bg-blue-500 graph-bar" style="height: 60%; animation-delay: 0.2s;"></div>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 text-center text-sm opacity-70">
                            42% Avg Margin
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Product Superiority Bar -->
    <div class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-90 border-t border-blue-500 py-3 z-50">
        <div class="ticker-container overflow-hidden">
            <div class="ticker-content">
                <span class="ticker-item">IP68 WATERPROOF</span>
                <span class="ticker-item">24V LOW-VOLTAGE</span>
                <span class="ticker-item">100,000 HOUR LIFESPAN</span>
                <span class="ticker-item">5-YEAR WARRANTY</span>
                <span class="ticker-item">RGBW TECHNOLOGY</span>
                <span class="ticker-item">IP68 WATERPROOF</span>
                <span class="ticker-item">24V LOW-VOLTAGE</span>
                <span class="ticker-item">100,000 HOUR LIFESPAN</span>
                <span class="ticker-item">5-YEAR WARRANTY</span>
                <span class="ticker-item">RGBW TECHNOLOGY</span>
            </div>
        </div>
    </div>

    <!-- Conversion Gateway -->
    <section class="min-h-screen py-20 px-4 md:px-8 lg:px-16 relative overflow-hidden" style="background: linear-gradient(to bottom, #001233, #000);">
        <div class="absolute inset-0 opacity-10">
            <!-- LED particle effect would go here -->
        </div>
        
        <div class="max-w-7xl mx-auto relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <!-- Brochure CTA -->
                <div class="bg-black bg-opacity-50 p-8 border border-gray-800">
                    <h3 class="text-3xl font-bold mb-6 uppercase glow-text" style="font-family: 'Bebas Neue', sans-serif;">DEALER PROGRAM GUIDE</h3>
                    <form id="brochure-download" class="space-y-4">
                        <div>
                            <label for="name" class="block mb-1">Name</label>
                            <input type="text" id="name" name="name" required class="w-full bg-gray-900 border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-500">
                        </div>
                        <div>
                            <label for="email" class="block mb-1">Email</label>
                            <input type="email" id="email" name="email" required class="w-full bg-gray-900 border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-500">
                        </div>
                        <div>
                            <label for="phone" class="block mb-1">Phone</label>
                            <input type="tel" id="phone" name="phone" class="w-full bg-gray-900 border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-500">
                        </div>
                        <button type="submit" class="glow-cta bg-blue-500 text-white px-8 py-3 rounded-none uppercase font-bold tracking-wider w-full mt-6">
                            DOWNLOAD BROCHURE
                        </button>
                    </form>
                </div>
                
                <!-- Contact CTA -->
                <div class="text-center lg:text-left">
                    <h3 class="text-3xl font-bold mb-6 uppercase glow-text" style="font-family: 'Bebas Neue', sans-serif;">STRATEGY SESSION</h3>
                    <p class="text-lg mb-8 max-w-lg mx-auto lg:mx-0">Schedule a discovery call with our dealer success team to discuss your market potential.</p>
                    <button onclick="showCalendar()" class="glow-cta bg-transparent border-2 border-white text-white px-8 py-3 rounded-none uppercase font-bold tracking-wider hover:bg-white hover:text-black">
                        BOOK DISCOVERY CALL
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Dealer Shop Modal -->
    <div id="dealerShopModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300">
        <div class="bg-gray-900 p-8 max-w-md mx-4 border border-blue-500 relative">
            <button onclick="hideModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
            <h3 class="text-2xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">APPROVED PARTNERS ONLY</h3>
            <p class="mb-6">Our dealer shop is exclusively for approved Vision Bleu LED partners. Apply now to gain access to wholesale pricing and dealer resources.</p>
            <button onclick="window.location.href='/dealer-program'" class="glow-cta bg-blue-500 text-white px-6 py-2 rounded-none uppercase font-bold tracking-wider w-full">
                APPLY TO BECOME A DEALER
            </button>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="fixed bottom-8 right-8 bg-gray-900 border border-blue-500 px-6 py-3 shadow-lg transform translate-y-10 opacity-0 transition-all duration-300 z-50">
        <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Check your email for full dealer kit!</span>
        </div>
    </div>

    <script>
        // Dealer shop button click handler
        document.getElementById('dealerShopBtn').addEventListener('click', function() {
            showModal();
        });
        // Form submission handler
        document.getElementById('brochure-download').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Simulate form submission
            setTimeout(function() {
                showToast();
            }, 1000);
            
            // Here you would normally send the form data to your server
            // For this demo, we'll just show the toast
        });
        function showModal() {
            document.getElementById('dealerShopModal').classList.remove('invisible', 'opacity-0');
            document.getElementById('dealerShopModal').classList.add('opacity-100');
        }
        function hideModal() {
            document.getElementById('dealerShopModal').classList.remove('opacity-100');
            document.getElementById('dealerShopModal').classList.add('opacity-0', 'invisible');
        }
        function showToast() {
            const toast = document.getElementById('toast');
            toast.classList.remove('opacity-0', 'translate-y-10');
            toast.classList.add('opacity-100');
            
            setTimeout(function() {
                toast.classList.remove('opacity-100');
                toast.classList.add('opacity-0', 'translate-y-10');
            }, 5000);
        }
        function showCalendar() {
            // In a real implementation, this would open Calendly
            alert('In a real implementation, this would open the Calendly booking widget.');
        }
        // Simple scroll animations
        document.addEventListener('DOMContentLoaded', function() {
            // Animate the graph bars on page load
            gsap.from(".graph-bar", {
                scaleY: 0,
                duration: 1.5,
                ease: "elastic.out(1, 0.5)",
                stagger: 0.1
            });
            
            // Animate sections on scroll
            const sections = document.querySelectorAll('section');
            sections.forEach(section => {
                gsap.from(section, {
                    scrollTrigger: {
                        trigger: section,
                        start: "top 80%",
                        toggleActions: "play none none none"
                    },
                    opacity: 0,
                    y: 50,
                    duration: 1
                });
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=VisionBleuLED/homepage-example-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vision Bleu LED \| Premium Architectural Lighting</title>
	<meta name="description" content="Become a dealer for industry-leading residential/commercial LED solutions. IP68 waterproof, 24V systems with 1000+ lighting effects.">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/gsap@3.9.0/dist/gsap.min.js"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
	<style>
	@keyframes pulse-glow {
	0%, 100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.5); }
	50% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.8); }
	}
	@keyframes text-glow {
	0%, 100% { text-shadow: 0 0 5px rgba(0, 229, 255, 0.5); }
	50% { text-shadow: 0 0 15px rgba(0, 229, 255, 0.8); }
	}
	@keyframes border-glow {
	0%, 100% { border-color: rgba(0, 85, 255, 0.5); }
	50% { border-color: rgba(0, 229, 255, 0.8); }
	}
	.glow-cta {
	animation: pulse-glow 3s infinite;
	transition: all 0.3s ease;
	}
	.glow-cta:hover {
	animation: none;
	box-shadow: 0 0 25px rgba(0, 229, 255, 0.8);
	transform: scale(1.05);
	}
	.glow-text {
	animation: text-glow 3s infinite;
	}
	.glow-border {
	animation: border-glow 3s infinite;
	transition: all 0.3s ease;
	}
	.ticker-item {
	display: inline-block;
	padding-right: 40px;
	position: relative;
	}
	.ticker-item:after {
	content: "•";
	position: absolute;
	right: 15px;
	color: #00E5FF;
	}
	.ticker-container {
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	}
	.ticker-content {
	display: inline-block;
	animation: ticker 30s linear infinite;
	}
	@keyframes ticker {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
	}
	.video-overlay {
	background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
	}
	.product-card:hover .product-overlay {
	opacity: 1;
	}
	.lock-icon {
	transition: all 0.3s ease;
	}
	.glow-cta:hover .lock-icon {
	transform: rotate(90deg);
	color: #00E5FF;
	}
	.modal {
	transition: opacity 0.3s ease, visibility 0.3s ease;
	}
	.house-icon {
	transition: all 0.5s ease;
	}
	.house-icon:hover {
	filter: drop-shadow(0 0 10px #00E5FF);
	}
	.graph-bar {
	animation: grow-bar 2s ease-out forwards;
	transform-origin: bottom;
	}
	@keyframes grow-bar {
	0% { transform: scaleY(0); }
	100% { transform: scaleY(1); }
	}
	</style>
	</head>
	<body class="bg-black text-white font-sans" style="font-family: 'Montserrat', sans-serif;">
	<!-- Hero Section -->
	<section class="min-h-screen flex flex-col md:flex-row">
	<!-- Left Panel - Dealer Program -->
	<div class="relative w-full md:w-1/2 h-1/2 md:h-auto overflow-hidden">
	<div class="absolute inset-0 video-overlay z-10"></div>
	<div class="absolute inset-0 flex items-center justify-center z-20 p-8 glow-border" style="border: 1px solid #0055FF;">
	<div class="text-center max-w-lg">
	<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">PROFIT FROM PREMIUM LIGHTING</h1>
	<p class="text-lg mb-8">Join Our Exclusive Dealer Network</p>
	<button class="glow-cta bg-transparent border-2 border-blue-500 text-white px-8 py-3 rounded-none uppercase font-bold tracking-wider transition-all duration-300 hover:bg-blue-500 hover:text-white" onclick="window.location.href='/dealer-program'">
	BECOME A DEALER →
	</button>
	</div>
	</div>
	<video autoplay muted loop class="absolute inset-0 w-full h-full object-cover">
	<source src="https://example.com/commercial-led-video.mp4" type="video/mp4">
	Your browser does not support the video tag.
	</video>
	</div>

	<!-- Right Panel - Dealer Shop -->
	<div class="relative w-full md:w-1/2 h-1/2 md:h-auto bg-gray-900 flex items-center justify-center">
	<div class="absolute inset-0 grid grid-cols-8 grid-rows-8 gap-px opacity-20">
	<div class="bg-blue-500"></div>
	<!-- Repeat for LED grid effect -->
	</div>
	<div class="relative z-10 p-8 text-center max-w-lg">
	<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">DEALER EXCLUSIVE PRICING</h1>
	<p class="text-lg mb-8">Industry-Leading Margins</p>
	<button id="dealerShopBtn" class="glow-cta bg-transparent border-2 border-white text-white px-8 py-3 rounded-none uppercase font-bold tracking-wider transition-all duration-300 hover:bg-white hover:text-black flex items-center mx-auto">
	DEALER SHOP LOGIN <span class="lock-icon ml-2">🔒</span>
	</button>
	</div>
	</div>
	</section>

	<!-- Value Proposition Section -->
	<section class="py-20 px-4 md:px-8 lg:px-16">
	<div class="max-w-7xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-16 text-center uppercase glow-text" style="font-family: 'Bebas Neue', sans-serif;">YOUR LIGHTING SOLUTION PARTNER</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Residential Solutions -->
	<div class="bg-gray-900 p-8 border border-gray-800 hover:border-blue-500 transition-all duration-300">
	<div class="house-icon w-20 h-20 mx-auto mb-6 flex items-center justify-center text-blue-500">
	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
	</svg>
	</div>
	<h3 class="text-2xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">HOME LIGHTING REIMAGINED</h3>
	<ul class="space-y-2">
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>Security Mode: 6000K White</span>
	</li>
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>100+ Architectural Presets</span>
	</li>
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>1000+ Holiday Effects</span>
	</li>
	</ul>
	</div>

	<!-- Commercial Solutions -->
	<div class="bg-gray-900 p-8 border border-gray-800 hover:border-blue-500 transition-all duration-300">
	<div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center text-blue-500">
	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
	</svg>
	</div>
	<h3 class="text-2xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">BRAND AMPLIFICATION</h3>
	<ul class="space-y-2">
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>Turnkey Physical Marketing</span>
	</li>
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>Custom Brand Integration</span>
	</li>
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>ROI Calculator Tool</span>
	</li>
	</ul>
	</div>

	<!-- Dealer Advantages -->
	<div class="bg-gray-900 p-8 border border-gray-800 hover:border-blue-500 transition-all duration-300">
	<div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center text-blue-500">
	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
	</svg>
	</div>
	<h3 class="text-2xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">YOUR SUCCESS ECOSYSTEM</h3>
	<ul class="space-y-2">
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>Marketing Video Production</span>
	</li>
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>Lead Generation Services</span>
	</li>
	<li class="flex items-start">
	<span class="text-blue-500 mr-2">•</span>
	<span>Installation Academy</span>
	</li>
	</ul>
	<div class="mt-6 h-40 relative">
	<div class="absolute bottom-0 left-0 right-0 flex justify-around items-end h-32">
	<div class="w-8 bg-blue-500 graph-bar" style="height: 30%;"></div>
	<div class="w-8 bg-blue-500 graph-bar" style="height: 50%;"></div>
	<div class="w-8 bg-blue-500 graph-bar" style="height: 70%;"></div>
	<div class="w-8 bg-blue-500 graph-bar" style="height: 100%; animation-delay: 0.5s;"></div>
	<div class="w-8 bg-blue-500 graph-bar" style="height: 80%; animation-delay: 0.3s;"></div>
	<div class="w-8 bg-blue-500 graph-bar" style="height: 60%; animation-delay: 0.2s;"></div>
	</div>
	<div class="absolute bottom-0 left-0 right-0 text-center text-sm opacity-70">
	42% Avg Margin
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Product Superiority Bar -->
	<div class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-90 border-t border-blue-500 py-3 z-50">
	<div class="ticker-container overflow-hidden">
	<div class="ticker-content">
	<span class="ticker-item">IP68 WATERPROOF</span>
	<span class="ticker-item">24V LOW-VOLTAGE</span>
	<span class="ticker-item">100,000 HOUR LIFESPAN</span>
	<span class="ticker-item">5-YEAR WARRANTY</span>
	<span class="ticker-item">RGBW TECHNOLOGY</span>
	<span class="ticker-item">IP68 WATERPROOF</span>
	<span class="ticker-item">24V LOW-VOLTAGE</span>
	<span class="ticker-item">100,000 HOUR LIFESPAN</span>
	<span class="ticker-item">5-YEAR WARRANTY</span>
	<span class="ticker-item">RGBW TECHNOLOGY</span>
	</div>
	</div>
	</div>

	<!-- Conversion Gateway -->
	<section class="min-h-screen py-20 px-4 md:px-8 lg:px-16 relative overflow-hidden" style="background: linear-gradient(to bottom, #001233, #000);">
	<div class="absolute inset-0 opacity-10">
	<!-- LED particle effect would go here -->
	</div>

	<div class="max-w-7xl mx-auto relative z-10">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
	<!-- Brochure CTA -->
	<div class="bg-black bg-opacity-50 p-8 border border-gray-800">
	<h3 class="text-3xl font-bold mb-6 uppercase glow-text" style="font-family: 'Bebas Neue', sans-serif;">DEALER PROGRAM GUIDE</h3>
	<form id="brochure-download" class="space-y-4">
	<div>
	<label for="name" class="block mb-1">Name</label>
	<input type="text" id="name" name="name" required class="w-full bg-gray-900 border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-500">
	</div>
	<div>
	<label for="email" class="block mb-1">Email</label>
	<input type="email" id="email" name="email" required class="w-full bg-gray-900 border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-500">
	</div>
	<div>
	<label for="phone" class="block mb-1">Phone</label>
	<input type="tel" id="phone" name="phone" class="w-full bg-gray-900 border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-500">
	</div>
	<button type="submit" class="glow-cta bg-blue-500 text-white px-8 py-3 rounded-none uppercase font-bold tracking-wider w-full mt-6">
	DOWNLOAD BROCHURE
	</button>
	</form>
	</div>

	<!-- Contact CTA -->
	<div class="text-center lg:text-left">
	<h3 class="text-3xl font-bold mb-6 uppercase glow-text" style="font-family: 'Bebas Neue', sans-serif;">STRATEGY SESSION</h3>
	<p class="text-lg mb-8 max-w-lg mx-auto lg:mx-0">Schedule a discovery call with our dealer success team to discuss your market potential.</p>
	<button onclick="showCalendar()" class="glow-cta bg-transparent border-2 border-white text-white px-8 py-3 rounded-none uppercase font-bold tracking-wider hover:bg-white hover:text-black">
	BOOK DISCOVERY CALL
	</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Dealer Shop Modal -->
	<div id="dealerShopModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300">
	<div class="bg-gray-900 p-8 max-w-md mx-4 border border-blue-500 relative">
	<button onclick="hideModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
	</svg>
	</button>
	<h3 class="text-2xl font-bold mb-4 uppercase" style="font-family: 'Bebas Neue', sans-serif;">APPROVED PARTNERS ONLY</h3>
	<p class="mb-6">Our dealer shop is exclusively for approved Vision Bleu LED partners. Apply now to gain access to wholesale pricing and dealer resources.</p>
	<button onclick="window.location.href='/dealer-program'" class="glow-cta bg-blue-500 text-white px-6 py-2 rounded-none uppercase font-bold tracking-wider w-full">
	APPLY TO BECOME A DEALER
	</button>
	</div>
	</div>

	<!-- Toast Notification -->
	<div id="toast" class="fixed bottom-8 right-8 bg-gray-900 border border-blue-500 px-6 py-3 shadow-lg transform translate-y-10 opacity-0 transition-all duration-300 z-50">
	<div class="flex items-center">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
	</svg>
	<span>Check your email for full dealer kit!</span>
	</div>
	</div>

	<script>
	// Dealer shop button click handler
	document.getElementById('dealerShopBtn').addEventListener('click', function() {
	showModal();
	});

	// Form submission handler
	document.getElementById('brochure-download').addEventListener('submit', function(e) {
	e.preventDefault();

	// Simulate form submission
	setTimeout(function() {
	showToast();
	}, 1000);

	// Here you would normally send the form data to your server
	// For this demo, we'll just show the toast
	});

	function showModal() {
	document.getElementById('dealerShopModal').classList.remove('invisible', 'opacity-0');
	document.getElementById('dealerShopModal').classList.add('opacity-100');
	}

	function hideModal() {
	document.getElementById('dealerShopModal').classList.remove('opacity-100');
	document.getElementById('dealerShopModal').classList.add('opacity-0', 'invisible');
	}

	function showToast() {
	const toast = document.getElementById('toast');
	toast.classList.remove('opacity-0', 'translate-y-10');
	toast.classList.add('opacity-100');

	setTimeout(function() {
	toast.classList.remove('opacity-100');
	toast.classList.add('opacity-0', 'translate-y-10');
	}, 5000);
	}

	function showCalendar() {
	// In a real implementation, this would open Calendly
	alert('In a real implementation, this would open the Calendly booking widget.');
	}

	// Simple scroll animations
	document.addEventListener('DOMContentLoaded', function() {
	// Animate the graph bars on page load
	gsap.from(".graph-bar", {
	scaleY: 0,
	duration: 1.5,
	ease: "elastic.out(1, 0.5)",
	stagger: 0.1
	});

	// Animate sections on scroll
	const sections = document.querySelectorAll('section');
	sections.forEach(section => {
	gsap.from(section, {
	scrollTrigger: {
	trigger: section,
	start: "top 80%",
	toggleActions: "play none none none"
	},
	opacity: 0,
	y: 50,
	duration: 1
	});
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=VisionBleuLED/homepage-example-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>