Skip to content

Commit 641a17c

Browse files
VincamineVincamine
committed
academy page
Signed-off-by: Wyllie Fang <wylliefang@gmail.com>
1 parent 1da1236 commit 641a17c

8 files changed

Lines changed: 749 additions & 1 deletion

File tree

‎src/components/Academy/Enterprise-Section/EnterpriseSection.js‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
const EnterpriseSectionWrapper = styled.section`
5+
font-family: "Qanelas Soft", sans-serif;
6+
7+
&.audience-section.enterprise-section {
8+
padding: 4rem 0;
9+
position: relative;
10+
overflow: hidden;
11+
12+
&::before {
13+
content: '';
14+
position: absolute;
15+
top: -50%;
16+
left: -50%;
17+
width: 200%;
18+
height: 200%;
19+
background: radial-gradient(circle, rgba(0, 179, 159, 0.03) 0%, transparent 70%);
20+
animation: float 20s ease-in-out infinite;
21+
pointer-events: none;
22+
}
23+
24+
&::after {
25+
content: '';
26+
position: absolute;
27+
top: 20%;
28+
right: 10%;
29+
width: 100px;
30+
height: 100px;
31+
background: linear-gradient(45deg, rgba(0, 211, 169, 0.1), rgba(0, 179, 159, 0.05));
32+
border-radius: 50%;
33+
animation: pulse 3s ease-in-out infinite;
34+
pointer-events: none;
35+
}
36+
37+
@keyframes float {
38+
0%, 100% { transform: translateY(0px) rotate(0deg); }
39+
33% { transform: translateY(-20px) rotate(1deg); }
40+
66% { transform: translateY(10px) rotate(-1deg); }
41+
}
42+
43+
@keyframes pulse {
44+
0%, 100% { opacity: 0.3; transform: scale(1); }
45+
50% { opacity: 0.6; transform: scale(1.1); }
46+
}
47+
48+
.audience-content {
49+
max-width: 1200px;
50+
margin: 0 auto;
51+
padding: 0 2rem;
52+
display: grid;
53+
grid-template-columns: 1fr 1fr;
54+
gap: 4rem;
55+
align-items: center;
56+
}
57+
58+
.demo-card {
59+
background: ${props => props.theme.grey212121ToWhite};
60+
border-radius: 16px;
61+
padding: 2rem;
62+
box-shadow: 0 8px 32px ${props => props.theme.blackFourToWhiteFour};
63+
border: 1px solid rgba(0, 179, 159, 0.2);
64+
transition: all 0.4s ease;
65+
animation: slideInLeft 0.8s ease-out;
66+
67+
&:hover {
68+
transform: translateY(-5px) scale(1.02);
69+
box-shadow: 0 15px 40px rgba(0, 179, 159, 0.15);
70+
border-color: rgba(0, 179, 159, 0.3);
71+
}
72+
73+
@keyframes slideInLeft {
74+
from { opacity: 0; transform: translateX(-30px); }
75+
to { opacity: 1; transform: translateX(0); }
76+
}
77+
78+
.demo-header {
79+
font-size: 1.2rem;
80+
font-weight: 600;
81+
margin-bottom: 1.5rem;
82+
padding-bottom: 1rem;
83+
border-bottom: 2px solid #f0f0f0;
84+
}
85+
86+
.demo-content-alt {
87+
.progress-item {
88+
display: flex;
89+
justify-content: space-between;
90+
margin-bottom: 0.5rem;
91+
92+
.progress-value {
93+
font-weight: bold;
94+
95+
&.primary {
96+
color: #00b39f;
97+
}
98+
99+
&.accent {
100+
color: #00d3a9;
101+
}
102+
}
103+
}
104+
105+
.stats-grid {
106+
display: grid;
107+
grid-template-columns: 1fr 1fr;
108+
gap: 1rem;
109+
margin-top: 1.5rem;
110+
111+
.stat-item {
112+
text-align: center;
113+
padding: 1rem;
114+
border-radius: 8px;
115+
border: 1px solid rgba(0, 179, 159, 0.1);
116+
117+
.stat-number {
118+
display: block;
119+
font-size: 1.5rem;
120+
font-weight: 700;
121+
color: #00b39f;
122+
margin-bottom: 0.25rem;
123+
}
124+
125+
.stat-label {
126+
display: block;
127+
font-size: 0.8rem;
128+
text-transform: uppercase;
129+
letter-spacing: 0.5px;
130+
}
131+
}
132+
}
133+
}
134+
}
135+
136+
.audience-text {
137+
animation: slideInRight 0.8s ease-out 0.2s both;
138+
139+
@keyframes slideInRight {
140+
from { opacity: 0; transform: translateX(30px); }
141+
to { opacity: 1; transform: translateX(0); }
142+
}
143+
144+
h2 {
145+
font-size: 2.5rem;
146+
font-weight: 600;
147+
margin-bottom: 1.5rem;
148+
animation: fadeInUp 1s ease-out 0.4s both;
149+
150+
@keyframes fadeInUp {
151+
from { opacity: 0; transform: translateY(20px); }
152+
to { opacity: 1; transform: translateY(0); }
153+
}
154+
155+
.highlight {
156+
background: linear-gradient(135deg, #00b39f, #00d3a9);
157+
-webkit-background-clip: text;
158+
-webkit-text-fill-color: transparent;
159+
background-clip: text;
160+
}
161+
}
162+
163+
p {
164+
font-size: 1.1rem;
165+
line-height: 1.6;
166+
margin-bottom: 2rem;
167+
}
168+
169+
.audience-features {
170+
list-style: none;
171+
padding: 0;
172+
margin-bottom: 2rem;
173+
174+
li {
175+
padding: 0.5rem 0;
176+
padding-left: 1.5rem;
177+
position: relative;
178+
179+
&:before {
180+
content: "✓";
181+
position: absolute;
182+
left: 0;
183+
font-weight: bold;
184+
}
185+
}
186+
}
187+
188+
.btn {
189+
display: inline-block;
190+
padding: 0.75rem 1.5rem;
191+
border-radius: 6px;
192+
text-decoration: none;
193+
font-weight: 500;
194+
transition: all 0.3s ease;
195+
196+
&.btn-primary {
197+
background: linear-gradient(135deg, #00b39f, #00d3a9);
198+
color: white;
199+
200+
&:hover {
201+
transform: translateY(-2px);
202+
box-shadow: 0 4px 12px rgba(0, 179, 159, 0.3);
203+
}
204+
}
205+
}
206+
}
207+
208+
@media (max-width: 768px) {
209+
.audience-content {
210+
grid-template-columns: 1fr;
211+
gap: 2rem;
212+
}
213+
214+
.demo-card {
215+
order: 2;
216+
}
217+
218+
.audience-text {
219+
order: 1;
220+
text-align: center;
221+
222+
h2 {
223+
font-size: 2rem;
224+
}
225+
}
226+
}
227+
}
228+
`;
229+
230+
const EnterpriseSection = () => {
231+
return (
232+
<EnterpriseSectionWrapper className="audience-section enterprise-section fade-in">
233+
<div className="audience-content">
234+
<div className="demo-card">
235+
<div className="demo-header">With Layer5 Academy:</div>
236+
<div className="demo-content-alt">
237+
<div style={{ marginBottom: "1.5rem" }}>
238+
<div className="progress-item">
239+
<span className="progress-label">🚀 Platform Reliability</span>
240+
<span className="progress-value primary">99.9%</span>
241+
</div>
242+
<div className="progress-item">
243+
<span className="progress-label">⚡ Deployment Velocity</span>
244+
<span className="progress-value accent">3x Faster</span>
245+
</div>
246+
<div className="progress-item">
247+
<span className="progress-label">💰 Infrastructure Cost</span>
248+
<span className="progress-value primary">-35%</span>
249+
</div>
250+
<div className="progress-item">
251+
<span className="progress-label">🛡️ Security Compliance</span>
252+
<span className="progress-value primary">100%</span>
253+
</div>
254+
</div>
255+
<div className="stats-grid">
256+
<div className="stat-item">
257+
<span className="stat-number">60%</span>
258+
<span className="stat-label">Reduced Time-to-Market</span>
259+
</div>
260+
<div className="stat-item">
261+
<span className="stat-number">90%</span>
262+
<span className="stat-label">Developer Productivity</span>
263+
</div>
264+
</div>
265+
</div>
266+
</div>
267+
<div className="audience-text">
268+
<h2>For <span className="highlight">Enterprise</span> Teams</h2>
269+
<p>Accelerate your enterprise platform transformation with structured cloud native training, customizable contents, and enterprise-grade analytics to maximize ROI and reduce risk.</p>
270+
<ul className="audience-features">
271+
<li>Three comprehensive <a href="#" target="_blank" rel="noopener noreferrer">content library</a>: Learning Paths, Challenges, and Certifications for all skill levels and training scenarios</li>
272+
<li>Enterprise <a href="https://badges.layer5.io/" target="_blank" rel="noopener noreferrer">badge system</a> to showcase team achievements and drive motivation across your organization</li>
273+
<li>Advanced <a href="https://docs.layer5.io/cloud/academy/creating-content/instructor-console-guide/" target="_blank" rel="noopener noreferrer">instructor dashboard</a> with real-time progress tracking, skill assessment, and detailed analytics</li>
274+
<li>Flexible <a href="#" target="_blank" rel="noopener noreferrer">invitation</a> system: Host public challenges, onboard new partners, and accelerate engineer hiring with structured assessments</li>
275+
</ul>
276+
<a href="#" className="btn btn-primary">Schedule Enterprise Demo</a>
277+
</div>
278+
</div>
279+
</EnterpriseSectionWrapper>
280+
);
281+
};
282+
283+
export default EnterpriseSection;

‎src/components/Academy/Features-Section/FecturesSection.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)