Update index.html

index.html

@@ -20,20 +20,41 @@
 
         nav {
             background-color: #333;
-            padding: 1rem;
+            padding: 0.5rem 2rem;
             position: sticky;
             top: 0;
             z-index: 1000;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .nav-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .nav-logo {
+            display: flex;
+            align-items: center;
+        }
+
+        .nav-logo img {
+            height: 50px;
+            margin-left: 1rem;
+            transition: transform 0.3s;
+        }
+
+        .nav-logo img:hover {
+            transform: scale(1.05);
         }
 
         .nav-list {
             display: flex;
-            justify-content: center;
             gap: 2rem;
             list-style: none;
-            max-width: 1200px;
-            margin: 0 auto;
-            position: relative;
+            align-items: center;
         }
 
         .nav-list a {
@@ -43,6 +64,22 @@
             transition: all 0.3s;
             padding: 0.5rem 1rem;
             border-radius: 4px;
+            position: relative;
+        }
+
+        .nav-list a::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background-color: #ff7961;
+            transition: width 0.3s;
+        }
+
+        .nav-list a:hover::after {
+            width: 100%;
         }
 
         .nav-list a:hover {
@@ -86,6 +123,11 @@
             background-color: #ff7961;
             border-radius: 10px;
             padding: 2rem;
+            transition: transform 0.3s;
+        }
+
+        .hero-image:hover {
+            transform: translateY(-5px);
         }
 
         .logo {
@@ -132,6 +174,7 @@
 
         .button-primary:hover {
             background-color: #444;
+            transform: translateY(-2px);
         }
 
         .button-secondary {
@@ -142,6 +185,7 @@
         .button-secondary:hover {
             background-color: #333;
             color: white;
+            transform: translateY(-2px);
         }
 
         .capabilities {
@@ -160,10 +204,13 @@
             padding: 1.5rem;
             border-radius: 8px;
             transition: transform 0.3s;
+            background-color: white;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
 
         .capability:hover {
             transform: translateY(-5px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
         }
 
         .icon {
@@ -201,6 +248,12 @@
             border-radius: 10px;
             overflow: hidden;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s;
+        }
+
+        .featured-image:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
         }
 
         .featured-image img {
@@ -215,30 +268,32 @@
         }
 
         @media (max-width: 768px) {
+            .nav-container {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .nav-logo {
+                width: 100%;
+                justify-content: space-between;
+                padding: 0.5rem 0;
+            }
+
             .menu-toggle {
                 display: block;
-                position: absolute;
-                left: 1rem;
-                top: 1rem;
-                z-index: 1001;
             }
 
             .nav-list {
                 display: none;
-                position: absolute;
-                top: 100%;
-                right: 0;
                 width: 100%;
+                flex-direction: column;
+                padding: 1rem 0;
+                gap: 0.5rem;
                 background-color: #333;
-                padding: 1rem;
-                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             }
 
             .nav-list.active {
                 display: flex;
-                flex-direction: column;
-                align-items: center;
-                gap: 1rem;
             }
 
             .nav-list a {
@@ -247,6 +302,10 @@
                 padding: 0.75rem;
             }
 
+            .nav-list a::after {
+                display: none;
+            }
+
             .hero-content, 
             .featured-content {
                 flex-direction: column;
@@ -277,19 +336,32 @@
             .featured-section {
                 padding: 2rem 1rem;
             }
+
+            .hero-image {
+                padding: 1rem;
+            }
+
+            .logo {
+                width: 200px;
+            }
         }
     </style>
 </head>
 <body>
     <nav>
-        <button class="menu-toggle" onclick="toggleMenu()">☰</button>
-        <ul class="nav-list">
-            <li><a href="#home">الموقع</a></li>
-            <li><a href="#try">جرب سبيدي</a></li>
-            <li><a href="#about">من نحن</a></li>
-            <li><a href="#capabilities">قدرات سبيدي</a></li>
-            <li><a href="#vision">رؤيتنا</a></li>
-        </ul>
+        <div class="nav-container">
+            <div class="nav-logo">
+                <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="شعار الذكاء الاصطناعي">
+                <button class="menu-toggle" onclick="toggleMenu()">☰</button>
+            </div>
+            <ul class="nav-list">
+                <li><a href="#home">الموقع</a></li>
+                <li><a href="#try">جرب سبيدي</a></li>
+                <li><a href="#about">من نحن</a></li>
+                <li><a href="#capabilities">قدرات سبيدي</a></li>
+                <li><a href="#vision">رؤيتنا</a></li>
+            </ul>
+        </div>
     </nav>
 
     <main class="hero">
@@ -352,11 +424,9 @@
             navList.classList.toggle('active');
         }
 
-        // Close menu when clicking outside
         document.addEventListener('click', function(event) {
             const nav = document.querySelector('nav');
             const navList = document.querySelector('.nav-list');
-            const menuToggle = document.querySelector('.menu-toggle');
             
             if (!nav.contains(event.target) && navList.classList.contains('active')) {
                 navList.classList.remove('active');