Add

components/navbar.js

@@ -0,0 +1,146 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: white;
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+          position: fixed;
+          width: 100%;
+          z-index: 10;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        .flex {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 4rem;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-weight: 700;
+          font-size: 1.25rem;
+          color: #1a1a1a;
+          text-decoration: none;
+        }
+        .logo-icon {
+          color: #6366f1;
+          font-size: 1.5rem;
+        }
+        .nav-links {
+          display: none;
+          gap: 1.5rem;
+        }
+        .nav-link {
+          color: #4b5563;
+          font-weight: 500;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .nav-link:hover {
+          color: #6366f1;
+        }
+        .active {
+          color: #1a1a1a;
+        }
+        .cta-button {
+          background: #6366f1;
+          color: white;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          font-weight: 500;
+          transition: background 0.2s;
+        }
+        .cta-button:hover {
+          background: #4f46e5;
+        }
+        .mobile-menu-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0.5rem;
+          border-radius: 0.375rem;
+          color: #6b7280;
+        }
+        .mobile-menu-button:hover {
+          background: #f3f4f6;
+          color: #4b5563;
+        }
+        .mobile-menu {
+          display: none;
+          padding: 1rem;
+          background: white;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .mobile-menu.active {
+          display: block;
+        }
+        .mobile-nav-link {
+          display: block;
+          padding: 0.75rem 0;
+          color: #4b5563;
+          text-decoration: none;
+        }
+        .mobile-nav-link:hover {
+          color: #6366f1;
+        }
+        @media (min-width: 768px) {
+          .nav-links {
+            display: flex;
+            align-items: center;
+          }
+          .mobile-menu-button {
+            display: none;
+          }
+        }
+      </style>
+      <nav>
+        <div class="container">
+          <div class="flex">
+            <a href="/" class="logo">
+              <i class="fas fa-cube logo-icon"></i>
+              <span>ModernUI</span>
+            </a>
+            
+            <div class="nav-links">
+              <a href="/" class="nav-link active">Home</a>
+              <a href="/features.html" class="nav-link">Features</a>
+              <a href="/pricing.html" class="nav-link">Pricing</a>
+              <a href="/about.html" class="nav-link">About</a>
+              <a href="/get-started.html" class="cta-button">Get Started</a>
+            </div>
+            
+            <button class="mobile-menu-button">
+              <i class="fas fa-bars"></i>
+            </button>
+          </div>
+          
+          <div class="mobile-menu">
+            <a href="/" class="mobile-nav-link active">Home</a>
+            <a href="/features.html" class="mobile-nav-link">Features</a>
+            <a href="/pricing.html" class="mobile-nav-link">Pricing</a>
+            <a href="/about.html" class="mobile-nav-link">About</a>
+            <a href="/get-started.html" class="mobile-nav-link">Get Started</a>
+          </div>
+        </div>
+      </nav>
+    `;
+
+    // Mobile menu toggle functionality
+    const menuButton = this.shadowRoot.querySelector('.mobile-menu-button');
+    const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
+    
+    menuButton.addEventListener('click', () => {
+      mobileMenu.classList.toggle('active');
+    });
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

features.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Features - Modern UI Showcase</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 rel="stylesheet" href="style.css">
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    
+    <main class="pt-20 pb-16 px-4 max-w-6xl mx-auto">
+        <section class="text-center mb-16">
+            <h1 class="text-4xl font-bold text-gray-900 mb-4">Our Powerful Features</h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Discover what makes our product stand out from the competition</p>
+        </section>
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
+                <div class="text-indigo-500 text-3xl mb-4">
+                    <i class="fas fa-bolt"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
+                <p class="text-gray-600">Optimized for speed with our cutting-edge technology stack.</p>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
+                <div class="text-indigo-500 text-3xl mb-4">
+                    <i class="fas fa-shield-alt"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Enterprise Security</h3>
+                <p class="text-gray-600">Military-grade encryption to keep your data safe and secure.</p>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
+                <div class="text-indigo-500 text-3xl mb-4">
+                    <i class="fas fa-sync-alt"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Real-time Sync</h3>
+                <p class="text-gray-600">Changes update instantly across all your devices.</p>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
+                <div class="text-indigo-500 text-3xl mb-4">
+                    <i class="fas fa-chart-line"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Advanced Analytics</h3>
+                <p class="text-gray-600">Get actionable insights with our powerful reporting tools.</p>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
+                <div class="text-indigo-500 text-3xl mb-4">
+                    <i class="fas fa-cogs"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Customizable</h3>
+                <p class="text-gray-600">Tailor the platform to your exact business needs.</p>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
+                <div class="text-indigo-500 text-3xl mb-4">
+                    <i class="fas fa-headset"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">24/7 Support</h3>
+                <p class="text-gray-600">Our expert team is always ready to help you succeed.</p>
+            </div>
+        </div>
+    </main>
+
+    <script src="components/navbar.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

index.html

@@ -63,34 +63,6 @@
     </style>
 </head>
 <body>
-    <!-- Navigation -->
-    <nav class="bg-white shadow-sm fixed w-full z-10">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
-                <div class="flex items-center">
-                    <div class="flex-shrink-0 flex items-center">
-                        <i class="fas fa-cube text-indigo-500 text-2xl mr-2"></i>
-                        <span class="text-xl font-bold text-gray-900">ModernUI</span>
-                    </div>
-                </div>
-                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
-                    <a href="#" class="text-gray-900 hover:text-indigo-500 px-3 py-2 text-sm font-medium">Home</a>
-                    <a href="#" class="text-gray-500 hover:text-indigo-500 px-3 py-2 text-sm font-medium">Features</a>
-                    <a href="#" class="text-gray-500 hover:text-indigo-500 px-3 py-2 text-sm font-medium">Pricing</a>
-                    <a href="#" class="text-gray-500 hover:text-indigo-500 px-3 py-2 text-sm font-medium">About</a>
-                    <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
-                        Get Started
-                    </button>
-                </div>
-                <div class="-mr-2 flex items-center md:hidden">
-                    <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
-                        <i class="fas fa-bars"></i>
-                    </button>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Mobile menu -->
-        <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
-            <div class="px-2
+  <script src="components/navbar.js"></script>
+<custom-navbar></custom-navbar>
 </html>