Hugging Face's logo

Spaces:
joermd
/
home
Running

App Files Community
joermd commited on
Commit
c9cb76a
·
verified ·
1 Parent(s): 3a7aaae

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +197 -76
index.html CHANGED
@@ -14,131 +14,252 @@
14
  font-family: 'Cairo', sans-serif;
15
  }
16
 
17
- .features-section {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  padding: 4rem 2rem;
 
19
  max-width: 1200px;
20
  margin: 0 auto;
21
  }
22
 
23
- .feature {
24
  display: flex;
25
  align-items: center;
26
- margin-bottom: 3rem;
27
- opacity: 0;
28
- transform: translateY(20px);
29
- animation: fadeInUp 0.6s forwards;
30
  }
31
 
32
- .feature:nth-child(2) {
33
- animation-delay: 0.2s;
34
- }
35
-
36
- .feature:nth-child(3) {
37
- animation-delay: 0.4s;
38
  }
39
 
40
- .feature-image {
41
  flex: 1;
 
 
42
  border-radius: 10px;
43
- overflow: hidden;
44
- margin: 0 2rem;
45
  }
46
 
47
- .feature-image img {
48
- width: 100%;
49
- height: 300px;
50
- object-fit: cover;
51
- transition: transform 0.3s ease;
52
  }
53
 
54
- .feature:hover img {
55
- transform: scale(1.05);
 
 
56
  }
57
 
58
- .feature-text {
59
- flex: 1;
60
- text-align: right;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  }
62
 
63
- .feature-title {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  font-size: 2rem;
 
 
 
 
 
65
  color: #333;
66
- margin-bottom: 1rem;
67
- opacity: 0;
68
- animation: fadeInRight 0.6s forwards;
69
- animation-delay: 0.3s;
70
  }
71
 
72
- .feature-description {
73
- font-size: 1.1rem;
74
  color: #666;
75
  line-height: 1.6;
76
- opacity: 0;
77
- animation: fadeInRight 0.6s forwards;
78
- animation-delay: 0.5s;
79
  }
80
 
81
- @keyframes fadeInUp {
82
- from {
83
- opacity: 0;
84
- transform: translateY(20px);
85
- }
86
- to {
87
- opacity: 1;
88
- transform: translateY(0);
89
- }
90
  }
91
 
92
- @keyframes fadeInRight {
93
- from {
94
- opacity: 0;
95
- transform: translateX(-20px);
96
- }
97
- to {
98
- opacity: 1;
99
- transform: translateX(0);
100
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
101
  }
102
 
103
  @media (max-width: 768px) {
104
- .feature {
105
  flex-direction: column;
106
  }
107
- .feature-image {
108
- margin: 1rem 0;
 
 
 
 
 
109
  }
110
  }
111
  </style>
112
  </head>
113
  <body>
114
- <section class="features-section">
115
- <div class="feature">
116
- <div class="feature-text">
117
- <h2 class="feature-title">الذكاء الاصطناعي المتقدم</h2>
118
- <p class="feature-description">نظام متطور يدمج أحدث تقنيات الذكاء الاصطناعي مع احتياجات السوق المصري</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
- <div class="feature-image">
121
- <img src="/api/placeholder/600/400" alt="الذكاء الاصطناعي المتقدم">
122
  </div>
123
  </div>
124
 
125
- <div class="feature">
126
- <div class="feature-text">
127
- <h2 class="feature-title">حلول مبتكرة</h2>
128
- <p class="feature-description">تطوير حلول ذكية تناسب مختلف القطاعات والمجالات في مصر</p>
 
129
  </div>
130
- <div class="feature-image">
131
- <img src="/api/placeholder/600/400" alt="حلول مبتكرة">
 
 
132
  </div>
133
- </div>
 
 
 
 
 
 
 
 
 
 
 
134
 
135
- <div class="feature">
136
- <div class="feature-text">
137
- <h2 class="feature-title">تقنيات المستقبل</h2>
138
- <p class="feature-description">استخدام أحدث التقنيات العالمية مع التركيز على التطوير المستمر</p>
139
  </div>
140
- <div class="feature-image">
141
- <img src="/api/placeholder/600/400" alt="تقنيات المستقبل">
 
 
 
 
142
  </div>
143
  </div>
144
  </section>
 
14
  font-family: 'Cairo', sans-serif;
15
  }
