Merge pull request #398 from zalabhavy/tilt

Added tilt effect from react-tilt

frontend/package.json

@@ -28,10 +28,12 @@
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^14.1.2",
     "react-icons": "^5.2.1",
+    "react-parallax-tilt": "^1.7.231",
     "react-router-dom": "^6.24.0",
     "react-share": "^5.1.0",
     "react-slick": "^0.30.2",
     "react-switch": "^7.0.0",
+    "react-tilt": "^1.0.2",
     "react-tooltip": "^5.26.4",
     "recoil": "^0.7.7",
     "slick-carousel": "^1.8.1",

frontend/src/components/Showcase.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import editor from "../assets/editor.png";
 import { useTranslation } from 'react-i18next';
+import Tilt from 'react-parallax-tilt';
 
 const Showcase: React.FC = () => {
   const { t } = useTranslation();
@@ -43,7 +44,9 @@ const Showcase: React.FC = () => {
             ))}
           </div>
           <div className="mt-10 md:mt-0 md:w-1/2 flex justify-center">
-            <img src={editor} alt="Code Editor" className="max-w-full mx-20 h-auto rounded-lg shadow-md" />
+          <Tilt className="ml-0">
+             <img src={editor} alt="Code Editor" className="max-w-full h-auto rounded-lg shadow-md" />
+         </Tilt>
           </div>
         </div>
       </div>

frontend/src/pages/About.tsx

@@ -2,14 +2,17 @@ import { Link } from "react-router-dom";
 import about from '../assets/about.png'
 import bgHero from "../assets/bgHero.png";
 import { useTranslation } from 'react-i18next';
+import Tilt from 'react-parallax-tilt';
 
 function About() {
   const { t } = useTranslation();
 
   return (
     <div className="w-full  text-[#000435] bg-white dark:text-white dark:bg-[#000435] py-16 px-4"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
       <div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
+      <Tilt>
         <img className="w-[550px] mx-auto my-4" src={about} alt="About Us" />
+      </Tilt>
         <div className="flex flex-col justify-center">
           <p className="bg-gradient-to-r from-blue-600 via-blue-500 to-white inline-block text-transparent bg-clip-text text-4xl font-bold py-1" >
             👨‍💻 {t('about.aboutHeading')}