Updates to contact info

Author: gitJamoo

next-js-app/src/app/components/contact/ContactButton.tsx

@@ -10,7 +10,7 @@ export default function ContactButton() {
   return (
     <>
       <button
-        className="fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg"
+        className="fixed bottom-4 right-4 bg-white hover:bg-gray-100 text-gray-800 font-bold py-2 px-4 rounded-full shadow-lg border border-gray-300"
         onClick={() => setShowForm(true)}
       >
         Contact Me

next-js-app/src/app/components/contact/ContactFormEmbedded.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function ContactFormEmbedded() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError('');
+    setSuccess(false);
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name, email, message }),
+      });
+
+      if (response.ok) {
+        setSuccess(true);
+        setName('');
+        setEmail('');
+        setMessage('');
+      } else {
+        const data = await response.json();
+        setError(data.message || 'Something went wrong.');
+      }
+    } catch (error) {
+      setError('Something went wrong.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg p-8 w-full max-w-md mx-auto">
+      <h2 className="text-2xl font-bold mb-4 text-center">Contact Me</h2>
+      {success ? (
+        <div className="text-green-500">Your message has been sent successfully!</div>
+      ) : (
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              required
+            />
+          </div>
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-ray-300">
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              required
+            />
+          </div>
+          <div className="mb-4">
+            <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Message
+            </label>
+            <textarea
+              id="message"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              rows={4}
+              className="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              required
+            ></textarea>
+          </div>
+          {error && <div className="text-red-500 mb-4">{error}</div>}
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              className="bg-white hover:bg-gray-100 text-gray-800 font-bold py-2 px-4 rounded border border-gray-300"
+              disabled={submitting}
+            >
+              {submitting ? 'Submitting...' : 'Submit'}
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}

next-js-app/src/app/home/page.tsx

@@ -3,6 +3,8 @@
 import { useState } from "react";
 import Image, { StaticImageData } from "next/image";
 
+import ContactFormEmbedded from "../components/contact/ContactFormEmbedded";
+
 import headshot from "../../../public/image-assets/beaver-headshot.jpg";
 
 import esteeLauderLogo from "../../../public/image-assets/estee_lauder_companies_logo.png";
@@ -279,7 +281,7 @@ function ExperienceCard({ experience }: { experience: Experience }) {
           </p>
           <p className="text-sm text-gray-500">{experience.period}</p>
         </div>
-        <div className="w-16 h-16 bg-white rounded-lg flex items-center justify-center">
+        <div className="w-16 h-16 bg-.white rounded-lg flex items-center justify-center">
           {experience.logo ? (
             <Image
               src={experience.logo}
@@ -419,6 +421,10 @@ export default function HomePage() {
             ))}
           </div>
         </section>
+
+        <section id="contact" className="text-center mt-16">
+          <ContactFormEmbedded />
+        </section>
       </div>
     </div>
   );