added 3D rotation to the contribution diagram (JhaSourav07#1757)

## Description
I had updated the landing page contribution diagram and convert it into
a dynamically rotatable diagram , which revert back to it's default
position after double clicking on it.

Fixes JhaSourav07#521 

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [x] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

https://github.com/user-attachments/assets/b0c35a13-b79b-4e78-a9a6-6f6018d53a09


## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [ ] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] I have made sure that i have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: Ayush4958

app/page.tsx

@@ -140,6 +140,39 @@ export default function LandingPage() {
     setTimeout(() => setCopied(false), 50000);
   };
 
+  const handleRotate3D = (dx: number, dy: number) => {
+    const towersGroup = document.getElementById('cp-towers');
+    if (!towersGroup) return;
+
+    // Remove any transition so dragging feels instant and responsive
+    towersGroup.style.transition = 'none';
+
+    let currentX = 0;
+    let currentY = 0;
+
+    const transformStr = towersGroup.style.transform;
+    if (transformStr) {
+      const matchX = transformStr.match(/rotateX\(([-0-9.]+)deg\)/);
+      const matchY = transformStr.match(/rotateY\(([-0-9.]+)deg\)/);
+      if (matchX) currentX = parseFloat(matchX[1]);
+      if (matchY) currentY = parseFloat(matchY[1]);
+    }
+
+    const newX = currentX - dy * 0.5;
+    const newY = currentY + dx * 0.5;
+
+    towersGroup.style.transform = `translate(0px, 20px) rotateX(${newX}deg) rotateY(${newY}deg)`;
+  };
+
+  const handleReset3D = () => {
+    const towersGroup = document.getElementById('cp-towers');
+    if (towersGroup) {
+      // Apply a smooth transition for the reset
+      towersGroup.style.transition = 'transform 1.2s cubic-bezier(0.16, 1, 0.3, 1)';
+      towersGroup.style.transform = '';
+    }
+  };
+
   return (
     <div className="min-h-screen overflow-x-hidden bg-transparent font-sans text-black dark:text-white selection:bg-black/20 dark:selection:bg-white/20">
       <div className="pointer-events-none fixed inset-0 overflow-hidden">
@@ -308,7 +341,12 @@ export default function LandingPage() {
 
           <div className="group relative mt-10">
             <div className="absolute -inset-1 rounded-[2.5rem] bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 opacity-50 blur-2xl transition duration-1000 group-hover:opacity-100" />
-            <div className="relative flex min-h-[480px] md:min-h-[520px] items-center justify-center overflow-visible rounded-3xl border border-black/5 bg-white/50 p-8 backdrop-blur-xl shadow-2xl dark:border-white/10 dark:bg-[#0a0a0a]/80">
+            <InteractiveViewer
+              className="relative flex min-h-[480px] md:min-h-[520px] items-center justify-center overflow-visible rounded-3xl border border-black/5 bg-white/50 p-8 backdrop-blur-xl shadow-2xl dark:border-white/10 dark:bg-[#0a0a0a]/80"
+              is3DMode={true}
+              onRotate3D={handleRotate3D}
+              onReset3D={handleReset3D}
+            >
               {hasUsername ? (
                 <div className="w-full flex items-center justify-center">
                   {svgState === 'loading' && (
@@ -370,7 +408,7 @@ export default function LandingPage() {
                   </p>
                 </div>
               )}
-            </div>
+            </InteractiveViewer>
           </div>
         </section>
 

components/InteractiveViewer.tsx

@@ -82,11 +82,17 @@ export const formatDate = (dateStr: string): string => {
 interface InteractiveViewerProps {
   children: ReactNode;
   className?: string;
+  is3DMode?: boolean;
+  onRotate3D?: (dx: number, dy: number) => void;
+  onReset3D?: () => void;
 }
 
 export default function InteractiveViewer({
   children,
   className = '',
+  is3DMode = false,
+  onRotate3D,
+  onReset3D,
 }: InteractiveViewerProps): ReactElement {
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
@@ -191,7 +197,13 @@ export default function InteractiveViewer({
     if (isDragging.current) {
       const dx = e.clientX - lastMousePos.current.x;
       const dy = e.clientY - lastMousePos.current.y;
-      setPan((p) => ({ x: p.x + dx, y: p.y + dy }));
+
+      if (is3DMode && onRotate3D) {
+        onRotate3D(dx, dy);
+      } else {
+        setPan((p) => ({ x: p.x + dx, y: p.y + dy }));
+      }
+
       lastMousePos.current = { x: e.clientX, y: e.clientY };
       // Hide tooltip during active drag/pan
       activeTooltipRef.current = null;
@@ -285,6 +297,14 @@ export default function InteractiveViewer({
     }
   };
 
+  const handleDoubleClick = (): void => {
+    if (is3DMode && onReset3D) {
+      onReset3D();
+    }
+    setPan({ x: 0, y: 0 });
+    setZoom(1);
+  };
+
   return (
     <div
       ref={containerRef}
@@ -298,6 +318,7 @@ export default function InteractiveViewer({
       onPointerLeave={handlePointerLeave}
       onWheel={handleWheel}
       onKeyDown={handleKeyDown}
+      onDoubleClick={handleDoubleClick}
       style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
     >
       {/* ── Parallax background layer ──────────────────────────────────────────

lib/svg/generator.ts

@@ -533,7 +533,7 @@ export function generateSVG(
   ${renderHeader(safeUser, stats, sf, params)}
   ${renderStyle(selectedFont, statsFont, googleFontsImport, text, mainAccentHex, sf, bg, params.entrance || 'rise')}
   <rect width="${W}" height="${H}" rx="${radius}" fill="${params.hideBackground ? 'transparent' : bg}" ${borderAttr} />
-  <g transform="translate(0, ${Math.round(20 * sf)})">${towers}</g>
+  <g id="cp-towers" style="transform-origin: center; transform-box: fill-box;" transform="translate(0, ${Math.round(20 * sf)})">${towers}</g>
   ${renderIsometricLabels(calendar, params, text, sf)}
   ${renderFooter(stats, params, labels, safeUser, mainAccentHex, sf)}
 </svg>`;
@@ -620,7 +620,7 @@ function generateAutoThemeSVG(
   </style>
 
   <rect width="${W}" height="${H}" rx="${radius}" ${params.hideBackground ? 'fill="transparent"' : 'class="cp-bg-fill"'} />
-  <g transform="translate(0, ${s(20)})">
+  <g id="cp-towers" style="transform-origin: center; transform-box: fill-box;" transform="translate(0, ${s(20)})">
     ${towers}
   </g>
   ${renderIsometricLabels(calendar, params, 'var(--cp-text)', sf)}