feat: upgrade feature cards with gsap, add issue template, and fix next.js swc dev binding issue

Author: code-with-abhi-i5

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,65 +1,64 @@
-name: 🐛 Bug Report
-description: Create a report to help us improve CommitPulse
-title: 'bug: <short description of the issue>'
-labels: ['bug', 'triage']
+name: Bug Report
+description: Create a report to help us improve
+title: 'Bug: '
+labels: ['bug']
 body:
   - type: markdown
     attributes:
       value: |
         Thank you for reporting an issue! Please fill out this form as completely as possible.
 
         💡 **Pro-Tip:** Once you submit this issue, you can claim it for yourself by commenting `/claim`! Only you, as the author of the issue, have permission to claim it.
+
   - type: textarea
     id: description
     attributes:
       label: Description
       description: A clear and concise description of what the bug is.
     validations:
       required: true
+
   - type: textarea
-    id: steps-to-reproduce
+    id: reproduction
     attributes:
       label: Steps to Reproduce
       description: How can we reproduce this bug? Please be specific.
-      placeholder: |
+      value: |
         1. Go to '...'
         2. Click on '....'
         3. Scroll down to '....'
         4. See error
     validations:
       required: true
+
   - type: textarea
-    id: expected-behavior
+    id: expected
     attributes:
       label: Expected Behavior
       description: What did you expect to happen?
     validations:
       required: true
+
   - type: textarea
     id: screenshots
     attributes:
       label: Screenshots / Logs
       description: If applicable, drag and drop screenshots or paste error logs here to help explain your problem.
     validations:
       required: false
+
   - type: input
     id: username
     attributes:
       label: GitHub Username (If applicable)
       description: The GitHub username you were trying to generate a badge for.
     validations:
       required: false
-  - type: dropdown
-    id: browser
+
+  - type: textarea
+    id: environment
     attributes:
       label: Environment
       description: What browser/environment are you experiencing this in?
-      options:
-        - Chrome
-        - Firefox
-        - Safari
-        - Edge
-        - GitHub Mobile App
-        - Other
     validations:
       required: true

app/page.test.tsx

@@ -29,6 +29,31 @@ vi.mock('next/link', () => ({
   ),
 }));
 
+// Mock GSAP so FeatureCards don't break in JSDOM
+vi.mock('gsap', () => {
+  const tween = { kill: vi.fn() };
+  const timeline = {
+    to: vi.fn().mockReturnThis(),
+    fromTo: vi.fn().mockReturnThis(),
+    set: vi.fn().mockReturnThis(),
+    kill: vi.fn(),
+  };
+  return {
+    default: {
+      registerPlugin: vi.fn(),
+      set: vi.fn(),
+      to: vi.fn().mockReturnValue(tween),
+      fromTo: vi.fn().mockReturnValue(tween),
+      timeline: vi.fn().mockReturnValue(timeline),
+      context: vi.fn((_fn: any) => ({ revert: vi.fn() })),
+    },
+  };
+});
+
+vi.mock('gsap/ScrollTrigger', () => ({
+  ScrollTrigger: {},
+}));
+
 // Mock framer-motion
 vi.mock('framer-motion', () => ({
   motion: {

app/page.tsx

@@ -11,6 +11,8 @@ import { CustomizeCTA } from './components/CustomizeCTA';
 import { useRecentSearches } from '@/hooks/useRecentSearches';
 import { useDebounce } from '@/hooks/useDebounce';
 import { Footer } from '@/app/components/Footer';
+import InteractiveViewer from '@/components/InteractiveViewer';
+import { FeatureCard, FeatureCardsSection } from '@/components/FeatureCards';
 
 const Icons = {
   Github: () => (
@@ -423,63 +425,38 @@ export default function LandingPage() {
 
         <CustomizeCTA />
 
-        <div className="grid gap-6 md:grid-cols-3">
+        <FeatureCardsSection>
           <FeatureCard
             icon={<Icons.Zap />}
-            accent="text-black dark:text-white"
+            accent="text-white"
+            accentColor="#10b981"
+            index={0}
             title="Real-time Sync"
             desc="Pulled directly from GitHub GraphQL API. Your streak updates as fast as your code pushes."
           />
           <FeatureCard
             icon={<Icons.Copy />}
-            accent="text-black dark:text-white"
+            accent="text-white"
+            accentColor="#8b5cf6"
+            index={1}
             title="Theme Engine"
             desc="Switch between Neon, Dracula, or custom HEX modes via simple URL management."
           />
           <FeatureCard
             icon={<Icons.Box />}
-            accent="text-black dark:text-white"
+            accent="text-white"
+            accentColor="#06b6d4"
+            index={2}
             title="Isometric Math"
             desc="Sophisticated 3D projection formulas turn 2D data into digital architecture."
           />
-        </div>
+        </FeatureCardsSection>
         <Footer />
       </main>
     </div>
   );
 }
 
-function FeatureCard({
-  icon,
-  title,
-  desc,
-  accent,
-}: {
-  icon: ReactNode;
-  title: string;
-  desc: string;
-  accent: string;
-}) {
-  return (
-    <motion.div
-      whileHover={{ y: -5, scale: 1.02 }}
-      transition={{ type: 'spring', stiffness: 300 }}
-      className="group relative overflow-hidden rounded-3xl border border-black/5 bg-white/60 p-8 shadow-xl shadow-black/5 hover:border-emerald-500/30 dark:border-white/10 dark:bg-[#0a0a0a]/80 dark:shadow-2xl dark:shadow-black/50 dark:hover:border-emerald-500/40 dark:hover:bg-[#111] transition-all duration-300 backdrop-blur-xl"
-    >
-      <div className="absolute -right-20 -top-20 h-40 w-40 rounded-full bg-emerald-500/10 blur-3xl transition-all duration-500 group-hover:bg-emerald-500/20" />
-      <div
-        className={`mb-6 w-fit rounded-2xl bg-gradient-to-br from-gray-100 to-gray-50 p-3.5 text-black shadow-sm ring-1 ring-black/5 dark:from-white/10 dark:to-white/5 dark:text-white dark:ring-white/10 ${accent}`}
-      >
-        {icon}
-      </div>
-      <h3 className="mb-3 text-lg font-bold text-gray-900 dark:text-white tracking-tight">
-        {title}
-      </h3>
-      <p className="text-sm leading-relaxed text-gray-600 dark:text-white/65">{desc}</p>
-    </motion.div>
-  );
-}
-
 const STEPS = [
   {
     n: '01',