Tilt Update 🀄️

package-lock.json

@@ -34,6 +34,7 @@
         "redux-persist": "^6.0.0",
         "redux-persist-transform-encrypt": "^5.1.1",
         "uuid": "^10.0.0",
+        "vanilla-tilt": "^1.8.1",
         "xlsx": "^0.18.5",
         "yup": "^1.4.0"
       },
@@ -6233,6 +6234,12 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vanilla-tilt": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+      "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "5.2.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz",

package.json

@@ -36,6 +36,7 @@
     "redux-persist": "^6.0.0",
     "redux-persist-transform-encrypt": "^5.1.1",
     "uuid": "^10.0.0",
+    "vanilla-tilt": "^1.8.1",
     "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },

src/Pages/Expenses/Expenses.jsx

@@ -1,12 +1,28 @@
 import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 // import MiniHeader from "../Components/MiniHeader";
 import logo_card from "../../assets/logo_card.svg";
 import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
 import RuPay from '../../assets/rupayImg.png'
 import MiniHeader from "../../Components/MiniHeader";
+import VanillaTilt from "vanilla-tilt";
 
 const Expenses = () => {
+  const tiltRef = useRef(null);
+
+  useEffect(() => {
+    if (tiltRef.current) {
+      VanillaTilt.init(tiltRef.current, {
+        max: 15,
+        speed: 500,
+        scale:1.01,
+        glare: true,
+        "max-glare": 0.5,
+      });
+    }
+    return () => tiltRef.current.vanillaTilt.destroy(); // Cleanup on unmount
+  }, []);
+
   return (
     <Box h={"100%"} p={6}>
       <MiniHeader
@@ -14,20 +30,24 @@ const Expenses = () => {
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
       />
 
-      <HStack justifyContent={"start"} w={"100%"} h={"364px"} gap={4}>
+      <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4}>
+
+
         <VStack
+          ref={tiltRef} // Attach tilt to this ref
           // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
           bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
           alignItems={"start"}
           justifyContent={"space-between"}
           height={"100%"}
           w={240}
+          h={"372px"}
           rounded={"xl"}
           p={4}
           boxShadow={"md"}
           position={"relative"}
         >
-          <Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
+          <Box width={"100%"} cursor={'grab'} display={"flex"} justifyContent={"space-between"}>
             <Image w={20} src={logo_card} />
             <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
           </Box>
@@ -73,7 +93,7 @@ const Expenses = () => {
           </Text>
         </VStack>
 
-        <VStack bg={"pink"} height={"100%"} w={"50%"} rounded={"xl"}></VStack>
+        <VStack bg={"pink"} height={"100%"} flexGrow={1}   rounded={"xl"}></VStack>
 
         <VStack bg={"purple"} height={"100%"} w={"27%"} rounded={"xl"}></VStack>
       </HStack>