Dashboard Temp Share Shortlinks Frames API

HTMLify

edu-path-ai
Views: 3 | Author: devwajahat 
  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
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<style>
  /* ===== EduPath AI — Premium App Landing (v7) ===== */
  #epai * { margin:0; padding:0; box-sizing:border-box; }
  #epai {
    font-family:'Inter',sans-serif; color:#2C3E50; overflow-x:hidden;
    scroll-behavior:smooth; -webkit-font-smoothing:antialiased; background:#E8F1F5;
  }
  #epai a { text-decoration:none; color:inherit; }
  #epai ul { list-style:none; }
  #epai .container { max-width:1180px; margin:0 auto; padding:0 24px; }

  /* Buttons */
  #epai .btn { display:inline-flex; align-items:center; gap:8px; padding:15px 32px; border-radius:12px; font-weight:600; font-size:15px; cursor:pointer; border:none; transition:all .3s cubic-bezier(.4,0,.2,1); }
  #epai .btn-primary { background:linear-gradient(135deg,#8DC63F,#5A8F2A); color:#fff !important; box-shadow:0 8px 20px rgba(141,198,63,.35), inset 0 1px 0 rgba(255,255,255,.2); }
  #epai .btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(141,198,63,.45), inset 0 1px 0 rgba(255,255,255,.2); color:#fff !important; }
  #epai .btn-outline { background:#fff; border:1.5px solid #d4e2c2; color:#2C3E50 !important; }
  #epai .btn-outline:hover { border-color:#8DC63F; color:#8DC63F !important; transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.05); }

  #epai .section { padding:120px 0; position:relative; }
  #epai .cta-section { padding:48px 0; }
  #epai .badge { display:inline-flex; align-items:center; gap:6px; background:#EEF6E2; color:#5A8F2A; padding:7px 16px; border-radius:30px; font-size:12.5px; font-weight:600; margin-bottom:22px; letter-spacing:.3px; }
  #epai h1 { font-family:'Inter',sans-serif; font-size:56px; font-weight:800; line-height:1.15; margin-bottom:24px; letter-spacing:-1.5px; color:#5A8F2A; }
  #epai h2 { font-size:38px; font-weight:800; margin-bottom:16px; letter-spacing:-1px; color:#5A8F2A; }
  #epai .grad-text { background:linear-gradient(135deg,#8DC63F,#5A8F2A); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  #epai .sub { color:#2C3E50; font-size:17px; line-height:1.75; margin-bottom:34px; max-width:520px; opacity:0.85; }
  #epai .center { text-align:center; margin:0 auto 64px; }
  #epai .center .sub { margin-left:auto; margin-right:auto; }

  /* Nav */
  #epai .navbar { position:sticky; top:16px; z-index:999; margin:0 16px; }
  #epai .nav-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 22px; max-width:1180px; margin:0 auto;
    background:rgba(232,241,245,.85); backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(255,255,255,.6);
    border-radius:18px; box-shadow:0 8px 30px rgba(44,62,80,.08); }
  #epai .logo { font-size:20px; font-weight:800; display:flex; align-items:center; gap:10px; color:#5A8F2A !important; }
  #epai .logo-icon { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#8DC63F,#5A8F2A); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; box-shadow:0 6px 14px rgba(141,198,63,.4); }
  #epai .nav-links { display:flex; align-items:center; gap:34px; font-weight:600; font-size:14.5px; }
  #epai .nav-links a:not(.btn) { position:relative; color:#2C3E50 !important; }
  #epai .nav-links a:not(.btn):hover { color:#8DC63F !important; }
  #epai .nav-links a.btn { padding:10px 22px; font-size:14px; }
  #epai .burger { display:none; font-size:22px; cursor:pointer; color:#2C3E50; }

  /* Hero */
  #epai .hero { position:relative; padding:70px 0 60px; overflow:hidden; }
  #epai .mesh { position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(600px circle at 15% 20%, rgba(141,198,63,.15), transparent 60%),
      radial-gradient(600px circle at 85% 15%, rgba(90,143,42,.12), transparent 60%),
      radial-gradient(500px circle at 50% 90%, rgba(238,246,226,.8), transparent 60%),
      #E8F1F5;
  }
  #epai .hero-inner { position:relative; z-index:1; display:flex; align-items:center; gap:60px; padding-top:40px; }
  #epai .hero-text { flex:1; }
  #epai .hero-visual { flex:1.1; position:relative; height:480px; display:flex; align-items:center; justify-content:center; }

  #epai .app-card { position:relative; background:#fff; border-radius:24px; padding:0; width:340px; box-shadow:0 40px 80px -20px rgba(44,62,80,.15), 0 0 0 1px rgba(44,62,80,.04); z-index:3; overflow:hidden; transform:perspective(1000px) rotateY(-6deg) rotateX(3deg); transition:transform .5s ease; }
  #epai .hero-visual:hover .app-card { transform:perspective(1000px) rotateY(0deg) rotateX(0deg); }
  #epai .app-top { background:linear-gradient(135deg,#8DC63F,#5A8F2A); padding:20px 22px; color:#fff; }
  #epai .app-top small { opacity:.9; font-size:11px; letter-spacing:.5px; }
  #epai .app-top h4 { font-size:16px; margin-top:4px; }
  #epai .app-body { padding:20px 22px 24px; }
  #epai .prog-row { margin-bottom:14px; }
  #epai .prog-row .lbl { display:flex; justify-content:space-between; font-size:12.5px; color:#2C3E50; margin-bottom:6px; }
  #epai .prog-bar { height:7px; border-radius:10px; background:#EEF6E2; overflow:hidden; }
  #epai .prog-fill { height:100%; border-radius:10px; background:linear-gradient(90deg,#8DC63F,#5A8F2A); }
  #epai .task { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #F2F2F2; font-size:13.5px; color:#2C3E50; }
  #epai .task:last-child { border:none; }
  #epai .task i { color:#5A8F2A; width:16px; font-size:13px; }

  #epai .float-card { position:absolute; background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 20px 40px rgba(44,62,80,.12); display:flex; align-items:center; gap:10px; z-index:4; animation:floaty 5s ease-in-out infinite; }
  #epai .float-card i { font-size:16px; }
  #epai .float-1 { top:10px; left:-10px; animation-delay:.2s; }
  #epai .float-2 { bottom:30px; right:-20px; animation-delay:1s; }
  @keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
  #epai .blob-soft { position:absolute; width:280px; height:280px; border-radius:50%; background:linear-gradient(135deg,#8DC63F,#5A8F2A); opacity:.15; filter:blur(40px); z-index:0; }

  #epai .hero-stats { display:flex; gap:44px; margin-top:38px; padding-top:30px; border-top:1px solid #d4e2c2; }
  #epai .hero-stats div strong { display:block; font-size:26px; color:#5A8F2A; font-weight:800; }
  #epai .hero-stats div span { font-size:12.5px; color:#2C3E50; opacity:0.7; }
  #epai .hero-btns { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px; }

  /* Trust strip */
  #epai .trust-strip { padding:36px 0; border-top:1px solid #d4e2c2; border-bottom:1px solid #d4e2c2; background:#F2F2F2; }
  #epai .trust-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
  #epai .trust-label { font-size:12.5px; color:#2C3E50; opacity:0.7; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
  #epai .trust-logos { display:flex; gap:36px; flex-wrap:wrap; }
  #epai .trust-logos span { font-weight:700; font-size:15px; color:#2C3E50; opacity:0.5; letter-spacing:.5px; }

  /* Features */
  #epai .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  #epai .feature-card { background:#fff; border:1px solid #d4e2c2; border-radius:20px; padding:32px 26px; transition:all .35s cubic-bezier(.4,0,.2,1); opacity:0; transform:translateY(24px); }
  #epai .feature-card.show { opacity:1; transform:translateY(0); }
  #epai .feature-card:hover { box-shadow:0 24px 48px rgba(90,143,42,.12); transform:translateY(-8px); border-color:transparent; }
  #epai .f-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#EEF6E2; color:#5A8F2A; font-size:21px; margin-bottom:20px; transition:.3s; }
  #epai .feature-card:hover .f-icon { background:linear-gradient(135deg,#8DC63F,#5A8F2A); color:#fff; transform:scale(1.08); }
  #epai .feature-card h3 { font-size:18px; font-weight:700; margin-bottom:10px; color:#5A8F2A; }
  #epai .feature-card p { font-size:14.5px; color:#2C3E50; line-height:1.7; opacity:0.85; }

  /* How it works */
  #epai .steps-wrap { position:relative; background:#F2F2F2; }
  #epai .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; text-align:center; position:relative; z-index:1; }
  #epai .step-num { width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#8DC63F,#5A8F2A); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; margin:0 auto 20px; box-shadow:0 12px 24px rgba(141,198,63,.3); }
  #epai .steps h3 { font-size:18px; font-weight:700; margin-bottom:8px; color:#5A8F2A; }

  /* Testimonials */
  #epai .testi-wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  #epai .testi-card { background:#EEF6E2; border:1px solid #d4e2c2; border-radius:20px; padding:30px; transition:.3s; position:relative; }
  #epai .testi-card:hover { transform:translateY(-6px); box-shadow:0 24px 48px rgba(90,143,42,.1); }
  #epai .quote-ic { color:#8DC63F; opacity:0.4; font-size:26px; margin-bottom:14px; }
  #epai .testi-top { display:flex; align-items:center; gap:12px; margin-top:16px; }
  #epai .avatar { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#8DC63F,#5A8F2A); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
  #epai .testi-card p.quote { font-size:14.5px; color:#2C3E50; line-height:1.75; margin-bottom:6px; }
  #epai .testi-tag { font-size:11.5px; color:#2C3E50; opacity:0.6; font-style:italic; margin-top:10px; }
  #epai .stars { color:#8DC63F; font-size:12.5px; margin-top:2px; }

  /* CTA banner */
  #epai .cta-banner { background:#2C3E50; border-radius:32px; padding:70px 40px; text-align:center; color:#fff; margin:0 24px; position:relative; overflow:hidden; }
  #epai .cta-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(500px circle at 30% 20%, rgba(141,198,63,.3), transparent 60%), radial-gradient(500px circle at 80% 80%, rgba(90,143,42,.2), transparent 60%); }
  #epai .cta-banner > * { position:relative; z-index:1; }
  #epai .cta-banner h2 { color:#fff; margin-bottom:14px; }
  #epai .cta-banner .sub { color:#E8F1F5 !important; margin-left:auto; margin-right:auto; margin-bottom:32px; opacity:0.9; }
  #epai .cta-banner .btn-primary { background:#8DC63F; color:#2C3E50 !important; box-shadow:0 10px 25px rgba(0,0,0,.2); }
  #epai .cta-banner .btn-primary:hover { background:#EEF6E2; color:#2C3E50 !important; }
  #epai .trust-mini { display:flex; justify-content:center; gap:28px; margin-top:28px; flex-wrap:wrap; }
  #epai .trust-mini span { font-size:13px; color:#E8F1F5; display:flex; align-items:center; gap:6px; opacity:0.8; }
  #epai .trust-mini i { color:#8DC63F; }

  /* Form */
  #epai .form-wrap { max-width:540px; margin:0 auto; background:#fff; border:1px solid #d4e2c2; border-radius:24px; padding:46px; box-shadow:0 30px 60px rgba(44,62,80,.08); }
  #epai .form-group { margin-bottom:20px; text-align:left; }
  #epai .form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:#2C3E50; }
  #epai .form-group input, #epai .form-group select { width:100%; padding:14px 16px; border:1.5px solid #d4e2c2; border-radius:12px; font-size:14px; font-family:inherit; transition:.25s; background:#EEF6E2; color:#2C3E50; }
  #epai .form-group input:hover, #epai .form-group select:hover { border-color:#8DC63F; }
  #epai .form-group input:focus, #epai .form-group select:focus { outline:none; border-color:#5A8F2A; background:#fff; box-shadow:0 0 0 4px rgba(141,198,63,.15); }
  #epai .disclaimer { font-size:12px; color:#2C3E50; opacity:0.6; margin-top:16px; text-align:center; }

  /* Footer */
  #epai footer { background:#2C3E50; color:#E8F1F5; padding:60px 0 28px; }
  #epai .footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.1); }
  #epai .footer-logo { color:#fff !important; font-size:19px; font-weight:800; display:flex; align-items:center; gap:8px; }
  #epai .social { display:flex; gap:12px; }
  #epai .social a { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff !important; transition:.3s; }
  #epai .social a:hover { background:#8DC63F; transform:translateY(-3px); color:#2C3E50 !important; }
  #epai .footer-bottom { text-align:center; font-size:12.5px; color:#E8F1F5; opacity:0.6; padding-top:24px; }

  /* Thank-you */
  #epai #thankyou { display:none; text-align:center; padding:50px 40px; background:#EEF6E2; border:1px solid #d4e2c2; border-radius:24px; }
  #epai .ty-icon { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#8DC63F,#5A8F2A); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; box-shadow:0 12px 28px rgba(141,198,63,.3); }
  #epai .ty-icon i { color:#fff; font-size:26px; }
  #epai #thankyou h3 { font-size:24px; font-weight:800; margin-bottom:12px; color:#5A8F2A; }
  #epai #thankyou p { font-size:14.5px; color:#2C3E50; line-height:1.7; max-width:400px; margin:0 auto; opacity:0.85; }
  #epai .ty-note { margin-top:22px; padding-top:20px; border-top:1px solid #d4e2c2; font-size:12px; color:#2C3E50; opacity:0.6; font-style:italic; }

  /* Responsive */
  @media(max-width:900px){
    #epai h1 { font-size:38px; }
    #epai .navbar { top:10px; margin:0 10px; }
    #epai .hero { padding:40px 0 40px; }
    #epai .hero-inner { flex-direction:column; gap:44px; padding-top:10px; }
    #epai .hero-visual { height:360px; }
    #epai .section { padding:80px 0; }
    #epai .cta-section { padding:36px 0; }
    #epai .features-grid, #epai .steps, #epai .testi-wrap { grid-template-columns:1fr 1fr; gap:22px; }
    #epai .trust-inner { justify-content:center; text-align:center; }
    #epai .nav-links { position:fixed; top:76px; right:10px; background:#fff; flex-direction:column; align-items:flex-start;
      width:230px; padding:26px 22px; gap:24px; box-shadow:0 20px 50px rgba(44,62,80,.15); border-radius:18px;
      transform:translateX(120%); transition:.35s ease; }
    #epai .nav-links.open { transform:translateX(0); }
    #epai .nav-links a.btn { width:100%; justify-content:center; }
    #epai .burger { display:block; }
  }
  @media(max-width:600px){
    #epai h1 { font-size:30px; }
    #epai h2 { font-size:26px; }
    #epai .section { padding:60px 0; }
    #epai .cta-section { padding:28px 0; }
    #epai .features-grid, #epai .steps, #epai .testi-wrap { grid-template-columns:1fr; }
    #epai .hero-stats { gap:26px; flex-wrap:wrap; }
    #epai .cta-banner { padding:50px 22px; margin:0 12px; }
    #epai .form-wrap { padding:28px 22px; }
    #epai .footer-inner { flex-direction:column; text-align:center; }
    #epai .app-card { width:280px; }
  }
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div id="epai">

  <nav class="navbar">
    <div class="nav-inner">
      <div class="logo"><div class="logo-icon"><i class="fa-solid fa-graduation-cap"></i></div> EduPath AI</div>
      <ul class="nav-links" id="navLinks">
        <li><a href="#features">Features</a></li>
        <li><a href="#how">How it Works</a></li>
        <li><a href="#testimonials">Reviews</a></li>
        <li><a href="#trial" class="btn btn-primary">Start Free Trial</a></li>
      </ul>
      <div class="burger" id="burger"><i class="fa-solid fa-bars"></i></div>
    </div>
  </nav>

  <section class="hero">
    <div class="mesh"></div>
    <div class="container hero-inner">
      <div class="hero-text">
        <span class="badge"><i class="fa-solid fa-sparkles"></i> AI-Powered Study Planning</span>
        <h1>Study smarter with your <span class="grad-text">personal AI planner</span></h1>
        <p class="sub">EduPath AI builds a personalized study schedule around your subjects, deadlines and free time — so you always know exactly what to study next.</p>
        <div class="hero-btns">
          <a href="#trial" class="btn btn-primary">Start Free Trial <i class="fa-solid fa-arrow-right"></i></a>
          <a href="#how" class="btn btn-outline">See How It Works</a>
        </div>
        <div class="hero-stats">
          <div><strong>10K+</strong><span>Simulated Students</span></div>
          <div><strong>50+</strong><span>Subjects Supported</span></div>
          <div><strong>4.8★</strong><span>Demo Rating</span></div>
        </div>
      </div>
      <div class="hero-visual">
        <div class="blob-soft" style="top:0;left:0;"></div>
        <div class="float-card float-1"><i class="fa-solid fa-fire" style="color:#8DC63F;"></i> <div><strong style="font-size:13px;">7-day streak</strong></div></div>
        <div class="float-card float-2"><i class="fa-solid fa-circle-check" style="color:#5A8F2A;"></i> <div><strong style="font-size:13px;">Task completed</strong></div></div>
        <div class="app-card">
          <div class="app-top">
            <small>TODAY'S PLAN</small>
            <h4>Tuesday, Oct 6</h4>
          </div>
          <div class="app-body">
            <div class="prog-row">
              <div class="lbl"><span>Physics — Ch.4 Revision</span><span>80%</span></div>
              <div class="prog-bar"><div class="prog-fill" style="width:80%;"></div></div>
            </div>
            <div class="prog-row">
              <div class="lbl"><span>Math — Practice Test</span><span>45%</span></div>
              <div class="prog-bar"><div class="prog-fill" style="width:45%;"></div></div>
            </div>
            <div class="task"><i class="fa-regular fa-clock"></i> English — Essay Draft, 6:00 PM</div>
            <div class="task"><i class="fa-solid fa-bell" style="color:#8DC63F;"></i> Reminder: Chemistry Quiz Tomorrow</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="trust-strip">
    <div class="container trust-inner">
      <span class="trust-label">Built for students at</span>
      <div class="trust-logos">
        <span>Riverdale High</span><span>Crestwood Academy</span><span>Northgate College</span><span>Lakeshore Prep</span>
      </div>
    </div>
  </section>

  <section class="section" id="features">
    <div class="container">
      <div class="center">
        <span class="badge">FEATURES</span>
        <h2>Everything you need to stay on track</h2>
        <p class="sub">Built for students who juggle multiple subjects — and parents who want visibility without micromanaging.</p>
      </div>
      <div class="features-grid">
        <div class="feature-card"><div class="f-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div><h3>Smart Study Schedule</h3><p>AI suggests a proposed schedule based on your subjects, deadlines and available study time.</p></div>
        <div class="feature-card"><div class="f-icon"><i class="fa-solid fa-calendar-check"></i></div><h3>Deadline Tracking</h3><p>Never miss an assignment or exam — every deadline is organized in one clean view.</p></div>
        <div class="feature-card"><div class="f-icon"><i class="fa-solid fa-rotate"></i></div><h3>Revision Reminders</h3><p>Gentle nudges to revise topics before they're due, based on your own pace.</p></div>
        <div class="feature-card"><div class="f-icon"><i class="fa-solid fa-list-check"></i></div><h3>Practice Test Suggestions</h3><p>Get illustrative practice-test recommendations aligned with your revision plan.</p></div>
        <div class="feature-card"><div class="f-icon"><i class="fa-solid fa-chart-line"></i></div><h3>Progress Insights</h3><p>Simple visual snapshots of study consistency — for you, and for parents who check in.</p></div>
        <div class="feature-card"><div class="f-icon"><i class="fa-solid fa-users"></i></div><h3>Built for Students & Parents</h3><p>One plan, two views — students get control, parents get peace of mind.</p></div>
      </div>
    </div>
  </section>

  <section class="section steps-wrap" id="how">
    <div class="container">
      <div class="center">
        <span class="badge">HOW IT WORKS</span>
        <h2>Get your plan in 3 simple steps</h2>
      </div>
      <div class="steps">
        <div><div class="step-num">1</div><h3>Add Your Subjects</h3><p class="sub" style="max-width:280px;margin:8px auto 0;">Enter subjects, deadlines and how much time you have each day.</p></div>
        <div><div class="step-num">2</div><h3>Get Your AI Plan</h3><p class="sub" style="max-width:280px;margin:8px auto 0;">EduPath AI proposes a study schedule tailored to your priorities.</p></div>
        <div><div class="step-num">3</div><h3>Stay on Track</h3><p class="sub" style="max-width:280px;margin:8px auto 0;">Follow reminders, log progress, and adjust anytime.</p></div>
      </div>
    </div>
  </section>

  <section class="section" id="testimonials">
    <div class="container">
      <div class="center">
        <span class="badge">REVIEWS</span>
        <h2>What early users are saying</h2>
      </div>
      <div class="testi-wrap">
        <div class="testi-card"><i class="fa-solid fa-quote-left quote-ic"></i><p class="quote">"Finally I know what to study first every day instead of guessing."</p><div class="testi-top"><div class="avatar">JC</div><div><strong style="font-size:14px; color:#5A8F2A;">Jake Carter</strong><div class="stars">★★★★★</div></div></div><div class="testi-tag">Simulated feedback for demonstration</div></div>
        <div class="testi-card"><i class="fa-solid fa-quote-left quote-ic"></i><p class="quote">"I can see my daughter's progress without constantly asking her about it."</p><div class="testi-top"><div class="avatar">MR</div><div><strong style="font-size:14px; color:#5A8F2A;">Michelle Reynolds (Parent)</strong><div class="stars">★★★★★</div></div></div><div class="testi-tag">Simulated feedback for demonstration</div></div>
        <div class="testi-card"><i class="fa-solid fa-quote-left quote-ic"></i><p class="quote">"The reminders actually match my pace instead of overwhelming me."</p><div class="testi-top"><div class="avatar">TB</div><div><strong style="font-size:14px; color:#5A8F2A;">Tyler Brooks</strong><div class="stars">★★★★★</div></div></div><div class="testi-tag">Simulated feedback for demonstration</div></div>
      </div>
    </div>
  </section>

  <section class="cta-section">
    <div class="cta-banner">
      <h2>Ready to take control of your studies?</h2>
      <p class="sub">Start your free trial today — no credit card required.</p>
      <a href="#trial" class="btn btn-primary">Start Free Trial <i class="fa-solid fa-arrow-right"></i></a>
      <div class="trust-mini">
        <span><i class="fa-solid fa-check"></i> No credit card</span>
        <span><i class="fa-solid fa-check"></i> Cancel anytime</span>
        <span><i class="fa-solid fa-check"></i> Setup in 2 minutes</span>
      </div>
    </div>
  </section>

  <section class="section" id="trial">
    <div class="container center">
      <span class="badge">FREE TRIAL</span>
      <h2>Start your free trial</h2>
      <p class="sub">Sign up to join the waitlist and get your personalized plan.</p>
    </div>
    <div class="form-wrap">
      <form id="trialForm">
        <div class="form-group"><label>Full Name</label><input type="text" name="Name" placeholder="Your name" required></div>
        <div class="form-group"><label>Email Address</label><input type="email" name="Email" placeholder="you@example.com" required></div>
        <div class="form-group"><label>I am a</label><select name="Role"><option>Student</option><option>Parent</option></select></div>
        <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">Start Free Trial <i class="fa-solid fa-arrow-right"></i></button>
        <p class="disclaimer">By signing up, you agree to receive email updates.</p>
      </form>
      <div id="thankyou">
        <div class="ty-icon"><i class="fa-solid fa-check"></i></div>
        <h3>Thank You for Subscribing!</h3>
        <p>Your request has been received. Our team will be in touch shortly with the next steps to get you started on your personalized study plan.</p>
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <div class="footer-inner">
        <div class="footer-logo"><i class="fa-solid fa-graduation-cap"></i> EduPath AI</div>
        <div class="social">
          <a href="https://web.facebook.com/profile.php?id=61594778306834" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-facebook-f"></i></a>
          <a href="https://www.instagram.com/edupathai15?stkn=MWN4em1sc3U4cW1jeA%3D%3D" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-instagram"></i></a>
          <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
        </div>
      </div>
      <p class="footer-bottom">© 2026 EduPath AI. All Rights Reserved.</p>
    </div>
  </footer>
