diff --git a/.gitignore b/.gitignore
index 3d30445..e18aff7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,4 +26,10 @@ dist-ssr
 *.sw?
 
 # Coverage directory used by tools like istanbul
-coverage
\ No newline at end of file
+coverage
+
+# TypeScript
+*.tsbuildinfo
+
+vite.config.js
+vite.config.d.ts
diff --git a/package.json b/package.json
index 9c487ac..9047a96 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "framer-motion": "^11.11.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0"
@@ -24,6 +25,8 @@
     "@eslint/js": "^9.14.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80b06b7..a8e5b09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      framer-motion:
+        specifier: ^11.11.17
+        version: 11.11.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -27,6 +30,12 @@ importers:
       '@testing-library/react':
         specifier: ^16.0.1
         version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/jest':
+        specifier: ^29.5.14
+        version: 29.5.14
+      '@types/node':
+        specifier: ^22.9.3
+        version: 22.9.3
       '@types/react':
         specifier: ^18.3.12
         version: 18.3.12
@@ -41,10 +50,10 @@ importers:
         version: 8.13.0(eslint@8.57.1)(typescript@5.6.3)
       '@vitejs/plugin-react':
         specifier: ^4.3.3
-        version: 4.3.3(vite@5.4.10)
+        version: 4.3.3(vite@5.4.10(@types/node@22.9.3))
       '@vitest/coverage-v8':
         specifier: ^2.1.1
-        version: 2.1.4(vitest@2.1.4(jsdom@25.0.1))
+        version: 2.1.4(vitest@2.1.4(@types/node@22.9.3)(jsdom@25.0.1))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
@@ -104,10 +113,10 @@ importers:
         version: 8.13.0(eslint@8.57.1)(typescript@5.6.3)
       vite:
         specifier: ^5.4.10
-        version: 5.4.10
+        version: 5.4.10(@types/node@22.9.3)
       vitest:
         specifier: ^2.1.4
-        version: 2.1.4(jsdom@25.0.1)
+        version: 2.1.4(@types/node@22.9.3)(jsdom@25.0.1)
 
 packages:
 
@@ -389,6 +398,18 @@ packages:
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
 
