Skip to content

Commit 9b7d09f

Browse files
FirePheonixFirePheonix
committed
TestimonialsDynamicDone
1 parent 8cd82ed commit 9b7d09f

File tree

5 files changed

+154
-0
lines changed

5 files changed

+154
-0
lines changed

‎src/assets/Stats/apostrophie.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/Testimonials.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import Slider from "react-slick";
2+
import "slick-carousel/slick/slick.css";
3+
import "slick-carousel/slick/slick-theme.css";
4+
import { testimonials } from "../constants/Testimonials";
5+
import { stats } from "../constants/Stats";
6+
7+
const settings1 = {
8+
dots: false,
9+
infinite: true,
10+
speed: 5000,
11+
slidesToShow: 3,
12+
slidesToScroll: 1,
13+
autoplay: true,
14+
autoplaySpeed: 0,
15+
cssEase: "linear",
16+
responsive: [
17+
{ breakpoint: 1024, settings: { slidesToShow: 2 } },
18+
{ breakpoint: 768, settings: { slidesToShow: 1 } },
19+
],
20+
};
21+
22+
const settings2 = {
23+
...settings1,
24+
rtl: true, // Moves the second slider in the opposite direction
25+
};
26+
27+
const Testimonials = () => {
28+
return (
29+
<div className="w-full bg-gradient-to-b from-white-800 to-[#F5DDC8] p-6">
30+
<div className="min-h-screen flex flex-col items-center justify-center p-6">
31+
<h2 className="font-bold tracking-wider font-Caveat text-6xl text-gray-800 mb-6 text-center">
32+
<span className="text-black">
33+
Words of appreciation and<br /> admiration from others.
34+
</span>
35+
</h2>
36+
37+
<div className="w-full max-w-6xl">
38+
<Slider {...settings1}>
39+
{testimonials.map((testimonial) => (
40+
<div key={testimonial.id} className="px-4">
41+
<div className="bg-white rounded-xl p-6 flex flex-col items-center text-center min-h-[250px] h-auto w-[350px]">
42+
<img
43+
src={stats.apostrophie}
44+
alt="double-quotes"
45+
className="w-10 h-10 self-start"
46+
47+
/>
48+
<p className="text-gray-700 mt-2">{testimonial.feedback}</p>
49+
<div className="flex items-center mt-4 space-x-3">
50+
<img
51+
src={testimonial.image}
52+
alt={testimonial.name}
53+
className="w-12 h-12 rounded-full "
54+
/>
55+
<div>
56+
<h3 className="text-lg font-semibold text-gray-900">{testimonial.name}</h3>
57+
<p className="text-sm text-gray-500">{testimonial.role}</p>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
))}
63+
</Slider>
64+
</div>
65+
66+
67+
<div className="h-6"></div> {/* Creates a gap */}
68+
69+
<div className="w-full max-w-6xl">
70+
<Slider {...settings2}>
71+
{testimonials.map((testimonial) => (
72+
<div key={testimonial.id} className="px-4">
73+
<div className="bg-white rounded-xl p-6 flex flex-col items-center text-center min-h-[250px] h-auto w-[350px]">
74+
<img
75+
src={stats.apostrophie}
76+
alt="double-quotes"
77+
className="w-10 h-10 self-start"
78+
/>
79+
<p className="text-gray-700 mt-2">{testimonial.feedback}</p>
80+
<div className="flex items-center mt-4 space-x-3">
81+
<img
82+
src={testimonial.image}
83+
alt={testimonial.name}
84+
className="w-12 h-12 rounded-full"
85+
/>
86+
<div>
87+
<h3 className="text-lg font-semibold text-gray-900">{testimonial.name}</h3>
88+
<p className="text-sm text-gray-500">{testimonial.role}</p>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
))}
94+
</Slider>
95+
</div>
96+
97+
98+
</div>
99+
</div>
100+
);
101+
};
102+
103+
export default Testimonials;

‎src/constants/Stats.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import studentMobile from '../assets/Stats/ProblemSolvingTasks.svg';
44
import activity from '../assets/Stats/ActivitiesDownloaded.svg';
55
import language from '../assets/Stats/Languages.svg';
66
import mentorsTeaching from '../assets/Stats/MentorsHelping.svg';
7+
import apostrophie from '../assets/Stats/apostrophie.svg'
78

89
export const stats = {
910
kidlaptop,
@@ -12,4 +13,5 @@ export const stats = {
1213
activity,
1314
language,
1415
mentorsTeaching,
16+
apostrophie,
1517
};

‎src/constants/Testimonials.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
export const testimonials = [
2+
{
3+
id: 1,
4+
name: "Samantha Johnson",
5+
role: "GSoC 2021 Student",
6+
feedback:
7+
"Exceeded our expectations with innovative designs that brought our vision to life - a truly remarkable creative agency.",
8+
image: "https://randomuser.me/api/portraits/women/1.jpg",
9+
},
10+
{
11+
id: 2,
12+
name: "John Doe",
13+
role: "Software Engineer",
14+
feedback:
15+
"Absolutely fantastic! The best experience I've ever had with a service like this.",
16+
image: "https://randomuser.me/api/portraits/men/2.jpg",
17+
},
18+
{
19+
id: 3,
20+
name: "Emma Williams",
21+
role: "Product Designer",
22+
feedback:
23+
"A wonderful experience! Their creativity and attention to detail are unmatched.",
24+
image: "https://randomuser.me/api/portraits/women/3.jpg",
25+
},
26+
{
27+
id: 4,
28+
name: "Michael Smith",
29+
role: "Startup Founder",
30+
feedback:
31+
"They understood our brand perfectly and brought it to life in a way we never imagined!",
32+
image: "https://randomuser.me/api/portraits/men/4.jpg",
33+
},
34+
{
35+
id: 5,
36+
name: "Sophia Lee",
37+
role: "UX Researcher",
38+
feedback:
39+
"Superb work! I highly recommend them for their professionalism and design expertise.",
40+
image: "https://randomuser.me/api/portraits/women/5.jpg",
41+
},
42+
];
43+

‎src/pages/MainPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import Footer from '../sections/Footer';
33
import Stats from '../components/Stats.tsx';
44
import Try from '../components/Try.tsx';
55
import Info from '../components/Info.tsx';
6+
import Testimonials from "../components/Testimonials";
67

78
const MainPage = () => {
89
return (
910
<>
1011
<Header />
1112
<Info />
1213
<Stats />
14+
<Testimonials />
1315
<Try />
1416
<Footer />
1517
</>

0 commit comments

Comments
 (0)