Merge remote-tracking branch 'upstream/main' into feat/contribution

Author: nishtha-agarwal-211

app/components/CopyRepoButton.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy } from 'lucide-react';
+
+export default function CopyRepoButton() {
+  const [copied, setCopied] = useState(false);
+
+  const repoUrl = 'https://github.com/JhaSourav07/commitpulse';
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(repoUrl);
+
+    setCopied(true);
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="inline-flex items-center gap-2 rounded-2xl border border-black/10 bg-white/60 px-8 py-4 font-semibold transition-all duration-300 hover:scale-105 dark:border-white/10 dark:bg-white/5"
+    >
+      <Copy className="h-5 w-5" />
+      {copied ? 'Copied!' : 'Copy URL'}
+    </button>
+  );
+}

app/contributors/page.tsx

@@ -1,10 +1,10 @@
 import Link from 'next/link';
 import { Globe, Sparkles, Users, GitPullRequest, ArrowRight } from 'lucide-react';
-
 import BrandParticles from '@/components/BrandParticles';
 import { Footer } from '@/app/components/Footer';
 import ContributorsSearch from './ContributorsSearch';
 import Leaderboard from '@/components/Leaderboard';
+import CopyRepoButton from '@/app/components/CopyRepoButton';
 
 interface Contributor {
   id: number;
@@ -231,6 +231,8 @@ export default async function ContributorsPage() {
                   View Repository
                 </Link>
 
+                <CopyRepoButton />
+
                 <Link
                   href="https://github.com/JhaSourav07/commitpulse/issues"
                   target="_blank"

app/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { trackUser } from '@/utils/tracking';
-import InteractiveViewer from '@/components/InteractiveViewer';
 import Link from 'next/link';
 import { useRef, useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';

components/FeatureCards.tsx

@@ -4,9 +4,7 @@ import { useRef, useState, useEffect, type ReactNode } from 'react';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
-if (typeof window !== 'undefined') {
-  gsap.registerPlugin(ScrollTrigger);
-}
+let gsapRegistered = false;
 
 /* ─── Types ─── */
 interface FeatureCardProps {
@@ -44,7 +42,7 @@ function FloatingParticle({
     tl.to(ref.current, {
       opacity: 0.6,
       y: -60,
-      x: `random(-30, 30)`,
+      x: Math.random() * 60 - 30,
       duration: duration * 0.4,
       ease: 'power2.out',
     })
@@ -119,8 +117,6 @@ function AnimatedBorder({ color, isHovered }: { color: string; isHovered: boolea
       style={{
         opacity: 0,
         background: `conic-gradient(from 0deg, transparent, ${color}, transparent, ${color}44, transparent)`,
-        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-        maskComposite: 'exclude',
         WebkitMaskComposite: 'xor',
         padding: '1.5px',
       }}
@@ -417,6 +413,13 @@ export function FeatureCard({ icon, title, desc, accent, index, accentColor }: F
 
 /* ─── Section Wrapper (optional heading + background glow) ─── */
 export function FeatureCardsSection({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    if (!gsapRegistered) {
+      gsap.registerPlugin(ScrollTrigger);
+      gsapRegistered = true;
+    }
+  }, []);
+
   const sectionRef = useRef<HTMLDivElement>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);
 

lib/svg/animations.test.ts

@@ -30,6 +30,22 @@ describe('getTowerAnimationCSS', () => {
     expect(css).not.toContain('@keyframes');
   });
 
+  it('scales transform-origin for rise animation when scale factor is provided', () => {
+    const cssScale045 = getTowerAnimationCSS('rise', 0.45);
+    expect(cssScale045).toContain('transform-origin: 0 4.5px');
+
+    const cssScale08 = getTowerAnimationCSS('rise', 0.8);
+    expect(cssScale08).toContain('transform-origin: 0 8px');
+  });
+
+  it('scales translateY translation for slide animation when scale factor is provided', () => {
+    const cssScale045 = getTowerAnimationCSS('slide', 0.45);
+    expect(cssScale045).toContain('transform: translateY(-9px)');
+
+    const cssScale08 = getTowerAnimationCSS('slide', 0.8);
+    expect(cssScale08).toContain('transform: translateY(-16px)');
+  });
+
   it('includes accessibility support for prefers-reduced-motion', () => {
     const css = getTowerAnimationCSS('rise');
     expect(css).toContain('prefers-reduced-motion');

lib/svg/animations.ts

@@ -21,7 +21,8 @@
 const TOWER_BASE_Y = 10;
 
 export function getTowerAnimationCSS(
-  entrance: 'rise' | 'fade' | 'slide' | 'none' = 'rise'
+  entrance: 'rise' | 'fade' | 'slide' | 'none' = 'rise',
+  scale = 1.0
 ): string {
   if (entrance === 'none') {
     return `
@@ -33,9 +34,10 @@ export function getTowerAnimationCSS(
   let keyframes = '';
 
   if (entrance === 'rise') {
+    const baseY = Math.round(TOWER_BASE_Y * scale * 100) / 100;
     baseStyles = `
       transform: scaleY(0);
-      transform-origin: 0 ${TOWER_BASE_Y}px;
+      transform-origin: 0 ${baseY}px;
       animation: grow-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     `;
     keyframes = `
@@ -56,14 +58,15 @@ export function getTowerAnimationCSS(
       }
     `;
   } else if (entrance === 'slide') {
+    const slideOffset = Math.round(-20 * scale * 100) / 100;
     baseStyles = `
       opacity: 0;
-      transform: translateY(-20px);
+      transform: translateY(${slideOffset}px);
       animation: slide-down 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     `;
     keyframes = `
       @keyframes slide-down {
-        from { opacity: 0; transform: translateY(-20px); }
+        from { opacity: 0; transform: translateY(${slideOffset}px); }
         to   { opacity: 1; transform: translateY(0); }
       }
     `;

lib/svg/generator.ts

@@ -221,7 +221,7 @@ function renderStyle(
   <style>
   @import url('https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=JetBrains+Mono&amp;family=Roboto&amp;family=Syncopate:wght@400;700&amp;family=Space+Grotesk:wght@400;500;600;700&amp;display=swap');
   ${googleFontsImport}
-  ${getTowerAnimationCSS(entrance)}
+  ${getTowerAnimationCSS(entrance, sf)}
   .scan-line {
     animation: scan-sweep var(--scan-speed, 8s) linear infinite;
     transform-box: fill-box;
@@ -617,7 +617,7 @@ function generateAutoThemeSVG(
   :root { --cp-bg: #${light.bg}; --cp-text: #${light.text}; --cp-accent: #${light.accent}; --cp-label-fill: ${lightLabelFill}; --cp-label-opacity: ${lightLabelOpacity}; }
   @media (prefers-color-scheme: dark) { :root { --cp-bg: #${dark.bg}; --cp-text: #${dark.text}; --cp-accent: #${dark.accent}; --cp-label-fill: ${darkLabelFill}; --cp-label-opacity: ${darkLabelOpacity}; } }
   .cp-bg-fill { fill: var(--cp-bg); } .cp-text-fill { fill: var(--cp-text); color: var(--cp-text); } .cp-accent-fill { fill: var(--cp-accent); color: var(--cp-accent); }
-  ${getTowerAnimationCSS(params.entrance || 'rise')}
+  ${getTowerAnimationCSS(params.entrance || 'rise', sf)}
   .scan-line {
     animation: scan-sweep var(--scan-speed, 8s) linear infinite;
     transform-box: fill-box;
@@ -2014,7 +2014,7 @@ function generateAutoThemeVersusSVG(
   :root { --cp-bg: #${light.bg}; --cp-text: #${light.text}; --cp-accent: #${light.accent}; --cp-label-fill: ${lightLabelFill}; --cp-label-opacity: ${lightLabelOpacity}; }
   @media (prefers-color-scheme: dark) { :root { --cp-bg: #${dark.bg}; --cp-text: #${dark.text}; --cp-accent: #${dark.accent}; --cp-label-fill: ${darkLabelFill}; --cp-label-opacity: ${darkLabelOpacity}; } }
   .cp-bg-fill { fill: var(--cp-bg); } .cp-text-fill { fill: var(--cp-text); color: var(--cp-text); } .cp-accent-fill { fill: var(--cp-accent); color: var(--cp-accent); }
-  ${getTowerAnimationCSS(params.entrance || 'rise')}
+  ${getTowerAnimationCSS(params.entrance || 'rise', sf)}
   .scan-line {
     animation: scan-sweep var(--scan-speed, 8s) linear infinite;
     transform-box: fill-box;