BLT-University/about.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
---
layout: default
title: About
permalink: /about/
---
<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">
    <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">
            About <span class="text-transparent bg-clip-text bg-gradient-to-r from-bltRed to-red-600">BLT University</span>
        </h1>
        <p class="text-sm md:text-base text-gray-500 dark:text-gray-400 max-w-xl mx-auto font-medium leading-relaxed">
            Empowering the next generation of security professionals through community-driven, open-source education.
        </p>
    </div>
</section>

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

    <section class="prose prose-sm md:prose-base dark:prose-invert max-w-none text-gray-600 dark:text-gray-400">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
            <span aria-hidden="true" class="w-10 h-10 rounded-xl bg-bltRedLight dark:bg-red-900/20 text-bltRed flex items-center justify-center shadow-sm">
                <i class="ph-fill ph-target text-xl"></i>
            </span>
            Our Mission
        </h2>
        <p class="mb-4 leading-relaxed">BLT University is a revolutionary open-source educational platform dedicated to making cybersecurity education accessible to everyone. We believe that knowledge should be free, collaborative, and community-driven.</p>
        <p class="leading-relaxed font-medium text-gray-700 dark:text-gray-300">By leveraging GitHub's powerful collaboration features, we've created a unique learning environment where students learn through doing and instructors teach through transparent pull requests.</p>
    </section>

    <section>
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-10 text-center">How It Works</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white dark:bg-gray-800 p-8 rounded-[2rem] shadow-soft border border-gray-100 dark:border-gray-700 group hover:border-bltRed/20 transition-all duration-300">
                    <div aria-hidden="true" class="w-12 h-12 bg-red-50 dark:bg-gray-900 text-bltRed rounded-xl flex items-center justify-center mb-6 group-hover:bg-bltRed group-hover:text-white transition-colors">
                    <i class="ph-bold ph-git-branch text-xl"></i>
                </div>
                <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-2">GitHub-Powered</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">All courses are hosted on GitHub Pages, making them version-controlled and transparent.</p>
            </div>

            <div class="bg-white dark:bg-gray-800 p-8 rounded-[2rem] shadow-soft border border-gray-100 dark:border-gray-700 group hover:border-bltRed/20 transition-all duration-300">
                    <div aria-hidden="true" class="w-12 h-12 bg-red-50 dark:bg-gray-900 text-bltRed rounded-xl flex items-center justify-center mb-6 group-hover:bg-bltRed group-hover:text-white transition-colors">
                    <i class="ph-bold ph-users-three text-xl"></i>
                </div>
                <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-2">Collaborative Teaching</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Instructors update curriculum via Pull Requests, enabling community peer review.</p>
            </div>

            <div class="bg-white dark:bg-gray-800 p-8 rounded-[2rem] shadow-soft border border-gray-100 dark:border-gray-700 group hover:border-bltRed/20 transition-all duration-300">
                    <div aria-hidden="true" class="w-12 h-12 bg-red-50 dark:bg-gray-900 text-bltRed rounded-xl flex items-center justify-center mb-6 group-hover:bg-bltRed group-hover:text-white transition-colors">
                    <i class="ph-bold ph-cpu text-xl"></i>
                </div>
                <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-2">Automated Workflows</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">GitHub Actions handle enrollment and certificate generation automatically.</p>
            </div>

            <div class="bg-white dark:bg-gray-800 p-8 rounded-[2rem] shadow-soft border border-gray-100 dark:border-gray-700 group hover:border-bltRed/20 transition-all duration-300">
                    <div aria-hidden="true" class="w-12 h-12 bg-red-50 dark:bg-gray-900 text-bltRed rounded-xl flex items-center justify-center mb-6 group-hover:bg-bltRed group-hover:text-white transition-colors">
                    <i class="ph-bold ph-globe text-xl"></i>
                </div>
                <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-2">Community-Driven</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Practitioners and students collectively build and maintain the best curriculum possible.</p>
            </div>
        </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">
        <div aria-hidden="true" class="absolute -right-10 -bottom-10 opacity-10 group-hover:scale-110 transition-transform pointer-events-none">
            <i class="ph-fill ph-seal-check text-[15rem]"></i>
        </div>

        <h2 class="text-2xl font-bold mb-10 relative z-10">Our Core Values</h2>
        <ul class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
            <li class="flex items-start gap-4">
                <i aria-hidden="true" class="ph-bold ph-check-circle text-bltRed text-xl mt-1"></i>
                <div><strong class="text-white block text-base">Open Source</strong> Content is open and free to modify under AGPL-3.0.</div>
            </li>
            <li class="flex items-start gap-4">
                <i aria-hidden="true" class="ph-bold ph-check-circle text-bltRed text-xl mt-1"></i>
                <div><strong class="text-white block text-base">Practical Learning</strong> Focused on real-world, hands-on security skills.</div>
            </li>
        </ul>
    </section>

    <section class="text-center pt-10">
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Ready to contribute?</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-10">BLT University thrives because of contributors like you.</p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            <a href="{{ '/courses/' | relative_url }}" class="px-8 py-3.5 bg-bltRed text-white font-bold rounded-2xl hover:bg-bltRedHover hover:-translate-y-0.5 transition-all shadow-lg shadow-red-100 dark:shadow-none">Take a Course</a>
            <a href="{{ '/contributing/' | relative_url }}" class="px-8 py-3.5 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 hover:-translate-y-0.5 transition-all">Become an Instructor</a>
        </div>
    </section>

</main>