|
|
<!DOCTYPE html> |
|
|
<html dir="rtl" lang="ar"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>نموذج الذكاء الاصطناعي المصري</title> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap'); |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Cairo', sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #ffffff; |
|
|
} |
|
|
|
|
|
nav { |
|
|
background-color: #ffffff; |
|
|
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; |
|
|
gap: 2rem; |
|
|
list-style: none; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-list a { |
|
|
color: #333; |
|
|
text-decoration: none; |
|
|
font-weight: bold; |
|
|
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: #90EE90; |
|
|
transition: width 0.3s; |
|
|
} |
|
|
|
|
|
.nav-list a:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.nav-list a:hover { |
|
|
color: #90EE90; |
|
|
background-color: rgba(51, 51, 51, 0.1); |
|
|
} |
|
|
|
|
|
.menu-toggle { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
color: #333; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
padding: 0.5rem; |
|
|
} |
|
|
|
|
|
.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; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.hero-image:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.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; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.button-secondary { |
|
|
border: 2px solid #333; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.button-secondary:hover { |
|
|
background-color: #333; |
|
|
color: white; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.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; |
|
|
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 { |
|
|
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); |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.featured-image:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.featured-image img { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.featured-text { |
|
|
flex: 1; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
@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; |
|
|
} |
|
|
|
|
|
.nav-list { |
|
|
display: none; |
|
|
width: 100%; |
|
|
flex-direction: column; |
|
|
padding: 1rem 0; |
|
|
gap: 0.5rem; |
|
|
background-color: #ffffff; |
|
|
} |
|
|
|
|
|
.nav-list.active { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.nav-list a { |
|
|
width: 100%; |
|
|
text-align: center; |
|
|
padding: 0.75rem; |
|
|
} |
|
|
|
|
|
.nav-list a::after { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.hero-content, |
|
|
.featured-content { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.capabilities { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.buttons { |
|
|
flex-direction: column; |
|
|
align-items: stretch; |
|
|
} |
|
|
|
|
|
.button { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.hero { |
|
|
padding: 2rem 1rem; |
|
|
} |
|
|
|
|
|
.featured-section { |
|
|
padding: 2rem 1rem; |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
width: 200px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<nav> |
|
|
<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"> |
|
|
<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">قدرات سبيدي</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hero-image"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/01/3-removebg-preview.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'); |
|
|
} |
|
|
|
|
|
document.addEventListener('click', function(event) { |
|
|
const nav = document.querySelector('nav'); |
|
|
const navList = document.querySelector('.nav-list'); |
|
|
|
|
|
if (!nav.contains(event.target) && navList.classList.contains('active')) { |
|
|
navList.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
