Merge branch 'new-landing'

package.json

@@ -29,6 +29,7 @@
     "next-themes": "0.3.0",
     "react": "18",
     "react-dom": "18",
+    "react-google-recaptcha": "3.1.0",
     "sonner": "1.5.0",
     "tailwind-merge": "2.5.3",
     "tailwindcss-animate": "1.0.7",
@@ -39,6 +40,7 @@
     "@types/node": "20",
     "@types/react": "18",
     "@types/react-dom": "18",
+    "@types/react-google-recaptcha": "2.1.9",
     "eslint": "8",
     "eslint-config-next": "14.2.15",
     "postcss": "8",

src/app/layout.tsx

@@ -19,6 +19,7 @@ const RootLayout = (props: TProps) => {
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
         />
+
       </body>
     </html>
   );

src/sections/form/FormSection.tsx

@@ -10,6 +10,7 @@ import { cn } from '@/lib/utils';
 import email from '@emailjs/browser';
 import { Loader } from 'lucide-react';
 import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
 
 const initialData = {
   name: '',
@@ -23,6 +24,7 @@ const FormSection: React.FC = () => {
   // States
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(initialData);
+  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
 
   // Hooks
   const { toast } = useToast();
@@ -57,6 +59,10 @@ const FormSection: React.FC = () => {
     setData(initialData);
   };
 
+  const handleRecaptchaChange = (token: string | null) => {
+    setRecaptchaToken(token);
+  };
+
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
@@ -76,11 +82,20 @@ const FormSection: React.FC = () => {
     setLoading(true);
 
     try {
-      const { name: from_name, email: from_email, message } = data;
-      const formData = { from_name, from_email, message: message };
+      const formData = {
+        from_name: data.name,
+        from_email: data.email,
+        message: data.message,
+        'g-recaptcha-response': recaptchaToken,
+      };
+
       const res = await email.send(serviceId, templateId, formData);
+
       handleResponse(res.status);
-    } catch (error) {
+    } catch (error: any) {
+      if (error?.status) {
+        handleResponse(error?.status);
+      }
       console.error(error);
     }
 
@@ -155,7 +170,20 @@ const FormSection: React.FC = () => {
             </label>
           </div>
 
-          <Button type="submit" aria-label="Send message" disabled={loading}>
+          <div className="flex items-center justify-center">
+            {!!process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY && (
+              <ReCAPTCHA
+                sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
+                onChange={handleRecaptchaChange}
+              />
+            )}
+          </div>
+
+          <Button
+            type="submit"
+            aria-label="Send message"
+            disabled={loading || !recaptchaToken}
+          >
             <Loader
               className={cn('mr-2 h-4 w-4 animate-spin hidden', {
                 block: loading,