From 8a9352d0cf08f08a50efbf783afaa30d4930b216 Mon Sep 17 00:00:00 2001 From: Naitik khoriya Date: Mon, 21 Oct 2024 22:54:37 +0530 Subject: [PATCH 1/2] feat: Add Hover Effect on cards of team section. #34 --- frontend/src/components/CanvasLoader.jsx | 41 ++-- frontend/src/components/Carousel.jsx | 69 ++++-- frontend/src/components/Footer.jsx | 19 +- frontend/src/components/HackerRoom.jsx | 244 ++++++++++---------- frontend/src/components/Hero.jsx | 99 ++++---- frontend/src/components/Main.jsx | 8 +- frontend/src/components/Navbar.jsx | 10 +- frontend/src/components/TeamSection.jsx | 8 +- frontend/src/components/Testimonials.jsx | 67 +++--- frontend/src/components/style/carousel2.css | 177 +++++++------- 10 files changed, 402 insertions(+), 340 deletions(-) diff --git a/frontend/src/components/CanvasLoader.jsx b/frontend/src/components/CanvasLoader.jsx index 68a54d9..9968804 100644 --- a/frontend/src/components/CanvasLoader.jsx +++ b/frontend/src/components/CanvasLoader.jsx @@ -1,26 +1,33 @@ -import { Html, useProgress} from '@react-three/drei' -import React from 'react' +import { Html, useProgress } from "@react-three/drei"; +import React from "react"; // import { toFixed } from '@react-three/drei'; const CanvasLoader = () => { - const { progress } = useProgress(); + const { progress } = useProgress(); return ( + +

- -

- { progress != 0 ? `${progress.toFixed(2)}%` : 'Loading...'} -

+ > + {progress != 0 ? `${progress.toFixed(2)}%` : "Loading..."} +

- ) -} + ); +}; -export default CanvasLoader \ No newline at end of file +export default CanvasLoader; diff --git a/frontend/src/components/Carousel.jsx b/frontend/src/components/Carousel.jsx index b0dbe08..6ec3a82 100644 --- a/frontend/src/components/Carousel.jsx +++ b/frontend/src/components/Carousel.jsx @@ -63,16 +63,40 @@ // }; // export default Carousel; -import React, { useState, useEffect, useRef } from 'react'; -import './style/carousel2.css'; +import React, { useState, useEffect, useRef } from "react"; +import "./style/carousel2.css"; import { FaArrowLeft, FaArrowRight } from "react-icons/fa"; const Carousel = () => { const [carouselItems, setCarouselItems] = useState([ - { id: 1, image: '../image/event.JPG', author: '', title: 'devXsphere gaianet', topic: 'meetup' }, - { id: 2, image: '../image/event 2.JPG', author: 'Author 2', title: 'Title 2', topic: 'Topic 2' }, - { id: 3, image: '../image/event 3.JPG', author: 'Author 3', title: 'Title 3', topic: 'Topic 3' }, - { id: 4, image: '../image/event4.jpg', author: 'Author 4', title: 'Title 4', topic: 'Topic 4' } + { + id: 1, + image: "../image/event.JPG", + author: "", + title: "devXsphere gaianet", + topic: "meetup", + }, + { + id: 2, + image: "../image/event 2.JPG", + author: "Author 2", + title: "Title 2", + topic: "Topic 2", + }, + { + id: 3, + image: "../image/event 3.JPG", + author: "Author 3", + title: "Title 3", + topic: "Topic 3", + }, + { + id: 4, + image: "../image/event4.jpg", + author: "Author 4", + title: "Title 4", + topic: "Topic 4", + }, ]); const timeRunning = 1000; @@ -83,25 +107,28 @@ const Carousel = () => { useEffect(() => { const runNextAuto = setTimeout(() => { - showSlider('next'); + showSlider("next"); }, timeAutoNext); return () => clearTimeout(runNextAuto); }, [carouselItems]); const showSlider = (type) => { - if (type === 'next') { + if (type === "next") { setCarouselItems((prevItems) => [...prevItems.slice(1), prevItems[0]]); - carouselRef.current.classList.add('next'); + carouselRef.current.classList.add("next"); } else { - setCarouselItems((prevItems) => [prevItems[prevItems.length - 1], ...prevItems.slice(0, -1)]); - carouselRef.current.classList.add('prev'); + setCarouselItems((prevItems) => [ + prevItems[prevItems.length - 1], + ...prevItems.slice(0, -1), + ]); + carouselRef.current.classList.add("prev"); } clearTimeout(timeRef.current); timeRef.current = setTimeout(() => { - carouselRef.current.classList.remove('next'); - carouselRef.current.classList.remove('prev'); + carouselRef.current.classList.remove("next"); + carouselRef.current.classList.remove("prev"); }, timeRunning); }; @@ -132,8 +159,20 @@ const Carousel = () => { {/* Carousel Controls */}
- - + +
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index 9059d77..8f5f14b 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -8,35 +8,40 @@ export default function Footer() { { link: "https://www.linkedin.com/company/DevXsphere", icon: , - className: " text-white hover:bg-blue-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110" + className: + " text-white hover:bg-blue-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110", }, { link: "https://www.facebook.com", icon: , - className: " text-white hover:bg-blue-500 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110" + className: + " text-white hover:bg-blue-500 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110", }, { link: "https://x.com/DevXsphere", icon: , - className: " text-white hover:bg-gray-800 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110" + className: + " text-white hover:bg-gray-800 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110", }, { link: "https://www.instagram.com/devXsphere/", icon: , - className: " text-white hover:bg-gradient-to-r from-yellow-500 via-pink-500 to-purple-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110" + className: + " text-white hover:bg-gradient-to-r from-yellow-500 via-pink-500 to-purple-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110", }, { link: "https://mastodon.social", icon: , - className: " text-white hover:bg-purple-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110" + className: + " text-white hover:bg-purple-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110", }, { link: "https://zulip.com", icon: , - className: " text-white hover:bg-green-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110" + className: + " text-white hover:bg-green-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110", }, ]; - return (