Skip to content

Commit 41be388

Browse files
VincamineVincamine
authored
Merge pull request #6797 from Vincamine/w-new-page
New customer-facing Academy page
2 parents 1f50779 + f720c4f commit 41be388

7 files changed

Lines changed: 760 additions & 19 deletions

File tree

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

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

0 commit comments

Comments
 (0)