Skip to content

Commit

Permalink
fixed testimonial css
Browse files Browse the repository at this point in the history
  • Loading branch information
@abheektripathy
abheektripathy committed Jul 20, 2023
1 parent b02e39b commit 5781ef6
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 46 deletions.
95 changes: 53 additions & 42 deletions components/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { TestimonialData } from "../constants/testimonialsdata";
import { Sponsordata } from "../constants/sponsordata";
import Link from "next/link";
import { Autoplay, Pagination, Navigation } from "swiper";
import { Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

Expand All @@ -23,15 +23,15 @@ export default function Slider(props: sliderProps) {
<Swiper
spaceBetween={25}
breakpoints={{
'@0.00': {
"@0.00": {
slidesPerView: 1,
spaceBetween: 10,
},
'@0.75': {
"@0.75": {
slidesPerView: 2,
spaceBetween: 20,
},
'@1.00': {
"@1.00": {
slidesPerView: 3,
spaceBetween: 40,
},
Expand All @@ -46,20 +46,31 @@ export default function Slider(props: sliderProps) {
{TestimonialData.map((testimonial, index) => {
return (
<div key={index} className="swiper-slide h-full bg-white">
<SwiperSlide className="bg-[#16161D] md:!h-[30rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
<p className="relative mt-4 text-gray-500">
<span className="text-xl">&ldquo;</span>
{testimonial.review}
<span className="text-xl">&rdquo;</span>
</p>
<div className="flex items-center gap-4">
<div className="text-lg mt-14">
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
{testimonial.name}
</p>
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-lg">
{testimonial.designation}
</p>
<SwiperSlide className="bg-[#16161D] md:!h-[35rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
<div className="h-full w-full flex flex-col justify-between">
<p className="relative mt-4 text-gray-500">
<span className="text-xl">&ldquo;</span>
{testimonial.review.length <= 300
? testimonial.review
: testimonial.review.slice(0, 300) + "..."}
<span className="text-xl">&rdquo;</span>
</p>
<div className="flex flex-col gap-4 text-left">
<img
className="items-center justify-center self-center py-5"
src={testimonial.companylogo}
width={200}
height={50}
alt="sponsor-image"
></img>
<div className="text-lg text-left mt-14">
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
{testimonial.name}
</p>
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md text-left">
{testimonial.designation}
</p>
</div>
</div>
</div>
</SwiperSlide>
Expand All @@ -75,15 +86,15 @@ export default function Slider(props: sliderProps) {
<Swiper
spaceBetween={25}
breakpoints={{
'@0.00': {
"@0.00": {
slidesPerView: 1,
spaceBetween: 10,
},
'@0.75': {
"@0.75": {
slidesPerView: 2,
spaceBetween: 20,
},
'@1.00': {
"@1.00": {
slidesPerView: 3,
spaceBetween: 40,
},
Expand All @@ -99,29 +110,29 @@ export default function Slider(props: sliderProps) {
<div key={index} className="swiper-slide">
<SwiperSlide className="bg-[#16161D] md:!h-[35rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
<div className="flex flex-col items-center justify-around space-y-7 ">
<p className="relative mt-4 text-gray-500">
{sponsor.companydesc}
</p>
<Link href={sponsor.companylink}>
<img
className="items-center justify-center self-center"
src={sponsor.companylogo}
width={200}
height={50}
alt="sponsor-image"
></img>
</Link>
<div className="flex items-center gap-4">
<div className="text-lg text-center">
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-lg">
{sponsor.companyname}
</p>
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md">
{sponsor.companylevel}
</p>
<p className="relative mt-4 text-gray-500">
{sponsor.companydesc}
</p>
<Link href={sponsor.companylink}>
<img
className="items-center justify-center self-center"
src={sponsor.companylogo}
width={200}
height={50}
alt="sponsor-image"
></img>
</Link>
<div className="flex items-center gap-4">
<div className="text-lg text-center">
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-lg">
{sponsor.companyname}
</p>
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md">
{sponsor.companylevel}
</p>
</div>
</div>
</div>
</div>
</SwiperSlide>
</div>
);
Expand Down
11 changes: 7 additions & 4 deletions constants/testimonialsdata.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,37 @@ export const TestimonialData = [
{

name: "Kostas Tsialemis",
designation: "Cyber Threat Intelligence Analyst",
designation: "Threat Intelligence Analyst",
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.",
companylogo: "images/docker_logo.png",

},
{

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

name: "Appaji Chintimi",
designation: "Security Enthusiast",
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!",

companylogo: "images/docker_logo.png",
},
{

name: "KunYu Chen",
designation: "Founder of Quark Engine",
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!",

companylogo: "images/docker_logo.png",
},
{

name: "Aditya Narayan Sinha",
designation: "Software Developer",
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.",

companylogo: "images/docker_logo.png",
}
]

0 comments on commit 5781ef6

Please sign in to comment.