feat: integrate reCAPTCHA v3 with contact form

- Add react-google-recaptcha-v3 package and provider setup
- Implement invisible reCAPTCHA protection for Formspree contact form
- Fix async form submission with ref-based approach
- Update tests and GitHub Actions for production deployment
- Add environment variable configuration for reCAPTCHA site key

Author: attarchi

.github/workflows/deploy.yml

@@ -12,6 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NEXT_PUBLIC_BASE_PATH:
+      NEXT_PUBLIC_RECAPTCHA_SITE_KEY: ${{ secrets.RECAPTCHA_SITE_KEY }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4

package.json

@@ -14,6 +14,7 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
+    "@formspree/react": "^3.0.0",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -24,6 +25,7 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-google-recaptcha-v3": "^1.11.0",
     "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { JetBrains_Mono, Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from '@/lib/theme'
 import { ProgressBar } from '@/components/ui';
+import { RecaptchaProvider } from '@/components/providers/RecaptchaProvider';
 
 const jetbrainsMono = JetBrains_Mono({
   variable: "--font-jetbrains-mono",
@@ -72,9 +73,11 @@ export default function RootLayout({
         suppressHydrationWarning={true}
       >
         <ProgressBar />
-        <ThemeProvider>
-          {children}
-        </ThemeProvider>
+        <RecaptchaProvider>
+          <ThemeProvider>
+            {children}
+          </ThemeProvider>
+        </RecaptchaProvider>
       </body>
     </html>
   );

src/components/providers/RecaptchaProvider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
+
+interface RecaptchaProviderProps {
+  children: React.ReactNode;
+}
+
+export function RecaptchaProvider({ children }: RecaptchaProviderProps) {
+  const recaptchaSiteKey = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
+
+  if (!recaptchaSiteKey) {
+    console.warn('reCAPTCHA site key not found. reCAPTCHA will be disabled.');
+    return <>{children}</>;
+  }
+
+  return (
+    <GoogleReCaptchaProvider 
+      reCaptchaKey={recaptchaSiteKey}
+      scriptProps={{
+        async: false,
+        defer: false,
+        appendTo: "head",
+        nonce: undefined,
+      }}
+    >
+      {children}
+    </GoogleReCaptchaProvider>
+  );
+} 

src/components/sections/ContactSection.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useState } from "react";
 import { motion } from "framer-motion";
-import { Heading, Text, Badge } from "@/components/ui";
+import { Heading, Text, Badge, ContactForm } from "@/components/ui";
 import { slideUpVariants, fadeVariants, staggerVariants, sectionVariants } from "@/lib";
 
 export interface ContactSectionProps {
@@ -18,6 +17,8 @@ export interface ContactSectionProps {
   contactInfoTitle?: string;
   formTitle?: string;
   formDescription?: string;
+  formspreeId?: string;
+  successMessage?: string;
 }
 
 export function ContactSection({
@@ -33,15 +34,9 @@ export function ContactSection({
   contactInfoTitle,
   formTitle,
   formDescription,
+  formspreeId,
+  successMessage,
 }: ContactSectionProps = {}) {
-  const [showMessage, setShowMessage] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setShowMessage(true);
-    setTimeout(() => setShowMessage(false), 5000);
-  };
-
   return (
     <motion.section
       id="contact"
@@ -212,92 +207,11 @@ export function ContactSection({
             </motion.div>
           </motion.div>
 
-          <motion.div 
-            data-testid="contact-form"
-            className="bg-white dark:bg-[#21262d] border border-[#d0d7de] dark:border-[#30363d] rounded-lg p-6 shadow-sm"
-            variants={staggerVariants}
-            initial="hidden"
-            animate="visible"
-          >
-            <div className="space-y-6">
-              <Heading as="h3" size="h3" className="font-mono font-medium text-text">
-                {formTitle}
-              </Heading>
-
-              {showMessage && (
-                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
-                  <Text size="sm" className="font-sans text-blue-700 dark:text-blue-400">
-                    {formDescription}
-                  </Text>
-                </div>
-              )}
-
-              <motion.div
-                variants={staggerVariants}
-                transition={{ staggerChildren: 0.1, delayChildren: 0.2 }}
-              >
-                <form 
-                  onSubmit={handleSubmit} 
-                  className="space-y-4"
-                >
-                <motion.div variants={slideUpVariants}>
-                  <label htmlFor="name" className="block font-sans text-sm font-medium mb-2 text-text">
-                    Name
-                  </label>
-                  <input
-                    type="text"
-                    id="name"
-                    name="name"
-                    data-testid="name-input"
-                    required
-                    className="w-full px-3 py-2 rounded-md font-sans bg-white dark:bg-[#0d1117] border border-[#d0d7de] dark:border-[#30363d] focus:outline-none focus:border-[#0969da] dark:focus:border-[#58a6ff] text-text placeholder:text-[#656d76] dark:placeholder:text-[#8b949e]"
-                    placeholder="Your name"
-                  />
-                </motion.div>
-
-                <motion.div variants={slideUpVariants}>
-                  <label htmlFor="email" className="block font-sans text-sm font-medium mb-2 text-text">
-                    Email
-                  </label>
-                  <input
-                    type="email"
-                    id="email"
-                    name="email"
-                    data-testid="email-input"
-                    required
-                    className="w-full px-3 py-2 rounded-md font-sans bg-white dark:bg-[#0d1117] border border-[#d0d7de] dark:border-[#30363d] focus:outline-none focus:border-[#0969da] dark:focus:border-[#58a6ff] text-text placeholder:text-[#656d76] dark:placeholder:text-[#8b949e]"
-                    placeholder="your.email@example.com"
-                  />
-                </motion.div>
-
-                <motion.div variants={slideUpVariants}>
-                  <label htmlFor="message" className="block font-sans text-sm font-medium mb-2 text-text">
-                    Message
-                  </label>
-                  <textarea
-                    id="message"
-                    name="message"
-                    data-testid="message-textarea"
-                    required
-                    rows={5}
-                    className="w-full px-3 py-2 rounded-md font-sans bg-white dark:bg-[#0d1117] border border-[#d0d7de] dark:border-[#30363d] focus:outline-none focus:border-[#0969da] dark:focus:border-[#58a6ff] text-text placeholder:text-[#656d76] dark:placeholder:text-[#8b949e] min-h-[120px] resize-vertical"
-                    placeholder="Tell me about your project..."
-                  />
-                </motion.div>
-
-                <motion.div variants={slideUpVariants}>
-                  <button
-                    type="submit"
-                    data-testid="submit-button"
-                    className="w-full bg-[#0969da] dark:bg-[#58a6ff] hover:bg-[#0550ae] dark:hover:bg-[#4493f8] text-white dark:text-[#0d1117] px-4 py-2 rounded-md font-medium font-sans transition-colors focus:outline-none focus:ring-2 focus:ring-[#0969da] dark:focus:ring-[#58a6ff] focus:ring-offset-2"
-                  >
-                    Send Message
-                  </button>
-                </motion.div>
-              </form>
-            </motion.div>
-            </div>
-          </motion.div>
+          <ContactForm
+            formTitle={formTitle}
+            formspreeId={formspreeId}
+            successMessage={successMessage}
+          />
         </div>
       </div>
     </motion.section>

src/components/sections/__tests__/ContactSection.test.tsx

@@ -6,6 +6,20 @@ jest.mock("@/components/ui", () => ({
   Heading: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
   Text: ({ children, ...props }: any) => <span {...props}>{children}</span>,
   Badge: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  ContactForm: ({ formTitle, ...props }: any) => (
+    <div data-testid="contact-form" {...props}>
+      <h3>{formTitle}</h3>
+      <form>
+        <label htmlFor="name">Name</label>
+        <input data-testid="name-input" id="name" name="name" required />
+        <label htmlFor="email">Email Address</label>
+        <input data-testid="email-input" id="email" name="email" type="email" required />
+        <label htmlFor="message">Message</label>
+        <textarea data-testid="message-textarea" id="message" name="message" required />
+        <button data-testid="submit-button" type="submit">Send Message</button>
+      </form>
+    </div>
+  ),
 }));
 
 jest.mock("framer-motion", () => ({
@@ -92,44 +106,31 @@ describe("ContactSection", () => {
     expect(screen.getByTestId("submit-button")).toHaveTextContent("Send Message");
   });
 
-  it("displays form submission message when form is submitted", async () => {
+  it("renders contact form with proper structure", () => {
     render(<ContactSection {...defaultProps} />);
 
     const nameInput = screen.getByTestId("name-input");
     const emailInput = screen.getByTestId("email-input");
     const messageTextarea = screen.getByTestId("message-textarea");
     const form = screen.getByTestId("contact-form").querySelector("form");
 
-    fireEvent.change(nameInput, { target: { value: "Test User" } });
-    fireEvent.change(emailInput, { target: { value: "test@example.com" } });
-    fireEvent.change(messageTextarea, { target: { value: "Test message" } });
-    
+    expect(nameInput).toBeInTheDocument();
+    expect(emailInput).toBeInTheDocument();
+    expect(messageTextarea).toBeInTheDocument();
     expect(form).toBeInTheDocument();
-    fireEvent.submit(form!);
-    
-    await waitFor(() => {
-      expect(screen.getByText("Feature coming soon! This form will be available when the site goes live.")).toBeInTheDocument();
-    });
   });
 
-  it("message disappears after timeout", async () => {
-    jest.useFakeTimers();
-    render(<ContactSection {...defaultProps} />);
-    
-    const form = screen.getByTestId("contact-form").querySelector("form");
-    fireEvent.submit(form!);
-    
-    await waitFor(() => {
-      expect(screen.getByText("Feature coming soon! This form will be available when the site goes live.")).toBeInTheDocument();
-    });
-    
-    jest.advanceTimersByTime(5000);
+  it("renders with custom form title", () => {
+    const customFormTitle = "Custom Form Title";
+    render(<ContactSection {...defaultProps} formTitle={customFormTitle} />);
 
-    await waitFor(() => {
-      expect(screen.queryByText("Feature coming soon! This form will be available when the site goes live.")).not.toBeInTheDocument();
-    });
+    const contactForm = screen.getByTestId("contact-form");
+    expect(contactForm).toBeInTheDocument();
 
-    jest.useRealTimers();
+    // Check that the custom form title is rendered in the form
+    const formHeading = contactForm.querySelector("h3");
+    expect(formHeading).toBeInTheDocument();
+    expect(formHeading).toHaveTextContent(customFormTitle);
   });
 
   it("uses custom section titles when provided", () => {