Skip to content

Commit 978ee2f

Browse files
gitatractivogitatractivo
authored
[OCM Incubation] Update OCM adopters on the website #848 (#458)
Signed-off-by: Gitanshu Talwar <[email protected]>
1 parent 845764c commit 978ee2f

File tree

2 files changed

+296
-21
lines changed

2 files changed

+296
-21
lines changed

‎assets/scss/_styles_project.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,31 @@
1515
&:hover {
1616
color: #ffffff !important;
1717
}
18+
}
19+
.partner-card,
20+
.ecosystem-card {
21+
border-radius: 8px;
22+
height: 80px;
23+
transition: all 0.3s ease;
24+
border: 1px solid rgba(0, 0, 0, 0.125);
25+
}
26+
27+
.partner-card {
28+
background-color: #ffffff;
29+
}
30+
31+
.ecosystem-card {
32+
background-color: #f8f9fa;
33+
}
34+
35+
.partner-card:hover,
36+
.ecosystem-card:hover {
37+
transform: translateY(-5px);
38+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
39+
}
40+
41+
.card-title {
42+
margin: 0;
43+
font-size: 0.95rem;
44+
font-weight: 500;
1845
}

‎content/en/_index.md

Lines changed: 269 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ title: Open Cluster Management
44

55
{{< blocks/cover title="Open Cluster Management" image_anchor="right" height="max" color="primary" >}}
66
<a class="btn btn-lg btn-secondary me-3 mb-4" href="/docs/">
7-
Get Started
7+
Get Started
88
</a>
99
<a class="btn btn-lg btn-secondary me-3 mb-4" href="https://kubernetes.slack.com/channels/open-cluster-mgmt">
10-
Join Our Slack
10+
Join Our Slack
1111
</a>
12+
1213
<p class="lead mb-6"></p> <!-- To create space between the buttons and the text below -->
1314
<p class="lead mb-6">
1415
Make working with many Kubernetes clusters super easy regardless of where they are deployed
@@ -22,36 +23,283 @@ title: Open Cluster Management
2223
{{< /blocks/cover >}}
2324

2425
{{% blocks/section color="secondary" type="row" title="Features Overview" %}}
25-
{{% blocks/feature icon="fa-server" title="Cluster Inventory" url="docs/concepts/cluster-inventory/" %}}
26-
Registration of multiple clusters to a hub cluster to place them for management.
27-
{{% /blocks/feature %}}
26+
{{% blocks/feature icon="fa-server" title="Cluster Inventory" url="docs/concepts/cluster-inventory/" %}}
27+
Registration of multiple clusters to a hub cluster to place them for management.
28+
{{% /blocks/feature %}}
29+
30+
{{% blocks/feature icon="fa-tasks" title="Work Distribution" url="docs/concepts/work-distribution/" %}}
31+
The work API that enables resources to be applied to managed clusters from a hub cluster.
32+
{{% /blocks/feature %}}
33+
34+
{{% blocks/feature icon="fa-random" title="Content Placement" url="docs/concepts/content-placement/" %}}
35+
Dynamic placement of content and behavior across multiple clusters.
36+
{{% /blocks/feature %}}
2837

29-
{{% blocks/feature icon="fa-tasks" title="Work Distribution" url="docs/concepts/work-distribution/" %}}
30-
The work API that enables resources to be applied to managed clusters from a hub cluster.
31-
{{% /blocks/feature %}}
38+
{{% blocks/feature icon="fa-cloud" title="Vendor Neutral APIs" %}}
39+
Avoid vendor lock-in by using APIs that are not tied to any cloud providers or proprietary platforms.
40+
{{% /blocks/feature %}}
3241

33-
{{% blocks/feature icon="fa-random" title="Content Placement" url="docs/concepts/content-placement/" %}}
34-
Dynamic placement of content and behavior across multiple clusters.
35-
{{% /blocks/feature %}}
42+
{{% blocks/feature icon="fa-rocket" title="Launch Apps Everywhere" url="docs/getting-started/integration/app-lifecycle/" %}}
43+
Use application lifecycle to create your application and deliver hybrid apps across one or more clusters, while you keep up with changes.
44+
{{% /blocks/feature %}}
3645

