introduce contact form

Author: devsdenepal

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.3.0"

package.json

@@ -1,7 +1,100 @@
-function Contact(){
+import React, { useState } from "react";
+import emailjs from "@emailjs/browser";
+import "../styles/Contact.css";
+
+function Contact() {
+    const [formData, setFormData] = useState({ name: "", email: "", message: "" });
+    const [isSent, setIsSent] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const sendEmail = (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+
+        const templateParams = {
+            from_name: formData.name,
+            from_email: formData.email,
+            to_name: "Kodet Admin",
+            message: formData.message,
+        };
+
+        emailjs
+            .send(
+                "service_new", // Replace with your actual service ID
+                "template_b0a3rji", // Replace with your actual template ID
+                templateParams,
+                "aWHCjDK-7vGvGOKcC" // Replace with your actual public key
+            )
+            .then(
+                () => {
+                    setIsSent(true);
+                    setIsLoading(false);
+                    setFormData({ name: "", email: "", message: "" });
+                },
+                (error) => {
+                    console.error("Email sending failed:", error);
+                    setIsLoading(false);
+                }
+            );
+    };
+
     return (
         <>
+            <div className="about-container">
+                <div className="about-title">
+                    <h1 className="text-center">Get in touch!</h1>
+                </div>
+            </div>
+            <div className="contact">
+                <form onSubmit={sendEmail}>
+                    <h2>Contact Form</h2>
+                    <div className="input-box">
+                        <label htmlFor="name">Full Name</label>
+                        <input 
+                            type="text" 
+                            name="name" 
+                            className="field" 
+                            placeholder="Enter your name" 
+                            required 
+                            value={formData.name}
+                            onChange={handleChange} 
+                        />
+                    </div>
+                    <div className="input-box">
+                        <label htmlFor="email">Email Address</label>
+                        <input 
+                            type="email" 
+                            name="email" 
+                            className="field" 
+                            placeholder="Enter your email" 
+                            required 
+                            value={formData.email}
+                            onChange={handleChange} 
+                        />
+                    </div>
+                    <div className="input-box">
+                        <label htmlFor="message">Your Message</label>
+                        <textarea 
+                            name="message" 
+                            className="field mess" 
+                            placeholder="Enter your message" 
+                            required 
+                            value={formData.message}
+                            onChange={handleChange} 
+                        ></textarea>
+                    </div>
+                    <button type="submit" disabled={isLoading}>
+                        {isLoading ? "Sending..." : "Send Message"}
+                    </button>
+                    {isSent && <p className="success-message">Message sent successfully!</p>}
+                </form>
+            </div>
         </>
-    )
+    );
 }
-export default Contact;
+
+export default Contact;

src/pages/Contact.jsx

@@ -21,6 +21,7 @@
     text-align: center;
     /* border-radius: 40px; */
     padding-bottom: 15px;
+    padding: 10px;
     height: 100%;
 }
 

src/styles/Card.css

@@ -0,0 +1,40 @@
+.contact{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+.contact form {
+    border: 1px dashed #000;
+    max-width: 600px;
+    width: 100%;
+    background-color: #fff;
+    padding: 25px 25px 30px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba (0,0,0,.1);
+    color: #333;
+    margin: 25px;
+}
+.contact form h2{
+    font-size: 30px;
+    text-align: center;
+}
+.contact form .input-box{
+    margin-top: 20px;
+}
+.field{
+width: 100%;    
+height: 50px;
+background-color: transparent;
+border: 2px solid #ddd;
+outline: none;
+border-radius: 6px;
+padding: 15px;
+font-size: 16px;
+color: #333;
+margin-top: 8px;
+}
+.mess{
+    height: 200px;
+    resize: none;
+}

src/styles/Contact.css

@@ -8,7 +8,9 @@ function Card({ img,title, label, text, remark, button_text }) {
         <img src={img || "https://avatars.githubusercontent.com/u/111997815?v=4"} alt="Card Image"  />
         <div className="container">
           <h2>{title}</h2>
+          <br/>
           <p className="title">{label}</p>
+          <br/>
           <p>{text}</p>
           <br/>
           {/* <p>{remark}</p> */}