Add pebble game interactive

Add a new interactive game where users place pebbles on an integer line from 1 to 35. The rules are:
- A pebble can only be placed on position `i` if position `i-1` has a pebble.
- Position 1 can always have a pebble placed on it.
- Users start with `n` pebbles (chosen via a slider from 2 to 5).
- The goal is to find the largest integer position for which a pebble can be placed.

src/components/InteractiveGallery.tsx

@@ -7,6 +7,7 @@ import Layout from '@/components/Layout';
 import BinarySearchTrick from '@/components/BinarySearchTrick';
 import TernarySearchTrick from '@/components/TernarySearchTrick';
 import GuessingGame from '@/components/GuessingGame';
+import PebblePlacementGame from '@/components/PebblePlacementGame';
 
 interface Interactive {
   id: string;
@@ -38,6 +39,13 @@ const interactives: Interactive[] = [
     tags: ['ternary', 'magic', 'numbers', 'trick', 'data-structures', 'search'],
     component: TernarySearchTrick
   },
+  {
+    id: 'pebble-placement-game',
+    title: 'Pebble Placement Strategy Game',
+    description: 'Test your strategic thinking! Place pebbles following specific rules to reach the furthest position possible.',
+    tags: ['strategy', 'logic', 'game', 'placement', 'optimization', 'puzzle'],
+    component: PebblePlacementGame
+  },
 ];
 const InteractiveGallery = () => {
   const [searchTerm, setSearchTerm] = useState('');