Skip to content

Commit 342d08f

Browse files
FirePheonixFirePheonix
committed
someChanges
1 parent 9b7d09f commit 342d08f

File tree

1 file changed

+80
-64
lines changed

1 file changed

+80
-64
lines changed

‎src/components/Testimonials.tsx‎

Lines changed: 80 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
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";
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';
66

77
const settings1 = {
88
dots: false,
@@ -12,10 +12,20 @@ const settings1 = {
1212
slidesToScroll: 1,
1313
autoplay: true,
1414
autoplaySpeed: 0,
15-
cssEase: "linear",
15+
cssEase: 'linear',
1616
responsive: [
17-
{ breakpoint: 1024, settings: { slidesToShow: 2 } },
18-
{ breakpoint: 768, settings: { slidesToShow: 1 } },
17+
{
18+
breakpoint: 1024,
19+
settings: { slidesToShow: 2, speed: 4000, autoplaySpeed: 2000 },
20+
},
21+
{
22+
breakpoint: 768,
23+
settings: { slidesToShow: 1, speed: 3000, autoplaySpeed: 3000 },
24+
},
25+
{
26+
breakpoint: 320,
27+
settings: { slidesToShow: 1, speed: 2000, autoplaySpeed: 4000 },
28+
},
1929
],
2030
};
2131

@@ -30,71 +40,77 @@ const Testimonials = () => {
3040
<div className="min-h-screen flex flex-col items-center justify-center p-6">
3141
<h2 className="font-bold tracking-wider font-Caveat text-6xl text-gray-800 mb-6 text-center">
3242
<span className="text-black">
33-
Words of appreciation and<br /> admiration from others.
43+
Words of appreciation and
44+
<br /> admiration from others.
3445
</span>
3546
</h2>
36-
3747
<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>
48+
<Slider {...settings1}>
49+
{testimonials.map((testimonial) => (
50+
<div key={testimonial.id} className="px-2 md:px-4">
51+
<div className="bg-white rounded-xl p-6 flex flex-col items-center text-center min-h-[250px] h-auto w-full md:w-[350px]">
52+
<img
53+
src={stats.apostrophie}
54+
alt="double-quotes"
55+
className="w-8 md:w-10 h-8 md:h-10 self-start"
56+
/>
57+
<p className="text-gray-700 mt-2 text-sm md:text-base">
58+
{testimonial.feedback}
59+
</p>
60+
<div className="flex items-center mt-4 space-x-2 md:space-x-3">
61+
<img
62+
src={testimonial.image}
63+
alt={testimonial.name}
64+
className="w-10 md:w-12 h-10 md:h-12 rounded-full"
65+
/>
66+
<div>
67+
<h3 className="text-md md:text-lg font-semibold text-gray-900">
68+
{testimonial.name}
69+
</h3>
70+
<p className="text-xs md:text-sm text-gray-500">
71+
{testimonial.role}
72+
</p>
6173
</div>
62-
))}
63-
</Slider>
74+
</div>
75+
</div>
6476
</div>
65-
66-
77+
))}
78+
</Slider>
79+
</div>
6780
<div className="h-6"></div> {/* Creates a gap */}
68-
6981
<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>
82+
<Slider {...settings2}>
83+
{testimonials.map((testimonial) => (
84+
<div key={testimonial.id} className="px-2 md:px-4">
85+
<div className="bg-white rounded-xl p-6 flex flex-col items-center text-center min-h-[250px] h-auto w-full md:w-[350px]">
86+
<img
87+
src={stats.apostrophie}
88+
alt="double-quotes"
89+
className="w-8 md:w-10 h-8 md:h-10 self-start"
90+
/>
91+
<p className="text-gray-700 mt-2 text-sm md:text-base">
92+
{testimonial.feedback}
93+
</p>
94+
<div className="flex items-center mt-4 space-x-2 md:space-x-3">
95+
<img
96+
src={testimonial.image}
97+
alt={testimonial.name}
98+
className="w-10 md:w-12 h-10 md:h-12 rounded-full"
99+
/>
100+
<div>
101+
<h3 className="text-md md:text-lg font-semibold text-gray-900">
102+
{testimonial.name}
103+
</h3>
104+
<p className="text-xs md:text-sm text-gray-500">
105+
{testimonial.role}
106+
</p>
92107
</div>
93-
))}
94-
</Slider>
108+
</div>
109+
</div>
95110
</div>
96-
97-
111+
))}
112+
</Slider>
113+
</div>
98114
</div>
99115
</div>
100116
);

0 commit comments

Comments
 (0)