Update ContactPage.js

website3.0/pages/ContactPage.js

@@ -1,19 +1,27 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "@stylesheets/contact.css";
 
 function ContactPage() {
   // State variables to manage form state and UI messages
   const [selectedRating, setSelectedRating] = useState(0); 
   const [showError, setShowError] = useState(false); 
   const [showThankYouMessage, setShowThankYouMessage] = useState(false); 
+  // to add body bg color 
+  useEffect(() => {
+    document.body.style.background = "linear-gradient(to bottom,#f5d471 2%,#eb9a60 45%,#e99960 65%,#e89357 85%)  ";
+    console.log("Background color set to orange");
 
+    // Clean-up function to reset background color when component unmounts
+    return () => {
+      document.body.style.backgroundColor = "";
+    };
+  }, []);
   // Function to handle click on star rating
   const handleStarClick = (value) => {
     // Update selectedRating state with the clicked star value
     setSelectedRating(value); 
   };
-
   // Function to handle form submission
   const handleSubmit = (event) => {
     // Prevent default form submission behavior
@@ -42,8 +50,8 @@ function ContactPage() {
   };
 
   return (
-    <div>
-      <div className="container">
+    <div >
+      <div className="container" >
         <img src="/rateus.png" className="contact-img" alt="rateus" />
         <div className="form-container">
           <h1>Contact Us</h1>
@@ -99,7 +107,8 @@ function ContactPage() {
             <button type="submit" id="button">
               Submit
             </button>
-             {/* Thank you message after successful submission */}
+
+          {/* Thank you message after successful submission */}
              {showThankYouMessage && (
               <p
                 id="thank-you-message"