37-
{{% blocks/feature icon="fa-cloud" title="Vendor Neutral APIs" %}}
38-
Avoid vendor lock-in by using APIs that are not tied to any cloud providers or proprietary platforms.
39-
{{% /blocks/feature %}}
46+
{{% blocks/feature icon="fa-cog" title="Configure, Secure, and Manage Your Resources" url="docs/getting-started/integration/policy-controllers" %}}
47+
Policy and configuration management uses labels to help you deploy policies and control consistently across your resources. Keep your resources secure by using access control and manage for your quota and cost.
48+
{{% /blocks/feature %}}
49+
{{% /blocks/section %}}
50+
51+
{{% blocks/section color="secondary" %}}
4052

41-
{{% blocks/feature icon="fa-rocket" title="Launch Apps Everywhere" url="docs/getting-started/integration/app-lifecycle/" %}}
42-
Use application lifecycle to create your application and deliver hybrid apps across one or more clusters, while you keep up with changes.
43-
{{% /blocks/feature %}}
53+
<div class="col-12">
54+
<h2 class="text-center">End Users</h2>
55+
<p class="text-center">
56+
Open Cluster Management is being used by numerous companies, both large and small.
57+
</p>
58+
59+
<div class="partners-grid">
60+
<div class="row justify-content-center">
61+
<div class="col-lg-8 col-md-10">
62+
<div class="row g-4">
63+
<div class="col-md-4 col-sm-6">
64+
<a href="https://www.alibabacloud.com/" target="_blank" class="text-decoration-none">
65+
<div class="card h-100 partner-card">
66+
<div class="card-body d-flex align-items-center justify-content-center">
67+
<h5 class="card-title">Alibaba Cloud</h5>
68+
</div>
69+
</div>
70+
</a>
71+
</div>
72+
<div class="col-md-4 col-sm-6">
73+
<a href="https://www.antgroup.com/" target="_blank" class="text-decoration-none">
74+
<div class="card h-100 partner-card">
75+
<div class="card-body d-flex align-items-center justify-content-center">
76+
<h5 class="card-title">Ant Group</h5>
77+
</div>
78+
</div>
79+
</a>
80+
</div>
81+
<div class="col-md-4 col-sm-6">
82+
<a href="https://appscode.com/" target="_blank" class="text-decoration-none">
83+
<div class="card h-100 partner-card">
84+
<div class="card-body d-flex align-items-center justify-content-center">
85+
<h5 class="card-title">AppsCode Inc.</h5>
86+
</div>
87+
</div>
88+
</a>
89+
</div>
90+
<div class="col-md-4 col-sm-6">
91+
<a href="https://github.com/RamenDR/" target="_blank" class="text-decoration-none">
92+
<div class="card h-100 partner-card">
93+
<div class="card-body d-flex align-items-center justify-content-center">
94+
<h5 class="card-title">RamenDR</h5>
95+
</div>
96+
</div>
97+
</a>
98+
</div>
99+
<div class="col-md-4 col-sm-6">
100+
<a href="https://www.redhat.com/" target="_blank" class="text-decoration-none">
101+
<div class="card h-100 partner-card">
102+
<div class="card-body d-flex align-items-center justify-content-center">
103+
<h5 class="card-title">Red Hat</h5>
104+
</div>
105+
</div>
106+
</a>
107+
</div>
108+
<div class="col-md-4 col-sm-6">
109+
<a href="https://www.xiaohongshu.com/" target="_blank" class="text-decoration-none">
110+
<div class="card h-100 partner-card">
111+
<div class="card-body d-flex align-items-center justify-content-center">
112+
<h5 class="card-title">Xiao Hong Shu</h5>
113+
</div>
114+
</div>
115+
</a>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
44122

45-
{{% blocks/feature icon="fa-cog" title="Configure, Secure, and Manage Your Resources" url="docs/getting-started/integration/policy-controllers" %}}
46-
Policy and configuration management uses labels to help you deploy policies and control consistently across your resources. Keep your resources secure by using access control and manage for your quota and cost.
47-
{{% /blocks/feature %}}
48123
{{% /blocks/section %}}
49124