16
 
17
+ body {
18
+ background-color: #ffffff;
19
+ }
20
+
21
+ /* Navigation Styles */
22
+ nav {
23
+ background-color: #333;
24
+ padding: 1rem 2rem;
25
+ position: sticky;
26
+ top: 0;
27
+ z-index: 1000;
28
+ }
29
+
30
+ .nav-list {
31
+ display: flex;
32
+ justify-content: center;
33
+ gap: 2rem;
34
+ list-style: none;
35
+ max-width: 1200px;
36
+ margin: 0 auto;
37
+ }
38
+
39
+ .nav-list a {
40
+ color: white;
41
+ text-decoration: none;
42
+ font-weight: bold;
43
+ transition: color 0.3s;
44
+ }
45
+
46
+ .nav-list a:hover {
47
+ color: #ff7961;
48
+ }
49
+
50
+ .hero {
51
  padding: 4rem 2rem;
52
+ text-align: center;
53
  max-width: 1200px;
54
  margin: 0 auto;
55
  }
56
 
57
+ .hero-content {
58
  display: flex;
59
  align-items: center;
60
+ justify-content: space-between;
61
+ gap: 2rem;
62
+ margin-bottom: 4rem;
 
63
  }
64
 
65
+ .hero-text {
66
+ flex: 1;
67
+ text-align: right;
 
 
 
68
  }
69
 
70
+ .hero-image {
71
  flex: 1;
72
+ position: relative;
73
+ background-color: #ff7961;
74
  border-radius: 10px;
75
+ padding: 2rem;
 
76
  }
77
 
78
+ .logo {
79
+ width: 300px;
80
+ animation: pulse 2s infinite;
 
 
81
  }
82
 
83
+ @keyframes pulse {
84
+ 0% { transform: scale(1); }
85
+ 50% { transform: scale(1.05); }
86
+ 100% { transform: scale(1); }
87
  }
88
 
89
+ h1 {
90
+ font-size: 3rem;
91
+ margin-bottom: 1rem;
92
+ color: #333;
93
+ }
94
+
95
+ .subtitle {
96
+ font-size: 1.2rem;
97
+ color: #666;
98
+ margin-bottom: 2rem;
99
+ }
100
+
101
+ .buttons {
102
+ display: flex;
103
+ gap: 1rem;
104
+ margin-top: 2rem;
105
+ }
106
+
107
+ .button {
108
+ padding: 0.8rem 1.5rem;
109
+ border-radius: 5px;
110
+ text-decoration: none;
111
+ font-weight: bold;
112
+ }
113
+
114
+ .button-primary {
115
+ background-color: #333;
116
+ color: white;
117
+ }
118
+
119
+ .button-secondary {
120
+ border: 2px solid #333;
121
+ color: #333;
122
  }
123
 
124
+ .capabilities {
125
+ display: grid;
126
+ grid-template-columns: repeat(4, 1fr);
127
+ gap: 2rem;
128
+ text-align: center;
129
+ margin-top: 4rem;
130
+ }
131
+
132
+ .capability {
133
+ display: flex;
134
+ flex-direction: column;
135
+ align-items: center;
136
+ gap: 1rem;
137
+ }
138
+
139
+ .icon {
140
  font-size: 2rem;
141
+ margin-bottom: 0.5rem;
142
+ }
143
+
144
+ h2 {
145
+ font-size: 1.5rem;
146
  color: #333;
147
+ margin-bottom: 0.5rem;
 
 
 
148
  }
149
 
150
+ p {
 
151
  color: #666;
152
  line-height: 1.6;
 
 
 
153
  }
154
 
155
+ /* New Sections */
156
+ .featured-section {
157
+ background-color: #f5f5f5;
158
+ padding: 4rem 2rem;
159
+ margin-top: 4rem;
 
 
 
 
160
  }
