test: add HeroSection responsive rendering tests (JhaSourav07#1911)

## Description

Fixes JhaSourav07#1547 

Added tests for `HeroSection` to verify responsive rendering, typography
headings, layout structure, and key UI elements across mobile, tablet,
and desktop breakpoints. Increased component test coverage using
`@testing-library/react` and Vitest.

## Pillar

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

## Visual Preview

N/A — test coverage update (no UI changes)

## 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): ...`).
* [ ] 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.
* [ ] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
* [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/components/HeroSection.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
 import { describe, expect, it, vi } from 'vitest';
 import { HeroSection } from './HeroSection';
 
@@ -12,40 +13,52 @@ vi.mock('framer-motion', () => ({
 }));
 
 describe('HeroSection', () => {
-  it('renders the h1 heading', () => {
+  it('renders the hero heading and content', () => {
     render(<HeroSection />);
 
-    const heading = screen.getByRole('heading', {
-      level: 1,
-    });
-
-    expect(heading).toBeDefined();
-  });
-
-  it("heading contains 'Elevate Your'", () => {
-    render(<HeroSection />);
-
-    expect(screen.getByText(/Elevate Your/i)).toBeDefined();
-  });
-
-  it("heading contains 'Contribution Story'", () => {
-    render(<HeroSection />);
-
-    expect(screen.getByText(/Contribution Story/i)).toBeDefined();
+    expect(
+      screen.getByRole('heading', {
+        level: 1,
+        name: /elevate your contribution story/i,
+      })
+    ).toBeInTheDocument();
+    expect(screen.getByText(/isometric/i).textContent).toMatch(/isometric/i);
   });
+});
 
-  it('renders the descriptive paragraph', () => {
-    render(<HeroSection />);
+describe('HeroSection responsive breakpoints', () => {
+  const renderAtViewport = (width: number) => {
+    window.innerWidth = width;
+    window.dispatchEvent(new Event('resize'));
 
-    const paragraph = screen.getByText(/isometric/i);
+    return render(<HeroSection />);
+  };
 
-    expect(paragraph).toBeDefined();
-  });
+  it.each([
+    { width: 375, label: 'mobile' },
+    { width: 768, label: 'tablet' },
+    { width: 1280, label: 'desktop' },
+  ])('renders full typography and high contrast background values at $label width', ({ width }) => {
+    const { container } = renderAtViewport(width);
 
-  it("paragraph mentions 'isometric'", () => {
-    render(<HeroSection />);
+    const hero = container.firstElementChild;
+    const heading = screen.getByRole('heading', {
+      level: 1,
+      name: /elevate your contribution story/i,
+    });
 
-    expect(screen.getByText(/isometric/i).textContent).toMatch(/isometric/i);
+    expect(hero?.className).toContain('bg-[radial-gradient');
+    expect(heading.tagName).toBe('H1');
+    expect(heading.className).toContain('text-5xl');
+    expect(heading.className).toContain('md:text-8xl');
+    expect(heading.className).toContain('from-green-500');
+    expect(heading.className).toContain('to-purple-600');
+    expect(screen.getByText(/generate high-fidelity, 3d isometric monoliths/i).className).toContain(
+      'text-gray-600'
+    );
+    expect(screen.getByPlaceholderText(/enter github username/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /watch dashboard/i })).toBeInTheDocument();
   });
 });