Feat/keyboard shortcut waitlist modal

__tests__/components/navbar.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
@@ -7,7 +8,7 @@ import { Navbar } from "@/components/organisms/navbar";
 
 // Mock next/image
 vi.mock("next/image", () => ({
-  default: (props: any) => <img {...props} />,
+  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} />, // eslint-disable-line @next/next/no-img-element
 }));
 
 // Mock ThemeToggle

__tests__/hooks/use-mobile.test.ts

@@ -57,11 +57,11 @@ describe("useIsMobile", () => {
     let changeCallback: () => void = () => {};
 
     // Mock matchMedia to capture the change callback
-    (window.matchMedia as any).mockImplementation((query: string) => ({
+    (window.matchMedia as ReturnType<typeof vi.fn>).mockImplementation((query: string) => ({
       matches: false,
       media: query,
       onchange: null,
-      addEventListener: vi.fn((event, cb) => {
+      addEventListener: vi.fn((event: string, cb: () => void) => {
         if (event === "change") changeCallback = cb;
       }),
       removeEventListener: vi.fn(),
@@ -72,14 +72,14 @@ describe("useIsMobile", () => {
 
     // Simulate resize to mobile width
     act(() => {
-      (window as any).innerWidth = 500;
+      (window as Window & { innerWidth: number }).innerWidth = 500;
       changeCallback();
     });
     expect(result.current).toBe(true);
 
     // Simulate resize back to desktop width
     act(() => {
-      (window as any).innerWidth = 1024;
+      (window as Window & { innerWidth: number }).innerWidth = 1024;
       changeCallback();
     });
     expect(result.current).toBe(false);
@@ -88,7 +88,7 @@ describe("useIsMobile", () => {
   it("should clean up event listener on unmount", () => {
     const removeEventListenerMock = vi.fn();
 
-    (window.matchMedia as any).mockImplementation((query: string) => ({
+    (window.matchMedia as ReturnType<typeof vi.fn>).mockImplementation((query: string) => ({
       matches: false,
       media: query,
       onchange: null,

components/atoms/shortcut-badge.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import * as fc from "fast-check";
+import { render, screen, act } from "@testing-library/react";
+import { ShortcutBadge } from "./shortcut-badge";
+
+// ---------------------------------------------------------------------------
+// Sub-task 4.1 — Unit tests for ShortcutBadge rendering
+// ---------------------------------------------------------------------------
+
+describe("ShortcutBadge", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders Ctrl+Shift+K by default (SSR / non-Mac)", () => {
+    Object.defineProperty(navigator, "platform", {
+      value: "Win32",
+      configurable: true,
+    });
+
+    render(<ShortcutBadge />);
+    expect(screen.getByText("Ctrl+Shift+K")).toBeTruthy();
+  });
+
+  it("renders ⌘+Shift+K when isMac is true", async () => {
+    Object.defineProperty(navigator, "platform", {
+      value: "MacIntel",
+      configurable: true,
+    });
+
+    await act(async () => {
+      render(<ShortcutBadge />);
+    });
+
+    expect(screen.getByText("⌘+Shift+K")).toBeTruthy();
+  });
+
+  it("has hidden md:inline-flex class in rendered output", () => {
+    const { container } = render(<ShortcutBadge />);
+    const span = container.querySelector("span");
+    expect(span?.className).toContain("hidden");
+    expect(span?.className).toContain("md:inline-flex");
+  });
+
+  it("applies additional className when provided", () => {
+    const { container } = render(<ShortcutBadge className="my-custom-class" />);
+    const span = container.querySelector("span");
+    expect(span?.className).toContain("my-custom-class");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Sub-task 4.2 — Property 4: Badge text matches platform
+// Feature: keyboard-shortcut-waitlist, Property 4: badge text matches platform
+// Validates: Requirements 4.2, 4.3
+// ---------------------------------------------------------------------------
+
+describe("Property 4: badge text matches platform", () => {
+  it("rendered text equals expected string for any isMac value", async () => {
+    await fc.assert(
+      fc.asyncProperty(fc.boolean(), async (isMac: boolean) => {
+        Object.defineProperty(navigator, "platform", {
+          value: isMac ? "MacIntel" : "Win32",
+          configurable: true,
+        });
+
+        const { unmount } = render(<ShortcutBadge />);
+
+        await act(async () => {});
+
+        const expectedText = isMac ? "⌘+Shift+K" : "Ctrl+Shift+K";
+        const element = screen.queryByText(expectedText);
+        expect(element).toBeTruthy();
+
+        unmount();
+      }),
+      { numRuns: 100 }
+    );
+  });
+});

components/atoms/shortcut-badge.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { cn } from "@/lib/utils";
+
+interface ShortcutBadgeProps {
+  className?: string;
+}
+
+export function ShortcutBadge({ className }: ShortcutBadgeProps) {
+  const [isMac, setIsMac] = useState(false);
+
+  useEffect(() => {
+    setIsMac(typeof navigator !== "undefined" && /Mac/i.test(navigator.platform));
+  }, []);
+
+  return (
+    <span
+      className={cn("hidden md:inline-flex items-center text-xs text-muted-foreground", className)}
+    >
+      {isMac ? "⌘+Shift+K" : "Ctrl+Shift+K"}
+    </span>
+  );
+}

components/organisms/cta-section.test.tsx

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi, beforeEach, beforeAll } from "vitest";
+import * as fc from "fast-check";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { CtaSection } from "./cta-section";
+import { WaitlistModal } from "@/components/organisms/waitlist-modal";
+import { WaitlistProvider } from "@/components/providers/waitlist-provider";
+
+// Required for React 18 act() in jsdom
+beforeAll(() => {
+  // @ts-expect-error - global flag for React act() environment
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function renderWithProvider() {
+  return render(
+    <WaitlistProvider>
+      <CtaSection />
+      <WaitlistModal />
+    </WaitlistProvider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sub-task 5.1 — Property 6: Button click always opens modal
+// Feature: keyboard-shortcut-waitlist, Property 6: button click always opens modal
+// Validates: Requirements 5.1
+// ---------------------------------------------------------------------------
+
+describe("Property 6: button click always opens modal", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    cleanup();
+  });
+
+  it('clicking "Join the Waitlist" button opens the modal regardless of initial state', () => {
+    fc.assert(
+      fc.property(
+        // We generate a boolean but don't use it to set initial state —
+        // the provider always starts closed. The property verifies that
+        // a click always results in the modal being open.
+        fc.boolean(),
+        (_seed: boolean) => {
+          renderWithProvider();
+
+          const button = screen.getByRole("button", { name: /join the waitlist/i });
+          fireEvent.click(button);
+
+          // The Dialog renders with role="dialog" when open
+          const dialog = screen.queryByRole("dialog");
+          expect(dialog).toBeTruthy();
+
+          cleanup();
+        }
+      ),
+      { numRuns: 100 }
+    );
+  }, 30_000); // 30s timeout for 100 iterations
+});

components/organisms/cta-section.tsx

@@ -3,12 +3,15 @@
 import { motion } from "framer-motion";
 import { Button } from "@/components/atoms/button";
 import { SectionHeader } from "@/components/molecules/section-header";
+import { ShortcutBadge } from "@/components/atoms/shortcut-badge";
 import { Sparkles } from "lucide-react";
 import { useWaitlist } from "@/components/providers/waitlist-provider";
+import { useWaitlistShortcut } from "@/hooks/use-waitlist-shortcut";
 import { staggerItem, ANIMATION } from "@/lib/animations";
 
 export function CtaSection() {
   const { openWaitlist } = useWaitlist();
+  useWaitlistShortcut();
 
   return (
     <section className="relative z-10 py-28">
@@ -37,14 +40,17 @@ export function CtaSection() {
             variants={staggerItem}
             transition={{ delay: ANIMATION.DELAY.SHORT }}
           >
-            <Button
-              size="lg"
-              className="w-full sm:w-auto text-base gap-2 rounded-full px-10 shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300 glow-sm"
-              onClick={openWaitlist}
-            >
-              <Sparkles className="h-5 w-5" />
-              Join the Waitlist
-            </Button>
+            <div className="flex flex-col items-center gap-1">
+              <Button
+                size="lg"
+                className="w-full sm:w-auto text-base gap-2 rounded-full px-10 shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300 glow-sm"
+                onClick={openWaitlist}
+              >
+                <Sparkles className="h-5 w-5" />
+                Join the Waitlist
+              </Button>
+              <ShortcutBadge />
+            </div>
             <a
               href="#features"
               className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"

components/organisms/waitlist-modal.tsx

@@ -120,7 +120,7 @@ export function WaitlistModal() {
 
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-md glass-card gradient-border overflow-hidden">
+      <DialogContent className="sm:max-w-md border border-border bg-background shadow-xl">
         {/* Decorative background glow */}
         <div className="absolute -top-24 -right-24 w-48 h-48 bg-primary/20 rounded-full blur-[48px] pointer-events-none" />
         <div className="absolute -bottom-24 -left-24 w-48 h-48 bg-primary/20 rounded-full blur-[48px] pointer-events-none" />

components/providers/waitlist-provider.tsx

@@ -6,6 +6,7 @@ interface WaitlistContextType {
   isOpen: boolean;
   openWaitlist: () => void;
   closeWaitlist: () => void;
+  toggleWaitlist: () => void;
 }
 
 const WaitlistContext = createContext<WaitlistContextType | undefined>(undefined);
@@ -15,9 +16,10 @@ export function WaitlistProvider({ children }: { children: ReactNode }) {
 
   const openWaitlist = () => setIsOpen(true);
   const closeWaitlist = () => setIsOpen(false);
+  const toggleWaitlist = () => setIsOpen((prev) => !prev);
 
   return (
-    <WaitlistContext.Provider value={{ isOpen, openWaitlist, closeWaitlist }}>
+    <WaitlistContext.Provider value={{ isOpen, openWaitlist, closeWaitlist, toggleWaitlist }}>
       {children}
     </WaitlistContext.Provider>
   );