Skip to content

Commit

Permalink
Testimonials redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
“kebean” committed Oct 28, 2024
1 parent 4321d94 commit 6e0d90c
Showing 1 changed file with 135 additions and 85 deletions.
220 changes: 135 additions & 85 deletions src/pages/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,124 +10,172 @@ import person from '../assets/person.png';
import person2 from '../assets/person2.png';
import ur from '../assets/ur.png';

const testimonials = [
{
id: 1,
name: 'Bernard Dushimimana',
role: 'Sr.Manager',
organization: 'Andela',
image: person,
content: `I'm extremely impressed with Pulse and their performance management platform.
Since using their services, it has been a game-changer for our organization.
The platform is intuitive, easy to navigate, and packed with powerful features.`,
},
{
id: 2,
name: 'Susan',
role: 'Sr.Manager',
organization: 'Andela',
image: person2,
content: `I'm delighted to share my positive experience with Pulse and their exceptional
performance management platform. Implementing their services has led to remarkable
improvements in our performance tracking and management processes.`,
},
{
id: 3,
name: 'Dr. Jack',
role: 'Director',
organization: 'University of Rwanda',
image: ur,
content: `
We are thrilled with the services provided by Pulse. Their performance management platform
has exceeded our expectations in every way. The user-friendly interface and comprehensive
features have made tracking and monitoring our performance metrics a breeze.
`,
},
{
id: 4,
name: 'Dr. Jack',
role: 'Director',
organization: 'University of Rwanda',
image: ur,
content: `
We are thrilled with the services provided by Pulse. Their performance management platform
has exceeded our expectations in every way. The user-friendly interface and comprehensive
features have made tracking and monitoring our performance metrics a breeze.
`,
},
{
id: 5,
name: 'Dr. Jack',
role: 'Director',
organization: 'University of Rwanda',
image: ur,
content: `
We are thrilled with the services provided by Pulse. Their performance management platform
has exceeded our expectations in every way. The user-friendly interface and comprehensive
features have made tracking and monitoring our performance metrics a breeze.
`,
},
{
id: 6,
name: 'Dr. Jack',
role: 'Director',
organization: 'University of Rwanda',
image: ur,
content: `
We are thrilled with the services provided by Pulse. Their performance management platform
has exceeded our expectations in every way. The user-friendly interface and comprehensive
features have made tracking and monitoring our performance metrics a breeze.
`,
},
];

function Testimonial() {
const { t } = useTranslation();
const [currentIndex, setCurrentIndex] = useState(0);

const testimonials = [
{
id: 1,
name: 'Bernard Dushimimana',
role: t('Sr.Manager'),
organization: t('Andela'),
image: person,
content: t('Content1'),
},
{
id: 2,
name: 'Susan',
role: t('Sr.Manager'),
organization: t('Andela'),
image: person2,
content: t('Content2'),
},
{
id: 3,
name: 'Dr. Jack',
role: t('Director'),
organization: t('University of Rwanda'),
image: ur,
content: t('Content3'),
},
];

const prevTestimonial = () => {
setCurrentIndex(
(prevIndex) =>
(prevIndex - 1 + testimonials.length) % testimonials.length,
setCurrentIndex((prevIndex) =>
prevIndex === 0 ? testimonials.length - 1 : prevIndex - 1
);
};

const nextTestimonial = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
setCurrentIndex((prevIndex) =>
prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
);
};

useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
setCurrentIndex((prevIndex) =>
prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
);
}, 10000);

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

