Hugging Face's logo

Spaces:
mvbhr
/
ai-website-builder
Running

App Files Community
ai-website-builder
File size: 3,287 Bytes 
ffeb8d4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background: white;
          padding: 1.5rem 2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
          position: sticky;
          top: 0;
          z-index: 100;
        }
        .logo {
          color: #059669;
          font-weight: 800;
          font-size: 1.75rem;
          font-family: 'Space Grotesk', sans-serif;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .logo-icon {
          color: #f59e0b;
        }
        ul {
          display: flex;
          gap: 2rem;
          list-style: none;
          margin: 0;
          padding: 0;
        }
        a {
          color: #374151;
          text-decoration: none;
          font-weight: 600;
          transition: color 0.2s;
          position: relative;
        }
        a:hover {
          color: #059669;
        }
        a:hover::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 100%;
          height: 2px;
          background: #059669;
        }
        .auth-buttons {
          display: flex;
          gap: 1rem;
        }
        .login {
          padding: 0.75rem 1.5rem;
          border-radius: 0.75rem;
          font-weight: 600;
          transition: all 0.2s;
        }
        .login-outline {
          border: 2px solid #059669;
          color: #059669;
        }
        .login-solid {
          background: #059669;
          color: white;
        }
        .login-outline:hover {
          background: #059669;
          color: white;
        }
        .login-solid:hover {
          background: #047857;
          transform: translateY(-2px);
        }
        @media (max-width: 768px) {
          nav {
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
          }
          ul {
            gap: 1rem;
          }
          .auth-buttons {
            width: 100%;
            justify-content: center;
          }
        }
      </style>
      <nav>
        <div class="logo">
          <i data-feather="code" class="logo-icon"></i>
          AI Website Builder
        </div>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Examples</a></li>
          <li><a href="#">Pricing</a></li>
        </ul>
        <div class="auth-buttons">
          <a href="#" class="login login-outline">Log In</a>
          <a href="#" class="login login-solid">Sign Up Free</a>
        </div>
      </nav>
    `;
    
    // Initialize feather icons after DOM content is added
    setTimeout(() => {
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
      script.onload = () => {
        if (typeof feather !== 'undefined') {
          feather.replace();
        }
      };
      this.shadowRoot.appendChild(script);
    }, 0);
  }
}
customElements.define('custom-navbar', CustomNavbar);