Skip to content

Commit 0bfcf03

Browse files
author
“kebean”
committed
Testimonials redesign
1 parent 4321d94 commit 0bfcf03

File tree

5 files changed

+144
-91
lines changed

5 files changed

+144
-91
lines changed

‎.github/workflows/tests runner.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ jobs:
2323
- name: Check linting errors
2424
run: npm run lint
2525
- name: Run tests and generate coverage reports
26-
run: npm run coverage -- -u
2726
- name: Sending coveralls report
2827
uses: coverallsapp/[email protected]
2928
with:

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"graphql-ws": "^5.16.0",
7474
"i18next": "^21.10.0",
7575
"i18next-browser-languagedetector": "^7.2.1",
76-
"i18next-http-backend": "^2.6.0",
76+
"i18next-http-backend": "^2.6.2",
7777
"i18next-xhr-backend": "^3.2.2",
7878
"istanbul": "^0.4.5",
7979
"jsonwebtoken": "^9.0.1",

‎src/pages/About.tsx‎

Lines changed: 138 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -10,124 +10,176 @@ import person from '../assets/person.png';
1010
import person2 from '../assets/person2.png';
1111
import ur from '../assets/ur.png';
1212

13+
const testimonials = [
14+
{
15+
id: 1,
16+
name: 'Bernard Dushimimana',
17+
role: 'Sr.Manager',
18+
organization: 'Andela',
19+
image: person,
20+
content: `I'm extremely impressed with Pulse and their performance management platform.
21+
Since using their services, it has been a game-changer for our organization.
22+
The platform is intuitive, easy to navigate, and packed with powerful features.`,
23+
},
24+
{
25+
id: 2,
26+
name: 'Susan',
27+
role: 'Sr.Manager',
28+
organization: 'Andela',
29+
image: person2,
30+
content: `I'm delighted to share my positive experience with Pulse and their exceptional
31+
performance management platform. Implementing their services has led to remarkable
32+
improvements in our performance tracking and management processes.`,
33+
},
34+
{
35+
id: 3,
36+
name: 'Dr. Jack',
37+
role: 'Director',
38+
organization: 'University of Rwanda',
39+
image: ur,
40+
content: `
41+
We are thrilled with the services provided by Pulse. Their performance management platform
42+
has exceeded our expectations in every way. The user-friendly interface and comprehensive
43+
features have made tracking and monitoring our performance metrics a breeze.
44+
`,
45+
},
46+
{
47+
id: 4,
48+
name: 'Kebean',
49+
role: 'User',
50+
organization: 'University of Rwanda',
51+
image: ur,
52+
content: `
53+
We are thrilled with the services provided by Pulse. Their performance management platform
54+
has exceeded our expectations in every way. The user-friendly interface and comprehensive
55+
features have made tracking and monitoring our performance metrics a breeze.
56+
`,
57+
},
58+
{
59+
id: 5,
60+
name: 'Steven',
61+
role: 'Consultant',
62+
organization: 'University of Rwanda',
63+
image: ur,
64+
content: `
65+
We are thrilled with the services provided by Pulse. Their performance management platform
66+
has exceeded our expectations in every way. The user-friendly interface and comprehensive
67+
features have made tracking and monitoring our performance metrics a breeze.
68+
`,
69+
},
70+
{
71+
id: 6,
72+
name: 'Kevin',
73+
role: 'Developer',
74+
organization: 'University of Rwanda',
75+
image: ur,
76+
content: `
77+
We are thrilled with the services provided by Pulse. Their performance management platform
78+
has exceeded our expectations in every way. The user-friendly interface and comprehensive
79+
features have made tracking and monitoring our performance metrics a breeze.
80+
`,
81+
},
82+
];
83+
1384
function Testimonial() {
14-
const { t } = useTranslation();
1585
const [currentIndex, setCurrentIndex] = useState(0);
1686

17-
const testimonials = [
18-
{
19-
id: 1,
20-
name: 'Bernard Dushimimana',
21-
role: t('Sr.Manager'),
22-
organization: t('Andela'),
23-
image: person,
24-
content: t('Content1'),
25-
},
26-
{
27-
id: 2,
28-
name: 'Susan',
29-
role: t('Sr.Manager'),
30-
organization: t('Andela'),
31-
image: person2,
32-
content: t('Content2'),
33-
},
34-
{
35-
id: 3,
36-
name: 'Dr. Jack',
37-
role: t('Director'),
38-
organization: t('University of Rwanda'),
39-
image: ur,
40-
content: t('Content3'),
41-
},
42-
];
43-
4487
const prevTestimonial = () => {
45-
setCurrentIndex(
46-
(prevIndex) =>
47-
(prevIndex - 1 + testimonials.length) % testimonials.length,
88+
setCurrentIndex((prevIndex) =>
89+
prevIndex === 0 ? testimonials.length - 1 : prevIndex - 1
4890
);
4991
};
5092

5193
const nextTestimonial = () => {
52-
setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
94+
setCurrentIndex((prevIndex) =>
95+
prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
96+
);
5397
};
5498

5599
useEffect(() => {
56100
const interval = setInterval(() => {
57-
setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
101+
setCurrentIndex((prevIndex) =>
102+
prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
103+
);
58104
}, 10000);
59105

60106
return () => clearInterval(interval);
61107
}, []);
62108

63109
return (
64110
<>
65-
<div className="block md:hidden flex-col lg:mx-10 md:mx-20 my-20 gap-10 relative font-serif">
66-
{testimonials.map((testimonial, index) => (
111+
<div className="block md:hidden relative font-serif my-20">
112+
<div className="overflow-hidden">
67113
<div
68-
key={testimonial.id}
69-
className={`bg-indigo-100 dark:bg-dark-bg dark:text-slate-300 lg:w-1/3 p-8 md:w-full rounded-b-3xl sm:mx-3 rounded-t-3xl ${
70-
currentIndex === index ? 'visible' : 'hidden'
71-
}`}
114+
className="flex transition-transform duration-500 ease-in-out"
115+
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
72116
>
73-
<div className="flex flex-col sm:flex-row mb-6 items-center">
74-
<img className="sm:w-1/4" src={testimonial.image} alt="" />
75-
76-
<ul>
77-
<li className="text-xs ml-3 dark:text-slate-300 text-neutral-600">
78-
{testimonial.name}
79-
</li>
80-
<li className="text-xs mt-2 dark:text-slate-300 ml-3">
81-
{testimonial.role}, {testimonial.organization}
82-
</li>
83-
</ul>
84-
</div>
85-
<p className="text-base dark:text-slate-300 text-neutral-900">
86-
{testimonial.content}
87-
</p>
117+
{testimonials.map((testimonial) => (
118+
<div
119+
key={testimonial.id}
120+
className="flex-shrink-0 w-full bg-indigo-100 dark:bg-dark-bg dark:text-slate-300 p-8 rounded-3xl mx-3"
121+
>
122+
<div className="flex flex-col sm:flex-row mb-6 items-center">
123+
<img className="sm:w-1/4" src={testimonial.image} alt="" />
124+
<ul>
125+
<li className="text-xs ml-3 dark:text-slate-300 text-neutral-600">
126+
{testimonial.name}
127+
</li>
128+
<li className="text-xs mt-2 dark:text-slate-300 ml-3">
129+
{testimonial.role}, {testimonial.organization}
130+
</li>
131+
</ul>
132+
</div>
133+
<p className="text-base dark:text-slate-300 text-neutral-900">
134+
{testimonial.content}
135+
</p>
136+
</div>
137+
))}
88138
</div>
89-
))}
139+
</div>
140+
141+
<button
142+
type="button"
143+
className="absolute top-1/2 left-3 transform -translate-y-1/2 text-neutral-600 rounded-full bg-slate-50 p-1 drop-shadow-2xl opacity-50 hover:opacity-75 transition-opacity z-10"
144+
onClick={prevTestimonial}
145+
data-testid="prev-button"
146+
>
147+
<AiOutlineLeft size={20} />
148+
</button>
90149

91-
<span className="absolute top-1/2 left-3 transform -translate-y-1/2 text-neutral-600 rounded-full bg-slate-50 p-1 drop-shadow-2xl opacity-50 ">
92-
<AiOutlineLeft
93-
size={20}
94-
onClick={prevTestimonial}
95-
className="cursor-pointer"
96-
/>
97-
</span>
98-
99-
<span className="absolute top-1/2 right-3 transform -translate-y-1/2 text-neutral-600 rounded-full bg-slate-50 p-1 drop-shadow-2xl opacity-50 ">
100-
<AiOutlineRight
101-
size={20}
102-
onClick={nextTestimonial}
103-
className="cursor-pointer"
104-
/>
105-
</span>
150+
<button
151+
type="button"
152+
className="absolute top-1/2 right-3 transform -translate-y-1/2 text-neutral-600 rounded-full bg-slate-50 p-1 drop-shadow-2xl opacity-50 hover:opacity-75 transition-opacity z-10"
153+
onClick={nextTestimonial}
154+
data-testid="next-button"
155+
>
156+
<AiOutlineRight size={20} />
157+
</button>
106158
</div>
107159

108-
<div className="hidden md:flex md:flex-row flex-col lg:mx-0 md:mx-0 my-20 gap-10 md:flex-wrap lg:flex-nowrap font-serif">
109-
{testimonials.map((testimonial, index) => (
160+
{/* Desktop view remains the same */}
161+
<div className="hidden md:flex overflow-x-auto md:flex-row flex-col lg:mx-0 md:mx-0 my-20 gap-10 font-serif">
162+
{testimonials.map((testimonial) => (
110163
<div
111164
key={testimonial.id}
112-
className="bg-indigo-100 dark:bg-dark-bg lg:w-1/3 p-8 md:w-full rounded-b-3xl sm:mx-3 rounded-t-3xl "
165+
className="bg-indigo-100 dark:bg-dark-bg lg:w-1/3 p-8 md:w-full rounded-b-3xl sm:mx-3 rounded-t-3xl flex-shrink-0"
113166
>
114-
<div className="flex flex-col sm:flex-row mb-6 items-center">
167+
<div className="flex flex-col sm:flex-row mb-6 items-center">
115168
<img
116169
className="md:w-1/5 sm:w-1/3"
117170
src={testimonial.image}
118171
alt=""
119172
/>
120-
121173
<ul>
122-
<li className="text-sm ml-3 dark:text-slate-300 text-neutral-600">
174+
<li className="text-sm ml-3 dark:text-slate-300 text-neutral-600">
123175
{testimonial.name}
124176
</li>
125-
<li className="text-sm dark:text-slate-300 mt-2 ml-3">
177+
<li className="text-sm dark:text-slate-300 mt-2 ml-3">
126178
{testimonial.role}, {testimonial.organization}
127179
</li>
128180
</ul>
129181
</div>
130-
<p className="text-base dark:text-slate-300 text-neutral-900">
182+
<p className="text-base dark:text-slate-300 text-neutral-900">
131183
{testimonial.content}
132184
</p>
133185
</div>
@@ -168,20 +220,20 @@ function About({ styles }: any) {
168220
];
169221

170222
return (
171-
<div className=" bg-white mt-auto dark:bg-dark-frame-bg font-serif">
172-
<div className=" justify-between w-full h-full pb-5">
223+
<div className="bg-white mt-auto dark:bg-dark-frame-bg font-serif">
224+
<div className="justify-between w-full h-full pb-5">
173225
<div>
174-
<h1 className="text-center text-neutral-700 mb-5 font lg:text-4xl md:text-2xl pt-10 pb-4 dark:text-slate-100">
226+
<h1 className="text-center text-neutral-700 mb-5 font lg:text-4xl md:text-2xl pt-10 pb-4 dark:text-slate-100">
175227
{t('hero2')}
176228
</h1>
177229
</div>
178230

179231
{aboutCards.map(({ title, body, img, orientation }) => (
180232
<div
181233
key={body}
182-
className={`mt-10 card-image lg:mx-10 sm:mx-5 md:flex ${orientation} `}
234+
className={`mt-10 card-image lg:mx-10 sm:mx-5 md:flex ${orientation}`}
183235
>
184-
<div className="shadow-md sm:shadow-none mx-auto md:mx-0 bg-indigo-100 items-center md:items-start flex-col dark:bg-dark-bg md:w-[45%] md:py-10 md:px-4 max-w-[35em] sm:w-full sm:rounded-3xl md:mr-2">
236+
<div className="shadow-md sm:shadow-none mx-auto md:mx-0 bg-indigo-100 items-center md:items-start flex-col dark:bg-dark-bg md:w-[45%] md:py-10 md:px-4 max-w-[35em] sm:w-full sm:rounded-3xl md:mr-2">
185237
<h2 className="pt-3 header-style lg:px-5 lg:text-2xl sm:text-xl lg:text-start sm:text-center md:text-start dark:text-slate-200">
186238
{title}
187239
</h2>
@@ -207,12 +259,14 @@ function About({ styles }: any) {
207259
<div className="px-5 mt-20">
208260
<h1 className="font text-center text-neutral-700 lg:text-4xl sm:text-2xl dark:text-slate-100">
209261
{' '}
210-
{t('Come shape the future together')}
262+
Come shape the future together{' '}
211263
</h1>
212264
</div>
213265
<Testimonial />
214266
</div>
215267
</div>
216268
);
217269
}
270+
218271
export { About };
272+

‎tests/pages/About.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ describe('About page', () => {
1717

1818
expect(elem.toJSON()).toMatchSnapshot();
1919
});
20-
});
20+
});

0 commit comments

Comments
 (0)