diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx index e8c7705..050f12c 100644 --- a/src/Components/Footer.jsx +++ b/src/Components/Footer.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useRef, useState } from "react"; import styled from "styled-components"; import logoPic from "/src/images/logo.png"; @@ -106,15 +106,47 @@ const FooterBottom = styled.div` `; const Footer = () => { + const subscriptionFormRef = useRef(null); + const [subscriptionStatus, setSubscriptionStatus] = useState(""); + + const handleSubscription = (event) => { + event.preventDefault(); + setSubscriptionStatus(""); + + const formData = new FormData(subscriptionFormRef.current); + + fetch("https://formspree.io/f/xovqarqp", { + method: "POST", + body: formData, + headers: { + Accept: "application/json", + }, + }) + .then((response) => { + if (response.ok) { + setSubscriptionStatus("SUCCESS"); + subscriptionFormRef.current.reset(); + return; + } + + setSubscriptionStatus("ERROR"); + }) + .catch(() => setSubscriptionStatus("ERROR")); + }; + return ( {/* Subscription Section */}

Stay Updated!

- - - + + + + {subscriptionStatus === "SUCCESS" &&

Thanks for subscribing!

} + {subscriptionStatus === "ERROR" && ( +

Subscription failed. Please try again.

+ )}
{/* About Section */}