feat(lessons): add lessons from client db

src/components/lessons/ScaleFactorWidget.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+
+const ScaleFactorWidget: React.FC = () => {
+  const [k, setK] = useState(2);
+
+  const unit = 24; // Base size in px
+  const size = k * unit;
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200 w-full max-w-3xl">
+      <div className="mb-8">
+        <label className="flex justify-between font-bold text-slate-700 mb-2">
+          Scale Factor (k):{" "}
+          <span className="text-indigo-600 text-xl">{k}x</span>
+        </label>
+        <input
+          type="range"
+          min="1"
+          max="4"
+          step="1"
+          value={k}
+          onChange={(e) => setK(parseInt(e.target.value))}
+          className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"
+        />
+        <div className="flex justify-between text-xs text-slate-400 mt-1 font-mono">
+          <span>1x</span>
+          <span>2x</span>
+          <span>3x</span>
+          <span>4x</span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+        {/* 1D: Length */}
+        <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col">
+          <h4 className="text-sm font-bold uppercase text-slate-500 mb-4">
+            1D: Length
+          </h4>
+          <div className="flex-1 flex items-center justify-center min-h-[160px]">
+            <div
+              className="h-3 bg-indigo-500 rounded-full transition-all duration-500 shadow-sm"
+              style={{ width: `${k * 20}%` }}
+            ></div>
+          </div>
+          <div className="mt-auto border-t border-slate-200 pt-2">
+            <p className="text-slate-500 text-xs">Multiplier</p>
+            <p className="text-2xl font-bold text-indigo-700">k = {k}</p>
+          </div>
+        </div>
+
+        {/* 2D: Area */}
+        <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col">
+          <h4 className="text-sm font-bold uppercase text-slate-500 mb-4">
+            2D: Area
+          </h4>
+          <div className="flex-1 flex items-center justify-center relative min-h-[160px]">
+            {/* Base */}
+            <div className="w-8 h-8 border-2 border-emerald-500/30 absolute"></div>
+            {/* Scaled */}
+            <div
+              className="bg-emerald-500 shadow-lg transition-all duration-500 ease-out"
+              style={{ width: `${size}px`, height: `${size}px` }}
+            ></div>
+          </div>
+          <div className="mt-auto border-t border-slate-200 pt-2">
+            <p className="text-slate-500 text-xs">Multiplier</p>
+            <p className="text-2xl font-bold text-emerald-700">k² = {k * k}</p>
+          </div>
+        </div>
+
+        {/* 3D: Volume */}
+        <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col overflow-hidden">
+          <h4 className="text-sm font-bold uppercase text-slate-500 mb-4">
+            3D: Volume
+          </h4>
+          <div className="flex-1 flex items-center justify-center perspective-1000 min-h-[160px]">
+            <div
+              className="relative transform-style-3d transition-all duration-500 ease-out"
+              style={{
+                width: `${size}px`,
+                height: `${size}px`,
+                transform: "rotateX(-20deg) rotateY(-30deg)",
+              }}
+            >
+              {/* Faces */}
+              {[
+                // Front
+                { trans: `translateZ(${size / 2}px)`, color: "bg-rose-500" },
+                // Back
+                {
+                  trans: `rotateY(180deg) translateZ(${size / 2}px)`,
+                  color: "bg-rose-600",
+                },
+                // Right
+                {
+                  trans: `rotateY(90deg) translateZ(${size / 2}px)`,
+                  color: "bg-rose-600",
+                },
+                // Left
+                {
+                  trans: `rotateY(-90deg) translateZ(${size / 2}px)`,
+                  color: "bg-rose-500",
+                },
+                // Top
+                {
+                  trans: `rotateX(90deg) translateZ(${size / 2}px)`,
+                  color: "bg-rose-400",
+                },
+                // Bottom
+                {
+                  trans: `rotateX(-90deg) translateZ(${size / 2}px)`,
+                  color: "bg-rose-700",
+                },
+              ].map((face, i) => (
+                <div
+                  key={i}
+                  className={`absolute inset-0 border border-white/20 ${face.color} shadow-sm`}
+                  style={{ transform: face.trans }}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="mt-auto border-t border-slate-200 pt-2">
+            <p className="text-slate-500 text-xs">Multiplier</p>
+            <p className="text-2xl font-bold text-rose-700">k³ = {k * k * k}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ScaleFactorWidget;