Update index.html

index.html

@@ -18,7 +18,6 @@
             background-color: #ffffff;
         }
 
-        /* Enhanced Navigation Styles */
         nav {
             background-color: #333;
             padding: 1rem;
@@ -41,7 +40,7 @@
             color: white;
             text-decoration: none;
             font-weight: bold;
-            transition: color 0.3s;
+            transition: all 0.3s;
             padding: 0.5rem 1rem;
             border-radius: 4px;
         }
@@ -61,10 +60,160 @@
             padding: 0.5rem;
         }
 
-        /* Rest of the existing styles remain the same */
-        [Previous styles from hero to media queries remain unchanged]
+        .hero {
+            padding: 4rem 2rem;
+            text-align: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .hero-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 2rem;
+            margin-bottom: 4rem;
+        }
+
+        .hero-text {
+            flex: 1;
+            text-align: right;
+        }
+
+        .hero-image {
+            flex: 1;
+            position: relative;
+            background-color: #ff7961;
+            border-radius: 10px;
+            padding: 2rem;
+        }
+
+        .logo {
+            width: 300px;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+
+        h1 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            color: #333;
+        }
+
+        .subtitle {
+            font-size: 1.2rem;
+            color: #666;
+            margin-bottom: 2rem;
+        }
+
+        .buttons {
+            display: flex;
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+
+        .button {
+            padding: 0.8rem 1.5rem;
+            border-radius: 5px;
+            text-decoration: none;
+            font-weight: bold;
+            transition: all 0.3s;
+        }
+
+        .button-primary {
+            background-color: #333;
+            color: white;
+        }
+
+        .button-primary:hover {
+            background-color: #444;
+        }
+
+        .button-secondary {
+            border: 2px solid #333;
+            color: #333;
+        }
+
+        .button-secondary:hover {
+            background-color: #333;
+            color: white;
+        }
+
+        .capabilities {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 2rem;
+            text-align: center;
+            margin-top: 4rem;
+        }
+
+        .capability {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            padding: 1.5rem;
+            border-radius: 8px;
+            transition: transform 0.3s;
+        }
+
+        .capability:hover {
+            transform: translateY(-5px);
+        }
+
+        .icon {
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+        }
+
+        h2 {
+            font-size: 1.5rem;
+            color: #333;
+            margin-bottom: 0.5rem;
+        }
+
+        p {
+            color: #666;
+            line-height: 1.6;
+        }
+
+        .featured-section {
+            background-color: #f5f5f5;
+            padding: 4rem 2rem;
+            margin-top: 4rem;
+        }
+
+        .featured-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            gap: 3rem;
+        }
+
+        .featured-image {
+            flex: 1;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .featured-image img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+
+        .featured-text {
+            flex: 1;
+            text-align: right;
+        }
 
-        /* Enhanced Mobile Styles */
         @media (max-width: 768px) {
             .menu-toggle {
                 display: block;
@@ -98,7 +247,8 @@
                 padding: 0.75rem;
             }
 
-            .hero-content, .featured-content {
+            .hero-content, 
+            .featured-content {
                 flex-direction: column;
             }
 
@@ -115,6 +265,18 @@
             .button {
                 text-align: center;
             }
+
+            h1 {
+                font-size: 2rem;
+            }
+
+            .hero {
+                padding: 2rem 1rem;
+            }
+
+            .featured-section {
+                padding: 2rem 1rem;
+            }
         }
     </style>
 </head>
@@ -130,13 +292,76 @@
         </ul>
     </nav>
 
-    [Rest of the HTML content remains the same]
+    <main class="hero">
+        <div class="hero-content">
+            <div class="hero-text">
+                <h1>تعرف على نموذج الذكاء ا��مصري</h1>
+                <p class="subtitle">أول نموذج ذكاء اصطناعي متكامل في مصر. مصمم للإبداع والابتكار وحل المشكلات المعقدة.</p>
+                <div class="buttons">
+                    <a href="#" class="button button-primary">جرب النموذج</a>
+                    <a href="#" class="button button-secondary">واجهة API</a>
+                </div>
+            </div>
+            <div class="hero-image">
+                <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="شعار الذكاء الاصطناعي" class="logo">
+            </div>
+        </div>
+
+        <section class="capabilities">
+            <div class="capability">
+                <div class="icon">🧠</div>
+                <h2>تفكير متقدم</h2>
+                <p>قدرات تحليلية وإدراكية متطورة</p>
+            </div>
+            <div class="capability">
+                <div class="icon">👁️</div>
+                <h2>تحليل الصور</h2>
+                <p>فهم وتحليل المحتوى البصري</p>
+            </div>
+            <div class="capability">
+                <div class="icon">💻</div>
+                <h2>برمجة ذكية</h2>
+                <p>إنشاء وتحليل التعليمات البرمجية</p>
+            </div>
+            <div class="capability">
+                <div class="icon">🌐</div>
+                <h2>دعم متعدد اللغات</h2>
+                <p>معالجة وترجمة بين اللغات المختلفة</p>
+            </div>
+        </section>
+    </main>
+
+    <section class="featured-section">
+        <div class="featured-content">
+            <div class="featured-image">
+                <img src="/api/placeholder/600/400" alt="صورة توضيحية للذكاء الاصطناعي">
+            </div>
+            <div class="featured-text">
+                <h2>مستقبل الذكاء الاصطناعي في مصر</h2>
+                <p>نحن نعمل على تطوير حلول ذكاء اصطناعي متقدمة تلبي احتياجات السوق المصري والعربي. من خلال التركيز على الابتكار والتطوير المستمر، نسعى لتقديم حلول تكنولوجية متطورة تساهم في التحول الرقمي وتعزيز الاقتصاد الرقمي.</p>
+                <div class="buttons">
+                    <a href="#" class="button button-primary">اكتشف المزيد</a>
+                </div>
+            </div>
+        </div>
+    </section>
 
     <script>
         function toggleMenu() {
             const navList = document.querySelector('.nav-list');
             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');
+            }
+        });
     </script>
 </body>
 </html>