From c47dc6e96eeecec7df28f17e23062b3b684b6190 Mon Sep 17 00:00:00 2001
From: HAPPY YADAV <happy.hy0017@gmail.com>
Date: Fri, 21 Jun 2024 22:57:25 +0530
Subject: [PATCH] added tilty effect to privacy policy page & terms and
 conditions

---
 src/components/Privacy.jsx | 11 ++++++++++-
 src/components/Terms.jsx   | 12 +++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Privacy.jsx b/src/components/Privacy.jsx
index bd108fe..4778302 100644
--- a/src/components/Privacy.jsx
+++ b/src/components/Privacy.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./privacy.css";
+import Tilty from "react-tilty";
 
 const Privacy = () => {
   return (
@@ -32,20 +33,24 @@ const Privacy = () => {
           </ul>
         </div>
         <div className="flex flex-col justify-center">
+          <Tilty>
           <img
             src="https://termshub.io/v3/assets/images/products/privacy_policy_hero.svg"
             alt="Privacy"
             className="rounded-lg"
           />
+          </Tilty>
         </div>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
         <div className="flex flex-col justify-center">
+        <Tilty>
           <img
             src="https://static.vecteezy.com/system/resources/previews/005/843/413/original/abstract-cyber-security-privacy-information-network-concept-padlock-protection-digital-network-personal-data-cyber-data-or-information-privacy-idea-internet-link-on-hi-tech-blue-future-background-vector.jpg"
             alt="Data Protection"
             className="rounded-lg shadow-lg"
-          />
+          /> 
+          </Tilty>
         </div>
         <div>
           <h2 className="rounded-md about-title text-2xl text-center italic font-semibold bg-gradient-to-r from-sky-500 ">
@@ -121,20 +126,24 @@ const Privacy = () => {
         </div>
 
         <div className="flex flex-col justify-center">
+        <Tilty>
           <img
             src="https://www.nojitter.com/sites/default/files/ribkhan___0.jpg"
             alt="Information Sharing"
             className="rounded-lg shadow-lg"
           />
+          </Tilty>
         </div>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
         <div className="flex flex-col justify-center">
+          <Tilty>
           <img
             src="https://media.gettyimages.com/id/1345282963/photo/education-and-light-bulb-concept.jpg?s=2048x2048&w=gi&k=20&c=RcmHc2qcf_k_HHq0Qbl0a1_GlDdfKK05rsLf8LYw2Z4="
             alt="User Rights"
             className="rounded-lg shadow-lg"
           />
+          </Tilty>
         </div>
         <div>
           <h2 className="rounded-md about-title text-2xl text-center italic font-semibold bg-gradient-to-r from-sky-500  mb-8">
diff --git a/src/components/Terms.jsx b/src/components/Terms.jsx
index fd4adf7..0f630dc 100644
--- a/src/components/Terms.jsx
+++ b/src/components/Terms.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import './terms.css';
+import Tilty from "react-tilty";
 
 import termsImage from '../assets/terms.png'
 
@@ -22,20 +23,25 @@ const Terms = () => {
                     </ul>
                 </div>
                 <div className="flex flex-col justify-center">
-                    <img
+                    <Tilty>                    <img
                         src={termsImage}
                         alt="Terms"
                         className="rounded-lg"
                     />
+                    </Tilty>
+
+
                 </div>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-4">
                 <div className="flex flex-col justify-center">
+                <Tilty>
                     <img
                         src="https://d1n03xfl93cx9q.cloudfront.net/wp-content/uploads/2022/09/what-is-the-future-of-IT-managed-services.jpg"
                         alt="Usage"
                         className="rounded-lg shadow-lg"
                     />
+                    </Tilty>
                 </div>
                 <div>
                     <h2 className="rounded-md about-title text-2xl text-center italic font-semibold bg-gradient-to-r from-green-500">Usage of Service</h2>
@@ -67,20 +73,24 @@ const Terms = () => {
                     </ul>
                 </div>
                 <div className="flex flex-col justify-center">
+                <Tilty>
                     <img
                         src="https://img.freepik.com/premium-photo/business-team-collaboration-showing-unity-with-their-hands-stacked-together_49071-4483.jpg?w=1380"
                         alt="User Responsibilities"
                         className="rounded-lg shadow-lg"
                     />
+                    </Tilty>
                 </div>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
                 <div className="flex flex-col justify-center">
+                <Tilty>
                     <img
                         src="https://termshub.io/v3/assets/images/products/privacy_policy_hero.svg"
                         alt="Changes to Policy"
                         className="rounded-lg"
                     />
+                    </Tilty>
                 </div>
                 <div>
                     <h2 className="rounded-md about-title text-2xl text-center italic font-semibold bg-gradient-to-r from-green-500 mb-8">Changes to Terms</h2>