BLT-University/enroll.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
---
layout: default
title: Enroll
permalink: /enroll/
---

<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 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 text-center relative z-10">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-bltRedLight dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 text-bltRed text-[10px] font-bold tracking-widest uppercase mb-6 shadow-sm">
            <i class="ph-bold ph-broadcast animate-pulse"></i> Enrollment Open
        </div>
        <h1 class="font-display text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-4 leading-tight">
            Start Your <span class="text-bltRed">Cyber Journey</span>
        </h1>
        <p class="text-sm md:text-base text-gray-500 dark:text-gray-400 max-w-lg mx-auto font-medium leading-relaxed">
            Join a global community of practitioners learning cybersecurity via hands-on, open-source Git workflows.
        </p>
    </div>
</section>

<main class="max-w-6xl mx-auto px-6 py-16 dark:bg-gray-900 transition-colors duration-300">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">

        <div class="lg:col-span-8 bg-white dark:bg-gray-800 p-8 md:p-10 rounded-[2.5rem] shadow-soft border border-gray-100 dark:border-gray-700">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-10 flex items-center gap-3">
                <i class="ph-fill ph-rocket-launch text-bltRed"></i> Enrollment Roadmap
            </h2>

            <div class="space-y-10 relative before:absolute before:inset-0 before:ml-[1.15rem] before:h-full before:w-0.5 before:bg-gradient-to-b before:from-red-100 dark:before:from-red-900/40 before:to-transparent">
                <div class="relative flex items-start gap-6 group">
                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white dark:border-gray-800 bg-gray-900 dark:bg-gray-700 text-white font-bold shadow-md shrink-0 z-10">01</div>
                    <div class="pt-1">
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">Choose Your Track</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">Select a module from our <a href="{{ '/courses/' | relative_url }}" class="text-bltRed font-bold hover:underline">catalog</a> that matches your career goals.</p>
                    </div>
                </div>

                <div class="relative flex items-start gap-6 group">
                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white dark:border-gray-800 bg-gray-900 dark:bg-gray-700 text-white font-bold shadow-md shrink-0 z-10">02</div>
                    <div class="pt-1">
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">GitHub Setup</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">Create a <a href="https://github.com/signup" class="text-bltRed font-bold hover:underline">free account</a> to manage your hands-on lab repository.</p>
                    </div>
                </div>

                <div class="relative flex items-start gap-6 group">
                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white dark:border-gray-800 bg-bltRed text-white font-bold shadow-md shrink-0 z-10">03</div>
                    <div class="pt-1">
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-2">Submit Enrollment Issue</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-6 leading-relaxed">Submit your request on GitHub to receive your automated lab access.</p>
                        <a href="https://github.com/OWASP-BLT/BLT-University/issues/new?template=enrollment.yml"
                        class="inline-flex items-center gap-2 px-6 py-3 bg-bltRed text-white text-xs font-bold rounded-xl shadow-lg dark:shadow-none hover:bg-bltRedHover transition-all">
                        <i class="ph-bold ph-github-logo text-base"></i> Submit via GitHub
                     </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-4 space-y-4">
            <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-sm flex items-start gap-4 transition-colors">
                <div class="w-10 h-10 rounded-xl bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 flex items-center justify-center shrink-0">
                    <i class="ph-bold ph-globe text-xl"></i>
                </div>
                <div>
                    <h3 class="font-bold text-gray-900 dark:text-white text-xs uppercase tracking-widest mb-1">100% Open Source</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Free to learn and contribute for everyone.</p>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-sm flex items-start gap-4 transition-colors">
                <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
                    <i class="ph-bold ph-seal-check text-xl"></i>
                </div>
                <div>
                    <h3 class="font-bold text-gray-900 dark:text-white text-xs uppercase tracking-widest mb-1">Verified Skills</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Certificates verified via unique Git hashes.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Community Section -->
    <div class="mt-16 bg-gray-900 dark:bg-gray-800 p-8 md:p-12 rounded-[2.5rem] text-white shadow-xl relative overflow-hidden group border border-transparent dark:border-gray-700 transition-colors">
        <div class="absolute -right-6 -bottom-6 opacity-10 group-hover:scale-110 transition-transform pointer-events-none">
            <i class="ph-fill ph-question text-9xl"></i>
        </div>
        <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 text-center md:text-left">
            <div>
                <h3 class="text-2xl font-bold mb-2">Stuck or Confused?</h3>
                <p class="text-gray-400 text-sm max-w-md">Our global community is here to help you navigate your journey.</p>
            </div>
            <a href="https://github.com/OWASP-BLT/BLT-University/issues"
               class="whitespace-nowrap px-8 py-4 bg-white/10 dark:bg-gray-900/40 backdrop-blur-md border border-white/20 dark:border-white/10 rounded-2xl font-bold text-sm hover:bg-white hover:text-bltRed transition-all">
               Open Discussions
            </a>
        </div>
    </div>
</main>