diff --git a/package-lock.json b/package-lock.json index 869ad3e..a4b6f2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,13 +11,13 @@ "@headlessui/react": "^1.7.7", "@material-tailwind/react": "^2.1.8", "@prisma/client": "^4.8.1", - "gsap": "^3.11.4", "next": "^13.5.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.3.5", "react-icons": "^5.0.1", "react-on-screen": "^2.1.1", + "react-scroll-parallax": "^3.4.5", "styled-components": "^6.1.8", "swiper": "^8.4.5" }, @@ -312,6 +312,26 @@ "react-dom": "^16 || ^17 || ^18" } }, + "node_modules/@material-tailwind/react/node_modules/framer-motion": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz", + "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==", + "dependencies": { + "@motionone/dom": "10.12.0", + "framesync": "6.0.1", + "hey-listen": "^1.0.8", + "popmotion": "11.0.3", + "style-value-types": "5.0.0", + "tslib": "^2.1.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": ">=16.8 || ^17.0.0 || ^18.0.0", + "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@motionone/animation": { "version": "10.17.0", "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz", @@ -765,9 +785,10 @@ } }, "node_modules/acorn": { - "version": "8.8.1", + "version": "8.11.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", + "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true, - "license": "MIT", "bin": { "acorn": "bin/acorn" }, @@ -1003,6 +1024,11 @@ "dev": true, "license": "MIT" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==" + }, "node_modules/binary-extensions": { "version": "2.2.0", "dev": true, @@ -1995,26 +2021,6 @@ "url": "https://github.com/sponsors/rawify" } }, - "node_modules/framer-motion": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz", - "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==", - "dependencies": { - "@motionone/dom": "10.12.0", - "framesync": "6.0.1", - "hey-listen": "^1.0.8", - "popmotion": "11.0.3", - "style-value-types": "5.0.0", - "tslib": "^2.1.0" - }, - "optionalDependencies": { - "@emotion/is-prop-valid": "^0.8.2" - }, - "peerDependencies": { - "react": ">=16.8 || ^17.0.0 || ^18.0.0", - "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/framesync": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz", @@ -2028,6 +2034,20 @@ "dev": true, "license": "ISC" }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -2195,11 +2215,6 @@ "dev": true, "license": "MIT" }, - "node_modules/gsap": { - "version": "3.11.4", - "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.4.tgz", - "integrity": "sha512-McHhEguHyExMMnjqKA8G+7TvxmlKQGMbjgwAilnFe1e4id7V/tFveRQ2YMZhTYu0oxHGWvbPltdVYQOu3z1SCA==" - }, "node_modules/has": { "version": "1.0.3", "dev": true, @@ -3103,6 +3118,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parallax-controller": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.7.1.tgz", + "integrity": "sha512-facVMEBnUynzMN7hCSqyNpF6uyCpVIl4XAUyTR9D8q2JlhgyPY6bZtj/OkFk3+Cpka1TnYCppQb8BzDWHtSaZg==", + "dependencies": { + "bezier-easing": "^2.1.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/parent-module": { "version": "1.0.1", "dev": true, @@ -3466,6 +3492,21 @@ "react-dom": ">=15.0.0" } }, + "node_modules/react-scroll-parallax": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.4.5.tgz", + "integrity": "sha512-4NLZQ8cZEUyxoA95DfrXWneOOUSFrFmpM0dZNzMErmuJ0LzY+CCw8Xw0hqB6xxHWxNknfs46AozyIPSWkZeucA==", + "dependencies": { + "parallax-controller": "^1.7.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.8.0-0 || >=17.0.1 || ^18.0.0", + "react-dom": "^16.8.0-0 || >=17.0.1 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3628,9 +3669,10 @@ } }, "node_modules/semver": { - "version": "6.3.0", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true, - "license": "ISC", "bin": { "semver": "bin/semver.js" } @@ -4727,6 +4769,22 @@ "react": "18.2.0", "react-dom": "18.2.0", "tailwind-merge": "1.8.1" + }, + "dependencies": { + "framer-motion": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz", + "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "@motionone/dom": "10.12.0", + "framesync": "6.0.1", + "hey-listen": "^1.0.8", + "popmotion": "11.0.3", + "style-value-types": "5.0.0", + "tslib": "^2.1.0" + } + } } }, "@motionone/animation": { @@ -4995,7 +5053,9 @@ } }, "acorn": { - "version": "8.8.1", + "version": "8.11.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", + "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true }, "acorn-jsx": { @@ -5138,6 +5198,11 @@ "version": "1.0.2", "dev": true }, + "bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==" + }, "binary-extensions": { "version": "2.2.0", "dev": true @@ -5796,20 +5861,6 @@ "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", "dev": true }, - "framer-motion": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz", - "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==", - "requires": { - "@emotion/is-prop-valid": "^0.8.2", - "@motionone/dom": "10.12.0", - "framesync": "6.0.1", - "hey-listen": "^1.0.8", - "popmotion": "11.0.3", - "style-value-types": "5.0.0", - "tslib": "^2.1.0" - } - }, "framesync": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz", @@ -5822,6 +5873,13 @@ "version": "1.0.0", "dev": true }, + "fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "optional": true + }, "function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -5927,11 +5985,6 @@ "version": "1.0.4", "dev": true }, - "gsap": { - "version": "3.11.4", - "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.4.tgz", - "integrity": "sha512-McHhEguHyExMMnjqKA8G+7TvxmlKQGMbjgwAilnFe1e4id7V/tFveRQ2YMZhTYu0oxHGWvbPltdVYQOu3z1SCA==" - }, "has": { "version": "1.0.3", "dev": true, @@ -6467,6 +6520,14 @@ "p-limit": "^3.0.2" } }, + "parallax-controller": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.7.1.tgz", + "integrity": "sha512-facVMEBnUynzMN7hCSqyNpF6uyCpVIl4XAUyTR9D8q2JlhgyPY6bZtj/OkFk3+Cpka1TnYCppQb8BzDWHtSaZg==", + "requires": { + "bezier-easing": "^2.1.0" + } + }, "parent-module": { "version": "1.0.1", "dev": true, @@ -6675,6 +6736,14 @@ "shallowequal": "^1.0.2" } }, + "react-scroll-parallax": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.4.5.tgz", + "integrity": "sha512-4NLZQ8cZEUyxoA95DfrXWneOOUSFrFmpM0dZNzMErmuJ0LzY+CCw8Xw0hqB6xxHWxNknfs46AozyIPSWkZeucA==", + "requires": { + "parallax-controller": "^1.7.1" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -6771,7 +6840,9 @@ } }, "semver": { - "version": "6.3.0", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "dev": true }, "shallowequal": { diff --git a/package.json b/package.json index 997d3c1..97adc55 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,13 @@ "@headlessui/react": "^1.7.7", "@material-tailwind/react": "^2.1.8", "@prisma/client": "^4.8.1", - "gsap": "^3.11.4", "next": "^13.5.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.3.5", "react-icons": "^5.0.1", "react-on-screen": "^2.1.1", + "react-scroll-parallax": "^3.4.5", "styled-components": "^6.1.8", "swiper": "^8.4.5" }, diff --git a/public/images/hero/Sky Container(2).png b/public/images/hero/Sky Container(2).png new file mode 100644 index 0000000..378f203 Binary files /dev/null and b/public/images/hero/Sky Container(2).png differ diff --git a/public/images/hero/bottom.png b/public/images/hero/bottom.png new file mode 100644 index 0000000..30792ce Binary files /dev/null and b/public/images/hero/bottom.png differ diff --git a/public/images/hero/clouds.png b/public/images/hero/clouds.png new file mode 100644 index 0000000..ab93c8c Binary files /dev/null and b/public/images/hero/clouds.png differ diff --git a/public/images/hero/mid.png b/public/images/hero/mid.png new file mode 100644 index 0000000..42cbbd9 Binary files /dev/null and b/public/images/hero/mid.png differ diff --git a/public/images/hero/sky.png b/public/images/hero/sky.png new file mode 100644 index 0000000..40114b1 Binary files /dev/null and b/public/images/hero/sky.png differ diff --git a/src/components/Hero/HeroSection.js b/src/components/Hero/HeroSection.js index 6e3b34c..9e0956a 100644 --- a/src/components/Hero/HeroSection.js +++ b/src/components/Hero/HeroSection.js @@ -1,88 +1,130 @@ -import React from "react"; -import { useEffect } from "react"; -import heroText from "../../../public/images/HeroText.svg"; -import linkArrow from "../../../public/images/LinkArrow.svg"; -import HeroSectionImg from "../../../public/images/HeroSection.svg"; +import React, { useEffect } from "react"; +import { Parallax } from "react-scroll-parallax"; import Image from "next/image"; -function HeroSection() { +import HeroText from "../../../public/images/HeroText.svg"; +import LinkArrow from "../../../public/images/LinkArrow.svg"; +import HeroSky from "../../../public/images/hero/sky.png"; +import HeroMid from "../../../public/images/hero/mid.png"; +import HeroBottom from "../../../public/images/hero/bottom.png"; +function HeroSection() { useEffect(() => { - const script = document.createElement("script"); - script.src = "https://apply.devfolio.co/v2/sdk.js"; - script.async = true; - script.defer = true; - document.body.appendChild(script); - return () => { - document.body.removeChild(script); + const loadScript = () => { + const script = document.createElement("script"); + script.src = "https://apply.devfolio.co/v2/sdk.js"; + script.async = true; + script.defer = true; + document.body.appendChild(script); + return () => { + document.body.removeChild(script); + }; }; + + loadScript(); }, []); + const scrollToAbout = () => { + const aboutSection = document.getElementById("about"); + if (aboutSection) { + const scrollOptions = { + top: aboutSection.offsetTop, + behavior: "smooth", + }; + window.scrollTo(scrollOptions); + } + }; + return ( -
- -
-
- -
-
-
THINK OUTSIDE THE BOX
-
HACK INSIDE IT
-
-
24-25 February, 2024
-
-
- Dig deeper -
-
{ - var scrollDiv = document.getElementById("about").offsetTop; - window.scrollTo({ top: scrollDiv, behavior: "smooth" }); - }} - > - -
-
-
- +
+
THINK OUTSIDE THE BOX
+
HACK INSIDE IT
+
+
+ 24-25 February, 2024 +
+
+
+ Dig deeper +
+
+ Link Arrow +
+
+
+ +
+
+
+
+
+ + +
+
+ Hero Mid +
+
+ + +
+
+ Hero Bottom
-
+ ); } diff --git a/src/components/Hero/marquee.tsx b/src/components/Hero/marquee.js similarity index 96% rename from src/components/Hero/marquee.tsx rename to src/components/Hero/marquee.js index a478f4f..893c5d5 100644 --- a/src/components/Hero/marquee.tsx +++ b/src/components/Hero/marquee.js @@ -2,7 +2,7 @@ import Image from 'next/image' import React from 'react' import Marquee from 'react-fast-marquee' -const marqueee = () => { +function MarqueeComponent() { return (
@@ -33,4 +33,4 @@ const marqueee = () => { ) } -export default marqueee \ No newline at end of file +export default MarqueeComponent diff --git a/src/pages/index.js b/src/pages/index.js index cb8c52e..45cc68d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,23 +1,28 @@ -import Marquee from "../components/Hero/marquee"; +'use client' +import MarqueeComponent from "../components/Hero/marquee"; import Timeline from "../components/Timeline"; import About from "../components/About"; import Rules from "../components/Rules/Rules"; import FAQ from "../components/FAQ/FAQ" import Footer from "../components/Footer"; -import HeroSection from "../components/Hero/HeroSection"; +import Temp from "../components/Hero/HeroSection"; import Header from "../components/Hero/Header"; import NavBar from "../components/Hero/NavBar"; import SponsersPage from "../components/sponsers"; import TracksPrizes from "../components/TracksPrizes"; +import { ParallaxProvider } from "react-scroll-parallax"; export default function Home() { return ( <> {/* */} +
- - + {/* */} + + + {} @@ -25,9 +30,10 @@ export default function Home() { {/* */} {/* */} - + -