Skip to content

Commit 5781ef6

Browse files
abheektripathyabheektripathy
committed
fixed testimonial css
1 parent b02e39b commit 5781ef6

File tree

2 files changed

+60
-46
lines changed

2 files changed

+60
-46
lines changed

‎components/Slider.tsx‎

Lines changed: 53 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { TestimonialData } from "../constants/testimonialsdata";
55
import { Sponsordata } from "../constants/sponsordata";
66
import Link from "next/link";
7-
import { Autoplay, Pagination, Navigation } from "swiper";
7+
import { Autoplay } from "swiper";
88
import { Swiper, SwiperSlide } from "swiper/react";
99
import "swiper/css";
1010

@@ -23,15 +23,15 @@ export default function Slider(props: sliderProps) {
2323
<Swiper
2424
spaceBetween={25}
2525
breakpoints={{
26-
'@0.00': {
26+
"@0.00": {
2727
slidesPerView: 1,
2828
spaceBetween: 10,
2929
},
30-
'@0.75': {
30+
"@0.75": {
3131
slidesPerView: 2,
3232
spaceBetween: 20,
3333
},
34-
'@1.00': {
34+
"@1.00": {
3535
slidesPerView: 3,
3636
spaceBetween: 40,
3737
},
@@ -46,20 +46,31 @@ export default function Slider(props: sliderProps) {
4646
{TestimonialData.map((testimonial, index) => {
4747
return (
4848
<div key={index} className="swiper-slide h-full bg-white">
49-
<SwiperSlide className="bg-[#16161D] md:!h-[30rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
50-
<p className="relative mt-4 text-gray-500">
51-
<span className="text-xl">&ldquo;</span>
52-
{testimonial.review}
53-
<span className="text-xl">&rdquo;</span>
54-
</p>
55-
<div className="flex items-center gap-4">
56-
<div className="text-lg mt-14">
57-
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
58-
{testimonial.name}
59-
</p>
60-
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-lg">
61-
{testimonial.designation}
62-
</p>
49+
<SwiperSlide className="bg-[#16161D] md:!h-[35rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
50+
<div className="h-full w-full flex flex-col justify-between">
51+
<p className="relative mt-4 text-gray-500">
52+
<span className="text-xl">&ldquo;</span>
53+
{testimonial.review.length <= 300
54+
? testimonial.review
55+
: testimonial.review.slice(0, 300) + "..."}
56+
<span className="text-xl">&rdquo;</span>
57+
</p>
58+
<div className="flex flex-col gap-4 text-left">
59+
<img
60+
className="items-center justify-center self-center py-5"
61+
src={testimonial.companylogo}
62+
width={200}
63+
height={50}
64+
alt="sponsor-image"
65+
></img>
66+
<div className="text-lg text-left mt-14">
67+
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
68+
{testimonial.name}
69+
</p>
70+
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md text-left">
71+
{testimonial.designation}
72+
</p>
73+
</div>
6374
</div>
6475
</div>
6576
</SwiperSlide>
@@ -75,15 +86,15 @@ export default function Slider(props: sliderProps) {
7586
<Swiper
7687
spaceBetween={25}
7788
breakpoints={{
78-
'@0.00': {
89+
"@0.00": {
7990
slidesPerView: 1,
8091
spaceBetween: 10,
8192
},
82-
'@0.75': {
93+
"@0.75": {
8394
slidesPerView: 2,
8495
spaceBetween: 20,
8596
},
86-
'@1.00': {
97+
"@1.00": {
8798
slidesPerView: 3,
8899
spaceBetween: 40,
89100
},
@@ -99,29 +110,29 @@ export default function Slider(props: sliderProps) {
99110
<div key={index} className="swiper-slide">
100111
<SwiperSlide className="bg-[#16161D] md:!h-[35rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
101112
<div className="flex flex-col items-center justify-around space-y-7 ">
102-
<p className="relative mt-4 text-gray-500">
103-
{sponsor.companydesc}
104-
</p>
105-
<Link href={sponsor.companylink}>
106-
<img
107-
className="items-center justify-center self-center"
108-
src={sponsor.companylogo}
109-
width={200}
110-
height={50}
111-
alt="sponsor-image"
112-
></img>
113-
</Link>
114-
<div className="flex items-center gap-4">
115-
<div className="text-lg text-center">
116-
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-lg">
117-
{sponsor.companyname}
118-
</p>
119-
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md">
120-
{sponsor.companylevel}
121-
</p>
113+
<p className="relative mt-4 text-gray-500">
114+
{sponsor.companydesc}
115+
</p>
116+
<Link href={sponsor.companylink}>
117+
<img
118+
className="items-center justify-center self-center"
119+
src={sponsor.companylogo}
120+
width={200}
121+
height={50}
122+
alt="sponsor-image"
123+
></img>
124+
</Link>
125+
<div className="flex items-center gap-4">
126+
<div className="text-lg text-center">
127+
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-lg">
128+
{sponsor.companyname}
129+
</p>
130+
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md">
131+
{sponsor.companylevel}
132+
</p>
133+
</div>
122134
</div>
123135
</div>
124-
</div>
125136
</SwiperSlide>
126137
</div>
127138
);

‎constants/testimonialsdata.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,37 @@ export const TestimonialData = [
22
{
33

44
name: "Kostas Tsialemis",
5-
designation: "Cyber Threat Intelligence Analyst",
5+
designation: "Threat Intelligence Analyst",
66
review: "As a Threat Intel Analyst, I use IntelOwl daily to expand the context of various indicators with ease by simply querying one platform instead of multiple. IntelOwl has made my workflow faster as I now have more time to concentrate on the analysis rather than collecting the data.",
7+
companylogo: "images/docker_logo.png",
8+
79
},
810
{
911

1012
name: "Simone Berni",
1113
designation: "Threat Intelligence Engineer",
1214
review: "IntelOwl has the most welcoming community that I met in a opensource project, with weekly updates and real world use cases",
15+
companylogo: "images/docker_logo.png",
1316
},
1417
{
1518

1619
name: "Appaji Chintimi",
1720
designation: "Security Enthusiast",
1821
review: "I have been in development and also used IntelOwl, for some testing purposes. The dashboard is pretty amazing and self-explanatory. I loved the built-in dark theme. And command-line client is no smaller than that. I do think you'll be amazed by the look and feel of pyintelowl. Give both a try!",
19-
22+
companylogo: "images/docker_logo.png",
2023
},
2124
{
2225

2326
name: "KunYu Chen",
2427
designation: "Founder of Quark Engine",
2528
review: "IntelOwl is a one-stop solution for all to get intelligence data during threat hunting. It is easy to use with well-designed UI/UX. And it is useful since many robust analyzers are integrated into this solution. As a threat researcher and an open source lover, I highly recommend IntelOwl!",
26-
29+
companylogo: "images/docker_logo.png",
2730
},
2831
{
2932

3033
name: "Aditya Narayan Sinha",
3134
designation: "Software Developer",
3235
review: "IntelOwl has a very cool and driven software team backing it up. It has built itself sustainably over GSoC participants making it closer to the OSS community.",
33-
36+
companylogo: "images/docker_logo.png",
3437
}
3538
]

0 commit comments

Comments
 (0)