From 013f01bc9057d243c7db500eb9ab785d548d812f Mon Sep 17 00:00:00 2001
From: Dan Dobos <dan@prowarehouse.nl>
Date: Tue, 21 Oct 2025 09:29:07 +0200
Subject: [PATCH] feat: add Tilt component for enhanced product display and
 integrate with Home component fix: correct spelling of 'Stock' in Card
 component fix: update package.json and package-lock.json to include
 vanilla-tilt dependency

---
 package-lock.json       | 20 ++++++++++++++------
 package.json            |  1 +
 src/components/Card.jsx |  2 +-
 src/components/Home.jsx | 26 +++++++++++++++++---------
 src/components/Tilt.jsx | 16 ++++++++++++++++
 5 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Tilt.jsx

diff --git a/package-lock.json b/package-lock.json
index c92ddf8..66fc33b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,8 @@
 				"react-router-dom": "^7.9.4",
 				"react-scripts": "^5.0.1",
 				"react-toastify": "^11.0.5",
-				"sass": "^1.93.2"
+				"sass": "^1.93.2",
+				"vanilla-tilt": "^1.8.1"
 			}
 		},
 		"node_modules/@adobe/css-tools": {
@@ -4184,7 +4185,6 @@
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
 			"integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.4.0",
 				"@typescript-eslint/scope-manager": "5.62.0",
@@ -16922,6 +16922,7 @@
 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
 			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
 			"license": "(MIT OR CC0-1.0)",
+			"peer": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -17026,9 +17027,9 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.9.3",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+			"version": "4.9.5",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+			"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
 			"license": "Apache-2.0",
 			"peer": true,
 			"bin": {
@@ -17036,7 +17037,7 @@
 				"tsserver": "bin/tsserver"
 			},
 			"engines": {
-				"node": ">=14.17"
+				"node": ">=4.2.0"
 			}
 		},
 		"node_modules/unbox-primitive": {
@@ -17278,6 +17279,12 @@
 			"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
 			"license": "MIT"
 		},
+		"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/vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -17426,6 +17433,7 @@
 			"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
 			"integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/bonjour": "^3.5.9",
 				"@types/connect-history-api-fallback": "^1.3.5",
diff --git a/package.json b/package.json
index d51ec64..eb6e927 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 		"react-router-dom": "^7.9.4",
 		"react-scripts": "^5.0.1",
 		"react-toastify": "^11.0.5",
+		"vanilla-tilt": "^1.8.1",
 		"sass": "^1.93.2"
 	},
 	"scripts": {
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index a879510..d85902d 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -37,7 +37,7 @@ const Card = ({ product }) => {
 					<span>€{product.price}</span>
 				</p>
 				<p className='stock'>
-					<span>Stoc:</span>
+					<span>Stock:</span>
 					<span>{product.stock}</span>
 				</p>
 			</div>
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index ff1e743..3873980 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -1,23 +1,31 @@
-import { useGetProductsQuery } from '../features/productsApi';
-import Card from './Card';
+import { useGetProductsQuery } from "../features/productsApi";
+import Tilt from "./Tilt";
+import Card from "./Card";
 
 const Home = () => {
 	const { data, error, isLoading } = useGetProductsQuery();
 
 	return (
-		<div className='responsive-layout'>
-			<section className='home-container'>
-			<h2>Products</h2>
+		<div className="responsive-layout">
+			<section className="home-container">
+				<h2>Products</h2>
 				{isLoading ? (
-					<p className='spinner'></p>
+					<p className="spinner"></p>
 				) : error ? (
 					<p>An error occoured: {error} </p>
 				) : (
 					<>
 						{data.products?.map((product) => (
-							<article className='card-list' key={product.id}>
-								<Card product={product} />
-							</article>
+							<Tilt
+								options={{
+									reverse: true,
+									speed: 1200,
+									easing: "cubic-bezier(.09,.67,.54,.76)",
+								}}>
+								<article className="card-list" key={product.id}>
+									<Card product={product} />
+								</article>
+							</Tilt>
 						))}
 					</>
 				)}
diff --git a/src/components/Tilt.jsx b/src/components/Tilt.jsx
new file mode 100644
index 0000000..3d28e0c
--- /dev/null
+++ b/src/components/Tilt.jsx
@@ -0,0 +1,16 @@
+import React, { useEffect, useRef } from "react";
+
+import VanillaTilt from "vanilla-tilt";
+
+const Tilt = (props) => {
+  const { options, children } = props;
+  const tilt = useRef(null);
+
+  useEffect(() => {
+    VanillaTilt.init(tilt.current, options);
+  }, [options]);
+
+  return <div ref={tilt}>{children}</div>;
+};
+
+export default Tilt;
\ No newline at end of file