diff --git a/index.html b/index.html index c615b80..ea99a77 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@ - +
diff --git a/package-lock.json b/package-lock.json index 2a99034..fb886d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@reduxjs/toolkit": "^2.1.0", "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", @@ -2778,6 +2779,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 2e12877..ab0543e 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@reduxjs/toolkit": "^2.1.0", "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 57428b5..b34243e 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,6 +15,10 @@ 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"; import SignIn from "./Components/SignIn"; import { useDispatch, useSelector } from "react-redux"; @@ -24,6 +30,15 @@ function App() { const dispatch = useDispatch() const user = useSelector(state => state.user.user) React.useEffect(() => { + gsap.to('body', { + backgroundColor: '#E2A9FF', + scrollTrigger: { + trigger: 'body', + start: 'top top', + end: 'bottom bottom', + scrub: true, + }, + }); Aos.init() }, []) useScript("/js/main.js") @@ -58,6 +73,7 @@ function Home() { <>
+ @@ -71,4 +87,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 2d92477..a5e109c 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; @@ -221,12 +233,6 @@ h6 { transition: all 0.5s; background: rgba(1, 4, 136, 0.9); -} - -#header.header-transparent { - background: transparent; -} - #header.header-scrolled { /* background: rgba(1, 4, 136, 0.9); */ height: 80px; @@ -276,7 +282,8 @@ h6 { /** * Desktop Navigation */ -.navbar { + .navbar { + z-index: 100; padding: 0; } @@ -331,7 +338,7 @@ h6 { .navbar .active:before { visibility: visible; width: 25px; -} + } .navbar a:hover, .navbar .active, @@ -912,7 +919,7 @@ section { margin: 0 0 5px 0; letter-spacing: 2px; text-transform: uppercase; - color: #aaaaaa; + color: #040249; font-family: "Poppins", sans-serif; } @@ -1174,9 +1181,11 @@ section { 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 { font-size: 32px; @@ -1219,8 +1228,9 @@ section { width: 100%; position: relative; text-align: center; - background: #fff; -} + background: #4f3498; + color: white; + } .counts .count-box div.icon { position: absolute; @@ -1696,10 +1706,10 @@ section { --------------------------------------------------------------*/ .contact .info { width: 100%; - background: #fff; -} - + } + .contact .info div.icon { + background: #fff; font-size: 20px; color: #3f43fd; float: left; @@ -1837,7 +1847,7 @@ section { 100% { transform: rotate(360deg); } -} + } /*-------------------------------------------------------------- # Footer diff --git a/src/main.jsx b/src/main.jsx index 7d4c19c..90b2aa5 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { Provider } from 'react-redux' -import { store } from './redux/store' ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/yarn.lock b/yarn.lock index f4f102c..ddaf96c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -218,6 +218,7 @@ "@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 +233,6 @@ "@esbuild/linux-x64@0.19.11": version "0.19.11" - resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.11.tgz" - integrity sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA== "@eslint-community/eslint-utils@^4.2.0": version "4.4.0" @@ -376,16 +375,6 @@ resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz" integrity sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg== -"@rollup/rollup-linux-x64-gnu@4.9.5": - version "4.9.5" - resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.5.tgz" - integrity sha512-Dq1bqBdLaZ1Gb/l2e5/+o3B18+8TI9ANlA1SkejZqDgdU/jK/ThYaMPMJpVMMXy2uRHvGKbkz9vheVGdq3cJfA== - -"@rollup/rollup-linux-x64-musl@4.9.5": - version "4.9.5" - resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.5.tgz" - integrity sha512-ezyFUOwldYpj7AbkwyW9AJ203peub81CaAIVvckdkyH8EvhEIoKzaMFJj0G4qYJ5sw3BpqhFrsCc30t54HV8vg== - "@types/babel__core@^7.20.5": version "7.20.5" resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz" @@ -1245,6 +1234,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" @@ -1363,6 +1357,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"