</div>

<script>
  (function(){
    var burger = document.getElementById('burger');
    var navLinks = document.getElementById('navLinks');
    burger.addEventListener('click', function(){ navLinks.classList.toggle('open'); });
    navLinks.querySelectorAll('a').forEach(function(a){
      a.addEventListener('click', function(){ navLinks.classList.remove('open'); });
    });

    var cards = document.querySelectorAll('#epai .feature-card');
    var observer = new IntersectionObserver(function(entries){
      entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('show'); } });
    },{threshold:.2});
    cards.forEach(function(c){ observer.observe(c); });

    var form = document.getElementById('trialForm');
    var submitBtn = form.querySelector('button[type="submit"]');

    /* =========================================================
       MAILCHIMP MARKETING API — FRONTEND FETCH
       Replace these 3 values with your actual Mailchimp values.
       ========================================================= */
    var MAILCHIMP_DC = 'YOUR_DC';
    var MAILCHIMP_TOKEN = 'YOUR_TOKEN';
    var MAILCHIMP_LIST_ID = 'YOUR_LIST_ID';

    form.addEventListener('submit', async function(e){
      e.preventDefault();
      if(!form.checkValidity()){ form.reportValidity(); return; }

      var formData = new FormData(form);
      var fullName = formData.get('Name').trim();
      var nameParts = fullName.split(' ');
      var firstName = nameParts[0];
      var lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
      var email = formData.get('Email').trim();
      var role = formData.get('Role');

      var originalBtnText = submitBtn.innerHTML;
      submitBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Processing...';
      submitBtn.disabled = true;

      try {
        var mailchimpUrl =
          'https://' + MAILCHIMP_DC + '.api.mailchimp.com/3.0/lists/' +
          MAILCHIMP_LIST_ID + '/members';

        var response = await fetch(mailchimpUrl, {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + MAILCHIMP_TOKEN,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            email_address: email,
            status: 'subscribed',
            merge_fields: {
              FNAME: firstName,
              LNAME: lastName
            },
            tags: [role]
          })
        });

        var data = await response.json();
        console.log('Mailchimp Response:', data);

        if(response.ok){
          form.style.display = 'none';
          document.getElementById('thankyou').style.display = 'block';
          document.getElementById('thankyou').scrollIntoView({behavior:'smooth', block:'center'});
        } else {
          var errorMsg = data.detail || data.title || 'Mailchimp request failed.';
          alert(errorMsg);
          submitBtn.innerHTML = originalBtnText;
          submitBtn.disabled = false;
        }
      } catch(error) {
        console.error('Mailchimp Fetch Error:', error);
        alert('Mailchimp API request failed or was blocked by browser CORS.');
        submitBtn.innerHTML = originalBtnText;
        submitBtn.disabled = false;
      }
    });
  })();
</script>

Share this file: