-
Notifications
You must be signed in to change notification settings - Fork 12
Expand file tree
/
Copy pathindex.html
More file actions
241 lines (221 loc) · 18.1 KB
/
index.html
File metadata and controls
241 lines (221 loc) · 18.1 KB
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
---
layout: default
title: Home
---
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<section class="relative pt-12 pb-28 overflow-hidden bg-gradient-to-br from-white via-red-50 to-white dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
<div class="absolute -top-40 -right-40 w-[500px] h-[500px] bg-red-500 opacity-10 rounded-full blur-[120px] -z-10"></div>
<div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] bg-red-600 opacity-10 rounded-full blur-[120px] -z-10"></div>
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="space-y-8 max-w-xl relative z-10">
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-bltRedLight dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 text-bltRed text-xs font-bold tracking-wide uppercase">
<span class="w-2 h-2 rounded-full bg-bltRed animate-pulse"></span>
Open Source cybersecurity
</div>
<h1 class="font-display text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 dark:text-white tracking-tight leading-[1.05]">
Your open source <br/>gateway to <span class="text-transparent bg-clip-text bg-gradient-to-r from-bltRed to-red-500">cybersecurity</span> excellence
</h1>
<p class="text-base md:text-lg text-gray-500 dark:text-gray-400 leading-relaxed max-w-md">
Built by the OWASP community. Learn cybersecurity through GitHub-powered courses, collaborate, and advance your skills with industry experts.
</p>
<div class="flex flex-wrap gap-4 pt-2">
<a href="{{ '/courses/' | relative_url }}" class="px-7 py-3.5 bg-bltRed text-white font-semibold rounded-xl shadow-[0_8px_20px_rgba(220,38,38,0.25)] hover:bg-bltRedHover hover:-translate-y-0.5 transition-all duration-200">
Explore Courses
</a>
<a href="{{ '/enroll/' | relative_url }}" class="px-7 py-3.5 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-semibold border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-all">
Enroll Now
</a>
</div>
</div>
<div class="flex justify-center lg:justify-end relative">
<div class="absolute inset-0 bg-red-100 dark:bg-red-900 blur-[80px] opacity-30 dark:opacity-10 rounded-full"></div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-[1.5rem] shadow-float border border-gray-100/80 dark:border-gray-700 max-w-sm w-full transform hover:-translate-y-2 transition-transform duration-500 relative z-10">
<div class="rounded-2xl overflow-hidden mb-5 border border-gray-100 dark:border-gray-700 relative group">
<div class="absolute inset-0 bg-gray-900/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10">
<div class="w-12 h-12 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center shadow-lg text-bltRed">
<i class="ph-fill ph-play text-2xl ml-1"></i>
</div>
</div>
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80" alt="Cybersecurity Code" class="w-full object-cover h-52 group-hover:scale-105 transition-transform duration-700">
</div>
<h3 class="font-bold text-xl dark:text-white text-gray-900 mb-5 px-2 font-display">Cybersecurity Course Demo</h3>
<div class="flex items-center gap-3 px-2 pb-2">
<div class="w-10 h-10 rounded-full bg-bltRedLight dark:bg-red-900/30 flex items-center justify-center border-2 border-white dark:border-gray-700 shadow-sm shrink-0">
<i class="ph-fill ph-user-focus text-bltRed text-lg"></i>
</div>
<div>
<p class="text-sm font-bold text-gray-900 dark:text-gray-100 leading-tight">Jane Doe</p>
<p class="text-[10px] text-gray-500 dark:text-gray-400 font-medium uppercase tracking-wide">Lead Instructor</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="relative z-30 -mt-10 px-6">
<div class="max-w-6xl mx-auto bg-white/70 dark:bg-gray-800/80 border border-white/40 dark:border-gray-700 backdrop-blur-xl rounded-[2.5rem] shadow-float p-8 md:p-10">
<div class="grid grid-cols-2 md:grid-cols-4 gap-y-8 md:gap-y-0 divide-gray-100 dark:divide-gray-700 md:divide-x">
<div class="text-center px-4 group">
<div class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white group-hover:text-bltRed transition-colors">{{ site.courses.size | default: '12' }}+</div>
<div class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Courses Live</div>
</div>
<div class="text-center px-4 group">
<div class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white group-hover:text-bltRed transition-colors">{{ site.instructors.size | default: '8' }}+</div>
<div class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Practitioners</div>
</div>
<div class="text-center px-4 group">
<div class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white group-hover:text-bltRed transition-colors">{{ site.categories.size | default: '5' }}</div>
<div class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Domains</div>
</div>
<div class="text-center px-4 group">
<div class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white group-hover:text-bltRed transition-colors">100%</div>
<div class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Open Source</div>
</div>
</div>
</div>
</section>
<section class="py-24 bg-[#fafafa] dark:bg-[#111827]">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 font-display">Why Choose BLT University?</h2>
<p class="text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">We bridge the gap between open-source contribution and professional cybersecurity education.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-soft border border-gray-100 dark:border-gray-700 hover:border-red-100 dark:hover:border-red-900 hover:-translate-y-1 transition-all group">
<div class="w-12 h-12 bg-bltRedLight dark:bg-red-900/30 rounded-2xl flex items-center justify-center text-bltRed mb-6 group-hover:bg-bltRed group-hover:text-white transition-all">
<i class="ph-bold ph-lock-open text-2xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3">Open Source Education</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">All courses are free and open-source. Learn, contribute, and help others grow in the open.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-soft border border-gray-100 dark:border-gray-700 hover:border-red-100 dark:hover:border-red-900 hover:-translate-y-1 transition-all group">
<div class="w-12 h-12 bg-bltRedLight dark:bg-red-900/30 rounded-2xl flex items-center justify-center text-bltRed mb-6 group-hover:bg-bltRed group-hover:text-white transition-all">
<i class="ph-bold ph-shield-check text-2xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3">Cybersecurity Focus</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">Specialized curriculum covering ethical hacking, info-sec, and practitioner-led labs.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-soft border border-gray-100 dark:border-gray-700 hover:border-red-100 dark:hover:border-red-900 hover:-translate-y-1 transition-all group">
<div class="w-12 h-12 bg-bltRedLight dark:bg-red-900/30 rounded-2xl flex items-center justify-center text-bltRed mb-6 group-hover:bg-bltRed group-hover:text-white transition-all">
<i class="ph-bold ph-github-logo text-2xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3">GitHub-Powered</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">Learn through real-world pull requests and issues. Master Git while you master security.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-soft border border-gray-100 dark:border-gray-700 hover:border-red-100 dark:hover:border-red-900 hover:-translate-y-1 transition-all group">
<div class="w-12 h-12 bg-bltRedLight dark:bg-red-900/30 rounded-2xl flex items-center justify-center text-bltRed mb-6 group-hover:bg-bltRed group-hover:text-white transition-all">
<i class="ph-bold ph-books text-2xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3">Rich Content</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">Videos, interactive labs, and hands-on projects designed for practical skill mastery.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-soft border border-gray-100 dark:border-gray-700 hover:border-red-100 dark:hover:border-red-900 hover:-translate-y-1 transition-all group">
<div class="w-12 h-12 bg-bltRedLight dark:bg-red-900/30 rounded-2xl flex items-center justify-center text-bltRed mb-6 group-hover:bg-bltRed group-hover:text-white transition-all">
<i class="ph-bold ph-users-three text-2xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3">Expert Instructors</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">Learn from experienced OWASP contributors and industry leaders in security.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-soft border border-gray-100 dark:border-gray-700 hover:border-red-100 dark:hover:border-red-900 hover:-translate-y-1 transition-all group">
<div class="w-12 h-12 bg-bltRedLight dark:bg-red-900/30 rounded-2xl flex items-center justify-center text-bltRed mb-6 group-hover:bg-bltRed group-hover:text-white transition-all">
<i class="ph-bold ph-globe text-2xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3">Global Community</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">Connect with students and professionals from around the world in our discussions.</p>
</div>
</div>
</div>
</section>
{% if site.courses.size > 0 %}
<section class="py-24 bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-12">
<div>
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2 font-display">Featured Courses</h2>
<p class="text-gray-500 dark:text-gray-400 text-sm">Dive into our most popular security modules.</p>
</div>
<a href="{{ '/courses/' | relative_url }}" class="hidden md:flex items-center gap-2 text-xs font-bold text-bltRed uppercase tracking-widest hover:text-bltRedHover transition-all">
View all courses <i class="ph-bold ph-arrow-right"></i>
</a>
</div>
{% assign featured = site.courses | where: "featured", true %}
{% if featured.size > 0 %}
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
{% for course in featured limit: 3 %}
<a href="{{ course.url | relative_url }}" class="group bg-white dark:bg-gray-800 rounded-3xl shadow-soft hover:shadow-float border border-gray-100 dark:border-gray-700 overflow-hidden flex flex-col transition-all duration-300 hover:-translate-y-1">
<div class="h-48 bg-gray-900 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent z-10"></div>
<img src="{{ course.image | default: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=600&q=80' }}" alt="Course Cover" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-90">
<div class="absolute bottom-4 left-4 z-20 flex gap-2">
<span class="px-2.5 py-1 bg-white/20 dark:bg-gray-900/40 backdrop-blur-md rounded-md text-white text-[10px] font-bold uppercase tracking-wider">{{ course.level | default: 'Beginner' }}</span>
</div>
</div>
<div class="p-6 flex-1 flex flex-col">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 leading-snug group-hover:text-bltRed transition-colors">
{{ course.title }}
</h3>
<p class="text-gray-500 dark:text-gray-400 text-xs mb-6 flex-1 leading-relaxed">
{{ course.description | truncate: 120 }}
</p>
<div class="flex items-center text-xs font-bold text-gray-900 dark:text-gray-100 uppercase tracking-widest">
Start Learning <i class="ph-bold ph-caret-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div>
</div>
</a>
{% endfor %}
</div>
{% else %}
<div class="py-20 text-center bg-gray-50 rounded-[2rem] border-2 border-dashed border-gray-100">
<div aria-hidden="true" class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-gray-300 mx-auto mb-6 shadow-sm">
<i class="ph-bold ph-monitor-play text-3xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">No featured courses yet</h3>
<p class="text-gray-500 text-sm max-w-xs mx-auto mb-8">We're currently updating our curriculum. Check out our full catalog to see all available modules.</p>
<a href="{{ '/courses/' | relative_url }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-gray-700 font-bold border border-gray-200 rounded-xl hover:bg-gray-50 transition-all text-sm">
Browse Catalog <i class="ph-bold ph-arrow-right"></i>
</a>
</div>
{% endif %}
</div>
</section>
{% endif %}
<section class="py-24 bg-[#fafafa] dark:bg-[#111827]">
<div class="max-w-5xl mx-auto px-6">
<div class="bg-bltDark dark:bg-gray-800 p-8 md:p-12 rounded-[3rem] text-white shadow-2xl relative overflow-hidden group">
<div class="absolute -right-12 -bottom-12 opacity-10 group-hover:scale-110 transition-transform pointer-events-none text-bltRed">
<i class="ph-fill ph-lightbulb text-[12rem]"></i>
</div>
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-10">
<div class="max-w-xl text-center md:text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 dark:bg-gray-900/50 text-bltRed text-[10px] font-bold uppercase tracking-widest mb-4">
<i class="ph-bold ph-chats-circle"></i> Community Driven
</div>
<h2 class="text-2xl md:text-3xl font-bold mb-4 font-display">Don't See What You're Looking For?</h2>
<p class="text-gray-400 text-sm leading-relaxed">
Tell us what you want to learn! Your feedback helps shape our curriculum and ensures we're creating courses that matter to the community.
</p>
</div>
<a href="{{ '/request/' | relative_url }}" class="whitespace-nowrap px-8 py-4 bg-bltRed text-white font-bold rounded-2xl shadow-xl hover:bg-bltRedHover hover:-translate-y-1 transition-all">
Request a Course
</a>
</div>
</div>
</div>
</section>
<section class="py-24 bg-white dark:bg-gray-900 text-center">
<div class="max-w-4xl mx-auto px-6">
<div class="w-14 h-14 bg-bltRedLight dark:bg-red-900/30 rounded-2xl flex items-center justify-center text-bltRed mx-auto mb-6 shadow-soft">
<i class="ph-fill ph-rocket-launch text-2xl"></i>
</div>
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4 font-display tracking-tight leading-tight">Ready to Start Your Security Journey?</h2>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-10 max-w-lg mx-auto">Join our global community of learners and security professionals. 100% open-source education is just a click away.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="{{ '/enroll/' | relative_url }}" 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-0.5 transition-all text-sm">
Get Started Now
</a>
<a href="{{ '/about/' | relative_url }}" class="px-10 py-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-bold border border-gray-100 dark:border-gray-700 rounded-2xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all text-sm">
How it Works
</a>
</div>
</div>
</section>