Feature: Fully Responsive Puzzle Roadmap Page with Timeline Scroll

frontend/app/puzzles/roadmap/app.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import PuzzleTimeline from '@/components/puzzles/roadmap/PuzzleTimeline';
+import { puzzleRoadmap } from '@/components/puzzles/roadmap/puzzleRoadmapData';
+
+export default function PuzzleRoadmapPage() {
+  return (
+    <main className="min-h-screen bg-gradient-to-b from-[#0f0c29] via-[#302b63] to-[#24243e] text-white py-12 px-4 md:px-16">
+      <h1 className="text-4xl md:text-5xl font-bold text-center mb-12">
+        Puzzle Roadmap
+      </h1>
+      <PuzzleTimeline puzzles={puzzleRoadmap} />
+    </main>
+  );
+}

frontend/components/puzzles/roadmap/PuzzleCard.tsx

@@ -0,0 +1,33 @@
+import Image from 'next/image';
+import { format } from 'date-fns';
+import { Puzzle } from './PuzzleTimeline';
+
+type Props = {
+  puzzle: Puzzle;
+};
+
+export default function PuzzleCard({ puzzle }: Props) {
+  const { title, description, imageUrl, releaseDate } = puzzle;
+  const isUpcoming = new Date(releaseDate) > new Date();
+
+  return (
+    <div className="bg-white text-gray-900 rounded-2xl shadow-lg w-[280px] md:w-[320px] p-4 flex flex-col items-center hover:scale-105 transition-transform duration-300">
+      <div className="relative w-full h-40 mb-4 rounded-xl overflow-hidden">
+        <Image
+          src={imageUrl}
+          alt={title}
+          layout="fill"
+          objectFit="cover"
+          className="rounded-xl"
+        />
+      </div>
+      <h2 className="text-xl font-semibold mb-1 text-center">{title}</h2>
+      <p className="text-sm text-center mb-2">{description}</p>
+      <div className="text-xs text-gray-600">
+        {isUpcoming
+          ? `Coming on ${format(new Date(releaseDate), 'PPP')}`
+          : 'Released'}
+      </div>
+    </div>
+  );
+}

frontend/components/puzzles/roadmap/PuzzleTimeline.tsx

@@ -0,0 +1,27 @@
+import PuzzleCard from './PuzzleCard';
+
+export type Puzzle = {
+  id: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  releaseDate: string;
+};
+
+type Props = {
+  puzzles: Puzzle[];
+};
+
+export default function PuzzleTimeline({ puzzles }: Props) {
+  return (
+    <section className="overflow-x-auto">
+      <div className="flex gap-6 snap-x snap-mandatory overflow-x-scroll pb-4 px-2 md:px-0">
+        {puzzles.map((puzzle) => (
+          <div key={puzzle.id} className="snap-start shrink-0">
+            <PuzzleCard puzzle={puzzle} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

frontend/components/puzzles/roadmap/puzzleRoadmapData.ts

@@ -0,0 +1,23 @@
+export const puzzleRoadmap = [
+  {
+    id: '1',
+    title: 'Genesis Puzzle',
+    description: 'Start your journey into puzzles.',
+    imageUrl: '/images/genesis.png',
+    releaseDate: '2025-08-01',
+  },
+  {
+    id: '2',
+    title: 'Cipher Cave',
+    description: 'Decrypt hidden secrets in this thrilling challenge.',
+    imageUrl: '/images/cipher.png',
+    releaseDate: '2025-08-15',
+  },
+  {
+    id: '3',
+    title: 'Maze of Mind',
+    description: 'A psychological twist awaits.',
+    imageUrl: '/images/maze.png',
+    releaseDate: '2025-09-01',
+  },
+];

frontend/package.json

@@ -18,12 +18,13 @@
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "formik": "^2.4.6",
     "get-starknet": "^3.3.3",
     "lucide-react": "^0.474.0",
-    "next": "14.2.23",
-    "react": "^18",
-    "react-dom": "^18",
+    "next": "^14.2.23",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "starknet": "^6.23.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",