refactor testimonial page design in educationalpage

src/components/PageComp/EducationalEventsPage/Testimonial.jsx

@@ -1,24 +1,51 @@
-import { useState } from 'react';
+import Carousel from 'better-react-carousel';
+import { AiFillLeftCircle, AiFillRightCircle } from 'react-icons/ai';
 
-import testimonialTweets from '@/content/testimonials';
+import clsxm from '@/lib/utils';
 
-import { Testimonials } from '@/components/layout';
+import data from '@/content/Educational/Testimonials';
 
-const EducationalTestimonials = () => {
- const [tweetId, setTweetId] = useState(testimonialTweets);
+import TestimonialCard from '@/components/Cards/TestimonialCard';
+
+const Testimonials = ({ as }) => {
+ const Component = as || 'div';
  return (
- <section id='sec-testimonials'>
- <div className='layout py-20'>
- <Testimonials
- as='div'
- tweetId={tweetId}
- setTweetId={setTweetId}
- title='Testimonials'
- className='pt-0'
- />
+ <Component className={clsxm(as === 'section' && 'pt-20')}>
+ <div className='layout mx-auto mt-20 pb-20'>
+ <h2 className='h1'>Testimonials</h2>
+ <hr className='styled-hr my-6' />
+ <div className='flex flex-col gap-4'>
+ <Carousel
+ cols={3}
+ rows={1}
+ gap={20}
+ autoplay={2500}
+ dotColorActive='rgb(89,66,233)'
+ arrowRight={
+ <AiFillRightCircle
+ size={50}
+ className='absolute top-1/2 right-[-35px] z-10 -translate-y-1/2 cursor-pointer rounded-full bg-black text-2xl text-indigo-600'
+ />
+ }
+ arrowLeft={
+ <AiFillLeftCircle
+ size={50}
+ className='absolute top-1/2 left-[-35px] z-10 -translate-y-1/2 cursor-pointer rounded-full bg-black text-2xl text-indigo-600'
+ />
+ }
+ showDots
+ loop
+ >
+ {data.map((item) => (
+ <Carousel.Item key={item.from}>
+ <TestimonialCard {...item} />
+ </Carousel.Item>
+ ))}
+ </Carousel>
+ </div>
  </div>
- </section>
+ </Component>
  );
 };
 
-export default EducationalTestimonials;
+export default Testimonials;

src/content/Educational/Testimonials.js

@@ -0,0 +1,29 @@
+const data = [
+ {
+ src: '/assets/images/educationalpage/jeevan.jpg',
+ description: `Just started my coding practice with @trywilco. thanks, @kunalstwt @WeMakeDevs for spreading awareness about Wilco. :)`,
+ from: 'JEVAN JOYAL',
+ },
+ {
+ src: '/assets/images/educationalpage/yatish.jpg',
+ description: `Took part in the Practice your Coding skills with Wilco event held by @WeMakeDevs, and started contributing to an open source project,completed three quests. Thanks to @kunalstwt for the guidance to contribute to an opensource. #opensource.`,
+ from: 'YATISH MANNE',
+ },
+ {
+ src: '/assets/images/educationalpage/prakhar.jpg',
+ description: `Finally got my first PR because of @TwilioQuest thanks @kunalstwt for suggesting it. This game is helping me more than I expected!! @WeMakeDevs`,
+ from: 'PRAKHAR TIWARI',
+ },
+ {
+ src: '/assets/images/educationalpage/adithiya.jpg',
+ description: `https://youtu.be/Nxja-95Z2zc A great initiative by @kunalstwt @WeMakeDevs @TwilioQuest for folks around the world to get started with Open source. This is also my First Open Source. I know I'm going to learn a lot of new things. Super Excited for this one.`,
+ from: 'S ADITHIYA',
+ },
+ {
+ src: '/assets/images/educationalpage/ashish.jpg',
+ description: `Starting #Go lang from today onwards as looking forward to contributing to the #OpenSourceFest organizing by @kunalstwt @commclassroom @KubeScape Resource: https://commclassroom.org/devops-roadmap?r_done=1 This gonna be a great experience as I'll be contributing for the very first time #OpenSource`,
+ from: 'ASHISH KHANAGWAL',
+ },
+];
+
+export default data;