Spaces:

LimenAlex
/

site

Running

File size: 26,761 Bytes

14035a5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SignPro+ | Premium Vinyl Window Graphics</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Helvetica+Neue:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --gold: #FFD700;
            --electric: #7B61FF;
            --psychic: #FF6B9D;
            --aqua: #00F5D4;
        }
        
        body {
            font-family: 'Helvetica Neue', sans-serif;
            color: #0f172a;
            overflow-x: hidden;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, var(--electric) 0%, var(--psychic) 50%, var(--aqua) 100%);
            height: 120vh;
            clip-path: ellipse(120% 100% at 50% 0%);
        }
        
        .logo-text {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            letter-spacing: 0.5px;
            font-size: 1.2rem;
        }
        
        .logo-plus {
            font-size: 0.7rem;
            vertical-align: super;
            margin-left: 2px;
            font-weight: 700;
        }
        
        .gold {
            color: var(--gold);
        }
        
        .btn-float {
            animation: float 4s ease-in-out infinite;
        }
        
        .btn-pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
        }
        
        .glow-text {
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }
        
        .card-hover {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .card-hover:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 30px 30px -15px rgba(0, 0, 0, 0.2);
        }
        
        .rounded-xl {
            border-radius: 1.5rem;
        }
        
        .rounded-full-xl {
            border-radius: 5rem;
        }
        
        .transition-slow {
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .parallax {
            background-attachment: fixed;
        }
        
        .blob {
            position: absolute;
            width: 500px;
            height: 500px;
            background: linear-gradient(45deg, var(--electric), var(--psychic));
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            filter: blur(60px);
            opacity: 0.2;
            z-index: 0;
        }
        
        .blob-1 {
            top: 20%;
            left: -10%;
            animation: blob-1 25s infinite alternate;
        }
        
        .blob-2 {
            bottom: 10%;
            right: -10%;
            animation: blob-2 30s infinite alternate;
        }
        
        @keyframes blob-1 {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(200px, 200px) rotate(360deg); }
        }
        
        @keyframes blob-2 {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(-200px, -200px) rotate(-360deg); }
        }
        
        .before-after-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            height: 500px;
            overflow: hidden;
            border-radius: 1.5rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        .before-after-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .before-image {
            width: 50%;
            z-index: 2;
        }
        
        .slider-handle {
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            background-color: white;
            z-index: 3;
            cursor: ew-resize;
            transform: translateX(-50%);
        }
        
        .slider-handle::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .slider-handle::after {
            content: '↔';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--electric);
            font-weight: bold;
        }
        
        .section-heading {
            font-family: 'Helvetica Neue', sans-serif;
            font-weight: 700;
            line-height: 1.1;
        }
        
        .body-text {
            font-size: 1.25rem;
            line-height: 1.7;
            font-family: 'Roboto', sans-serif;
        }
        
        .dark-text {
            color: #1a1a1a;
        }
        
        .text-gradient {
            background: linear-gradient(90deg, var(--electric), var(--psychic));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .transformation-section {
            background-color: #2d3748;
        }
        
        .transformation-heading {
            color: white;
            font-family: 'Montserrat', sans-serif;
            font-size: 2.5rem;
            margin-bottom: 2rem;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, var(--electric), var(--psychic));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .sticky-header {
            background: linear-gradient(135deg, var(--electric) 0%, var(--psychic) 100%);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="antialiased">
    <!-- Navigation -->
    <nav class="fixed w-full z-50 sticky-header">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <span class="logo-text text-white">
                            SignPro<span class="gold logo-plus">+</span>
                        </span>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-10">
                    <a href="#" class="text-white hover:text-gold px-3 py-2 text-lg font-medium transition-slow">Services</a>
                    <a href="#" class="text-white hover:text-gold px-3 py-2 text-lg font-medium transition-slow">Portfolio</a>
                    <a href="#" class="text-white hover:text-gold px-3 py-2 text-lg font-medium transition-slow">Pricing</a>
                    <a href="#" class="text-white hover:text-gold px-3 py-2 text-lg font-medium transition-slow">About</a>
                    <a href="#" class="bg-white text-electric px-6 py-3 rounded-full-xl text-lg font-bold hover:bg-gray-100 transition-slow btn-float">
                        Get a Quote
                    </a>
                </div>
                <div class="md:hidden">
                    <button type="button" class="text-white text-2xl">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="hero-gradient relative overflow-hidden">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        
        <div class="max-w-7xl mx-auto h-full flex items-center px-6 pt-24 pb-32 relative z-10">
            <div class="text-center w-full">
                <h1 class="section-heading text-4xl md:text-6xl lg:text-7xl text-white mb-10 glow-text">
                    <span class="block">Don't Let Tape and Paper</span>
                    <span class="block">Define Your Brand</span>
                </h1>
                
                <p class="mt-10 body-text text-white/90 max-w-4xl mx-auto">
                    Premium vinyl window graphics that transform unprofessional storefronts into customer magnets. 
                    Affordable solutions that make your business look established and credible.
                </p>
                
                <div class="mt-16 flex flex-col sm:flex-row justify-center items-center space-y-5 sm:space-y-0 sm:space-x-8">
                    <a href="#" class="bg-white text-electric px-8 sm:px-12 py-4 sm:py-5 rounded-full-xl text-xl sm:text-2xl font-bold hover:bg-gray-100 transition-slow btn-float btn-pulse relative z-10">
                        Get Your Custom Sign
                        <i class="fas fa-arrow-right ml-3"></i>
                    </a>
                    <a href="#" class="bg-transparent border-2 border-white text-white px-8 sm:px-12 py-4 sm:py-5 rounded-full-xl text-xl sm:text-2xl font-bold hover:bg-white/10 transition-slow btn-float relative z-10">
                        See Examples
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Message Section -->
    <div class="relative bg-white py-20 -mt-20 z-20">
        <div class="max-w-5xl mx-auto px-6 text-center">
            <h2 class="section-heading text-3xl md:text-5xl dark-text mb-12">
                <span class="block">If Your Window Looks Unprofessional,</span>
                <span class="block text-gradient">Customers Assume Your Business Is Too</span>
            </h2>
            
            <p class="body-text text-gray-600 max-w-3xl mx-auto mb-16">
                Your storefront appearance is <span class="font-bold text-electric">costing</span> you customers every day. 
                Research shows <span class="font-bold text-psychic">83% of people</span> judge businesses by their exterior before entering.
                Unprofessional window signage (paper signs, faded decals, etc.) makes your business look amateurish or temporary, actively deterring potential customers and sending them to competitors.
            </p>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-3xl card-hover">
                    <div class="text-electric text-5xl mb-6">
                        <i class="fas fa-user-slash"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 dark-text">Lost Customers</h3>
                    <p class="text-gray-600">
                        Amateurish signage deters up to 60% of potential customers before they even enter.
                    </p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-3xl card-hover">
                    <div class="text-psychic text-5xl mb-6">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 dark-text">Lower Perceived Value</h3>
                    <p class="text-gray-600">
                        Poor presentation makes customers assume your products/services are also low quality.
                    </p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-3xl card-hover">
                    <div class="text-aqua text-5xl mb-6">
                        <i class="fas fa-store-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 dark-text">Competitive Disadvantage</h3>
                    <p class="text-gray-600">
                        Customers will choose competitors who appear more professional and established.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Before/After Section -->
    <div class="transformation-section py-20">
        <div class="max-w-7xl mx-auto px-6">
            <h2 class="transformation-heading text-center">
                The SignPro+ Transformation
            </h2>
            
            <div class="before-after-container">
                <img src="https://images.unsplash.com/photo-1600566752227-8f1c46b1e5e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="After transformation" class="before-after-image">
                <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Before transformation" class="before-after-image before-image">
                <div class="slider-handle"></div>
            </div>
            
            <div class="text-center max-w-4xl mx-auto mt-10">
                <p class="body-text text-white mb-6">
                    "Our foot traffic increased by 40% after installing SignPro+ window graphics. 
                    The difference in how customers perceive our business is night and day."
                </p>
                <p class="text-lg font-bold text-aqua">— Michael T., Retail Store Owner</p>
            </div>
        </div>
    </div>

    <!-- Full Width Statement -->
    <div class="bg-gradient-to-r from-electric to-psychic text-white py-20">
        <div class="max-w-7xl mx-auto px-6 text-center">
            <h2 class="section-heading text-3xl md:text-5xl mb-10">
                <span class="gradient-text">Premium Look Without The Premium Price Tag</span>
            </h2>
            
            <p class="body-text text-white/90 max-w-4xl mx-auto mb-10">
                We provide an affordable pathway for local businesses to achieve a significantly more professional, 
                credible, and appealing physical storefront appearance. Our custom vinyl window graphics make your business look established, professional, and appealing to customers, enhancing your brand perception and potentially increasing foot traffic.
            </p>
            
            <div>
                <a href="#" class="bg-gold text-electric px-8 sm:px-12 py-4 sm:py-5 rounded-full-xl text-xl sm:text-2xl font-bold hover:bg-gold/90 transition-slow btn-float inline-block">
                    Transform Your Storefront
                    <i class="fas fa-arrow-right ml-3"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- Process Section -->
    <div class="bg-white py-20">
        <div class="max-w-5xl mx-auto px-6">
            <h2 class="section-heading text-3xl md:text-5xl dark-text mb-16 text-center">
                Simple Process. Professional Results.
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center">
                    <div class="bg-electric/10 text-electric w-20 h-20 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
                        1
                    </div>
                    <h3 class="text-xl font-bold mb-4 dark-text">Consultation</h3>
                    <p class="text-gray-600">
                        We discuss your goals and create a custom design that reflects your brand perfectly.
                    </p>
                </div>
                
                <div class="text-center">
                    <div class="bg-psychic/10 text-psychic w-20 h-20 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
                        2
                    </div>
                    <h3 class="text-xl font-bold mb-4 dark-text">Production</h3>
                    <p class="text-gray-600">
                        Your custom graphics are printed on premium vinyl using commercial-grade equipment.
                    </p>
                </div>
                
                <div class="text-center">
                    <div class="bg-aqua/10 text-aqua w-20 h-20 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
                        3
                    </div>
                    <h3 class="text-xl font-bold mb-4 dark-text">Installation</h3>
                    <p class="text-gray-600">
                        Our expert team installs your graphics perfectly, with no bubbles or wrinkles.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Final CTA -->
    <div class="bg-psychic text-white py-24 relative overflow-hidden">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        
        <div class="max-w-5xl mx-auto px-6 text-center relative z-10">
            <h2 class="section-heading text-3xl md:text-5xl mb-10">
                Is Your Window Turning Customers Away?
            </h2>
            
            <p class="body-text text-white/90 max-w-3xl mx-auto mb-10">
                Get your free consultation and quote today. Our team will create the perfect solution to make your business look professional and appealing.
            </p>
            
            <div class="flex flex-col sm:flex-row justify-center items-center space-y-5 sm:space-y-0 sm:space-x-8">
                <a href="#" class="bg-white text-psychic px-8 sm:px-12 py-4 sm:py-5 rounded-full-xl text-xl sm:text-2xl font-bold hover:bg-gray-100 transition-slow btn-float btn-pulse">
                    Get Started Now
                    <i class="fas fa-arrow-right ml-3"></i>
                </a>
                <a href="#" class="bg-transparent border-2 border-white text-white px-8 sm:px-12 py-4 sm:py-5 rounded-full-xl text-xl sm:text-2xl font-bold hover:bg-white/10 transition-slow btn-float">
                    (650) 555-0192
                </a>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-16">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
                <div>
                    <h3 class="logo-text mb-6">
                        SignPro<span class="gold logo-plus">+</span>
                    </h3>
                    <p class="text-gray-400">
                        Transforming storefronts into customer magnets since 2018.
                    </p>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">Services</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-slow">Window Graphics</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-slow">Storefront Signs</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-slow">Vehicle Wraps</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-slow">Banners</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">Company</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-slow">About</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-slow">Portfolio</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-slow">Testimonials</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-slow">Careers</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">Connect</h4>
                    <div class="flex space-x-4 mb-6">
                        <a href="#" class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-xl hover:bg-electric transition-slow">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-xl hover:bg-blue-500 transition-slow">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-xl hover:bg-blue-400 transition-slow">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                    <p class="text-gray-400">
                        (650) 555-0192<br>
                        hello@signproplus.com
                    </p>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-16 pt-10 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 mb-4 md:mb-0">
                    &copy; 2025 SignPro+. All rights reserved.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-white transition-slow">Privacy Policy</a>
                    <a href="#" class="text-gray-500 hover:text-white transition-slow">Terms of Service</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Enhanced animations
        document.addEventListener('DOMContentLoaded', function() {
            // Before/After slider
            const beforeAfterContainer = document.querySelector('.before-after-container');
            if (beforeAfterContainer) {
                const sliderHandle = beforeAfterContainer.querySelector('.slider-handle');
                const beforeImage = beforeAfterContainer.querySelector('.before-image');
                let isDragging = false;
                
                function moveSlider(e) {
                    if (!isDragging) return;
                    
                    const rect = beforeAfterContainer.getBoundingClientRect();
                    let x;
                    
                    if (e.type === 'touchmove') {
                        x = e.touches[0].clientX - rect.left;
                    } else {
                        x = e.clientX - rect.left;
                    }
                    
                    // Constrain within bounds
                    x = Math.max(0, Math.min(x, rect.width));
                    
                    const percent = (x / rect.width) * 100;
                    
                    beforeImage.style.width = percent + '%';
                    sliderHandle.style.left = percent + '%';
                }
                
                sliderHandle.addEventListener('mousedown', function() {
                    isDragging = true;
                });
                
                sliderHandle.addEventListener('touchstart', function() {
                    isDragging = true;
                });
                
                document.addEventListener('mouseup', function() {
                    isDragging = false;
                });
                
                document.addEventListener('touchend', function() {
                    isDragging = false;
                });
                
                document.addEventListener('mousemove', moveSlider);
                document.addEventListener('touchmove', moveSlider);
            }
            
            // Scroll animations
            const animateOnScroll = function() {
                const elements = document.querySelectorAll('.card-hover, .btn-float');
                
                elements.forEach(element => {
                    const elementPosition = element.getBoundingClientRect().top;
                    const screenPosition = window.innerHeight / 1.3;
                    
                    if (elementPosition < screenPosition) {
                        element.style.opacity = '1';
                        element.style.transform = 'translateY(0)';
                    }
                });
            };
            
            // Set initial state
            const animatedElements = document.querySelectorAll('.card-hover, .btn-float');
            animatedElements.forEach(el => {
                el.style.opacity = '0';
                el.style.transform = 'translateY(20px)';
                el.style.transition = 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
            });
            
            // Run on load and scroll
            animateOnScroll();
            window.addEventListener('scroll', animateOnScroll);
            
            // Mouse move effects
            document.addEventListener('mousemove', function(e) {
                const blob1 = document.querySelector('.blob-1');
                const blob2 = document.querySelector('.blob-2');
                
                const x = e.clientX / window.innerWidth;
                const y = e.clientY / window.innerHeight;
                
                blob1.style.transform = `translate(${x * 50}px, ${y * 50}px)`;
                blob2.style.transform = `translate(${x * -50}px, ${y * -50}px)`;
            });
        });
    </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=LimenAlex/site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>