QuickGen/index.html at main · II3boody/QuickGen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>الرئيسية</title>
  <link rel="icon" href="assets/imgs/div.logo-icon.svg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />


  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="loading" class="align-items-center justify-content-center">
    <div class="spinner">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>
  </div>

  <!-- Navbar -->
  <nav class="navbar">
    <div class="container">

      <!-- Logo -->
      <div class="nav-logo">
        <img src="assets/imgs/div.logo-icon.svg" alt="Logo" class="logo-icon">
        <span class="logo-text">Quick Gen</span>
      </div>

      <!-- Links -->
      <ul class="nav-links" id="navLinks">
        <li><a href="#home" class="active">الرئيسية</a></li>
        <li><a href="Educational.html">المسارات</a></li>
        <li><a href="courses.html">الكورسات</a></li>
        <li><a href="prromt-page.html">توليد برومبت</a></li>
        <li><a href="verification-page.html">الشهادات</a></li>
        <li><a href="contact-us.html">تواصل معنا</a></li>

        <!-- Mobile Actions -->
        <li class="mobile-only">
          <div class="nav-actions">
            <a href="sign-in.html" class="btn login">تسجيل الدخول</a>
            <a href="sign-up.html" class="btn start">ابدأ التعلم</a>
          </div>
        </li>
      </ul>

      <!-- Desktop Actions -->
      <div class="nav-actions desktop-only">
        <a href="sign-in.html" class="btn login">تسجيل الدخول</a>
        <a href="sign-up.html" class="btn start">ابدأ التعلم</a>
      </div>

      <!-- Mobile Toggle -->
      <div class="mobile-island-toggle" onclick="toggleMenu()">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>

    </div>
  </nav>
  <section id="home" class="position-relative overflow-hidden">
    <div class="bg-spot spot-violet"></div>
    <div class="bg-spot spot-cyan"></div>
    <div class="bg-spot spot-cyan sec"></div>

    <div class="container d-flex flex-column justify-content-center align-items-center text-center position-relative">
      <div>
        <h1 class="hero-title fw-bold-ex">
          <span class="text-white my-2">تعلم</span>
          <span class="primary-text my-2">الذكاء الاصطناعي</span>
          <span class="d-block text-white my-2">وضاعف انتاجيتك</span>
        </h1>
        <p class="hero-subtitle">
          تعلم استخدام AI في التصميم، البرمجة، والعمل الحر . وخلّي شغلك أسرع بمرات، بشرح عملي بدون تعقيد، مسارات واضحة
        </p>
      </div>
      <div class="cta d-flex gap-3 text-white">
        <a href="sign-up.html" class="btn start">ابدأ الآن مجانًا</a>
        <a href="Educational.html" class="btn edu">استكشف المسارات ←</a>
      </div>
      <div class="row g-4 align-items-center justify-content-between text-center">

        <div class="col-6 col-md-3">
          <div class="stat-item">
            <h2 class="stat-number fs-1">+5000</h2>
            <p class="stat-label">متعلم نشط</p>
          </div>
        </div>

        <div class="col-6 col-md-3">
          <div class="stat-item">
            <h2 class="stat-number fs-1">48</h2>
            <p class="stat-label">كورس عملي</p>
          </div>
        </div>

        <div class="col-6 col-md-3">
          <div class="stat-item">
            <h2 class="stat-number fs-1">5</h2>
            <p class="stat-label">مسارات احترافية</p>
          </div>
        </div>

        <div class="col-6 col-md-3">
          <div class="stat-item">
            <h2 class="stat-number fs-1">100%</h2>
            <p class="stat-label">شرح عملي</p>
          </div>
        </div>

      </div>
    </div>

  </section>

  <section id="advert" class="py-5 mb-5">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper" id="adContainer">
      </div>
    </div>
  </section>
  <section id="howTo" class="py-5">
    <div class="hero-section text-center my-5">
      <h1 class="hero-title">
        <span class="text-white">تعلم</span>
        <span class="primary-text">بالطريقة الصحيحة</span>
      </h1>
      <p class="hero-subtitle">
        نحن لا نُدرّس النظريات فقط. نحول الطلاب إلى محترفين عاملين في مجال
        الذكاء الاصطناعي.
      </p>
    </div>
    <div class="container">
      <div class="row d-grid gap-4" id="featuresContainer">
        <div class="card col-md-4 d-flex flex-column align-items-start text-white p-4 gap-4 rad-16 w-100">
          <div class="icon d-flex justify-content-center align-items-center">13</div>
          <div class="info d-flex flex-column gap-3">
            <h2 class="fs-2 fw-bold m-0">Lorem, ipsum.</h2>
            <p class="m-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae nemo iusto adipisci?</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="divder mt-5">
    <span></span>
  </div>
  <section id="edu" class="py-5">
    <div class="container">
      <div class="hero-section text-center my-5">
        <h1 class="hero-title">
          <span class="text-white">ابدأ من</span>
          <span class="primary-text">أي مستوى</span>
        </h1>
        <p class="hero-subtitle">
          مسارات متخصصة لكل مجال — اختار اللي يناسبك وابدأ
        </p>
      </div>

      <div class="row g-4 justify-content-center my-5" id="homePathsContainer">
      </div>

      <div class="text-center mt-4">
        <a href="Educational.html" class="btn edu">عرض جميع المسارات</a>
      </div>
    </div>
  </section>
  <div class="divder mt-5">
    <span></span>
  </div>
  <section id="testimonials" class="py-5 my-5">
    <div class="hero-section text-center my-5">
      <h1 class="hero-title">
        <span class="text-white">قصص</span>
        <span class="primary-text">نجاح الطلاب</span>
      </h1>
      <p class="hero-subtitle">
        مسارات متخصصة لكل مجال — اختار اللي يناسبك وابدأ
      </p>
    </div>
    <div class="container">
      <div class="swiper testimonialsSwiper">
        <div class="swiper-wrapper" id="testimonials-wrapper">
        </div>

      </div>
  </section>
  <div class="col-md"></div>

  <!-- CTA -->

  <div class="cta-section py-5">
    <div class="container">
      <h2 class="title">
        ابدأ رحلتك مع <span class="highlight">AI</span> الآن
      </h2>

      <p class="sub-title">
        اكثر من 5000 شخص بدأوا بالفعل — إيه اللي بيوقفك؟
      </p>

      <a href="#" class="btn-primary"> ابدأ من الصفر مجاناً </a>
    </div>
  </div>

  <footer class="footer-wrap">
    <div class="footer-top">

      <div class="footer-col brand-col">
        <div class="brand-logo">
          <div class="logo-icon">
            <img src="assets/imgs/div.logo-icon.svg" alt="Logo" class="logo-icon">
          </div>
          <span>Quick Gen</span>
        </div>
        <p class="brand-desc">منصة تعليمية متخصصة في تعليم الذكاء الاصطناعي بشكل عملي لكل المستويات</p>
        <div class="social-icons">
          <!-- Twitter -->
          <div class="social-btn">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
            </svg>
          </div>
          <!-- LinkedIn -->
          <div class="social-btn">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z" />
              <circle cx="4" cy="4" r="2" />
            </svg>
          </div>
          <!-- YouTube -->
          <div class="social-btn">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M22.54 6.42a2.78 2.78 0 00-1.95-1.97C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 00-1.95 1.96A29 29 0 001 12a29 29 0 00.46 5.58A2.78 2.78 0 003.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 001.95-1.95A29 29 0 0023 12a29 29 0 00-.46-5.58z" />
              <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="#12111a" />
            </svg>
          </div>
          <!-- Discord -->
          <div class="social-btn">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057c.002.022.015.043.03.054a19.9 19.9 0 005.993 3.03.077.077 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"
                fill="#aaa" />
            </svg>
          </div>
        </div>
      </div>

      <div class="footer-col">
        <h4>التعلم</h4>
        <ul>
          <li><a href="Educational.html">المسار التعليمي</a></li>
          <li><a href="courses.html">جميع الكورسات</a></li>
          <li><a href="#">توليد البرومبت</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h4>الدعم</h4>
        <ul>
          <li><a href="contact-us.html">مركز المساعدة</a></li>
          <li><a href="#">التحقق من الشهادات</a></li>
          <li><a href="contact-us.html">تواصل معنا</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h4>قانوني</h4>
        <ul>
          <li><a href="dashbored-coures.html">داش بورد </a></li>
          <li><a href="#">شروط الاستخدام</a></li>
          <li><a href="#">سياسة الاسترداد</a></li>
          <li><a href="#">معلومات عنا</a></li>
        </ul>
      </div>

    </div>

    <div class="footer-bottom">
      <span>تصميم وتطوير بواسطة <a href="https://github.com/II3boody/QuickGen">فريق Quick Gen</a></span>
      <span>© 2025 Quick Gen — جميع الحقوق محفوظة</span>
    </div>
  </footer>


  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>


  <script src="js/main.js"></script>
</body>

</html>