diff --git a/client/src/main.tsx b/client/src/main.tsx index 718c1e1..8b3f3cb 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -7,6 +7,7 @@ import ProjectTeam from "./pages/Project-Team"; import Alanna from "./pages/project-team/Alanna"; import "./index.css"; import Pruna from "./pages/project-team/Pruna"; +import Contact from "./pages/Contact"; {/* here's where we set up all our routing */} const router = createBrowserRouter([ @@ -18,6 +19,7 @@ const router = createBrowserRouter([ { path: "project-team", element: }, { path: "alanna", element: }, { path: "pruna", element: }, + { path: "contact", element: }, ], }, ]); diff --git a/client/src/pages/Contact.tsx b/client/src/pages/Contact.tsx new file mode 100644 index 0000000..73d9af0 --- /dev/null +++ b/client/src/pages/Contact.tsx @@ -0,0 +1,91 @@ +import { useState } from "react"; +import { FaInstagram, FaFacebook, FaEnvelope } from "react-icons/fa"; + +export default function Contact() { + const [formData, setFormData] = useState({ name: "", email: "", message: "" }); + const [ status, setStatus ] = useState(""); + + const handleSubmit = async () => { + setStatus("Sending"); + const res = await fetch("https://formspree.io/f/xvzlqwkg", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(formData) + }); + if (res.ok) { + setStatus("Message sent!"); + setFormData({ name: "", email: "", message: "" }); + } else { + setStatus("Error sending message."); + } + }; + return ( + <> +
+

Contact us

+

+ Have questions or want to get in touch? We'd love to hear from you! +

+

+ Fill out the form below or reach out to us on social media.

We look forward to connecting with you! (。˃ ᵕ ˂ )⸝♡ +

+
+ +
+ setFormData({ ...formData, name: e.target.value })} + className="bg-transparent border-2 border-blue rounded-2xl px-6 py-4 text-white placeholder-gray-400 outline-none focus:border-blue-300 transition" + /> + setFormData({ ...formData, email: e.target.value })} + className="bg-transparent border-2 border-blue rounded-2xl px-6 py-4 text-white placeholder-gray-400 outline-none focus:border-blue-300 transition" + /> +