125+
{{% blocks/section color="secondary" %}}
126+
127+
<div class="col-12">
128+
<h2 class="text-center">Ecosystem</h2>
129+
<p class="text-center">
130+
Open Cluster Management has integrations available with a number of open-source projects.
131+
</p>
132+
133+
<div class="ecosystem-grid">
134+
<div class="row justify-content-center">
135+
<div class="col-lg-10 col-md-12">
136+
<div class="row g-4">
137+
<div class="col-lg-3 col-md-4 col-sm-6">
138+
<a href="https://argo-cd.readthedocs.io/" target="_blank" class="text-decoration-none">
139+
<div class="card h-100 ecosystem-card">
140+
<div class="card-body d-flex align-items-center justify-content-center">
141+
<h5 class="card-title">Argo CD</h5>
142+
</div>
143+
</div>
144+
</a>
145+
</div>
146+
<div class="col-lg-3 col-md-4 col-sm-6">
147+
<a href="https://argocd-agent.readthedocs.io/" target="_blank" class="text-decoration-none">
148+
<div class="card h-100 ecosystem-card">
149+
<div class="card-body d-flex align-items-center justify-content-center">
150+
<h5 class="card-title">Argo CD Agent</h5>
151+
</div>
152+
</div>
153+
</a>
154+
</div>
155+
<div class="col-lg-3 col-md-4 col-sm-6">
156+
<a href="https://argoproj.github.io/workflows/" target="_blank" class="text-decoration-none">
157+
<div class="card h-100 ecosystem-card">
158+
<div class="card-body d-flex align-items-center justify-content-center">
159+
<h5 class="card-title">Argo Workflows</h5>
160+
</div>
161+
</div>
162+
</a>
163+
</div>
164+
<div class="col-lg-3 col-md-4 col-sm-6">
165+
<a href="https://cluster-api.sigs.k8s.io/" target="_blank" class="text-decoration-none">
166+
<div class="card h-100 ecosystem-card">
167+
<div class="card-body d-flex align-items-center justify-content-center">
168+
<h5 class="card-title">Cluster API</h5>
169+
</div>
170+
</div>
171+
</a>
172+
</div>
173+
<div class="col-lg-3 col-md-4 col-sm-6">
174+
<a href="https://clusternet.io/" target="_blank" class="text-decoration-none">
175+
<div class="card h-100 ecosystem-card">
176+
<div class="card-body d-flex align-items-center justify-content-center">
177+
<h5 class="card-title">Clusternet</h5>
178+
</div>
179+
</div>
180+
</a>
181+
</div>
182+
<div class="col-lg-3 col-md-4 col-sm-6">
183+
<a href="https://fluid-cloudnative.github.io/" target="_blank" class="text-decoration-none">
184+
<div class="card h-100 ecosystem-card">
185+
<div class="card-body d-flex align-items-center justify-content-center">
186+
<h5 class="card-title">Fluid</h5>
187+
</div>
188+
</div>
189+
</a>
190+
</div>
191+
<div class="col-lg-3 col-md-4 col-sm-6">
192+
<a href="https://helm.sh/" target="_blank" class="text-decoration-none">
193+
<div class="card h-100 ecosystem-card">
194+
<div class="card-body d-flex align-items-center justify-content-center">
195+
<h5 class="card-title">Helm</h5>
196+
</div>
197+
</div>
198+
</a>
199+
</div>
200+
<div class="col-lg-3 col-md-4 col-sm-6">
201+
<a href="https://www.icos-project.eu/docs/" target="_blank" class="text-decoration-none">
202+
<div class="card h-100 ecosystem-card">
203+
<div class="card-body d-flex align-items-center justify-content-center">
204+
<h5 class="card-title">ICOS Meta OS</h5>
205+
</div>
206+
</div>
207+
</a>
208+
</div>
209+
<div class="col-lg-3 col-md-4 col-sm-6">
210+
<a href="https://istio.io/" target="_blank" class="text-decoration-none">
211+
<div class="card h-100 ecosystem-card">
212+
<div class="card-body d-flex align-items-center justify-content-center">
213+
<h5 class="card-title">Istio</h5>
214+
</div>
215+
</div>
216+
</a>
217+
</div>
218+
<div class="col-lg-3 col-md-4 col-sm-6">
219+
<a href="https://janus-idp.io/" target="_blank" class="text-decoration-none">
220+
<div class="card h-100 ecosystem-card">
221+
<div class="card-body d-flex align-items-center justify-content-center">
222+
<h5 class="card-title">Janus</h5>
223+
</div>
224+
</div>
225+
</a>
226+
</div>
227+
<div class="col-lg-3 col-md-4 col-sm-6">
228+
<a href="https://www.jaegertracing.io/" target="_blank" class="text-decoration-none">
229+
<div class="card h-100 ecosystem-card">
230+
<div class="card-body d-flex align-items-center justify-content-center">
231+
<h5 class="card-title">Jaeger</h5>
232+
</div>
233+
</div>
234+
</a>
235+
</div>
236+
<div class="col-lg-3 col-md-4 col-sm-6">
237+
<a href="https://docs.kubestellar.io/" target="_blank" class="text-decoration-none">
238+
<div class="card h-100 ecosystem-card">
239+
<div class="card-body d-flex align-items-center justify-content-center">
240+
<h5 class="card-title">KubeStellar</h5>
241+
</div>
242+
</div>
243+
</a>
244+
</div>
245+
<div class="col-lg-3 col-md-4 col-sm-6">
246+
<a href="https://kubevela.io/" target="_blank" class="text-decoration-none">
247+
<div class="card h-100 ecosystem-card">
248+
<div class="card-body d-flex align-items-center justify-content-center">
249+
<h5 class="card-title">KubeVela</h5>
250+
</div>
251+
</div>
252+
</a>
253+
</div>
254+
<div class="col-lg-3 col-md-4 col-sm-6">
255+
<a href="https://kueue.sigs.k8s.io/" target="_blank" class="text-decoration-none">
256+
<div class="card h-100 ecosystem-card">
257+
<div class="card-body d-flex align-items-center justify-content-center">
258+
<h5 class="card-title">Kueue</h5>
259+
</div>
260+
</div>
261+
</a>
262+
</div>
263+
<div class="col-lg-3 col-md-4 col-sm-6">
264+
<a href="https://opentelemetry.io/" target="_blank" class="text-decoration-none">
265+
<div class="card h-100 ecosystem-card">
266+
<div class="card-body d-flex align-items-center justify-content-center">
267+
<h5 class="card-title">OpenTelemetry</h5>
268+
</div>
269+
</div>
270+
</a>
271+
</div>
272+
<div class="col-lg-3 col-md-4 col-sm-6">
273+
<a href="https://www.squid-cache.org/" target="_blank" class="text-decoration-none">
274+
<div class="card h-100 ecosystem-card">
275+
<div class="card-body d-flex align-items-center justify-content-center">
276+
<h5 class="card-title">Squid</h5>
277+
</div>
278+
</div>
279+
</a>
280+
</div>
281+
<div class="col-lg-3 col-md-4 col-sm-6 mx-auto">
282+
<a href="https://submariner.io/" target="_blank" class="text-decoration-none">
283+
<div class="card h-100 ecosystem-card">
284+
<div class="card-body d-flex align-items-center justify-content-center">
285+
<h5 class="card-title">Submariner</h5>
286+
</div>
287+
</div>
288+
</a>
289+
</div>
290+
</div>
291+
</div>
292+
</div>
293+
</div>
294+
</div>
295+
296+
{{% /blocks/section %}}
50297

51298
{{% blocks/section color="primary" %}}
52299
Open Cluster Management is a Cloud Native Computing Foundation sandbox project
53300
{.h3 .text-center}
301+
54302
<div class="text-center">
55303
<img src="https://raw.githubusercontent.com/cncf/artwork/master/other/cncf/horizontal/white/cncf-white.svg" alt="CNCF logo" style="max-width: 300px; margin-top: 20px;">
56304
</div>
57-
{{% /blocks/section %}}
305+
{{% /blocks/section %}}

0 commit comments

Comments
 (0)