feat: improve responsive navbar UX and align full stack quality updates (waiting for approval)

frontend/__tests__/app/homepage-sections.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react"
+import Home from "@/app/page"
+
+describe("Homepage sections visibility", () => {
+    it("keeps key below-the-fold sections visible on initial render", () => {
+        render(<Home />)
+
+        expect(
+            screen.getByRole("heading", { name: "What You'll Find" })
+        ).toBeVisible()
+        expect(screen.getByRole("heading", { name: "Contribute Data" })).toBeVisible()
+    })
+
+    it("uses component icons instead of emoji placeholders in feature cards", () => {
+        render(<Home />)
+
+        expect(screen.queryByText("🏛️")).not.toBeInTheDocument()
+        expect(screen.queryByText("🏢")).not.toBeInTheDocument()
+        expect(screen.queryByText("📊")).not.toBeInTheDocument()
+        expect(screen.queryByText("💻")).not.toBeInTheDocument()
+        expect(screen.queryByText("🔧")).not.toBeInTheDocument()
+    })
+})

frontend/__tests__/components/Button.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react"
+import Button from "@/components/ui/Button"
+
+describe("Button", () => {
+    it("does not forward icon props to the DOM for link buttons", () => {
+        render(
+            <Button href='/dashboard' leftIcon={<span>L</span>} rightIcon={<span>R</span>}>
+                Explore
+            </Button>
+        )
+
+        const link = screen.getByRole("link", { name: /explore/i })
+        expect(link).not.toHaveAttribute("lefticon")
+        expect(link).not.toHaveAttribute("righticon")
+    })
+})

frontend/__tests__/components/Footer.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react"
+import Footer from "@/components/layout/Footer"
+
+describe("Footer", () => {
+    it("renders compact one-line content with github link", () => {
+        render(<Footer />)
+
+        expect(screen.getByText(/Building with ❤️ for 🇮🇳 Democracy/i)).toBeVisible()
+        expect(
+            screen.getByText(new RegExp(`© ${new Date().getFullYear()} Rajniti`, "i"))
+        ).toBeVisible()
+        expect(screen.getByRole("link", { name: /github/i })).toHaveAttribute(
+            "href",
+            "https://github.com/imsks/rajniti"
+        )
+    })
+})

frontend/__tests__/components/Navbar.test.tsx

@@ -0,0 +1,68 @@
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import Navbar from "@/components/layout/Navbar"
+
+describe("Navbar", () => {
+    it("renders scrollable primary navigation links for the default variant", () => {
+        render(<Navbar variant='default' />)
+
+        const nav = screen.getByRole("navigation", { name: /primary navigation/i })
+        expect(nav.firstElementChild).toHaveClass("overflow-x-auto")
+
+        expect(within(nav).getByRole("link", { name: /explore politicians/i })).toHaveAttribute(
+            "href",
+            "/dashboard"
+        )
+        expect(within(nav).getByRole("link", { name: /about/i })).toHaveAttribute(
+            "href",
+            "#about"
+        )
+        expect(within(nav).getByRole("link", { name: /contribute/i })).toHaveAttribute(
+            "href",
+            "#contribute"
+        )
+        expect(within(nav).getByRole("link", { name: /join community/i })).toHaveAttribute(
+            "href",
+            "https://chat.whatsapp.com/IceA98FSHHuDmXOwv8WH7v"
+        )
+    })
+
+    it("renders dashboard navigation links including bug report", () => {
+        render(<Navbar variant='dashboard' />)
+
+        const nav = screen.getByRole("navigation", { name: /primary navigation/i })
+        expect(within(nav).getByRole("link", { name: /home/i })).toBeVisible()
+        expect(within(nav).getByRole("link", { name: /politicians/i })).toBeVisible()
+        expect(within(nav).getByRole("link", { name: /found a bug/i })).toHaveAttribute(
+            "href",
+            "https://github.com/imsks/rajniti/issues/new"
+        )
+    })
+
+    it("toggles mobile burger menu and renders mobile links", () => {
+        render(<Navbar variant='default' />)
+
+        const toggle = screen.getByRole("button", { name: /open menu/i })
+        fireEvent.click(toggle)
+
+        const mobileNav = screen.getByRole("navigation", { name: /mobile navigation/i })
+        expect(within(mobileNav).getByRole("link", { name: /explore politicians/i })).toHaveAttribute(
+            "href",
+            "/dashboard"
+        )
+
+        fireEvent.click(screen.getByRole("button", { name: /close menu/i }))
+        expect(screen.queryByRole("navigation", { name: /mobile navigation/i })).not.toBeInTheDocument()
+    })
+
+    it("closes mobile menu when resizing to desktop viewport", () => {
+        render(<Navbar variant='default' />)
+
+        fireEvent.click(screen.getByRole("button", { name: /open menu/i }))
+        expect(screen.getByRole("navigation", { name: /mobile navigation/i })).toBeInTheDocument()
+
+        Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 640 })
+        fireEvent(window, new Event("resize"))
+
+        expect(screen.queryByRole("navigation", { name: /mobile navigation/i })).not.toBeInTheDocument()
+    })
+})

frontend/__tests__/components/PreambleSection.test.tsx

@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react"
+import PreambleSection from "@/components/PreambleSection"
+
+describe("PreambleSection", () => {
+    it("renders Ashoka Chakra spokes with fixed precision coordinates", () => {
+        const { container } = render(<PreambleSection />)
+        const spokes = container.querySelectorAll("line")
+
+        expect(spokes).toHaveLength(24)
+        spokes.forEach((spoke) => {
+            ;(["x1", "y1", "x2", "y2"] as const).forEach((attr) => {
+                const value = spoke.getAttribute(attr)
+                expect(value).not.toBeNull()
+                expect(Number.isFinite(Number(value))).toBe(true)
+                const fractional = value?.split(".")[1] ?? ""
+                expect(fractional.length).toBeLessThanOrEqual(4)
+            })
+        })
+    })
+})

frontend/__tests__/components/SpotlightCard.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import SpotlightCard from "@/components/ui/SpotlightCard"
+
+describe("SpotlightCard", () => {
+    it("renders children content", () => {
+        render(
+            <SpotlightCard>
+                <p>Card content</p>
+            </SpotlightCard>
+        )
+
+        expect(screen.getByText("Card content")).toBeInTheDocument()
+    })
+
+    it("updates spotlight position CSS variables on mouse move", () => {
+        const { container } = render(
+            <SpotlightCard>
+                <p>Interactive content</p>
+            </SpotlightCard>
+        )
+
+        const card = container.firstElementChild as HTMLDivElement
+        Object.defineProperty(card, "getBoundingClientRect", {
+            value: () =>
+                ({
+                    left: 100,
+                    top: 50,
+                    width: 200,
+                    height: 100,
+                }) as DOMRect,
+        })
+
+        fireEvent.mouseMove(card, { clientX: 200, clientY: 100 })
+
+        expect(card.style.getPropertyValue("--spotlight-x")).toBe("50%")
+        expect(card.style.getPropertyValue("--spotlight-y")).toBe("50%")
+    })
+})