return (
<>
<div className="block md:hidden flex-col lg:mx-10 md:mx-20 my-20 gap-10 relative font-serif">
{testimonials.map((testimonial, index) => (
<div
key={testimonial.id}
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 ${
currentIndex === index ? 'visible' : 'hidden'
}`}
<div className="block md:hidden relative font-serif my-20">
<div className="overflow-hidden">
<div
className="flex transition-transform duration-500 ease-in-out"
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
>
<div className="flex flex-col sm:flex-row mb-6 items-center">
<img className="sm:w-1/4" src={testimonial.image} alt="" />

<ul>
<li className="text-xs ml-3 dark:text-slate-300 text-neutral-600">
{testimonial.name}
</li>
<li className="text-xs mt-2 dark:text-slate-300 ml-3">
{testimonial.role}, {testimonial.organization}
</li>
</ul>
</div>
<p className="text-base dark:text-slate-300 text-neutral-900">
{testimonial.content}
</p>
{testimonials.map((testimonial) => (
<div
key={testimonial.id}
className="flex-shrink-0 w-full bg-indigo-100 dark:bg-dark-bg dark:text-slate-300 p-8 rounded-3xl mx-3"
>
<div className="flex flex-col sm:flex-row mb-6 items-center">
<img className="sm:w-1/4" src={testimonial.image} alt="" />
<ul>
<li className="text-xs ml-3 dark:text-slate-300 text-neutral-600">
{testimonial.name}
</li>
<li className="text-xs mt-2 dark:text-slate-300 ml-3">
{testimonial.role}, {testimonial.organization}
</li>
</ul>
</div>
<p className="text-base dark:text-slate-300 text-neutral-900">
{testimonial.content}
</p>
</div>
))}
</div>
))}
</div>

<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 ">
<AiOutlineLeft
size={20}
onClick={prevTestimonial}
className="cursor-pointer"
/>
</span>

<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 ">
<AiOutlineRight
size={20}
onClick={nextTestimonial}
className="cursor-pointer"
/>
</span>
<button

Check failure on line 141 in src/pages/About.tsx

View workflow job for this annotation

GitHub Actions / build 

Missing an explicit type attribute for button
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"
onClick={prevTestimonial}
>
<AiOutlineLeft size={20} />
</button>

<button

Check failure on line 148 in src/pages/About.tsx

View workflow job for this annotation

GitHub Actions / build 

Missing an explicit type attribute for button
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"
onClick={nextTestimonial}
>
<AiOutlineRight size={20} />
</button>
</div>

<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">
{testimonials.map((testimonial, index) => (
{/* Desktop view remains the same */}
<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">
{testimonials.map((testimonial) => (
<div
key={testimonial.id}
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 "
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"
>
<div className="flex flex-col sm:flex-row mb-6 items-center">
<div className="flex flex-col sm:flex-row mb-6 items-center">
<img
className="md:w-1/5 sm:w-1/3"
src={testimonial.image}
alt=""
/>

<ul>
<li className="text-sm ml-3 dark:text-slate-300 text-neutral-600">
<li className="text-sm ml-3 dark:text-slate-300 text-neutral-600">
{testimonial.name}
</li>
<li className="text-sm dark:text-slate-300 mt-2 ml-3">
<li className="text-sm dark:text-slate-300 mt-2 ml-3">
{testimonial.role}, {testimonial.organization}
</li>
</ul>
</div>
<p className="text-base dark:text-slate-300 text-neutral-900">
<p className="text-base dark:text-slate-300 text-neutral-900">
{testimonial.content}
</p>
</div>
Expand Down Expand Up @@ -168,20 +216,20 @@ function About({ styles }: any) {
];

return (
<div className=" bg-white mt-auto dark:bg-dark-frame-bg font-serif">
<div className=" justify-between w-full h-full pb-5">
<div className="bg-white mt-auto dark:bg-dark-frame-bg font-serif">
<div className="justify-between w-full h-full pb-5">
<div>
<h1 className="text-center text-neutral-700 mb-5 font lg:text-4xl md:text-2xl pt-10 pb-4 dark:text-slate-100">
<h1 className="text-center text-neutral-700 mb-5 font lg:text-4xl md:text-2xl pt-10 pb-4 dark:text-slate-100">
{t('hero2')}
</h1>
</div>

{aboutCards.map(({ title, body, img, orientation }) => (
<div
key={body}
className={`mt-10 card-image lg:mx-10 sm:mx-5 md:flex ${orientation} `}
className={`mt-10 card-image lg:mx-10 sm:mx-5 md:flex ${orientation}`}
>
<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">
<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">
<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">
{title}
</h2>
Expand All @@ -207,12 +255,14 @@ function About({ styles }: any) {
<div className="px-5 mt-20">
<h1 className="font text-center text-neutral-700 lg:text-4xl sm:text-2xl dark:text-slate-100">
{' '}
{t('Come shape the future together')}
Come shape the future together{' '}
</h1>
</div>
<Testimonial />
</div>
</div>
);
}

export { About };

0 comments on commit 6e0d90c

Please sign in to comment.