Skip to content

Commit f8b5026

Browse files
petar-cvitpetar-cvit
authored
landing page product testimonials
landing page product testimonials
2 parents f4db4c5 + 8a9a0c2 commit f8b5026

4 files changed

Lines changed: 303 additions & 89 deletions

File tree

‎web/src/components/Testimonials/Testimonial/index.js‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎web/src/components/Testimonials/Testimonial/styles.module.css‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎web/src/components/Testimonials/index.js‎

Lines changed: 214 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,231 @@
1-
import React, {useEffect, useRef, useState} from 'react';
1+
import React, {useState} from 'react';
22
import styles from './styles.module.css';
3-
import Testimonial from "./Testimonial";
43
import TestimonialsTitle from "./Title";
54

65
import Col from "antd/es/col"
76
import Row from "antd/es/row"
7+
import { Card } from 'antd';
88

99
const Testimonials = () => {
10+
const testimonials = [
11+
{
12+
name: "Kunal",
13+
position: "SRE",
14+
testimonial: "Deploying has never been easier: A single interface to manage your workloads on Kubernetes. 🔥 An easy way to get started on Kubernetes👌"
15+
},
16+
{
17+
name: "Rosana",
18+
position: "SRE",
19+
testimonial: "Cyclops has transformed my Kubernetes management experience. Its intuitive form-based UI and Helm integration make deploying and monitoring applications straightforward and error-free. A must-try tool for anyone looking to simplify their Kubernetes operations!"
20+
},
21+
{
22+
name: "Ken",
23+
position: "SRE",
24+
testimonial: "Cyclops utilizes Helm charts for application deployment, making Kubernetes more accessible to users with different levels of expertise."
25+
},
26+
{
27+
name: "Adolfo",
28+
position: "SRE/DevOps",
29+
testimonial: "I enjoyed using cyclops because of it's simplicity and enhanced observability of kubernetes clusters as well as the seamless integrations with tools like prometheus and Grafana",
30+
},
31+
{
32+
name: "Hanzel",
33+
position: "DevOps Engineer",
34+
testimonial: "I've been using Cyclops for a few months now in my projects to streamline the creation of applications in Kubernetes, and the experience has been excellent. I find the interface very intuitive, and the integration with Helm has significantly simplified the deployment process, allowing me to focus more on development rather than configuration. I've also recommended Cyclops to several friends who don't have extensive knowledge of Kubernetes, and they've found the tool incredibly useful for creating applications easily and without complications. I truly appreciate the work you and your team are doing with Cyclops, and I'm very excited to see how it evolves in the future.",
35+
},
36+
{
37+
name: "Rodrigo",
38+
position: "Senior DevOps Engineer",
39+
testimonial: "I actually installed it and showed it in a presentation about how to create Internal Developers Portal. It was an example on how to use a ready to use product instead of using a framework like backstage. I found it very easy to understand and use, congratulations on getting it there 👏",
40+
},
41+
{
42+
name: "Jesus",
43+
position: "Software Developer",
44+
testimonial: "Cyclops does an amazing job of simplifying the complexities of Kubernetes while boosting developer efficiency.",
45+
},
46+
{
47+
name: "Hanshal",
48+
position: "DevOps",
49+
testimonial: "It's a really nice tool to manage and deploy Kubernetes.",
50+
},
51+
{
52+
name: "Jurica",
53+
position: "Software Engineer",
54+
testimonial: "Love the tool! Helps me navigate the k8s mess a lot more easily.",
55+
},
56+
{
57+
name: "Ajay",
58+
position: "Developer/DevOps Engineer",
59+
testimonial: "Amazing! Easy to use! A must-try tool to simplify their k8s operations! Loved it!",
60+
},
61+
{
62+
name: "Anmol",
63+
position: "Software Developer (Blockhain Dev)",
64+
testimonial: "I really like the idea of Cyclops. It is so much easier for users who dont know or need to know about k8s. Why did this not exist before?",
65+
},
66+
{
67+
name: "Raj",
68+
position: "Software Developer",
69+
testimonial: "I'm really impressed with the Cyclops UI so far. The community seems active and supportive, which is fantastic.",
70+
},
71+
{
72+
name: "David",
73+
position: "SRE/DevOps",
74+
testimonial: "I really like it. I've been using it in my personal lab environments, and it's been excellent. I've also recommended it to a couple of friends who manage Kubernetes, and they've found it very useful as well.",
75+
},
76+
{
77+
name: "Sergio",
78+
position: "SRE",
79+
testimonial: "Great project that cyclops UI is really like (as an SRE) a straighfoward way to create modules for dev teams without really in more complex ways. awesome work for the community",
80+
},
81+
{
82+
name: "Prince",
83+
position: "Software Engineer",
84+
testimonial: "I'm impressed with its functionality. It worked seamlessly with a Minikube cluster, and I particularly loved the edit feature for modifying images and replicas. The rollback feature also stood out as a fantastic addition, making deployments much easier to manage.",
85+
},
86+
{
87+
name: "Edgar",
88+
position: "DevOps",
89+
testimonial: "I did a quick demo to my students to show they how easy is deploy applications using cyclops. (It's a technology institute, and I teach classes for a DevOps bootcamp.)",
90+
},
91+
{
92+
name: "Kaan",
93+
position: "R&D Engineer",
94+
testimonial: "I'm impressed by how it simplifies Kubernetes management and service orchestration. As a small company without a dedicated DevOps team, we understand the importance of user-friendly tools that don't require extensive specialized knowledge. What makes Cyclops perfect for us is its ability to simplify the management of various services. We're working on implementing CNCF products like APISIX, Keycloak, OpenFGA, Prometheus, and Grafana, and Cyclops could be a game-changer in how we handle these integrations.",
95+
},
96+
{
97+
name: "Ashish",
98+
position: "Engineer",
99+
testimonial: "Cyclops is awesome, makes Kubernetes easy for devs.",
100+
}
101+
]
102+
103+
const column1Testimonials = testimonials.slice(0, 6);
104+
const column2Testimonials = testimonials.slice(6, 12);
105+
const column3Testimonials = testimonials.slice(12, 18);
106+
107+
const [isHovered, setIsHovered] = useState({
108+
col1: false,
109+
col2: false,
110+
col3: false
111+
});
112+
113+
const handleMouseEnter = (column) => {
114+
setIsHovered(prev => ({
115+
...prev,
116+
[column]: true
117+
}));
118+
};
119+
120+
const handleMouseLeave = (column) => {
121+
setIsHovered(prev => ({
122+
...prev,
123+
[column]: false
124+
}));
125+
};
126+
127+
const renderTestimonialColumn = (testimonials, columnKey) => {
128+
return (
129+
<div
130+
onMouseEnter={() => handleMouseEnter(columnKey)}
131+
onMouseLeave={() => handleMouseLeave(columnKey)}
132+
className={styles.testimonialColumn}
133+
>
134+
<div
135+
className={`${styles.testimonialContent} ${styles[`column${columnKey.slice(-1)}`]} ${isHovered[columnKey] ? styles.paused : ''}`}
136+
>
137+
{testimonials.map((testimonial, index) => (
138+
<div
139+
key={`${columnKey}-1-${index}`}
140+
style={{
141+
padding: '10px',
142+
marginBottom: '20px',
143+
}}
144+
>
145+
<Card
146+
style={{
147+
display: 'flex',
148+
flexDirection: 'column',
149+
justifyContent: 'center',
150+
minHeight: '200px',
151+
}}
152+
>
153+
<p style={{
154+
fontSize: '1.2em',
155+
fontStyle: 'italic',
156+
marginBottom: '20px',
157+
lineHeight: '1.6'
158+
}}>
159+
"{testimonial.testimonial}"
160+
</p>
161+
<div style={{
162+
marginTop: 'auto',
163+
paddingTop: '20px',
164+
borderTop: '1px solid #f0f0f0'
165+
}}>
166+
<strong>{testimonial.name}</strong>
167+
<br />
168+
<span style={{ color: '#666' }}>{testimonial.position}</span>
169+
</div>
170+
</Card>
171+
</div>
172+
))}
173+
{testimonials.map((testimonial, index) => (
174+
<div
175+
key={`${columnKey}-2-${index}`}
176+
style={{
177+
padding: '10px',
178+
marginBottom: '20px',
179+
}}
180+
>
181+
<Card
182+
style={{
183+
display: 'flex',
184+
flexDirection: 'column',
185+
justifyContent: 'center',
186+
minHeight: '200px',
187+
}}
188+
>
189+
<p style={{
190+
fontSize: '1.2em',
191+
fontStyle: 'italic',
192+
marginBottom: '20px',
193+
lineHeight: '1.6'
194+
}}>
195+
"{testimonial.testimonial}"
196+
</p>
197+
<div style={{
198+
marginTop: 'auto',
199+
paddingTop: '20px',
200+
borderTop: '1px solid #f0f0f0'
201+
}}>
202+
<strong>{testimonial.name}</strong>
203+
<br />
204+
<span style={{ color: '#666' }}>{testimonial.position}</span>
205+
</div>
206+
</Card>
207+
</div>
208+
))}
209+
</div>
210+
</div>
211+
);
212+
};
213+
10214
return (
11-
<div
12-
className={styles.featuresroot}
13-
style={{overflow: "hidden"}}
14-
>
215+
<div className={styles.featuresroot}>
15216
<div className={styles.features}>
16217
<Row align="middle">
17218
<TestimonialsTitle/>
18219
</Row>
19-
<Row gutter={[16, 16]}>
20-
<Col xs={{ span: 20, offset: 2 }} md={{ span: 6, offset: 3 }}>
21-
<Testimonial
22-
name={"Rossana Suarez"}
23-
position={"AWS Container Hero"}
24-
avatar={"/img/rossana_suarez.jpeg"}
25-
testimonial={<p>Deploying has never been easier: A single interface to manage your workloads
26-
on Kubernetes. 🔥 <br/> An easy way to get started on <br/> Kubernetes👌</p>}
27-
/>
220+
<Row gutter={[16, 16]} style={{ height: '700px', overflow: 'hidden' }}>
221+
<Col xs={24} sm={24} md={8}>
222+
{renderTestimonialColumn(column1Testimonials, 'col1')}
28223
</Col>
29-
<Col xs={{span: 20, offset: 2}} md={{span: 6, offset: 0}}>
30-
<Testimonial
31-
name={"Kunal Kushwaha"}
32-
position={"DevRel manager at Civo"}
33-
avatar={"/img/kunal_kushwaha.jpeg"}
34-
testimonial={"Cyclops has transformed my Kubernetes management experience. Its intuitive form-based UI and Helm integration make deploying and monitoring applications straightforward and error-free. A must-try tool for anyone looking to simplify their Kubernetes operations!"}
35-
/>
224+
<Col xs={0} sm={0} md={8}>
225+
{renderTestimonialColumn(column2Testimonials, 'col2')}
36226
</Col>
37-
<Col xs={{span: 20, offset: 2}} md={{span: 6, offset: 0}}>
38-
<Testimonial
39-
name={"Ken Godoy"}
40-
position={"VP, DevOps"}
41-
avatar={"/img/ken_godoy.jpeg"}
42-
testimonial={"Cyclops utilizes Helm charts for application deployment, making Kubernetes more accessible to users with different levels of expertise."}
43-
/>
227+
<Col xs={0} sm={0} md={8}>
228+
{renderTestimonialColumn(column3Testimonials, 'col3')}
44229
</Col>
45230
</Row>
46231
</div>

0 commit comments

Comments
 (0)