gravio/index.html at main · Ufidtech/gravio · 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
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
438
439
440
441
442
443
444
445
446
447
448
449
450
451
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gravio — Your Academic Command Center</title>
    <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=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300;1,9..144,600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/landing.css" />
  </head>
  <body>
    <!-- ── NAV ── -->
    <nav id="navbar">
      <a href="#" class="nav-logo">Gravio</a>
      <a href="./pages/onboarding.html" class="nav-cta">Launch App →</a>
    </nav>

    <!-- ── HERO ── -->
    <section class="hero">
      <div class="orbit-rings">
        <div class="ring ring-1"></div>
        <div class="ring ring-2"></div>
        <div class="ring ring-3"></div>
      </div>
      <div class="hero-eyebrow">Your Academic Command Center</div>

      <h1 class="hero-title">
        Know exactly where<br />
        <em>you stand.</em>
        <span class="line2">And what it takes to get there.</span>
      </h1>

      <p class="hero-sub">
        Gravio tracks your CGPA, calculates your recovery path, and holds you
        accountable — all in one place, built for Nigerian university students.
      </p>

      <div class="hero-actions">
        <a href="pages/onboarding.html" class="btn-primary-lg">
          🪐 Get Started — Free
        </a>
        <a href="#features" class="btn-ghost-lg">See how it works</a>
      </div>

      <p class="hero-note">No account needed. No data leaves your device.</p>
    </section>

    <!-- ── APP PREVIEW ── -->
    <div class="preview-section">
      <div class="phone-mockup">
        <div class="phone-notch"></div>
        <div class="phone-screen">
          <div class="phone-topbar">
            <div>
              <div class="phone-title">🪐 Gravio</div>
              <div class="phone-sub">Good morning, Umar</div>
            </div>
            <div class="phone-av">UF</div>
          </div>

          <div class="mock-stat-grid">
            <div class="mock-stat">
              <span class="mock-stat-num">4.53</span>
              <span class="mock-stat-lbl">Current CGPA</span>
            </div>
            <div class="mock-stat">
              <span class="mock-stat-num am">4.75</span>
              <span class="mock-stat-lbl">Target</span>
            </div>
          </div>

          <div class="mock-orbit-card">
            <div class="mock-orbit-hdr">
              <span class="mock-orbit-lbl">Orbit status</span>
              <span class="mock-badge-am">Difficult</span>
            </div>
            <div class="mock-orbit-num">
              Need <strong>4.97</strong> per semester · <strong>4</strong> left
            </div>
            <div class="mock-pbar"><div class="mock-pbar-fill"></div></div>
            <div class="mock-plabs"><span>4.53</span><span>4.75</span></div>
          </div>

          <div class="mock-pledge-hdr">Active Pledge</div>
          <div
            style="
              background: var(--g-bg-raised);
              border-radius: 9px;
              border: 0.5px solid var(--g-border);
              padding: 8px 10px;
            "
          >
            <div class="mock-pledge-item">
              <div class="mock-pnum">1</div>
              <span>Attend every MTH 301 lecture</span>
            </div>
            <div class="mock-pledge-item">
              <div class="mock-pnum">2</div>
              <span>Submit all assignments early</span>
            </div>
          </div>

          <div class="mock-nav">
            <div class="mock-ni act">
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#4ECCA3"
                stroke-width="1.5"
                stroke-linecap="round"
              >
                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                <polyline points="9 22 9 12 15 12 15 22" />
              </svg>
              <span class="mock-ni-lbl" style="color: var(--g-accent)"
                >Home</span
              >
            </div>
            <div class="mock-ni">
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#7AB89A"
                stroke-width="1.5"
                stroke-linecap="round"
              >
                <rect x="2" y="3" width="20" height="14" rx="2" />
              </svg>
              <span class="mock-ni-lbl">Calc</span>
            </div>
            <div class="mock-ni">
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#7AB89A"
                stroke-width="1.5"
              >
                <circle cx="12" cy="12" r="10" />
                <circle cx="12" cy="12" r="3" />
              </svg>
              <span class="mock-ni-lbl">Orbit</span>
            </div>
            <div class="mock-ni">
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#7AB89A"
                stroke-width="1.5"
                stroke-linecap="round"
              >
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
              </svg>
              <span class="mock-ni-lbl">Pledge</span>
            </div>
            <div class="mock-ni">
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#7AB89A"
                stroke-width="1.5"
                stroke-linecap="round"
              >
                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
              <span class="mock-ni-lbl">Profile</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── FEATURES ── -->
    <div class="divider"></div>

    <section class="section" id="features">
      <div class="reveal">
        <div class="section-eyebrow">What Gravio does</div>
        <h2 class="section-title">
          Everything you need.<br /><em>Nothing you don't.</em>
        </h2>
        <p class="section-body">
          Built by a student who needed it. Gravio is four tools that work
          together — not four apps bolted to each other.
        </p>
      </div>

      <div class="feature-grid">
        <div class="feature-card reveal reveal-delay-1">
          <span class="feature-icon">📊</span>
          <div class="feature-title">Live GPA Calculator</div>
          <div class="feature-desc">
            Add your courses, pick your grades, and watch your semester GPA and
            cumulative CGPA recalculate in real time — before you even press
            save.
          </div>
          <span class="feature-tag">Calc →</span>
        </div>

        <div class="feature-card reveal reveal-delay-2">
          <span class="feature-icon">🪐</span>
          <div class="feature-title">Orbit Planner</div>
          <div class="feature-desc">
            The one number every student needs to see: the exact GPA you must
            average per remaining semester to hit your target class at
            graduation. Color-coded. Honest.
          </div>
          <span class="feature-tag">Orbit →</span>
        </div>

        <div class="feature-card reveal reveal-delay-3">
          <span class="feature-icon">🛡️</span>
          <div class="feature-title">The Pledge</div>
          <div class="feature-desc">
            Write your rules before the semester begins. Sign them. They lock.
            At the end of semester, review each one — kept or broken — and carry
            that into the next.
          </div>
          <span class="feature-tag">Pledge →</span>
        </div>

        <div class="feature-card reveal reveal-delay-4">
          <span class="feature-icon">👤</span>
          <div class="feature-title">Academic Profile</div>
          <div class="feature-desc">
            Your complete semester history in one view. Color-coded GPAs — teal
            for strong, amber for average, red for rough. Export your data
            anytime as JSON.
          </div>
          <span class="feature-tag">Profile →</span>
        </div>
      </div>
    </section>

    <!-- ── ORBIT DEEP DIVE ── -->
    <div class="orbit-showcase">
      <div class="orbit-inner">
        <div class="reveal">
          <div class="section-eyebrow">The Orbit Formula</div>
          <h2 class="section-title">
            Math that gives you<br /><em>a real answer.</em>
          </h2>
          <p class="section-body" style="margin-bottom: 32px">
            Most CGPA calculators just tell you where you are. Orbit answers the
            question you actually have:
            <strong style="color: var(--g-text)"
              >"What do I need to do from here?"</strong
            >
          </p>
          <p class="section-body">
            The formula uses your quality points earned so far, your target
            CGPA, and your remaining credit units to calculate the exact GPA you
            need per semester — no guessing.
          </p>

          <div class="orbit-formula" style="margin-top: 28px">
            <div><span class="comment">// The Orbit formula</span></div>
            <div>
              <span class="var">totalQPDone</span> = currentCGPA × unitsDone
            </div>
            <div>
              <span class="var">totalUnitsAtGrad</span> = unitsDone +
              remainingUnits
            </div>
            <div>
              <span class="var">totalQPNeeded</span> = targetCGPA ×
              totalUnitsAtGrad
            </div>
            <div>
              <span class="var">qpStillNeeded</span> = totalQPNeeded −
              totalQPDone
            </div>
            <div>
              <span class="result">neededGPA</span> = qpStillNeeded ÷
              remainingUnits
            </div>
          </div>
        </div>

        <div class="reveal reveal-delay-2">
          <div class="orbit-big-demo">
            <div class="orbit-demo-lbl">You need per semester</div>
            <div class="orbit-demo-num">4.97</div>
            <div class="orbit-demo-badge">Difficult</div>
            <div class="orbit-demo-sub">
              Every course must be B or above.<br />
              Zero dropped courses allowed.
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── PLEDGE DEEP DIVE ── -->
    <section style="padding: 0 24px">
      <div class="pledge-showcase">
        <div class="reveal">
          <div class="pledge-card-demo">
            <div class="pledge-demo-stamp">
              Signed — 300L First Semester 2025/26
            </div>
            <div class="pledge-demo-name">Umar Farooq Ibrahim Danjuma</div>
            <div class="pledge-demo-date">Signed: 15 September 2025</div>

            <div class="pledge-demo-rule">
              <div class="pledge-demo-num">1</div>
              Attend every MTH 301 lecture without exception.
            </div>
            <div class="pledge-demo-rule">
              <div class="pledge-demo-num">2</div>
              Submit all assignments before the deadline.
            </div>
            <div class="pledge-demo-rule">
              <div class="pledge-demo-num">3</div>
              No social media after 10pm on weekdays.
            </div>
          </div>
        </div>

        <div class="reveal reveal-delay-2">
          <div class="section-eyebrow">The Pledge</div>
          <h2 class="section-title">A promise to<br /><em>yourself.</em></h2>
          <p class="section-body" style="margin-bottom: 20px">
            Write your rules at the start of each semester. Sign them. They seal
            — you cannot edit a signed pledge. That's the point.
          </p>
          <p class="section-body" style="margin-bottom: 20px">
            At the end of semester, Gravio asks you to review each rule: kept or
            broken. No judgment. Just honest reflection that makes the next
            semester stronger.
          </p>
          <p class="section-body">
            The Pledge is not a feature. It's the accountability layer that no
            other CGPA app has.
          </p>
        </div>
      </div>
    </section>

    <!-- ── HOW IT WORKS ── -->
    <div class="how-section">
      <div class="how-inner">
        <div
          class="reveal"
          style="text-align: center; max-width: 500px; margin: 0 auto"
        >
          <div class="section-eyebrow" style="justify-content: center">
            How it works
          </div>
          <h2 class="section-title" style="text-align: center">
            Up and running<br /><em>in 3 minutes.</em>
          </h2>
        </div>

        <div class="steps-grid reveal" style="margin-top: 40px">
          <div class="step-item">
            <span class="step-num">01</span>
            <div class="step-title">Set up your profile</div>
            <div class="step-desc">
              Enter your name, level, current CGPA, and target class. Takes 60
              seconds.
            </div>
          </div>
          <div class="step-item">
            <span class="step-num">02</span>
            <div class="step-title">Add your courses</div>
            <div class="step-desc">
              Enter each course and grade. Your GPA recalculates live as you
              type.
            </div>
          </div>
          <div class="step-item">
            <span class="step-num">03</span>
            <div class="step-title">Check your Orbit</div>
            <div class="step-desc">
              See the exact GPA you need per semester to graduate at your target
              class.
            </div>
          </div>
          <div class="step-item">
            <span class="step-num">04</span>
            <div class="step-title">Sign your Pledge</div>
            <div class="step-desc">
              Write your rules for the semester and commit. Gravio holds the
              record.
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── QUOTE ── -->
    <div class="quote-section reveal">
      <span class="quote-mark">"</span>
      <p class="quote-text">
        I didn't build Gravio because I had it all figured out. I built it
        because I wish it existed when it didn't.
      </p>
      <div class="quote-attr">
        Umar Farooq Ibrahim Danjuma · FUTMinna · 300L Computer Science
      </div>
    </div>

    <!-- ── FINAL CTA ── -->
    <section class="cta-section">
      <div class="cta-inner">
        <div class="reveal">
          <h2 class="cta-title">
            Your CGPA doesn't<br />fix itself.<br /><em>Start today.</em>
          </h2>
          <p class="cta-sub">
            Gravio is free. No sign-up. No ads. No data leaves your device.<br />
            Just you, your numbers, and a clear path forward.
          </p>
          <div class="cta-actions">
            <a href="./pages/onboarding.html" class="btn-primary-lg">
              🪐 Launch Gravio — It's Free
            </a>
          </div>
          <p class="cta-note">
            Works on any browser. Mobile-first. Data stays on your device.
          </p>
        </div>
      </div>
    </section>

    <!-- ── FOOTER ── -->
    <footer>
      <div class="footer-logo">Gravio</div>
      <div class="footer-text">
        Built by Umar Farooq Ibrahim Danjuma<br />
        FUTMinna · 300L Computer Science · v1.0
      </div>
    </footer>
    <script src="js/landing.js"></script>
  </body>
</html>