161
 
162
+ .featured-content {
163
+ max-width: 1200px;
164
+ margin: 0 auto;
165
+ display: flex;
166
+ align-items: center;
167
+ gap: 3rem;
168
+ }
169
+
170
+ .featured-image {
171
+ flex: 1;
172
+ border-radius: 10px;
173
+ overflow: hidden;
174
+ }
175
+
176
+ .featured-image img {
177
+ width: 100%;
178
+ height: auto;
179
+ display: block;
180
+ }
181
+
182
+ .featured-text {
183
+ flex: 1;
184
+ text-align: right;
185
  }
186
 
187
  @media (max-width: 768px) {
188
+ .hero-content, .featured-content {
189
  flex-direction: column;
190
  }
191
+ .capabilities {
192
+ grid-template-columns: repeat(2, 1fr);
193
+ }
194
+ .nav-list {
195
+ flex-direction: column;
196
+ text-align: center;
197
+ gap: 1rem;
198
  }
199
  }
200
  </style>
201
  </head>
202
  <body>
203
+ <nav>
204
+ <ul class="nav-list">
205
+ <li><a href="#home">الموقع</a></li>
206
+ <li><a href="#try">جرب سبيدي</a></li>
207
+ <li><a href="#about">من نحن</a></li>
208
+ <li><a href="#capabilities">قدرات سبيدي</a></li>
209
+ <li><a href="#vision">رؤيتنا</a></li>
210
+ </ul>
211
+ </nav>
212
+
213
+ <main class="hero">
214
+ <div class="hero-content">
215
+ <div class="hero-text">
216
+ <h1>تعرف على نموذج الذكاء المصري</h1>
217
+ <p class="subtitle">أول نموذج ذكاء اصطناعي متكامل في مصر. مصمم للإبداع والابتكار وحل المشكلات المعقدة.</p>
218
+ <div class="buttons">
219
+ <a href="#" class="button button-primary">جرب النموذج</a>
220
+ <a href="#" class="button button-secondary">واجهة API</a>
221
+ </div>
222
  </div>
223
+ <div class="hero-image">
224
+ <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="شعار الذكاء الاصطناعي" class="logo">
225
  </div>
226
  </div>
227
 
228
+ <section class="capabilities">
229
+ <div class="capability">
230
+ <div class="icon">🧠</div>
231
+ <h2>تفكير متقدم</h2>
232
+ <p>قدرات تحليلية وإدراكية متطورة</p>
233
  </div>
234
+ <div class="capability">
235
+ <div class="icon">👁️</div>
236
+ <h2>تحليل الصور</h2>
237
+ <p>فهم وتحليل المحتوى البصري</p>
238
  </div>
239
+ <div class="capability">
240
+ <div class="icon">💻</div>
241
+ <h2>برمجة ذكية</h2>
242
+ <p>إنشاء وتحليل التعليمات البرمجية</p>
243
+ </div>
244
+ <div class="capability">
245
+ <div class="icon">🌐</div>
246
+ <h2>دعم متعدد اللغات</h2>
247
+ <p>معالجة وترجمة بين اللغات المختلفة</p>
248
+ </div>
249
+ </section>
250
+ </main>
251
 
252
+ <section class="featured-section">
253
+ <div class="featured-content">
254
+ <div class="featured-image">
255
+ <img src="/api/placeholder/600/400" alt="صورة توضيحية للذكاء الاصطناعي">
256
  </div>
257
+ <div class="featured-text">
258
+ <h2>مستقبل الذكاء الاصطناعي في مصر</h2>
259
+ <p>نحن نعمل على تطوير حلول ذكاء اصطناعي متقدمة تلبي احتياجات السوق المصري والعربي. من خلال التركيز على الابتكار والتطوير المستمر، نسعى لتقديم حلول تكنولوجية متطورة تساهم في التحول الرقمي وتعزيز الاقتصاد الرقمي.</p>
260
+ <div class="buttons">
261
+ <a href="#" class="button button-primary">اكتشف المزيد</a>
262
+ </div>
263
  </div>
264
  </div>
265
  </section>