Changes

src/pages/theme-pages/discrete-math/Counting.tsx

@@ -1,11 +1,38 @@
-import ComingSoon from "@/components/ComingSoon";
+import Layout from "@/components/Layout";
+import InteractiveCard from "@/components/InteractiveCard";
+import { Grid } from "lucide-react";
 
 const Counting = () => {
+  const interactives = [
+    {
+      id: "ferrers-rogers-ramanujan",
+      title: "Ferrers Diagram & Rogers-Ramanujan Partition",
+      description: "Visualize integer partitions as Ferrers diagrams and discover the Rogers-Ramanujan transformation using L-shaped hooks.",
+      tags: ["Partitions", "Visualization", "Combinatorics"],
+      path: "/themes/discrete-math/counting/ferrers-rogers-ramanujan",
+      icon: Grid,
+    }
+  ];
+
   return (
-    <ComingSoon 
-      title="Counting"
-      description="Explore combinatorics, permutations, combinations, and advanced counting principles through visual tools and interactive exercises."
-    />
+    <Layout>
+      <div className="container mx-auto py-8 px-4">
+        <div className="max-w-4xl mx-auto space-y-8">
+          <div className="space-y-2">
+            <h1 className="text-4xl font-bold">Counting</h1>
+            <p className="text-muted-foreground text-lg">
+              Explore combinatorics, permutations, combinations, and advanced counting principles through visual tools and interactive exercises.
+            </p>
+          </div>
+
+          <div className="grid gap-6">
+            {interactives.map((interactive) => (
+              <InteractiveCard key={interactive.id} {...interactive} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
   );
 };