Skip to content

Commit

Permalink
move venue partner up + infinite tracks
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhaskar1001101
bhaskar1001101 committed Jul 22, 2024
1 parent a44b013 commit 88b9c80
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 10 deletions.
12 changes: 6 additions & 6 deletions src/components/Sponsors/Sponsors.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,13 @@ const Sponsors = () => {
</div>
</div>

{/* CERTIFICATE PARTNER */}
{/* VENUE PARTNER */}
<div className='pt-3 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto border-dashed border-[#5FA6FF] border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-5 lg:gap-6'>
<h1 className='font-vt323 font-medium text-[#5FA6FF] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>CERTIFICATE PARTNER</h1>
<h1 className='font-vt323 font-medium text-[#5FA6FF] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>VENUE PARTNER</h1>
<div className='flex flex-wrap max-sm:flex-col items-center justify-center gap-6 sm:gap-16 md:px-12 2xl:px-24 max-sm:gap-y-8'>
{/* <img src={githubLogo} alt="github" className='w-[16vw] h-[6vw] sm:w-[12vw] sm:h-[5vw]' />
<img src={jinaLogo} alt="jina" className='w-[16vw] h-[7vw] sm:w-[12vw] sm:h-[5vw]' /> */}
<Link to='https://givemycertificate.com/'><img src={certificateLogo} alt="echo3D" className='w-[40vw] sm:w-[18vw] md:w-[18vw]' /></Link>
<Link to='https://risefoundationiiser.co.in/'><img src={riseLogo} alt="devfolio" width={1000} height={1000} className='w-[30vw] sm:w-[13vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
</div>
</div>

Expand All @@ -143,12 +143,12 @@ const Sponsors = () => {
</div>
</div>

{/* PLATFORM PARTNER */}
{/* CERTIFICATE PARTNER */}
<div className='pt-3 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto flex flex-col items-center justify-center gap-5 lg:gap-6'>
<h1 className='font-vt323 font-medium text-[#e29b29] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>VENUE PARTNER</h1>
<h1 className='font-vt323 font-medium text-[#e29b29] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>CERTIFICATE PARTNER</h1>
<div className='flex items-center justify-center gap-5 sm:gap-20 max-sm:mb-4'>
{/* <Link to='https://www.avax.network/'><img src={avalancheLogo} alt="devfolio" width={1000} height={1000} className='w-[50vw] sm:w-[30vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link> */}
<Link to='https://0x.day/'><img src={riseLogo} alt="devfolio" width={1000} height={1000} className='w-[30vw] sm:w-[13vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
<Link to='https://givemycertificate.com/'><img src={certificateLogo} alt="echo3D" className='w-[40vw] sm:w-[18vw] md:w-[18vw]' /></Link>
</div>
</div>
</div>
Expand Down
29 changes: 25 additions & 4 deletions src/components/Tracks/Tracks.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,34 @@ const Tracks = () => {
{ id: 5, title: 'WEB3', description: 'As part of this track, participants may explore decentralized finance (DeFi) applications, enabling seamless peer-to-peer financial transactions, decentralized marketplaces, and novel governance models. One can design secure and transparent systems that empower users with greater control over their digital assets. ', image: web3, card: web3_card},
{ id: 6, title: 'OPEN INNOVATION', description: 'The Open Innovation track offers limitless scope for creativity, encouraging participants to explore diverse ideas and solve real-world problems outside conventional boundaries. Let your imagination run wild and propose exciting solutions that can reform the world. ', image: open_innovation, card: open_innovation_card},
// Add more tracks here...
{ id: 7, title: 'MEDICAL', description: 'In this track, participants work on developing software solutions related to healthcare and medicine. They might build applications that help patients manage their health, or tools that assist healthcare providers in diagnosing and treating patients.', image: medical, card: medical_card },
{ id: 8, title: 'HARDWARE', description: 'The Hardware track emphasizes hands-on implementation and encourages teams to create detailed and innovative prototypes that showcase the functionality and feasibility of their ideas. Participants are encouraged to explore diverse challenges and develop hardware-based solutions that address these issues effectively. ', image: hardware, card: hardware_card},
{ id: 9, title: 'WILDLIFE', description: 'This track focuses on building software solutions that promote sustainability and protect the environment. Participants might create applications that help reduce waste, conserve energy, prevent illegal wildlife trade, or even provide early warning systems for natural calamities that can impact wildlife and their habitats. ', image: wildlife, card: wildlife_card},
{ id: 10, title: 'EDUCATION', description: 'The education track encourages participants to build software solutions that enhance the quality of education. Participants might develop applications that provide personalized learning experiences, improve access to education for disadvantaged communities, or help teachers and students collaborate more effectively. ', image: education, card: education_card},
{ id: 11, title: 'WEB3', description: 'As part of this track, participants may explore decentralized finance (DeFi) applications, enabling seamless peer-to-peer financial transactions, decentralized marketplaces, and novel governance models. One can design secure and transparent systems that empower users with greater control over their digital assets. ', image: web3, card: web3_card},
{ id: 12, title: 'OPEN INNOVATION', description: 'The Open Innovation track offers limitless scope for creativity, encouraging participants to explore diverse ideas and solve real-world problems outside conventional boundaries. Let your imagination run wild and propose exciting solutions that can reform the world. ', image: open_innovation, card: open_innovation_card},
];

const handleCardClick = (trackId) => {
setSelectedTrack(trackId);
};

var slider = document.getElementById('slider');
const moveRight = () => {
let brand=slider.getElementsByClassName('card')[0];
console.log(selectedTrack);

slider.scrollLeft += 164;
if(selectedTrack == 6) {
setTimeout(() => {
handleCardClick(1);
slider.scrollTo({left: 0, behavior: 'instant'});
}, 500);
}
}

useEffect(() => {

const handleMouseMove = (e) => {
const { innerWidth, innerHeight } = window;
const x = (e.clientX / innerWidth - 0.5) * 10; // Adjust the multiplier for sensitivity
Expand Down Expand Up @@ -61,7 +82,7 @@ const Tracks = () => {
<div className='lg:flex'>
<div className="track-section pl-12 xl:w-1/2 mr-5 mb-5 xl:mb-0" >
{selectedTrack ? (
<div>
<div className='track'>
<h2 className='text-5xl md:text-7xl xl:text-8xl my-4 md:my-12'>{trackData[selectedTrack - 1].title}</h2>
<p className='text-lg md:text-xl xl:text-2xl'>{trackData[selectedTrack - 1].description}</p>
</div>
Expand All @@ -70,16 +91,16 @@ const Tracks = () => {
)}
</div>
<div className="carousel flex items-center gap-5 h-fit self-end">
<img src={left_key} alt="" className='opacity-50 hover:opacity-100'onClick={() => {document.querySelector('.tracks-wrapper').scrollLeft -= 158}}/>
<div className='tracks-wrapper flex gap-5 lg:max-w-[480px] overflow-x-auto scroll-smooth no-scrollbar'>
<img src={left_key} alt="" className='opacity-50 hover:opacity-100'onClick={() => {document.querySelector('.tracks-wrapper').scrollLeft -= 164; if(selectedTrack > 1) handleCardClick(selectedTrack - 1)}}/>
<div className='tracks-wrapper flex gap-5 lg:max-w-[480px] overflow-x-auto scroll-smooth no-scrollbar' id='slider'>
{trackData.map((track) => (
<div key={track.id} className="card min-w-24 sm:min-w-36 grid place-items-center relative" onClick={() => handleCardClick(track.id)}>
<img src={track.card} alt="" className='opacity-70'/>
<h4 className='absolute text-lg md:text-2xl left-0 top-0 right-0 bottom-0 m-auto w h-fit text-center px-4'>{track.title}</h4>
</div>
))}
</div>
<img src={right_key} alt="" className='opacity-50 hover:opacity-100' onClick={() => {document.querySelector('.tracks-wrapper').scrollLeft += 158}}/>
<img src={right_key} alt="" className='opacity-50 hover:opacity-100' onClick={() => {moveRight(); handleCardClick((selectedTrack % 6) + 1)}}/>
</div>
</div>
</div>
Expand Down

0 comments on commit 88b9c80

Please sign in to comment.