Screenshot 2025-11-11 at 15.14.52

README.md

@@ -1,10 +1,13 @@
 ---
-title: Pixelperfect Ui Kit
-emoji: 😻
+title: PixelPerfect UI Kit 🎨
 colorFrom: green
-colorTo: yellow
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,8 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    const isDark = document.documentElement.classList.contains('dark');
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block

components/navbar.js

@@ -0,0 +1,198 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    const isDark = document.documentElement.classList.contains('dark');
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: sticky;
+          top: 0;
+          z-index: 50;
+          backdrop-filter: blur(10px);
+          background: ${isDark ? 'rgba(15, 23, 42, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+          border-bottom: 1px solid ${isDark ? 'rgba(148, 163, 184, 0.1)' : 'rgba(226, 232, 240, 0.5)'};
+        }
+        
+        .navbar {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 1rem 2rem;
+          max-width: 1400px;
+          margin: 0 auto;
+        }
+        
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 800;
+          background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          cursor: pointer;
+          letter-spacing: -0.05em;
+        }
+        
+        .nav-links {
+          display: flex;
+          gap: 2.5rem;
+          align-items: center;
+        }
+        
+        .nav-link {
+          text-decoration: none;
+          color: ${isDark ? '#cbd5e1' : '#475569'};
+          font-weight: 500;
+          transition: all 0.3s ease;
+          position: relative;
+          font-size: 0.95rem;
+        }
+        
+        .nav-link:hover {
+          color: #3b82f6;
+          transform: translateY(-2px);
+        }
+        
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+          transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        
+        .nav-actions {
+          display: flex;
+          gap: 1rem;
+          align-items: center;
+        }
+        
+        .btn {
+          padding: 0.5rem 1.25rem;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          text-decoration: none;
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        
+        .btn-primary {
+          background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+          color: white;
+          border: none;
+          box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
+        }
+        
+        .btn-primary:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
+        }
+        
+        .btn-secondary {
+          background: ${isDark ? 'rgba(30, 41, 59, 0.7)' : 'rgba(241, 245, 249, 0.7)'};
+          color: ${isDark ? '#e2e8f0' : '#334155'};
+          border: 1px solid ${isDark ? 'rgba(148, 163, 184, 0.2)' : 'rgba(226, 232, 240, 0.5)'};
+          backdrop-filter: blur(10px);
+        }
+        
+        .btn-secondary:hover {
+          background: ${isDark ? 'rgba(51, 65, 85, 0.7)' : 'rgba(226, 232, 240, 0.7)'};
+          transform: translateY(-2px);
+        }
+        
+        .theme-toggle {
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          color: ${isDark ? '#cbd5e1' : '#475569'};
+          transition: all 0.3s ease;
+        }
+        
+        .theme-toggle:hover {
+          background: ${isDark ? 'rgba(30, 41, 59, 0.5)' : 'rgba(241, 245, 249, 0.5)'};
+          transform: rotate(15deg);
+        }
+        
+        .menu-toggle {
+          display: none;
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0.5rem;
+          color: ${isDark ? '#cbd5e1' : '#475569'};
+        }
+        
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+          
+          .menu-toggle {
+            display: block;
+          }
+          
+          .navbar {
+            padding: 1rem;
+          }
+        }
+      </style>
+      
+      <div class="navbar">
+        <div class="logo" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
+          PixelPerfect
+        </div>
+        
+        <nav class="nav-links">
+          <a href="#features" class="nav-link">Features</a>
+          <a href="#dashboard" class="nav-link">Dashboard</a>
+          <a href="#analytics" class="nav-link">Analytics</a>
+          <a href="#team" class="nav-link">Team</a>
+          <a href="#contact" class="nav-link">Contact</a>
+        </nav>
+        
+        <div class="nav-actions">
+          <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+            <i data-feather="${isDark ? 'sun' : 'moon'}"></i>
+          </button>
+          <a href="#signup" class="btn btn-primary">Get Started</a>
+        </div>
+        
+        <button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">
+          <i data-feather="menu"></i>
+        </button>
+      </div>
+    `;
+    
+    // Theme toggle functionality
+    const themeBtn = this.shadowRoot.querySelector('#themeToggle');
+    if (themeBtn) {
+      themeBtn.addEventListener('click', () => {
+        const event = new CustomEvent('toggle-theme', { bubbles: true });
+        this.dispatchEvent(event);
+      });
+    }
+    
+    // Mobile menu toggle
+    const menuBtn = this.shadowRoot.querySelector('#menuToggle');
+    if (menuBtn) {
+      menuBtn.addEventListener('click', () => {
+        const event = new CustomEvent('toggle-menu', { bubbles: true });
+        this.dispatchEvent(event);
+      });
+    }
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);