Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glass Effect Hero</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">
    <style>
        .glass-nav {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }
        
        .text-glow {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }
        
        .btn-glow {
            box-shadow: 0 0 15px rgba(118, 75, 162, 0.7);
        }
        
        .btn-glow:hover {
            box-shadow: 0 0 25px rgba(118, 75, 162, 0.9);
        }
        
        /* Animation for hero content */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        
        .delay-100 {
            animation-delay: 0.1s;
        }
        
        .delay-200 {
            animation-delay: 0.2s;
        }
        
        .delay-300 {
            animation-delay: 0.3s;
        }
    </style>
</head>
<body class="font-sans antialiased text-white">
    <!-- Navigation -->
    <nav class="glass-nav fixed w-full z-50 py-4 px-6 md:px-12 transition-all duration-300">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <div class="flex items-center">
                <a href="#" class="text-2xl font-bold flex items-center">
                    <i class="fas fa-cube mr-2"></i>
                    <span>GlassUI</span>
                </a>
            </div>
            
            <!-- Desktop Menu -->
            <div class="hidden md:flex space-x-8">
                <a href="#" class="hover:text-purple-200 transition-colors">Home</a>
                <a href="#" class="hover:text-purple-200 transition-colors">Features</a>
                <a href="#" class="hover:text-purple-200 transition-colors">Pricing</a>
                <a href="#" class="hover:text-purple-200 transition-colors">About</a>
                <a href="#" class="hover:text-purple-200 transition-colors">Contact</a>
            </div>
            
            <!-- Mobile Menu Button -->
            <button id="mobile-menu-button" class="md:hidden focus:outline-none">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="md:hidden hidden mt-4 py-4 px-6 rounded-lg glass-nav">
            <div class="flex flex-col space-y-4">
                <a href="#" class="hover:text-purple-200 transition-colors">Home</a>
                <a href="#" class="hover:text-purple-200 transition-colors">Features</a>
                <a href="#" class="hover:text-purple-200 transition-colors">Pricing</a>
                <a href="#" class="hover:text-purple-200 transition-colors">About</a>
                <a href="#" class="hover:text-purple-200 transition-colors">Contact</a>
            </div>
        </div>
    </nav>
    
    <!-- Hero Section -->
    <section class="hero-gradient min-h-screen flex items-center pt-20 pb-16 px-6 md:px-12">
        <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
            <!-- Hero Content -->
            <div class="space-y-8">
                <h1 class="text-4xl md:text-6xl font-bold leading-tight text-glow animate-fadeInUp">
                    Modern <span class="text-purple-200">Glass UI</span> Design
                </h1>
                <p class="text-lg md:text-xl text-purple-100 opacity-90 animate-fadeInUp delay-100">
                    Create stunning interfaces with our glass effect components. Perfect for modern web applications that need a sleek, futuristic look.
                </p>
                <div class="flex flex-wrap gap-4 animate-fadeInUp delay-200">
                    <button class="bg-white text-purple-700 px-6 py-3 rounded-full font-semibold hover:bg-purple-100 transition-colors btn-glow">
                        Get Started
                    </button>
                    <button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition-colors">
                        Learn More
                    </button>
                </div>
                <div class="flex items-center space-x-6 animate-fadeInUp delay-300">
                    <div class="flex -space-x-2">
                        <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
                    </div>
                    <div>
                        <p class="text-sm text-purple-100">Join <span class="font-bold">10,000+</span> happy users</p>
                        <div class="flex text-yellow-300 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <span class="text-purple-100 ml-1">(4.9/5.0)</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Hero Card -->
            <div class="glass-card p-6 md:p-8 animate-fadeInUp delay-100">
                <div class="relative">
                    <div class="absolute -top-10 -left-10 w-20 h-20 bg-purple-400 rounded-full filter blur-xl opacity-30"></div>
                    <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-pink-400 rounded-full filter blur-xl opacity-30"></div>
                    
                    <div class="relative z-10">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl font-bold">Glass Dashboard</h3>
                            <i class="fas fa-ellipsis-h text-gray-300"></i>
                        </div>
                        
                        <div class="grid grid-cols-3 gap-4 mb-8">
                            <div class="bg-white bg-opacity-10 p-3 rounded-lg text-center">
                                <p class="text-sm text-purple-100">Visitors</p>
                                <p class="text-2xl font-bold">1.2K</p>
                            </div>
                            <div class="bg-white bg-opacity-10 p-3 rounded-lg text-center">
                                <p class="text-sm text-purple-100">Revenue</p>
                                <p class="text-2xl font-bold">$8.5K</p>
                            </div>
                            <div class="bg-white bg-opacity-10 p-3 rounded-lg text-center">
                                <p class="text-sm text-purple-100">Orders</p>
                                <p class="text-2xl font-bold">324</p>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <div class="flex justify-between text-sm text-purple-100 mb-2">
                                <span>Weekly Target</span>
                                <span>75%</span>
                            </div>
                            <div class="w-full bg-white bg-opacity-20 rounded-full h-2">
                                <div class="bg-white h-2 rounded-full" style="width: 75%"></div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <button class="bg-white text-purple-700 px-4 py-2 rounded-lg text-sm font-medium">
                                View Details
                            </button>
                            <div class="text-xs text-purple-100">
                                Updated 2 mins ago
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Floating elements -->
        <div class="absolute top-1/4 left-10 w-16 h-16 bg-white rounded-full filter blur-xl opacity-10"></div>
        <div class="absolute bottom-1/3 right-20 w-24 h-24 bg-purple-300 rounded-full filter blur-xl opacity-20"></div>
    </section>
    
    <script>
        // Mobile menu toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // Scroll effect for navbar
        window.addEventListener('scroll', () => {
            const nav = document.querySelector('nav');
            if (window.scrollY > 10) {
                nav.classList.add('bg-opacity-80');
                nav.classList.remove('bg-opacity-15');
            } else {
                nav.classList.remove('bg-opacity-80');
                nav.classList.add('bg-opacity-15');
            }
        });
        
        // Add animation classes on load
        document.addEventListener('DOMContentLoaded', () => {
            const elements = document.querySelectorAll('.animate-fadeInUp');
            elements.forEach(el => {
                el.style.opacity = '0';
            });
            
            setTimeout(() => {
                elements.forEach(el => {
                    el.style.opacity = '1';
                });
            }, 100);
        });
    </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=EcosSystem/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>