From f41d33625fd4a6171740e6feae90027d474d2028 Mon Sep 17 00:00:00 2001 From: Bhakti Date: Sat, 22 Feb 2025 23:58:22 +0530 Subject: [PATCH] Added animations to Landing page --- Frontend/package-lock.json | 148 +++++++++++++++++++++++ Frontend/package.json | 3 + Frontend/src/pages/Home/Cards.jsx | 111 +++++++++++++++++ Frontend/src/pages/Home/Hero2.jsx | 58 +++++++++ Frontend/src/pages/Home/HomePage.jsx | 7 +- Frontend/src/pages/Home/Testimonial.jsx | 153 +++++++++++++++--------- 6 files changed, 417 insertions(+), 63 deletions(-) create mode 100644 Frontend/src/pages/Home/Cards.jsx create mode 100644 Frontend/src/pages/Home/Hero2.jsx diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index a5ef416..efe3113 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -9,10 +9,13 @@ "version": "0.0.0", "dependencies": { "@reduxjs/toolkit": "^2.2.7", + "@splinetool/react-spline": "^4.0.0", "flowbite": "^2.5.1", + "framer-motion": "^12.4.7", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", + "react-intersection-observer": "^9.15.1", "react-player": "^2.16.0", "react-redux": "^9.1.2", "react-router-dom": "^6.26.1", @@ -1312,6 +1315,38 @@ "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz", "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==" }, + "node_modules/@splinetool/react-spline": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@splinetool/react-spline/-/react-spline-4.0.0.tgz", + "integrity": "sha512-FqrV7/K2q998Y0t83QUauQxsifKWAg9CFZoSb64qRuH7IfHkDs5/OgU1ACkg0aTgsEPtFlH+kATQ+8X6MrizHQ==", + "dependencies": { + "blurhash": "2.0.5", + "lodash.debounce": "4.0.8", + "react-merge-refs": "2.1.1", + "thumbhash": "0.1.1" + }, + "peerDependencies": { + "@splinetool/runtime": "*", + "next": ">=14.2.0", + "react": "*", + "react-dom": "*" + }, + "peerDependenciesMeta": { + "next": { + "optional": true + } + } + }, + "node_modules/@splinetool/runtime": { + "version": "1.9.69", + "resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.9.69.tgz", + "integrity": "sha512-ZetIw+4e/Q94OW6sdfasuM8RBKDA7Ap21aNsf2ZLH89Mk8Iut6G34SNM7YgdkFLW9OSiLGHKD8KYZbrMjE3DLA==", + "peer": true, + "dependencies": { + "on-change": "^4.0.0", + "semver-compare": "^1.0.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -2116,6 +2151,12 @@ "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", "license": "MIT" }, + "node_modules/blurhash": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz", + "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==", + "license": "MIT" + }, "node_modules/bn.js": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz", @@ -3941,6 +3982,33 @@ "node": ">=0.10.0" } }, + "node_modules/framer-motion": { + "version": "12.4.7", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz", + "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.4.5", + "motion-utils": "^12.0.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/from2": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz", @@ -5166,6 +5234,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -5426,6 +5500,21 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/motion-dom": { + "version": "12.4.5", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz", + "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.0.0" + } + }, + "node_modules/motion-utils": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", + "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==", + "license": "MIT" + }, "node_modules/move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -5790,6 +5879,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/on-change": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz", + "integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==", + "license": "MIT", + "peer": true, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sindresorhus/on-change?sponsor=1" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -6474,6 +6576,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "license": "MIT", "dependencies": { "loose-envify": "^1.1.0" }, @@ -6485,6 +6588,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -6506,11 +6610,36 @@ "react": "*" } }, + "node_modules/react-intersection-observer": { + "version": "9.15.1", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz", + "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==", + "license": "MIT", + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-merge-refs": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz", + "integrity": "sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, "node_modules/react-player": { "version": "2.16.0", "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz", @@ -7054,6 +7183,13 @@ "semver": "bin/semver.js" } }, + "node_modules/semver-compare": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz", + "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==", + "license": "MIT", + "peer": true + }, "node_modules/serialize-javascript": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", @@ -7969,6 +8105,12 @@ "xtend": "~4.0.1" } }, + "node_modules/thumbhash": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz", + "integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==", + "license": "MIT" + }, "node_modules/timers-browserify": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz", @@ -8104,6 +8246,12 @@ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", "dev": true }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/tty-browserify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", diff --git a/Frontend/package.json b/Frontend/package.json index eef98e7..75f64cc 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -11,10 +11,13 @@ }, "dependencies": { "@reduxjs/toolkit": "^2.2.7", + "@splinetool/react-spline": "^4.0.0", "flowbite": "^2.5.1", + "framer-motion": "^12.4.7", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", + "react-intersection-observer": "^9.15.1", "react-player": "^2.16.0", "react-redux": "^9.1.2", "react-router-dom": "^6.26.1", diff --git a/Frontend/src/pages/Home/Cards.jsx b/Frontend/src/pages/Home/Cards.jsx new file mode 100644 index 0000000..9201b82 --- /dev/null +++ b/Frontend/src/pages/Home/Cards.jsx @@ -0,0 +1,111 @@ + +import React from "react"; + +export const HeroSecn = () =>{ + return( +
+
+
+
+

+ Anything and Everything you Need to know About +

+

+ Your crops and their Health! +

+
+
+
+ plant +
+
+
+ ) +} + +export const CardWithImage = () => { + return ( +
+ + plant + +
+ +
Excellent Dashboards
+ +

Our descriptive dashboards give insights into your crop's health and keeps track of your burning expenses

+ + Read more + + +
+
+ ) +} + +export const CardOnlyText = () => { + return( +
+ +
Noteworthy technology acquisitions 2021
+

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

+ +
+ ) +} + +export const CardWithButton = () => { + return( +
+ +
Noteworthy technology acquisitions 2021
+ +

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

+ + Read more + + +
+ ) +} + +export const CardWithOnlyImage = () => { + return( +
+ + product image + +
+ ) +} + +const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage]; + +export default cards; + + +export const CardLayout = () => { + return( +
+ +
+
+ +
+ + +
+ +
+ + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/Frontend/src/pages/Home/Hero2.jsx b/Frontend/src/pages/Home/Hero2.jsx new file mode 100644 index 0000000..6672848 --- /dev/null +++ b/Frontend/src/pages/Home/Hero2.jsx @@ -0,0 +1,58 @@ +import React from 'react' +import { motion } from "framer-motion"; +import { useInView } from "react-intersection-observer"; +import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards"; + +const ScrollReveal = ({ children, direction = "left" }) => { + const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 }); + + const variants = { + left: { opacity: 0, x: -100 }, + right: { opacity: 0, x: 100 }, + up: { opacity: 0, y: 100 }, + down: { opacity: 0, y: -100 }, + }; + + return ( + + {children} + + ); +}; + +function Hero2() { + const myRef = document.querySelector('.scrollable-div') + + return ( +
+ + + +
+
+ + + + + +
+ + +
+ +
+ + +
+
+
+
+ ) +} + +export default Hero2 \ No newline at end of file diff --git a/Frontend/src/pages/Home/HomePage.jsx b/Frontend/src/pages/Home/HomePage.jsx index cd2030f..b953d63 100644 --- a/Frontend/src/pages/Home/HomePage.jsx +++ b/Frontend/src/pages/Home/HomePage.jsx @@ -2,17 +2,14 @@ import React from "react"; import Navbar from "../../components/Navbar"; import Hero from "./Hero"; import Testimonial from "./Testimonial"; -import About from "./About"; -import Customization from "./Customization"; -import SubjectSection from "./SubjectSection"; -import ReviewSection from "./ReviewSection"; +import Hero2 from "./Hero2"; import Footer from "./Footer"; const HomePage = () => { return ( <>
- +
diff --git a/Frontend/src/pages/Home/Testimonial.jsx b/Frontend/src/pages/Home/Testimonial.jsx index b888443..d2d9970 100644 --- a/Frontend/src/pages/Home/Testimonial.jsx +++ b/Frontend/src/pages/Home/Testimonial.jsx @@ -2,80 +2,117 @@ import React from "react"; import { IoMdContacts } from "react-icons/io"; import { FaClock } from "react-icons/fa"; import { FaMessage } from "react-icons/fa6"; +import { motion } from "framer-motion"; +import { useInView } from "react-intersection-observer"; import TypeWriterEffect from "react-typewriter-effect"; +import cards from "./Cards"; + +const ScrollReveal = ({ children, direction = "left" }) => { + const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.5 }); + + const variants = { + left: { opacity: 0, x: -100 }, + right: { opacity: 0, x: 100 }, + up: { opacity: 0, y: 100 }, + down: { opacity: 0, y: -100 }, + }; + + return ( + + {children} + + ); +}; + const Testimonial = () => { const myRef = document.querySelector('.scrollable-div') + return ( <>
-
-

WHY CHOOSE US?

-

- -

+
+ +

WHY CHOOSE US?

+ + +

+ +

+
-
- - -
Need a help in Claim?
- -

Go to this step by step guideline process on how to certify for your weekly benefits:

- - See our guideline - - -
+ +
+ + +
Need a help in Claim?
+ +

Go to this step by step guideline process on how to certify for your weekly benefits:

+ + See our guideline + + +
+ -
- - -
Need a help in Claim?
- -

Go to this step by step guideline process on how to certify for your weekly benefits:

- - See our guideline - - -
+ +
+ + +
Need a help in Claim?
+ +

Go to this step by step guideline process on how to certify for your weekly benefits:

+ + See our guideline + + +
+ -
- - -
Need a help in Claim?
- -

Go to this step by step guideline process on how to certify for your weekly benefits:

- - See our guideline - - -
+ +
+ + +
Need a help in Claim?
+ +

Go to this step by step guideline process on how to certify for your weekly benefits:

+ + See our guideline + + +
+