+  '@jest/expect-utils@29.7.0':
+    resolution: {integrity: sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/schemas@29.6.3':
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/types@29.6.3':
+    resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   '@jridgewell/gen-mapping@0.3.5':
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
@@ -524,6 +545,9 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@sinclair/typebox@0.27.8':
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -565,9 +589,24 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/istanbul-lib-coverage@2.0.6':
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+
+  '@types/istanbul-lib-report@3.0.3':
+    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+
+  '@types/istanbul-reports@3.0.4':
+    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
+
+  '@types/jest@29.5.14':
+    resolution: {integrity: sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==}
+
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/node@22.9.3':
+    resolution: {integrity: sha512-F3u1fs/fce3FFk+DAxbxc78DF8x0cY09RRL8GnXLmkJ1jvx3TtPdWoTT5/NiYfI5ASqXBmfqJi9dZ3gxMx4lzw==}
+
   '@types/prop-types@15.7.13':
     resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
 
@@ -577,6 +616,15 @@ packages:
   '@types/react@18.3.12':
     resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
 
+  '@types/stack-utils@2.0.3':
+    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
+
+  '@types/yargs-parser@21.0.3':
+    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+
+  '@types/yargs@17.0.33':
+    resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
+
   '@typescript-eslint/eslint-plugin@8.13.0':
     resolution: {integrity: sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -860,6 +908,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -968,6 +1020,10 @@ packages:
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
@@ -1041,6 +1097,10 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-string-regexp@2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1193,6 +1253,10 @@ packages:
     resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
     engines: {node: '>=12.0.0'}
 
+  expect@29.7.0:
+    resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -1245,6 +1309,20 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framer-motion@11.11.17:
+    resolution: {integrity: sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1310,6 +1388,9 @@ packages:
   gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
@@ -1526,6 +1607,26 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  jest-diff@29.7.0:
+    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-get-type@29.6.3:
+    resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-matcher-utils@29.7.0:
+    resolution: {integrity: sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-message-util@29.7.0:
+    resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-util@29.7.0:
+    resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   jiti@1.21.6:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
@@ -1916,6 +2017,10 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -1937,6 +2042,9 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -2066,10 +2174,18 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  stack-utils@2.0.6:
+    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
+    engines: {node: '>=10'}
+
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
@@ -2258,6 +2374,9 @@ packages:
   unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
 
+  undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -2666,6 +2785,23 @@ snapshots:
 
   '@istanbuljs/schema@0.1.3': {}
 
+  '@jest/expect-utils@29.7.0':
+    dependencies:
+      jest-get-type: 29.6.3
+
+  '@jest/schemas@29.6.3':
+    dependencies:
+      '@sinclair/typebox': 0.27.8
+
+  '@jest/types@29.6.3':
+    dependencies:
+      '@jest/schemas': 29.6.3
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 22.9.3
+      '@types/yargs': 17.0.33
+      chalk: 4.1.2
+
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
@@ -2758,6 +2894,8 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@sinclair/typebox@0.27.8': {}
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -2814,8 +2952,27 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/istanbul-lib-coverage@2.0.6': {}
+
+  '@types/istanbul-lib-report@3.0.3':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+
+  '@types/istanbul-reports@3.0.4':
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.3
+
+  '@types/jest@29.5.14':
+    dependencies:
+      expect: 29.7.0
+      pretty-format: 29.7.0
+
   '@types/json5@0.0.29': {}
 
+  '@types/node@22.9.3':
+    dependencies:
+      undici-types: 6.19.8
+
   '@types/prop-types@15.7.13': {}
 
   '@types/react-dom@18.3.1':
@@ -2827,6 +2984,14 @@ snapshots:
       '@types/prop-types': 15.7.13
       csstype: 3.1.3
 
+  '@types/stack-utils@2.0.3': {}
+
+  '@types/yargs-parser@21.0.3': {}
+
+  '@types/yargs@17.0.33':
+    dependencies:
+      '@types/yargs-parser': 21.0.3
+
   '@typescript-eslint/eslint-plugin@8.13.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -2910,18 +3075,18 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-react@4.3.3(vite@5.4.10)':
+  '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.9.3))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.0)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.0)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.10
+      vite: 5.4.10(@types/node@22.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@2.1.4(vitest@2.1.4(jsdom@25.0.1))':
+  '@vitest/coverage-v8@2.1.4(vitest@2.1.4(@types/node@22.9.3)(jsdom@25.0.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -2935,7 +3100,7 @@ snapshots:
       std-env: 3.7.0
       test-exclude: 7.0.1
       tinyrainbow: 1.2.0
-      vitest: 2.1.4(jsdom@25.0.1)
+      vitest: 2.1.4(@types/node@22.9.3)(jsdom@25.0.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -2946,13 +3111,13 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.4(vite@5.4.10)':
+  '@vitest/mocker@2.1.4(vite@5.4.10(@types/node@22.9.3))':
     dependencies:
       '@vitest/spy': 2.1.4
       estree-walker: 3.0.3
       magic-string: 0.30.12
     optionalDependencies:
-      vite: 5.4.10
+      vite: 5.4.10(@types/node@22.9.3)
 
   '@vitest/pretty-format@2.1.4':
     dependencies:
@@ -3188,6 +3353,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  ci-info@3.9.0: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -3279,6 +3446,8 @@ snapshots:
 
   didyoumean@1.2.2: {}
 
+  diff-sequences@29.6.3: {}
+
   dlv@1.1.3: {}
 
   doctrine@2.1.0:
@@ -3424,6 +3593,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-string-regexp@2.0.0: {}
+
   escape-string-regexp@4.0.0: {}
 
   eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1):
@@ -3639,6 +3810,14 @@ snapshots:
 
   expect-type@1.1.0: {}
 
+  expect@29.7.0:
+    dependencies:
+      '@jest/expect-utils': 29.7.0
+      jest-get-type: 29.6.3
+      jest-matcher-utils: 29.7.0
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
+
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
@@ -3697,6 +3876,13 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framer-motion@11.11.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -3772,6 +3958,8 @@ snapshots:
     dependencies:
       get-intrinsic: 1.2.4
 
+  graceful-fs@4.2.11: {}
+
   graphemer@1.4.0: {}
 
   has-bigints@1.0.2: {}
@@ -3981,6 +4169,43 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  jest-diff@29.7.0:
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 29.6.3
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
+
+  jest-get-type@29.6.3: {}
+
+  jest-matcher-utils@29.7.0:
+    dependencies:
+      chalk: 4.1.2
+      jest-diff: 29.7.0
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
+
+  jest-message-util@29.7.0:
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@jest/types': 29.6.3
+      '@types/stack-utils': 2.0.3
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      micromatch: 4.0.8
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      stack-utils: 2.0.6
+
+  jest-util@29.7.0:
+    dependencies:
+      '@jest/types': 29.6.3
+      '@types/node': 22.9.3
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      graceful-fs: 4.2.11
+      picomatch: 2.3.1
+
   jiti@1.21.6: {}
 
   js-tokens@4.0.0: {}
@@ -4295,6 +4520,12 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  pretty-format@29.7.0:
+    dependencies:
+      '@jest/schemas': 29.6.3
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -4315,6 +4546,8 @@ snapshots:
 
   react-is@17.0.2: {}
 
+  react-is@18.3.1: {}
+
   react-refresh@0.14.2: {}
 
   react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -4475,8 +4708,14 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  slash@3.0.0: {}
+
   source-map-js@1.2.1: {}
 
+  stack-utils@2.0.6:
+    dependencies:
+      escape-string-regexp: 2.0.0
+
   stackback@0.0.2: {}
 
   std-env@3.7.0: {}
@@ -4721,6 +4960,8 @@ snapshots:
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
 
+  undici-types@6.19.8: {}
+
   update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
       browserslist: 4.24.2
@@ -4733,12 +4974,12 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vite-node@2.1.4:
+  vite-node@2.1.4(@types/node@22.9.3):
     dependencies:
       cac: 6.7.14
       debug: 4.3.7
       pathe: 1.1.2
-      vite: 5.4.10
+      vite: 5.4.10(@types/node@22.9.3)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -4750,18 +4991,19 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.4.10:
+  vite@5.4.10(@types/node@22.9.3):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
       rollup: 4.24.4
     optionalDependencies:
+      '@types/node': 22.9.3
       fsevents: 2.3.3
 
-  vitest@2.1.4(jsdom@25.0.1):
+  vitest@2.1.4(@types/node@22.9.3)(jsdom@25.0.1):
     dependencies:
       '@vitest/expect': 2.1.4
-      '@vitest/mocker': 2.1.4(vite@5.4.10)
+      '@vitest/mocker': 2.1.4(vite@5.4.10(@types/node@22.9.3))
       '@vitest/pretty-format': 2.1.4
       '@vitest/runner': 2.1.4
       '@vitest/snapshot': 2.1.4
@@ -4777,10 +5019,11 @@ snapshots:
       tinyexec: 0.3.1
       tinypool: 1.0.1
       tinyrainbow: 1.2.0
-      vite: 5.4.10
-      vite-node: 2.1.4
+      vite: 5.4.10(@types/node@22.9.3)
+      vite-node: 2.1.4(@types/node@22.9.3)
       why-is-node-running: 2.3.0
     optionalDependencies:
+      '@types/node': 22.9.3
       jsdom: 25.0.1
     transitivePeerDependencies:
       - less
diff --git a/src/App.tsx b/src/App.tsx
index 2163376..4b8b734 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,16 @@
 import './App.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Navbar from './components/navbar';
 import FeatureFlagList from './pages/FeatureFlagList';
 import FeatureFlagDetails from './pages/FeatureFlagDetails';
+import Landing from './pages/Landing';
+import Navbar from './components/navbar';
 
 const App = () => {
   return (
     <BrowserRouter>
       <Navbar />
       <Routes>
+        <Route path="/" element={<Landing />} />
         <Route path="/featureFlag" element={<FeatureFlagList />} />
         <Route path="/featureFlag/:id" element={<FeatureFlagDetails />} />
       </Routes>
diff --git a/public/assets/rds-logo.svg b/src/assets/rds-logo.svg
similarity index 100%
rename from public/assets/rds-logo.svg
rename to src/assets/rds-logo.svg
diff --git a/src/components/landing/ScrollIndicator.tsx b/src/components/landing/ScrollIndicator.tsx
new file mode 100644
index 0000000..8a437f2
--- /dev/null
+++ b/src/components/landing/ScrollIndicator.tsx
@@ -0,0 +1,34 @@
+import { motion } from 'framer-motion';
+
+export const ScrollIndicator = () => {
+  const handleClick = () => {
+    const targetElement = document.getElementById('what-is-section');
+    if (targetElement) {
+      targetElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }
+  };
+
+  return (
+    <motion.div
+      className="absolute bottom-8 cursor-pointer"
+      animate={{ y: [0, 10, 0] }}
+      transition={{ repeat: Infinity, duration: 2 }}
+      onClick={handleClick}
+      data-testid="scroll-indicator"
+    >
+      <svg
+        className="h-6 w-6 text-secondary-light"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        data-testid="scroll-arrow"
+      >
+        <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+      </svg>
+    </motion.div>
+  );
+};
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 78cfb61..e5b5fd1 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { getConfig, validateEnv } from '../config';
+import RDSLogo from '../assets/rds-logo.svg';
 
 const Navbar: React.FC = () => {
   const { welcomeSiteUrl, membersSiteUrl, statusSiteUrl } = getConfig();
@@ -14,7 +15,7 @@ const Navbar: React.FC = () => {
 
   return (
     <nav
-      className="fixed left-0 top-0 w-full border-b border-gray-100 bg-primary p-2"
+      className="fixed left-0 top-0 z-50 w-full border-b border-gray-100 bg-primary p-2"
       aria-label="Main Navigation"
       data-testid="navbar"
     >
@@ -25,11 +26,7 @@ const Navbar: React.FC = () => {
           aria-label="Home"
           data-testid="navbar-home-link"
         >
-          <img
-            src="/assets/rds-logo.svg"
-            alt="RDS Logo"
-            className="h-12 w-12"
-          />
+          <img src={RDSLogo} alt="RDS Logo" className="h-12 w-12" />
         </a>
 
         <div className="flex items-center space-x-6">
diff --git a/src/config.ts b/src/config.ts
index dadc19d..694adad 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,12 @@
-// config.ts
-const config = {
+interface Config {
+  appEnv: string;
+  welcomeSiteUrl: string;
+  membersSiteUrl: string;
+  statusSiteUrl: string;
+  [key: string]: string;
+}
+
+const config: Config = {
   appEnv: import.meta.env.VITE_REACT_ENV,
   welcomeSiteUrl: import.meta.env.VITE_REACT_WELCOME_SITE_URL,
   membersSiteUrl: import.meta.env.VITE_REACT_MEMBERS_SITE_URL,
diff --git a/src/constants/landing.ts b/src/constants/landing.ts
new file mode 100644
index 0000000..e58a710
--- /dev/null
+++ b/src/constants/landing.ts
@@ -0,0 +1,35 @@
+export const FEATURES = [
+  {
+    title: 'Progressive Rollouts',
+    description:
+      'Gradually release features to specific user segments to minimize risk and gather feedback.',
+  },
+  {
+    title: 'A/B Testing',
+    description:
+      'Test different versions of features with real users to make data-driven decisions.',
+  },
+  {
+    title: 'Kill Switch',
+    description:
+      'Instantly disable problematic features without deploying new code.',
+  },
+  {
+    title: 'User Targeting',
+    description:
+      'Release features to specific users based upon discord roles, RDS usernames, and other custom criteria.',
+  },
+] as const;
+
+export const REPO_URL =
+  'https://github.com/Real-Dev-Squad/feature-flag-frontend';
+
+export const WHAT_IS_FEATURE_FLAG =
+  'Feature flags are a software development tool that allow you to enable or disable a feature without modifying the source code or performing a new deployment.';
+
+export const WHY_USE_FEATURE_FLAGS = [
+  'Test new features safely in production',
+  'Control feature access for specific users or groups',
+  'Quick rollback without code deployment',
+  'Easier A/B testing and experimentation',
+];
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
new file mode 100644
index 0000000..a843e25
--- /dev/null
+++ b/src/pages/Landing.tsx
@@ -0,0 +1,137 @@
+import { motion } from 'framer-motion';
+import RDSLogo from '../assets/rds-logo.svg';
+import {
+  FEATURES,
+  WHAT_IS_FEATURE_FLAG,
+  WHY_USE_FEATURE_FLAGS,
+} from '../constants/landing';
+import { ScrollIndicator } from '../components/landing/ScrollIndicator';
+import { fadeInViewportAnimation } from '../utils/animations';
+
+interface Feature {
+  title: string;
+  description: string;
+}
+
+const Landing = () => {
+  return (
+    <main className="min-h-screen bg-white" role="main">
+      <motion.div
+        className="relative z-0 flex min-h-[calc(100vh-64px)] flex-col items-center justify-center px-4 text-center"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        role="banner"
+        data-testid="hero-section"
+      >
+        <div className="max-w-4xl">
+          <h1
+            className="mb-4 bg-gradient-to-r from-primary to-primary-light bg-clip-text pb-1 text-5xl font-bold text-transparent md:text-6xl"
+            data-testid="hero-title"
+          >
+            Welcome to Feature-Flag
+          </h1>
+          <div
+            className="flex items-center justify-center gap-3"
+            aria-label="Created by Real Dev Squad"
+          >
+            <span className="text-lg text-secondary-light">by</span>
+            <img src={RDSLogo} alt="RDS Logo" className="h-10 w-auto" />
+            <span className="text-lg text-secondary-light">Real Dev Squad</span>
+          </div>
+        </div>
+        <ScrollIndicator />
+      </motion.div>
+      <motion.section
+        className="scroll-mt-16 bg-gray-50 py-20"
+        {...fadeInViewportAnimation}
+        id="what-is-section"
+        data-testid="what-is-section"
+      >
+        <div className="mx-auto max-w-4xl space-y-16 px-4">
+          <div>
+            <h2
+              id="what-are-feature-flags"
+              className="mb-6 text-3xl font-bold text-[#041484] md:text-4xl"
+            >
+              What are Feature Flags?
+            </h2>
+            <p className="text-lg text-gray-600">{WHAT_IS_FEATURE_FLAG}</p>
+          </div>
+
+          <div data-testid="why-use-section">
+            <h2
+              id="why-use-feature-flags"
+              className="mb-6 text-3xl font-bold text-[#041484] md:text-4xl"
+            >
+              Why Use Feature Flags?
+            </h2>
+            <ul
+              className="list-inside list-disc space-y-3 text-lg text-gray-600"
+              aria-label="Benefits of using feature flags"
+            >
+              {WHY_USE_FEATURE_FLAGS.map((item: string) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </motion.section>
+      <motion.section
+        className="py-20"
+        {...fadeInViewportAnimation}
+        data-testid="features-section"
+      >
+        <div className="mx-auto max-w-4xl px-4">
+          <h2 className="mb-12 text-center text-3xl font-bold text-[#041484] md:text-4xl">
+            Key Features
+          </h2>
+          <div
+            className="grid gap-8 md:grid-cols-2"
+            data-testid="features-grid"
+          >
+            {FEATURES.map((feature: Feature, index) => (
+              <motion.div
+                key={feature.title}
+                className="rounded-lg border border-gray-100 bg-white p-6 shadow-lg transition-all hover:shadow-xl"
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                viewport={{ once: true }}
+                data-testid={`feature-card-${index}`}
+              >
+                <h3 className="mb-3 text-xl font-semibold text-[#041484]">
+                  {feature.title}
+                </h3>
+                <p className="text-gray-600">{feature.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </motion.section>
+      <motion.footer
+        className="bg-gradient-to-r from-primary to-primary-light py-12 text-white"
+        {...fadeInViewportAnimation}
+        role="contentinfo"
+        data-testid="footer"
+      >
+        <div className="mx-auto max-w-4xl px-4 text-center">
+          <p className="text-lg">
+            The contents of the website are deployed from this open sourced{' '}
+            <a
+              href="https://github.com/Real-Dev-Squad/feature-flag-frontend"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="border-b border-white hover:border-accent hover:text-accent"
+              data-testid="repo-link"
+            >
+              repo
+            </a>
+          </p>
+        </div>
+      </motion.footer>
+    </main>
+  );
+};
+
+export default Landing;
diff --git a/src/utils/animations.ts b/src/utils/animations.ts
new file mode 100644
index 0000000..88e0ea8
--- /dev/null
+++ b/src/utils/animations.ts
@@ -0,0 +1,6 @@
+export const fadeInViewportAnimation = {
+  initial: { opacity: 0 },
+  whileInView: { opacity: 1 },
+  transition: { duration: 0.8 },
+  viewport: { once: true },
+}; 
\ No newline at end of file
diff --git a/tests/App.test.tsx b/tests/App.test.tsx
index 112a365..efc983c 100644
--- a/tests/App.test.tsx
+++ b/tests/App.test.tsx
@@ -1,9 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import App from '../src/App';
+import { describe, it, expect } from 'vitest';
 
-test('renders the app component', () => {
-  render(<App />);
+describe('App Component', () => {
+  it('renders the app component', () => {
+    render(<App />);
 
-  //check if navbar exists
-  expect(screen.getByTestId('navbar')).toBeInTheDocument();
+    //check if navbar exists
+    expect(screen.getByTestId('navbar')).toBeInTheDocument();
+  });
 });
diff --git a/tests/components/landing/ScrollIndicator.test.tsx b/tests/components/landing/ScrollIndicator.test.tsx
new file mode 100644
index 0000000..b367cbe
--- /dev/null
+++ b/tests/components/landing/ScrollIndicator.test.tsx
@@ -0,0 +1,39 @@
+import { render, fireEvent } from '@testing-library/react';
+import { ScrollIndicator } from '../../../src/components/landing/ScrollIndicator';
+import { describe, it, expect, vi } from 'vitest';
+
+describe('ScrollIndicator', () => {
+  it('renders with correct attributes', () => {
+    const { getByTestId } = render(<ScrollIndicator />);
+    expect(getByTestId('scroll-indicator')).toBeInTheDocument();
+    expect(getByTestId('scroll-arrow')).toBeInTheDocument();
+  });
+
+  it('scrolls when clicked', () => {
+    const scrollIntoViewMock = vi.fn();
+
+    const mockElement = document.createElement('div');
+    mockElement.id = 'what-is-section';
+    mockElement.scrollIntoView = scrollIntoViewMock;
+    document.body.appendChild(mockElement);
+
+    const { getByTestId } = render(<ScrollIndicator />);
+    fireEvent.click(getByTestId('scroll-indicator'));
+    expect(scrollIntoViewMock).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block: 'start',
+    });
+    document.body.removeChild(mockElement);
+  });
+
+  it('handles missing scroll target element gracefully', () => {
+    const scrollIntoViewMock = vi.fn();
+    const getElementByIdSpy = vi.spyOn(document, 'getElementById').mockReturnValue(null);
+
+    const { getByTestId } = render(<ScrollIndicator />);
+    fireEvent.click(getByTestId('scroll-indicator'));
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+    
+    getElementByIdSpy.mockRestore();
+  });
+});
diff --git a/tests/pages/Landing.test.tsx b/tests/pages/Landing.test.tsx
new file mode 100644
index 0000000..922231c
--- /dev/null
+++ b/tests/pages/Landing.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import Landing from '../../src/pages/Landing';
+import { describe, it, expect } from 'vitest';
+
+describe('Landing Page', () => {
+  it('renders main sections and content', () => {
+    render(<Landing />);
+
+    expect(screen.getByTestId('hero-section')).toBeInTheDocument();
+    expect(screen.getByTestId('hero-title')).toHaveTextContent(
+      'Welcome to Feature-Flag',
+    );
+    expect(screen.getByAltText('RDS Logo')).toBeInTheDocument();
+
+    expect(screen.getByTestId('what-is-section')).toBeInTheDocument();
+    expect(screen.getByTestId('why-use-section')).toBeInTheDocument();
+
+    expect(screen.getByTestId('features-section')).toBeInTheDocument();
+    expect(screen.getByTestId('features-grid')).toBeInTheDocument();
+
+    expect(screen.getByTestId('footer')).toBeInTheDocument();
+    expect(screen.getByTestId('repo-link')).toHaveAttribute(
+      'href',
+      'https://github.com/Real-Dev-Squad/feature-flag-frontend',
+    );
+  });
+
+  it('renders all feature cards', () => {
+    render(<Landing />);
+    const featureCards = screen.getAllByTestId(/^feature-card-/);
+    expect(featureCards).toHaveLength(4);
+  });
+
+  it('has proper accessibility attributes', () => {
+    render(<Landing />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(
+      screen.getByLabelText('Created by Real Dev Squad'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByLabelText('Benefits of using feature flags'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/tests/setup.ts b/tests/setup.ts
index 7b0828b..a379cee 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -1 +1,14 @@
 import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+class IntersectionObserverMock {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+}
+
+Object.defineProperty(window, 'IntersectionObserver', {
+  writable: true,
+  configurable: true,
+  value: IntersectionObserverMock,
+});