preciso de um hero com o menu em vidro efeito grass - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Teste
-emoji: 🦀
-colorFrom: red
-colorTo: purple
+title: teste
+emoji: 🐳
+colorFrom: pink
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,240 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</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>