diff --git a/index.html b/index.html index c615b80..efa3a9d 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,6 @@ -
diff --git a/package-lock.json b/package-lock.json index f887b9e..2468dd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@reduxjs/toolkit": "^2.0.1", "aos": "^2.3.4", "bootstrap": "^5.3.2", + "gsap": "^3.12.4", "framer-motion": "^10.18.0", "react": "^18.2.0", "react-bootstrap-icons": "^1.10.3", @@ -2777,6 +2778,11 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/gsap": { + "version": "3.12.4", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz", + "integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ==" + }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", diff --git a/package.json b/package.json index 787e41f..88c84df 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@reduxjs/toolkit": "^2.0.1", "aos": "^2.3.4", "bootstrap": "^5.3.2", + "gsap": "^3.12.4", "framer-motion": "^10.18.0", "react": "^18.2.0", "react-bootstrap-icons": "^1.10.3", diff --git a/src/App.jsx b/src/App.jsx index 504c4e3..eca3a8b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,10 @@ -import { BrowserRouter as Router, Routes, Route } from "react-router-dom" +import React, { useEffect } from 'react'; +import gsap from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Devmate from "./Pages/Devmate"; import Aos from "aos"; import "aos/dist/aos.css" -import React from "react"; import Header from "./Components/Header"; import Hero from "./Components/Hero"; import About from "./Components/About"; @@ -13,10 +15,23 @@ import Team from "./Components/Team"; import FAQs from "./Components/FAQs"; import ContactUs from "./Components/ContactUs"; import Footer from "./Components/Footer"; +import Circle from "./Components/Circle"; +gsap.registerPlugin(ScrollTrigger); + import useScript from "./Hooks/useScript"; + function App() { React.useEffect(() => { + gsap.to('body', { + backgroundColor: '#E2A9FF', + scrollTrigger: { + trigger: 'body', + start: 'top top', + end: 'bottom bottom', + scrub: true, + }, + }); Aos.init() }, []) useScript("/js/main.js") @@ -40,6 +55,7 @@ function Home() { <>
+ @@ -53,4 +69,5 @@ function Home() { ) } -export default App \ No newline at end of file +export default App + diff --git a/src/Components/Circle.jsx b/src/Components/Circle.jsx new file mode 100644 index 0000000..a4bff19 --- /dev/null +++ b/src/Components/Circle.jsx @@ -0,0 +1,78 @@ +import React, { useState, useEffect, useRef } from "react"; +import gsap from "gsap"; + +const Circle = () => { + const [position, setPosition] = useState({ x: 0, y: 0 }); + const circleRef = useRef(null); + + useEffect(() => { + const updateMousePosition = (e) => { + setTimeout(() => { + setPosition({ x: e.clientX, y: e.clientY }); + }, 100); + }; + + const onMouseEnterNavbar = () => { + gsap.to(circleRef.current, { + scale: 3, + backgroundColor: "#B98BD0" + }); + + gsap.to(".navbar a:hover", { + color: "#3C0982", + fontWeight: "900", + fontSize: "1.4vw", + zIndex: 100, + duration: 0.1, + }); + + gsap.to(".navbar a:hover", { + x: gsap.utils.lerp(-20, 20, val), + duration: 0.2, + scale: 1 + }); + }; + + const onMouseLeaveNavbar = () => { + gsap.to(circleRef.current, { + scale: 1, + backgroundColor: "#ff0000", + }); + + gsap.to(".navbar a", { + color: "#010483", + fontWeight: 500, + duration: 0.1, + fontSize:"1vw", + scale: 1 + }); + }; + + window.addEventListener("mousemove", updateMousePosition); + + const navbarLinks = document.querySelectorAll(".navbar a"); + navbarLinks.forEach(link => { + link.addEventListener("mouseenter", onMouseEnterNavbar); + link.addEventListener("mouseleave", onMouseLeaveNavbar); + }); + + return () => { + window.removeEventListener("mousemove", updateMousePosition); + navbarLinks.forEach(link => { + link.removeEventListener("mouseenter", onMouseEnterNavbar); + link.removeEventListener("mouseleave", onMouseLeaveNavbar); + }); + }; + }, []); + + + return ( +
+ ); +}; + +export default Circle; diff --git a/src/Components/ContactUs.jsx b/src/Components/ContactUs.jsx index 483be6e..340bb41 100644 --- a/src/Components/ContactUs.jsx +++ b/src/Components/ContactUs.jsx @@ -47,7 +47,7 @@ export default function ContactUs() {
- +
diff --git a/src/index.css b/src/index.css index 991e2ea..d6722de 100644 --- a/src/index.css +++ b/src/index.css @@ -4,6 +4,18 @@ @tailwind utilities; +/* Just trying */ +.Circle{ + position: fixed; + width: 1.5vw; + height: 1.5vw; + background-color: #ff0000; + border-radius: 50%; + transform: translate(-50%, -50%); + pointer-events: none; + z-index: 99; +} + /* width */ ::-webkit-scrollbar { width: 5px; @@ -216,7 +228,6 @@ z-index: 997; transition: all 0.5s; background: rgba(1, 4, 136, 0.9); - } #header.header-transparent { @@ -274,6 +285,7 @@ * Desktop Navigation */ .navbar { + z-index: 100; padding: 0; } @@ -330,12 +342,12 @@ width: 25px; } - .navbar a:hover, + /* .navbar a:hover, .navbar .active, .navbar .active:focus, - .navbar li:hover>a { + .navbar li:hover>a { */ /* color: #fff; */ - } + /* } */ .navbar .dropdown ul { display: block; @@ -837,7 +849,7 @@ margin: 0 0 5px 0; letter-spacing: 2px; text-transform: uppercase; - color: #aaaaaa; + color: #040249; font-family: "Poppins", sans-serif; } @@ -1099,8 +1111,10 @@ display: flex; align-items: center; padding: 20px; - background: #f5f5ff; + background: none; + box-shadow: -1px -1px 5px; transition: ease-in-out 0.3s; + border-radius: 20px; } .features .icon-box div.icon { @@ -1134,7 +1148,7 @@ # Counts --------------------------------------------------------------*/ .counts { - background: #f5f5ff; + /* background: #f5f5ff; */ padding: 70px 0 60px; } @@ -1144,7 +1158,8 @@ width: 100%; position: relative; text-align: center; - background: #fff; + background: #4f3498; + color: white; } .counts .count-box div.icon { @@ -1621,7 +1636,7 @@ --------------------------------------------------------------*/ .contact .info { width: 100%; - background: #fff; + /* background: #fff; */ } .contact .info div.icon { @@ -1763,7 +1778,7 @@ transform: rotate(360deg); } } - + /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ diff --git a/src/main.jsx b/src/main.jsx index 4c2298e..1fbd160 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { Provider } from 'react-redux' +import { gsap, Expo } from "gsap" // import { store } from './redux/store.js' ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/yarn.lock b/yarn.lock index 9808c6c..43b9ce3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -218,6 +218,8 @@ "@babel/helper-validator-identifier" "^7.22.20" to-fast-properties "^2.0.0" + +"@esbuild/darwin-arm64@0.19.11": "@emotion/is-prop-valid@^0.8.2": version "0.8.8" resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz" @@ -232,8 +234,8 @@ "@esbuild/win32-x64@0.19.11": version "0.19.11" - resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz" - integrity sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw== + resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz" + integrity sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ== "@eslint-community/eslint-utils@^4.2.0": version "4.4.0" @@ -376,10 +378,10 @@ resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz" integrity sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg== -"@rollup/rollup-win32-x64-msvc@4.9.5": +"@rollup/rollup-darwin-arm64@4.9.5": version "4.9.5" - resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.5.tgz" - integrity sha512-1q+mykKE3Vot1kaFJIDoUFv5TuW+QQVaf2FmTT9krg86pQrGStOSJJ0Zil7CFagyxDuouTepzt5Y5TVzyajOdQ== + resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.5.tgz" + integrity sha512-ndoXeLx455FffL68OIUrVr89Xu1WLzAG4n65R8roDlCoYiQcGGg6MALvs2Ap9zs7AHg8mpHtMpwC8jBBjZrT/w== "@types/babel__core@^7.20.5": version "7.20.5" @@ -1240,6 +1242,11 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@~2.3.2, fsevents@~2.3.3: + version "2.3.3" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + function-bind@^1.1.1, function-bind@^1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz" @@ -1358,6 +1365,11 @@ graphemer@^1.4.0: resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz" integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== +gsap@^3.12.4: + version "3.12.4" + resolved "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz" + integrity sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ== + has-bigints@^1.0.1, has-bigints@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"