email js contact component

Author: Pranesh Ragu

package-lock.json

@@ -10,14 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
+    "emailjs-com": "^3.2.0",
     "framer-motion": "^11.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.0.1",
     "react-intersection-observer": "^9.5.3",
     "react-scroll": "^1.9.0",
-    "react-type-animation": "^3.2.0",
-    "emailjs-com": "^3.2.0"
+    "react-type-animation": "^3.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
@@ -34,4 +35,4 @@
     "tailwindcss": "^3.4.0",
     "vite": "^5.4.2"
   }
-}
+}

package.json

@@ -3,6 +3,12 @@ import SectionHeading from '../ui/SectionHeading'
 import Button from '../ui/Button'
 import { motion } from 'framer-motion'
 import { FaPaperPlane, FaMapMarkerAlt, FaEnvelope, FaPhone } from 'react-icons/fa'
+import emailjs from '@emailjs/browser'
+
+const SERVICE_ID = 'service_v1dg2s8'
+const TEMPLATE_ID = 'template_wtxb83p'
+const PUBLIC_KEY = 'GmGI_huq_ZkOqwsT5'
+
 
 const Contact = () => {
   const [formData, setFormData] = useState({
@@ -33,10 +39,17 @@ const Contact = () => {
       info: { error: false, msg: null }
     })
 
+    const templateParams = {
+      from_name: formData.name,
+      from_email: formData.email,
+      subject: formData.subject,
+      message: formData.message
+    }
+
     try {
       // In a real app, we would send this data to a server or service like EmailJS
       // For demo purposes, we'll just simulate a successful submission
-      await new Promise(resolve => setTimeout(resolve, 1500))
+      await emailjs.send(SERVICE_ID, TEMPLATE_ID, templateParams, PUBLIC_KEY)
 
       setStatus({
         submitted: true,