Skip to content

Commit

Permalink
Merge pull request #14 from DevaduttM/main
Browse files Browse the repository at this point in the history 
'Why Participate' redesign
  • Loading branch information
@niyashiyas
niyashiyas authored Nov 15, 2024
2 parents f69381b + 0347624 commit fb88b0c
Show file tree
Hide file tree
Showing 7 changed files with 239 additions and 39 deletions.
Binary file added src/app/assets/WhyParticipate/arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/WhyParticipate/arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/WhyParticipate/bgimg2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Contact/ContactCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ContactCard = ({details}) => {
const childVariants = {
visible: {
opacity: 1,
y: -15,
y: -10,
transition: { duration: 0.5 }
},
hidden: {
Expand Down
21 changes: 11 additions & 10 deletions src/components/WhyParticipate/InfoCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@

const InfoCard = ({
title,
text,
gradient = "from-[#3b48f9] to-[#a73ffa]",
color="text-white"
}) => {
return (
<div className="flex justify-center items-center ">
<div className="flex flex-col gap-2 w-96">
<div className={`py-10 px-8 bg-gradient-to-r ${gradient}`}>
<h3 className={`text-3xl font-[500] tracking-wide ${color}`}>
{title}
// <div className=" cardbgdiv flex justify-center items-center flex-shrink-0 ">
// <div className="flex flex-col gap-2 w-[83%] ">
<div className={` cardcontainer1 rounded-[20px] flex flex-col h-[600px] items-center justify-center py-10 px-8 border-[0.2px] border-solid border-[#9291918f] backdrop-blur-[10px] bg-opacity-50 backdrop-saturate-[80%] bg-[rgba(255,255,255,0.1)] `} >
<h3 className={`text-3xl font-[500] mt-[20px] tracking-wide ${color}`}>
{title}
</h3>
<div className="flex rounded-b-[10px] relative py-10 px-8 gap-10 min-h-[80%] rounded-[12px] ">
<span className={`absolute w-[80%] h-[1px] mt-[10px] bg-white`} />
<p className="mt-[50px] text-xl font-[400] text-justify ">{text}</p>
</div>
<div className="flex relative py-10 px-8 bg-[#1a1a1a] gap-10 min-h-72">
<span className={`absolute w-14 h-[2px] bg-gradient-to-r ${gradient}`} />
<p className="mt-10 text-xl font-[400] ">{text}</p>
</div>
</div>
</div>
// </div>
// </div>
);
};

Expand Down
109 changes: 109 additions & 0 deletions src/components/WhyParticipate/WhyParticipate.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
@font-face{
font-family: 'neue';
src: url(../../assets/fonts/BaseNeue/BaseNeue-Black.woff);
}

.titleh2{
font-family: 'neue';
}

.swiper-button-next{
position: absolute;
color: #fff;
height: 50px;
width: 50px;
background-image: url(../../assets/WhyParticipate/arrow.png);
cursor: pointer;
z-index: 10;
display: flex;
top: 50%;
right: -10px;
transition: 0.4s ease-in-out;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
scale: 1.1;
}

.cardcontainer1{
border: 5px solid #fff;
}

/* .cardcontainer1:hover{
scale: 1.02
} */

.swiper-button-prev{
position: absolute;
color: #fff;
height: 50px;
width: 50px;
background-image: url(../../assets/WhyParticipate/arrow.png);
transform: rotate(180deg);
cursor: pointer;
z-index: 10;
display: flex;
top: 50%;
left: -10px;
transition: 0.4s ease-in-out;
}

.cardbgdiv{
width: fit-content;
padding: 0;
margin: 0;
}



/* .cardcontainer1{
box-shadow: 0px 0px 20px #ffffff4d;
} */

.main-container{
/* background-image: url(../../assets/WhyParticipate/bg2.jpg); */
/* background-image: linear-gradient(130deg, #1515924d, #1109254d); */
background-image: url(../../assets/WhyParticipate/bgimg2.png);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
}

.cardcontainer1{
box-shadow: 20px 0px 50px #0000002a,
-20px 0 50px #0000002a;
/* animation: bright-dim-border 5s infinite; */
backdrop-filter: blur(10px);
}

/* @keyframes bright-dim-border {
0% {
border: 0.1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
}
50% {
border: 0.2px solid rgba(255, 255, 255, 1);
box-shadow: 0 0 3px rgba(255, 255, 255, 1);
}
100% {
border: 0.1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
}
} */


@media (max-width: 768px) {
.swiper-button-next,
.swiper-button-prev{
height: 30px;
width: 30px;
background-size: contain;
}

.cardcontainer1{
width: 90%;
height: 500px;
}
}
146 changes: 118 additions & 28 deletions src/components/WhyParticipate/WhyParticipate.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import React, { useState, useRef, useEffect } from "react";
import InfoCard from "./InfoCard";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import { EffectCoverflow, Pagination, Navigation, Autoplay } from 'swiper/modules';
// import 'swiper/swiper-bundle.min.css';
import './WhyParticipate.css'



const WhyParticipate = () => {
const [activeIndex, setActiveIndex] = useState(0);
const [translateX, setTranslateX] = useState(0);
Expand All @@ -23,7 +33,7 @@ const WhyParticipate = () => {
title: "Mentor Support",
text: "Gain insights and guidance from experienced mentors. They'll be there to help you overcome challenges, refine your ideas, and maximize your learning experience throughout the hackathon.",
gradient: "from-[#5bd8fa] to-[#00f982]",
color: "text-black",
color: "text-white",
},
{
title: "Goodies and Swag",
Expand Down Expand Up @@ -69,49 +79,129 @@ const WhyParticipate = () => {
};

return (
<div className="container max-w-full md:max-w-[70%] mx-auto py-8">
<h2 className="text-3xl text-left text-white py-5 tracking-wide">
Why Participate ?
</h2>
<div className="relative overflow-hidden" ref={sliderRef}>
<div
className="flex transition-transform duration-300 ease-in-out"
style={{
transform: `translateX(${translateX}px)`,
width: `${totalWidth}px`,
// <div className="container max-w-full md:max-w-[70%] mx-auto py-8">
// <h2 className="text-3xl text-left text-white py-5 tracking-wide">
// Why Participate ?
// </h2>
// <div className="relative overflow-hidden" ref={sliderRef}>
// <div
// className="flex transition-transform duration-300 ease-in-out"
// style={{
// transform: `translateX(${translateX}px)`,
// width: `${totalWidth}px`,
// }}
// >
// {cards.map((card, index) => (
// <div
// key={index}
// className="flex-shrink-0 h-full "
// style={{ width: `${cardWidth}px` }}
// >
// <div className="px-2">
// <InfoCard
// title={card.title}
// text={card.text}
// gradient={card.gradient}
// color={card.color}
// />
// </div>
// </div>
// ))}
// </div>
// <button
// onClick={() => handleSlide(1)}
// className="absolute left-0 top-1/2 -translate-y-1/2 p-2 rounded-full shadow-md z-10 scale-150"
// >
// <FaChevronLeft />
// </button>
// <button
// onClick={() => handleSlide(-1)}
// className="absolute right-0 top-1/2 -translate-y-1/2 p-2 rounded-full shadow-md z-10 scale-150"
// >
// <FaChevronRight />
// </button>
// </div>
// </div>

<>
<div className="main-container">


<div className="container h-[100vh] block place-content-center max-w-[95%] md:max-w-[70%] mx-auto py-8">
<h2 className=" titleh2 text-5xl mb-[50px] text-center text-white py-5 tracking-wide ">
WHY PARTICIPATE ?
</h2>

<Swiper
effect={'coverflow'}
grabCursor={true}
navigation={true}
centeredSlides={true}
// slidesPerView={3}
loop={true}
coverflowEffect={{
rotate: 0,
stretch: 0,
depth: 150,
modifier: 2.5,
slideShadows: false,
}}
>
{cards.map((card, index) => (
// autoplay={{
// delay: 5000,
// disableOnInteraction: false,
// }}

modules={[EffectCoverflow, Pagination, Navigation, Autoplay]}
className="mySwiper"
slidesPerView={1}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 10,
},
768: {
slidesPerView: 1,
// spaceBetween: 40,
},
800: {
slidesPerView: 2,
spaceBetween: 20,
},
1024: {
slidesPerView: 2,
spaceBetween: 30,
},
1280: {
slidesPerView: 3,
spaceBetween: 30,
},
}}
>

{cards.map((card, index) => (
<div
key={index}
className="flex-shrink-0 h-full "
style={{ width: `${cardWidth}px` }}
>
<div className="px-2">
<SwiperSlide>

<InfoCard
title={card.title}
text={card.text}
gradient={card.gradient}
color={card.color}
/>
/>
</SwiperSlide>
</div>
</div>
))}
</div>
<button
onClick={() => handleSlide(1)}
className="absolute left-0 top-1/2 -translate-y-1/2 p-2 rounded-full shadow-md z-10 scale-150"
>
<FaChevronLeft />
</button>
<button
onClick={() => handleSlide(-1)}
className="absolute right-0 top-1/2 -translate-y-1/2 p-2 rounded-full shadow-md z-10 scale-150"
>
<FaChevronRight />
</button>
</Swiper>

</div>
</div>
</div>
</>
);
};

Expand Down

0 comments on commit fb88b0c

Please sign in to comment.