Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

navigation arrow fixed for sponsor and testimonial. #30

Merged
merged 18 commits into from
Apr 10, 2024
Merged

navigation arrow fixed for sponsor and testimonial. #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c90a6de
Merge pull request #3 from intelowlproject/develop
mlodic Jul 20, 2023
bb01aa0
Merge pull request #4 from intelowlproject/develop
mlodic Jul 20, 2023
8cc00f5
Merge pull request #5 from intelowlproject/develop
mlodic Jul 20, 2023
6167e9a
Merge pull request #6 from intelowlproject/develop
mlodic Aug 4, 2023
42fb255
Merge pull request #7 from intelowlproject/develop
mlodic Aug 4, 2023
f0a50a7
Merge pull request #8 from intelowlproject/develop
mlodic Aug 27, 2023
4ef68ff
Merge pull request #9 from intelowlproject/develop
mlodic Aug 28, 2023
0226646
Merge pull request #10 from intelowlproject/develop
mlodic Aug 28, 2023
580c0b2
Merge pull request #12 from intelowlproject/develop
abheektripathy Sep 6, 2023
655410f
Fix invalid import in contentlayer config
SyedAhkam Sep 7, 2023
30d9ae9
Merge pull request #13 from SyedAhkam/fix-invalid-import
abheektripathy Sep 7, 2023
f40bfc7
Merge pull request #20 from intelowlproject/develop
mlodic Jan 5, 2024
7d2074d
Merge pull request #23 from intelowlproject/develop
mlodic Mar 25, 2024
1b55223
Merge pull request #26 from intelowlproject/develop
mlodic Mar 28, 2024
bb268af
Update globals.css
keshav861 Apr 2, 2024
c2f9713
Merge pull request #28 from intelowlproject/develop
mlodic Apr 2, 2024
71e232f
Merge branch 'intelowlproject:main' into main
keshav861 Apr 4, 2024
ea96495
navigation arrows fixed
keshav861 Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 50 additions & 39 deletions components/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@
import { TestimonialData } from "../constants/testimonialsdata";
import { Sponsordata } from "../constants/sponsordata";
import Link from "next/link";
import { Autoplay } from "swiper";
import SwiperCore, { Autoplay, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/swiper-bundle.css";

interface sliderProps {
SwiperCore.use([Autoplay, Navigation]);

interface SliderProps {
isTestimonial: boolean;
}

export default function Slider(props: sliderProps) {
export default function Slider(props: SliderProps) {
const { isTestimonial } = props;

return (
<>
{isTestimonial ? (
<div id="testimonials-element" className="w-[100%]">
<div id="testimonials-element" className="w-[100%] relative">
<div className="mx-auto max-w-screen-xl py-16 sm:px-6 lg:px-8">
<Swiper
spaceBetween={25}
Expand All @@ -40,49 +43,48 @@ export default function Slider(props: sliderProps) {
delay: 4000,
disableOnInteraction: false,
}}
modules={[Autoplay]}
navigation={{
prevEl: ".swiper-button-prev",
nextEl: ".swiper-button-next",
}}
className="h-full"
>
{TestimonialData.map((testimonial, index) => {
return (
<div key={index} className="swiper-slide h-full bg-white">
<SwiperSlide className="bg-[#16161D] md:!h-[30rem] lg:!h-[30rem] p-8 xl:p-8 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-row gap-4 text-left items-start">
<figcaption className="flex justify-center items-center space-x-3">
<img
className="w-12 h-12 rounded-full"
src="/images/favicon.png"
alt="profile picture"
/>
<div className="space-y-0.5 font-medium dark:text-white text-left">
<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>
</figcaption>
{TestimonialData.map((testimonial, index) => (
<SwiperSlide key={index} className="bg-[#16161D] md:!h-[30rem] lg:!h-[30rem] p-8 xl:p-8 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-row gap-4 text-left items-start">
<figcaption className="flex justify-center items-center space-x-3">
<img
className="w-12 h-12 rounded-full"
src="/images/favicon.png"
alt="profile picture"
/>
<div className="space-y-0.5 font-medium dark:text-white text-left">
<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>
</SwiperSlide>
</figcaption>
</div>
</div>
);
})}
</SwiperSlide>
))}
</Swiper>
<div className="swiper-button-next"></div>
<div className="swiper-button-prev"></div>
</div>
</div>
) : (
<div id="sponsor-element" className="w-[90%]">
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8 relative">
<Swiper
spaceBetween={25}
breakpoints={{
Expand All @@ -103,13 +105,20 @@ export default function Slider(props: sliderProps) {
delay: 4000,
disableOnInteraction: false,
}}
modules={[Autoplay]}
navigation={{
prevEl: ".swiper-button-prev",
nextEl: ".swiper-button-next",
}}
className="h-full"
>
{Sponsordata.map((sponsor, index) => {
return (
<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>
Expand Down Expand Up @@ -138,6 +147,8 @@ export default function Slider(props: sliderProps) {
);
})}
</Swiper>
<div className="swiper-button-next ssn"></div>
<div className="swiper-button-prev ssp"></div>
</div>
</div>
)}
Expand Down
64 changes: 55 additions & 9 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,35 +22,81 @@

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
background: linear-gradient(to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
overflow-x: hidden;
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
overflow-x: hidden;

}

body::-webkit-scrollbar {
width: 8px;
}

body::-webkit-scrollbar-track {
background-color: #0E1016;

}

body::-webkit-scrollbar-thumb {
background-color: #2c2c2c;

}

body::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
.prose{

.prose {
display: grid;
justify-content: center;
align-items: center;
text-align: justify;
max-width: 1200px;
}
.ssp,
.ssn {
width: -700px !important;
color: white !important;
z-index: 10 !important;
transition: all 0.3s ease !important;
cursor: pointer;
}
.ssp:after{
position: absolute !important;
left: -100px !important;
}
.ssn:after{
position: absolute !important;
right: -100px !important;
}
.swiper-button-prev,
.swiper-button-next {
color: white !important;
z-index: 10 !important;
transition: all 0.3s ease !important;
cursor: pointer;
}
.swiper-button-prev {
left: 100px !important;
}

.swiper-button-next {
right: 90px !important;
}

.swiper-container {
position: relative !important;
}

.swiper-wrapper {
overflow: visible !important;
}


@media (max-width: 768px) {
.swiper-button-prev,
.swiper-button-next {
display: none !important;
}
}