BLT-University/request.html at main · willkhinz/BLT-University · 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
---
layout: default
title: Request a Course
permalink: /request/
---
<script src="https://unpkg.com/@phosphor-icons/web"></script>

<section class="relative pt-16 pb-24 overflow-hidden bg-white dark:bg-gray-900 border-b border-gray-50 dark:border-gray-800 text-center transition-colors duration-300">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(220,38,38,0.04),transparent_50%)] -z-10"></div>
    <div class="max-w-4xl mx-auto px-6 relative z-10">
        <h1 class="font-display text-3xl md:text-4xl font-bold text-gray-900 dark:text-white tracking-tight mb-4">
            Request a <span class="text-transparent bg-clip-text bg-gradient-to-r from-bltRed to-red-600">Course</span>
        </h1>
        <p class="text-sm md:text-base text-gray-500 dark:text-gray-400 max-w-xl mx-auto font-medium">
            Help us shape the future of BLT University by telling us what you'd like to learn next.
        </p>
    </div>
</section>

<main class="max-w-4xl mx-auto px-6 py-20 space-y-24 dark:bg-gray-900 transition-colors duration-300">

    <section class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="bg-white dark:bg-gray-800 p-8 rounded-[2rem] shadow-sm border border-gray-100 dark:border-gray-700 hover:border-bltRed/20 transition-all group">
            <div class="w-12 h-12 bg-red-50 dark:bg-red-900/20 text-bltRed rounded-2xl flex items-center justify-center mb-6 group-hover:bg-bltRed group-hover:text-white transition-colors shadow-sm">
                <i class="ph-bold ph-intersect text-xl"></i>
            </div>
            <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-3">Shape Curriculum</h3>
            <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">Your requests directly influence which courses our instructors prioritize and develop next.</p>
        </div>

        <div class="bg-white dark:bg-gray-800 p-8 rounded-[2rem] shadow-sm border border-gray-100 dark:border-gray-700 hover:border-bltRed/20 transition-all group">
            <div class="w-12 h-12 bg-red-50 dark:bg-red-900/20 text-bltRed rounded-2xl flex items-center justify-center mb-6 group-hover:bg-bltRed group-hover:text-white transition-colors shadow-sm">
                <i class="ph-bold ph-users-three text-xl"></i>
            </div>
            <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-3">Build Community</h3>
            <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">Join forces with other students who share your specific professional learning interests.</p>
        </div>
    </section>

    <section class="max-w-2xl mx-auto w-full">
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-12 text-center flex items-center justify-center gap-3">
            <i class="ph-fill ph-list-numbers text-bltRed"></i> Submission Process
        </h2>

        <div class="space-y-12 relative before:absolute before:inset-0 before:ml-[1.4rem] before:h-full before:w-0.5 before:bg-gradient-to-b before:from-red-200 dark:before:from-red-900/40 before:to-transparent">
            <div class="relative flex items-start gap-8 group">
                <div class="flex items-center justify-center w-12 h-12 rounded-full border-4 border-white dark:border-gray-900 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 font-bold shadow-sm shrink-0 z-10 group-hover:bg-bltRed group-hover:text-white transition-all">1</div>
                <div class="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-sm border border-gray-100 dark:border-gray-700 flex-1 hover:border-bltRed transition-colors">
                    <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Check Existing Requests</h3>
                    <p class="text-gray-500 dark:text-gray-400 leading-relaxed">Browse <a href="https://github.com/OWASP-BLT/BLT-University/issues" class="text-bltRed hover:underline font-bold">existing topics</a>. If yours is already there, simply add a 👍 reaction to increase its priority.</p>
                </div>
            </div>

            <div class="relative flex items-start gap-8 group">
                <div class="flex items-center justify-center w-12 h-12 rounded-full border-4 border-white dark:border-gray-900 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 font-bold shadow-sm shrink-0 z-10 group-hover:bg-bltRed group-hover:text-white transition-all">2</div>
                <div class="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-sm border border-gray-100 dark:border-gray-700 flex-1 hover:border-bltRed transition-colors">
                    <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Submit Your Form</h3>
                    <p class="text-gray-500 dark:text-gray-400 leading-relaxed">Tell us what you want to learn, why it matters, and describe the real-world application of the security topic.</p>
                </div>
            </div>
        </div>

        <div class="mt-16 flex flex-col sm:flex-row gap-4 justify-center">
            <a href="https://github.com/OWASP-BLT/BLT-University/issues/new?template=course-request.yml" class="px-10 py-4 bg-bltRed text-white font-bold rounded-2xl shadow-xl shadow-red-100 dark:shadow-none hover:bg-bltRedHover hover:-translate-y-1 transition-all">
                Submit Request
            </a>
            <a href="https://github.com/OWASP-BLT/BLT-University/issues?q=is%3Aissue+label%3Acourse-request" class="px-10 py-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-bold border border-gray-200 dark:border-gray-700 rounded-2xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all">
                View All Requests
            </a>
        </div>
    </section>

    <section class="bg-gray-900 dark:bg-gray-800 p-10 md:p-14 rounded-[3rem] text-white relative overflow-hidden group border border-transparent dark:border-gray-700 transition-colors">
        <div class="absolute -right-10 -bottom-10 opacity-10 group-hover:scale-110 transition-transform pointer-events-none">
            <i class="ph-fill ph-chalkboard-teacher text-[12rem]"></i>
        </div>
        <div class="relative z-10 text-center max-w-xl mx-auto">
            <h3 class="text-3xl font-bold mb-4">Are you an Instructor?</h3>
            <p class="text-gray-400 dark:text-gray-400 mb-8 leading-relaxed">See a request you can teach? Propose a course through our contributor portal and join our global faculty.</p>
            <a href="https://github.com/OWASP-BLT/BLT-University/issues/new?template=course-submission.yml" class="inline-block px-8 py-3 bg-bltRed text-white font-bold rounded-xl shadow-[0_8px_20px_rgba(220,38,38,0.3)] dark:shadow-none hover:bg-bltRedHover transition-all">Submit a Course Proposal →</a>
        </div>
    </section>
</main>